HTML이란 Hyper Text Markup Language의 약자로, 우리가 늘 접하는 전용 브라우저(Internet Exploer, Netscape 등)에 그림이나 텍스트를 표현할 수 있도록 해주는 혼성 국제어(lingua franca)를 말합니다. HTML은 SGML(Standard Generalized Markup Language - Markup Language의 사용에 대한 표준안)을 사용하여 쓰여진 언어인데요. 스위스 제네바에 있는 유럽입자물리연구소(CERN)의 Tim Berners-Lee에 의하여 제창되었다고 하는군요. 그러면, 이 HTML을 공부하기에 앞서 이곳에 자주 등장하는 용어에 대해서 간단히 공부해볼까요?
| |||
| WWW (World Wide Web) |
어떤 사람이 공부를 하다가 더 알고 싶은 내용이 나오면, 다른 책을 뒤져 보기도 합니다. 이렇게 열심히 공부하거나 연구 활동하는 사람의 책상을 보면, 수많은 책이 여기저기 펼쳐져 있는 것을 볼 수 있습니다. 필경 책의 펼쳐진 부분들은 서로 연관관계가 있을 것입니다. 이렇게 연결된 정보를 하이퍼링크(hyperlink)라하고, 하이퍼링크로 전세계는 수많은 정보들로 아주 복잡하게 연결되어 있습니다. 이 하이퍼링크로 연결된 전 세계적으로 퍼져있는 거미줄, 이것을 WWW 즉, 월드 와이드 웹(World Wide Web)이라고 말합니다 이것의 시초는 다음과 같습니다. 1980년 Tim Berners-Lee는 어느 특정 페이지 내에서 다른 페이지로 연결이 될 수 있는 초기 프로그램을 개발하였는데, 10년 후 텍스트만 사용하는 하이퍼텍스트의 영역으로 발전이 이루어졌고, WWW도 탄생하게 되었습니다. 이 World Wide Web이라는 이름은 1990년 Berners-Lee가 붙인 이름입니다. 사실 초보자들은 WWW가 인터넷의 전부인 것처럼 여기고 있는데, 사실 이 WWW은 전 세계에서 제공되는 인터넷 서비스 중 하나에 불과합니다. 그러나 사용하기 편하고, 윈도우즈 운영체제에서 그림, 동영상 등의 멀티미디어를 지원하므로 다른 인터넷 서비스에 비하여 급속하게 널리 퍼지게 된 것이죠. 요즘은 Web이 곧 인터넷이라고 생각해도 과언이 아닐정도입니다. (※ 참고 History of the World Wide Web) |
|
|---|---|---|
| Hyper Text | HyperText란 간단한 예로 우리들이 자주 사용하는 윈도우나 각종 프로그램들에 포함되어 있는 help(도움말)기능의 형식과 유사합니다. 이 기능의 특징은 우리가 흔히 접하는 일반 문서의 텍스트와는 달리 클릭을 하게되면 세부 설명이 아래에 나오거나 화면이 바뀌면서 다른 페이지로 이동을하는 것입니다. 이처럼 일반 문서의 텍스트와는 달리 공간의 초월의미가 부여된 Hyper(하이퍼)라는 영어 단어를 사용하여 Hyper Text(하이퍼 텍스트)라고 합니다. Hyper Text를 자세히 살펴보면 일반 글자들과 색상이 다르거나, 마우스를 위에 올렸을때 밑줄이 생기는 현상이 보입니다. 이렇게 공간을 자유롭게 이동할 수 있는 글자들을 HTML에서는 연결(Link)되어 있다고 말합니다. ※ 하나 더~! 우리가 웹 문서에서 접하는 것 중에는 텍스트만 있는 것이 아니라 이미지도 있는데 왜 하필 Hyper Text라는 말을 사용했을까요?? 그 이유는요. HTML을 처음 만든 사람들은 입자 물리학의 문서를 공유하기 위해 표준안을 찾고 있던 과학자들이라고 하네요. 그들에게 필요한 것은 이미지가 아니라 텍스트라는 이유만으로 이미지 삽입 여부는 고려하지 않은 채 HTML을 만들었습니다. 그런 연유로 Hyper Text Markup Language가 되었다고 합니다. 실제로 Hypertext의 역사는 1945년 7월에 시작되었습니다. 2차대전 중 루즈벨트 대통령의 과학부문 자문을 맡은 Dr. Vannevar Bush가 한 잡지의 기사에서 Memex라는 개념을 제안 했는데요. 이 개념은 정보의 어떠한 위치에서건 또 다른 부분으로 무작위적(arbitrarily)으로 연결되는 방식으로 text와 graphic 정보를 저장할 수 있는 능력을 가진 기계라고 하는군요. |
|
| Markup | Markup을 간단하게 설명하면 사람이 특정 문서의 신호체계를 설정하면 컴퓨터가 그 신호체계에 따라 문서를 생성하는데, 여기서 그 신호체계를 설정하는 것을 Markup이라고 합니다. 예를 들면, 이 부분은 텍스트에 링크가 걸린 부분이고, 이 부분은 문장에서 줄바꿈을 할 곳이며, 이 부분은 문장의 단락을 나눌 부분이다. 라는 신호를 설정하는 것을 "Markup 한다"라고 말합니다.
|
|
| HTML 문서란? |
HTML문서는 HyperText Markup Language로 아스키(ASCII)형식의 TEXT 파일 형식으로 되어 있으며 UNIX 기계상의 Emacs나 Vi, 매킨토시의 BBEdit, 윈도우의 Notepad(메모장)등과 같은 텍스트 편집기를 사용하여 작성할 수 있습니다. 보통 확장자는 "html"과 "htm"을 공용해서 쓰지만 "html"로 쓰는 것이 좋습니다.
★ 파일의 확장자가 html과 htm인 이유는 무엇일까요? |
|
| 홈페이지 | WWW를 통하여 일단 어느 곳에 접속을 하면, 어떤 내용이 전송되어 옵니다.
WWW에서 하나의 페이지라고 하는 것은 이렇게 한번 접속으로 보내어져서 하나의 윈도우를 통하여 볼 수 있는 내용을 말하는데요. 보통 하나의 HTML 문서가 (그림 파일들을 포함해서) 하나의 페이지가 되는 것입니다.
이렇게 어떤 계정이 접속했을 때 그 계정 속에 보여지는 페이지들의 집합을 보통 홈페이지라 부릅니다. 이 홈페이지가 바로 HTML로 작성된 문서인데요. 사용자가 자신의 정보를 다른 사람에게 알려주는 방법으로 표현한 기록을 "Web Page"라 하고 "Web Page"의 초기화면을 "Home Page"라 하지만 모든 웹문서(Web Page)를 Homepage라 통용해 부르고도 있습니다. 글, 그림, 동화상 등을 이용하여 자신의 홈페이지를 작성할 수 있으며, 이제는 단순한 html문서에서 탈피하여 애니매이션(Flash), 3D등이 지원되는 "자바" 등 여러가지 고급언어들이 등장하여 더욱 화려하고 다이나믹한 웹문서가 표현되고 있으며 앞으로도 계속 발전해 나갈 것입니다. |
|
| Tag |
Tag란 HTML문서의 모양과 행동양식을 정해주는 언어의 요소, 기술자(記述子)로서, HTML 문서를 읽는 브라우저에게 화면에 나타나는 방식을 설명해 주게 됩니다. Tag는 보통 < >로 둘러 쌓여 다른 문장들과 구별되어 보입니다. 이 용어는 컴퓨터가 생기기 전의 시대에 필자나 편집자가 문서요소들에 편집용 부호나 속기용 부호 등을 적어 넣던 것으로부터 생겨났습니다. 보통 HTML Tag는 시작태그와 마감태그로 짝을 이루어 사용되고, 이 둘 사이에 문장이 들어가게 됩니다.
처음에 < >로 둘러 쌓여 나오는 Tag는 "시작태그(start Tag)" 이라 부르고 나중에 (/ )로 둘러 쌓여 나오는 Tag를 "마지막 태그(End Tag)" 이라 부릅니다. 물론 시작 태그로만 이루어진것도 있습니다. 다음은 HTML 문서에서 사용되는 3가지 태그의 형식입니다. | |
| Browser | 브라우저는 WWW에서 모든 정보를 볼 수 있도록 해 주는 응용 프로그램입니다. 브라우저라는 말은 (웹이 생기기 전부터 이미) 온라인 상에서 텍스트 파일들을 읽기 위한 사용자 인터페이스를 총칭하는 말에서 비롯되었는데요. 그래픽 사용자 인터페이스(GUI)를 지원하는 웹브라우저가 처음 개발되었을 때(1992년에 개발된 모자이크가 효시)만해도, 이 용어는 웹에서 제공되는 콘텐츠까지 함께 지칭하는 말로 사용되기도 하였습니다. 기술적인 측면에서 보면, 웹브라우저는 인터넷 웹 서버에 자료를 요청하기 위해 HTTP를 사용하는 클라이언트 프로그램입니다. 최초의 상용 브라우저는 모자이크인데, 모자이크 내에 있던 사용자 인터페이스 기능들은 가장 널리 사용된 첫 번째 브라우저라고 할 수 있는 Netscape Navigator에 많은 영향을 끼쳤으며, Microsoft의 Internet Explorer가 그 뒤를 이었습니다. Lynx는 유닉스나 VMS 사용자들을 위한 텍스트 기반의 웹브라우저입니다. |
| HTML은 ①의 문서에서 특정부분을 클릭하여 ②,③,③,④,⑤,⑥ 중 원하는 페이지로 한 번에 이동 가능합니다.(또한 원하는 페이지의 원하는 위치로 이동하는 것도 가능합니다.) |
|
|||||||||
↓
|
↓
|
↓
|
↓
|
↓
|
|||||