HTML 4.0의 기본 구성
◀ ■ ▶
메모장이나 워드프로세서 혹은 HTML Editor를 준비해 아래와 같이 입력하고, index.html로 저장한다. 그리고, 웹 브라우저에서 열어보자. 계속해서 문서를 수정해서 같은 이름으로 저장하고, 브라우저에서 Reload나 Refresh, 새로 고침 등의 메뉴를 선택하면 변한 모습을 볼 수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>나의 첫 웹 문서</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=EUC-KR">
</HEAD>
<BODY>
여러분 안녕!
<BODY>
</HTML>
첫 줄은 이 문서가 HTML 4.0 버젼을 기준으로 만들어졌음을 뜻하는 것으로, 의례적으로 넣도록 한다.
모든 내용은 <HTML>과 </HTML> 사이에 들어가게 된다. <HTML>이나 </HTML>과 같은 것을 태그(Tag)라고 하는데, 일반적으로 쌍으로 이루어져 있다. 끝내는 태그에는 /를 붙인다. 한 쌍의 태그(끝내는 태그가 없을 경우 하나)를 Element라고 한다. HTML은 태그들의 모음이라고 생각하면 된다.
다섯번째 줄은 이 문서가 한글로 작성된 문서라는 것을 브라우저에게 알려준다. HTML 에디터(예를 들어, FrontPage) 중에는 charset의 값을 자동으로 ISO-8859로 넣는 것이 있는데, 반드시 EUC-KR로 바꿔 주어야 한다. 그렇지 않을 경우, 특정 브라우저에서 한글이 깨질 수도 있다.
주의사항
어떤 element는 옵션들을 가지고 있는 것이 있는데 이를 속성(attribute)이라고 한다. 속성은 시작하는 태그 안에 한 칸을 비우고 써 준다. 위의 예에서 META는 element 혹은 태그이고, http-equiv나 content는 속성이 된다. 속성 다음에 값을 쓸 때는 = 뒤에 써 준다. 예와 같이 두 개 이상의 속성을 함께 쓸 수도 있다. HTML의 속성은 element마다 정해진 것이 있으므로, 각각의 설명을 참고한다. 속성의 값을 쓸 때는 상황에 따라 포함할 수 있는 문자가 제한되어 있다. 그러나, 일반적으로 첫 자는 영문자로 시작하고, 그 뒤에는 숫자와 영문자, -, _를 섞어 쓰면, 어느 속성 값이건 문제없이 쓸 수 있다. 앞으로 속성의 값을 "문자열"이라고 표기하면, 이 규칙에 맞춰 쓰기로 한다. 속성 값이 두 단어 이상이 되면 " " 안에 쓴다.
HTML에서 대소문자는 구분하지 않는다. 다만, 여기에서는 알아보기 쉽도록 하기 위해 element 이름은 대문자로, 속성 이름은 소문자로 표기하였다.
HTML에서는 2칸 이상의 공백은 의미가 없다. 즉, 2칸 이상은 모두 1칸과 같다. 따라서, 위의 예를 1줄에 모두 붙여 써도 브라우저 화면에는 똑같이 나온다. 수정할 때 찾아 보기 쉽도록 적당히 공백을 주어 만들면 된다.
HTML 코드에 주석을 붙일 때는 <!--와 --> 사이에 써 준다. 주석 안에 들어있는 내용은 화면에 나타나지 않는다. 긴 문서를 만들 때는 나중에 수정할 때 찾아보기 쉽게 하기 위해 주석을 붙이는 것이 좋다.
마지막 잔소리! 하나의 element 안에 다른 element가 포함될 때가 있다. 위의 예에서는 HEAD와 BODY가 HTML 안에 포함되었다. 이 때, 시작하는 태그와 끝내는 태그가 모두 포함되어야 한다. <HTML> <HEAD> </HEAD> </HTML>이 되어야지, <HTML> <HEAD> </HTML> </HEAD>가 되어서는 안된다는 뜻이다.
◀ ■ ▶