Introductory
페이지 목차
1. 월드와이드웹(World Wide Web)
WWW, W3 또는 줄여서 그냥 웹(Web)이라고 부르며, 인터넷의 가장 대표적인 서비스 입니다. 웹브라우저(Web Browser)라는 검색프로그램을 통해 문자, 그림, 사운드, 동화상 등 멀티미디어 데이터를 보고 읽고 들을 수 있습니다. 웹은 연결된 문서들의 시리즈로 되어 있는데, 이렇게 하이퍼링크(hyperlink)되어 강조된 단어나 그림을 마우스로 클릭하면 그에 대한 정보로 이동하기 때문에 초보자라도 쉽게 정보를 찾아낼 수 있죠.
2. WWW의 구성요소
- 웹브라우저(Web Browser)
- 클라이언트와 서버(Client-Server)
- 하이퍼텍스트(Hypertext)
- HTML(Hypertext Markup Language)
- HTTP(Hypertext Transfer Protocol)
- url(Uniform Resource Locator)
- urn(Uniform Resource Name)
- uri(Uniform Resource Identifiers)
3. Browser interface 와 각 부분의 명칭
|
Browser interface 와 각 부분의 명칭
|
| 제목 표시줄 |
title bar : 문서의 제목을 표시하는 곳. |
| 메인 메뉴 |
main menu : 브라우저에서 사용하는 명령들이 있는 곳. |
| 표준 툴바 |
standard toolbar : 탐색할 때 자주 쓰는 도구를 모아 놓은 곳. |
| 주소 표시줄 |
directories : 주소(url 이나 uri)를 입력하는 곳. |
| 브라우저 창 |
browser window : 문서의 내용이 출력되는 부분 |
| 상태 표시줄 |
status bar : 현재 상태를 표시하는 곳. |
4. HTML 문서의 기본 구조
<HTML>
<HEAD>
<TITLE>브라우저 제목표시줄에 들어갈 글씨</TITLE>
</HEAD>
<BODY>
브라우저 창에 나타날 내용이 들어가는 곳
</BODY>
</HTML>
HTML 문서는 위와 같은 기본 구조를 가지고 있습니다.
위의 구조를 잘 살펴보면 제일 먼저 <HTML>로 시작해서 끝 부분이 </HTML>로 끝나고 <HTML>과 </HTML> 사이에 <HEAD></HEAD> 와 <BODY></BODY>가 들어가 있으며, <HEAD></HEAD> 사이에는 <TITLE></TITLE> 이 있다는 것을 알 수 있습니다.
이와 같은 구조를 계층적 구조라고 하죠. 아래의 문서구조를 보시죠.
앞의 문서 중에서 문서보는 요령의 Tag의 계층적 구조 보기 부분에서 설명한 것 처럼 같은 요령으로 확장과 축소를 하면서 전체적인 구조와 계층(어떤 Tag이 상위레벨이고 어떤 Tag이 하위 레벨인지에 대한 것)에 대해 감을 잡아 보시져...
5. HTML 문서의 특징
| 시작Tag(Start Tag)과 마침 Tag(End Tag)의 짝으로 이루어져 있다. |
반드시 그런 것은 아니지만 거의 대부분의 Tag이 <HTML element></HTML element>과 같이 시작하는 Tag과 마침 Tag으로 이루어져 있습니다. 시작하는 Tag은 < >와 같은 부등호 괄호로 둘러싸고, 마침 Tag은 </ > 와 같이 시작 HTML element 앞에 에 '/' (slash)를 붙여 표현합니다.
|
| space(공백)의 처리 |
| Tag (<>)안에서 |
HTML 문서에서는 이때 주의할 점이 있죠. '<' 과 HTML element 사이에 space(공백)이 들어가면 안됩니다. 그러면 에러가 나게 되져... 즉, < BODY 와 같이 '<'와 'BODY' 사이에 공백을 넣으면 안된다는 거죠. |
| 시작 Tag (<>)과 마침 Tag (</>) 사이에서 |
즉, '<>'하고 '</>'사이에 들어가는 내용을 말하는데 space를 1개 밖에 인정하지 않습니다. 예를 들면 에디터에서 편집할 때 '어서 오세요' 와 '어서 오세요' 는 브라우저로 보면 둘다 '어서 오세요' 로 보입니다. 즉 space를 아무리 많이 주어도 1개 밖에 인정이 안됩니다.
|
|
| 대소문자의 구분이 없다. |
HTML Tag을 표현할 때는 대문자(uppercase)와 소문자(lowercase)를 구분하지 않습니다. 대소문자를 일일히 구분한다면 문서 만들기 정말 힘들겠져... 무쟈게 힘들겁니다. 그렇지만 다행히 구분하지 않습니다. 예를 들어서...
- <Body></bODY>
- <BoDy></body>
- <body></boDY>
- <BodY></bODy>
위의 4개 모두 사용 가능합니다. 하지만 결코 좋은 습관이라고 할 수 없습니다. 뒤에 나올 JavaScript 변수나 xml Element의 경우, 대 소문자를 확실하게 구분합니다. 그러므로 만약 여러분들이 초보자라면 처음 부터 좋은 coding 습관을 들여야 합니다. 헛갈리지 않고 coding하는 방법...
HTML element 들을 배우면서 설명하져...
|
| filename(name.ext) |
name이란 그 파일이 가지는 고유의 이름을 말하며, ext(Extension)는 그 파일의 종류 및 성격을 나타내는 확장자를 말합니다. 즉 name과 ext가 점(.)으로 구분되어 합쳐지면 filename이 됩니다. 예를 들면 HTML 문서 같은 경우 확장자가 name.htm 이나 name.html 이 됩니다. htm 이나 html이 확장자가 되는거죠. 또 아래아 한글은 .hwp, MS Word는 .doc, 텍스트 파일인 윈도우 메모장 파일은 .txt 등의 확장자가 붙는 것과 비교해 보시면 좋겠군요.
- name을 붙이는 원칙
filename에서 name을 만들 때 문자 a~z, 숫자 0~9, 기호 _(underbar), -(minus)를 사용하며, 문자나 숫자가 앞에 와야 되고, 영문자 255자까지 가능(Unix나 Windows 98 이후 버전에서), 기호로 끝나면 안되는 것을 원칙으로 한다고 알면 되겠습니다. 일부 OS(Operating System)에 따라 예외적인 경우가 없는 건 아니지만 위의 원칙대로 하면 어떤 OS에서든 안전합니다.
- ext(확장자) 붙이는 원칙
원래 DOS 에서는 name 8자, ext 3자로 제한이 있었습니다만, Unix나 Windows 98 이후 버전에서는 확장자를 3글자 이상 허용합니다. 그래서 요즘 무료 홈페이지 계정을 제공하는 사이트에서 대문 페이지의 filename을 'index.htm'이 아닌 확장자가 4Byte인 'index.html' 로 주는거죠.
|
| 문서안에 다른 문서를 포함시키지 못한다. |
아마 대부분 아래아 한글이나 Ms 워드같은 프로그램을 이용해서 문서를 꾸며본 적이 있으리라 생각하는데요 그 때 엑셀에서 불러온 챠트, 이미지, 아니면 직접그린 그림을 넣을 수 있다는 사실... 그래서 그 내용을 남한테 주려면 그 파일 하나만 달랑 주면 끝나는거 아시져?... 왜냐하면 그 파일안에 그런 이미지들이 모두 담겨있기 때문에 그런거죠. 그런데 HTML 파일은 그런 식으로 이미지나 다른 파일을 직접 집어 넣을 수가 없다는 거예요. 직접 넣을 수 있는건 글자 뿐입니다.
그럼 어떻게 하느냐?... 연결(link)을 시키는 거져. 즉, 어떤 이미지 파일이 어느 곳에 있다는 정보만 입력할 뿐입니다. HTML 문서는 다른 문서를 포함시키지 못한다 다만 연결시킬 뿐이다 라고 알아 두시면 되겠습니다. 이 연결이라는 것... 바로 인터넷의 공유정신이기도 합니다. 어떤 데이터가 어디에 있는지, 위치만 알면 얼마든지 연결해서 사용할 수 있으니까요...
|
이 문서의 저작권은 www.cadvance.org 에 있습니다.
|