반응형
HTML이란?
* 본 강좌는 HTML을 처음 접하는 사용자들의 눈높이에 맞춰 작성되었습니다.
인터넷에는 약 100억 개가 넘는 웹 페이지가 존재하며 이들 페이지들은 각자 다른 정보들을 담고 있습니다. 하지만 이들 웹 페이지들을 우리들은 인터넷 익스플로러와 같은 '웹 브라우저'를 통해서 바로 볼 수 있습니다. 일반 MS 워드 파일과 아래아 한글 파일은 서로 호환이 되지 않아서 불편한데 어떻게 100억 개가 넘는 페이지들이 서로 호환되며 잘 보일까요? 그건 HTML이라는 통합된 규칙에 의해 작성된 프로그래밍 언어를 통해서 가능하게 됩니다.
HTML은 Hyper Text Markup Language의 약자로써 일반적으로 대부분의 사이트들의 웹 페이지들은 맨 끝에 .html 혹은 .htm이라는 확장자가 붙어 있습니다. 이건 이 페이지가 HTML이라는 프로그래밍 언어 형식으로 제작되었다는 것을 알려줍니다. 프로그래밍 언어라고는 하지만 실제로는 매우 쉬워서 '이것도 프로그래밍 언어야?'라고 반문을 할 정도입니다. 사실 알고 보면 아무것도 아니라는 것이죠. ^^
아무리 내용이 틀리고 디자인이 다르더라도 모두 HTML의 형식에 맞춰서 만들어진 웹 페이지들은 인터넷 익스플로러를 비롯한 다양한 브라우저(넷스케이프, 모질라, 오페라 등)에서 같은 형태로 표시됩니다. 즉, 한번만 제대로 만들면 누구든지 다 볼 수 있게 되는 것이죠.
이제 각 HTML의 구성들을 살펴보면서 자세히 알아보도록 하겠습니다.
HTML 설명 1
이제 간단한 HTML 페이지를 보면서 설명을 드리겠습니다.
아래와 같이 입력한 후
<HTML>
<HEAD>
<TITLE>연습 웹페이지</TITLE>
</HEAD>
<BODY>
여기는 <A HREF="HTTP://WWW.LINKPRICE.COM">링크 프라이스</A>
연습 페이지 입니다.
방문해 주셔서<BR>감사합니다.
연습을 계속합니다.
</BODY>
</HTML>
<HEAD>
<TITLE>연습 웹페이지</TITLE>
</HEAD>
<BODY>
여기는 <A HREF="HTTP://WWW.LINKPRICE.COM">링크 프라이스</A>
연습 페이지 입니다.
방문해 주셔서<BR>감사합니다.
연습을 계속합니다.
</BODY>
</HTML>
위의 내용을 그대로 복사해서 메모장에 붙여 넣기를 하고, 이를 test.html이라는 파일로 저장하면 HTML 페이지가 간단하게 완성될 수 있습니다.
저장된 test.html 파일을 인터넷 익스플로러로 열어보면 아래와 같은 웹 페이지로 보이게 됩니다.
HTML 페이지의 내용은 이상한 영어들과 함께 복잡한 구성을 가지고 있지만 실제로 웹 브라우저에서 표시되는 건 정리된 링크가 걸린 페이지입니다. 서로 차이가 느껴지는 부분이 있다면 바로 그것이 일반적인 텍스트와 HTML을 구분 짓는 요소가 됩니다. 좀 더 자세한 내용을 살펴보겠습니다.
- <> 기호로 에워 싼다.
HTML에는
<> 기호를 양 옆에 두고 존재하는 태그(Tag)가 있습니다. HTML의 기본을 이루게 됩니다.
- 태그는 눈에 보이지 않는 내용을 나타낸다.
사실 <> 기호로 어느 단어를 둘러 싸게 되면 이 단어는 웹 브라우저로 출력될 땐 표시되지 않게 됩니다. 다시 말해서 문서의 구조, 링크, 형식 등을 표현하기 위해서 부가적인 요소로 작용할 뿐 실제적으로 눈에 보이는 내용이 아니라는 것입니다.
HTML에는 태그만 있는게 아니다!!!
HTML에는 보통 <> 기호로 싸여진 내용들을 태그라고 부르지만 정확한 내용을 알고 나면 태그와 그 외의 것들을 구분할 수 있습니다. 먼저 앞에 나왔던 HTML 예제를 보면서 설명하겠습니다.
<HTML> <- 요소(Element) - HTML 명령
<HEAD>
<TITLE>연습 웹페이지</TITLE>
</HEAD> <- 컨테이너(Container) - 태그를 담는 기능
<BODY>
여기는 <a href="http://www.linkprice.com">링크 프라이스</a> <- 태그(Tag)
연습 페이지 입니다.
방문해 주셔서<br>감사합니다.
연습을 계속합니다.
</BODY>
</HTML>
<HEAD>
<TITLE>연습 웹페이지</TITLE>
</HEAD> <- 컨테이너(Container) - 태그를 담는 기능
<BODY>
여기는 <a href="http://www.linkprice.com">링크 프라이스</a> <- 태그(Tag)
연습 페이지 입니다.
방문해 주셔서<br>감사합니다.
연습을 계속합니다.
</BODY>
</HTML>
- 요소(Element)
HTML에서 시작 태그와 종료 태그로 이뤄진 것들을 말합니다.
시작 태그는 <HTML>처럼 그냥 태그를 넣지만 종료 태그는 </HTML>과 같이 '/'표시를 넣어주게 됩니다.
- 컨테이너(Container)
요소와 비슷한 것이지만 컨테이너 안에 다른 태그들을 포함할 수 있습니다.
예제의 컨테이너를 살펴보면 <HEAD>라는 요소를 열고 그 내에 <TITLE>이라는 웹 페이지의 제목에 해당하는 내용을 나타내는 태그를 담고 있습니다. 이 타이틀 태그 역시 </TITLE> 태그로 닫아주고 또다시 컨테이너를 </HEAD>태그로 닫아주게 됩니다.
<HTML> HTML 시작을 알리고
<HEAD> 페이지 제목과 같은 정보를 넣는다.
<TITLE>링크프라이스 테스트</TITLE>
</HEAD> 컨테이너 닫고
<BODY> 페이지 내용에 대한 정보를 넣는다.
<font color=green>안녕하세요. </font><br>
<a href=http://www.linkprice.com>링크프라이스</a>
연습 페이지 입니다.
방문해 주셔서 감사합니다.
연습을 계속합니다.
</BODY> 컨테이너 닫고
</HTML> HTML 끝을 알린다.
<HEAD> 페이지 제목과 같은 정보를 넣는다.
<TITLE>링크프라이스 테스트</TITLE>
</HEAD> 컨테이너 닫고
<BODY> 페이지 내용에 대한 정보를 넣는다.
<font color=green>안녕하세요. </font><br>
<a href=http://www.linkprice.com>링크프라이스</a>
연습 페이지 입니다.
방문해 주셔서 감사합니다.
연습을 계속합니다.
</BODY> 컨테이너 닫고
</HTML> HTML 끝을 알린다.
보통 위의 형식으로 HTML 페이지들이 만들어지게 되며,
화면상에는 <BODY>와 </BODY>사이 내용들만 표시되게 됩니다.
하지만 이렇게 복잡하게 꼭 입력해야지만 HTML 웹 페이지가 만들어지는 것은 아닙니다.
좀 더 쉽게 간편하게 HTML 페이지를 만드는 프로그램에 대하여 알아보겠습니다.
'Education > Kindergarten' 카테고리의 다른 글
| 한글 배우기 (0) | 2010.05.23 |
|---|---|
| HTML iframe으로 웹 페이지에 다른 페이지 넣기 (0) | 2010.04.25 |
| 웹 컬러 코드 쉽게 알아내기 (0) | 2010.04.25 |
| HTML 테이블 사용하기 (0) | 2010.04.25 |
| HTML 배우기 (0) | 2010.04.25 |
| HTML 편집 프로그램의 종류 (0) | 2010.04.24 |