HTML 소개

1. HTML-문서

아마도 이미 알고 있을 텐데, 모든 인터넷 사이트는 웹 페이지로 구성되어 있어. 이 페이지들은 HTML-페이지라고도 불려. 그럼 이게 대체 뭔지 알아보자.

HTML-문서란 텍스트와 태그로 구성된 텍스트 파일이야. 태그는 20세기 70년대에 사람들이 문서를 처리하는 프로그램에 문서에 대한 메타 정보를 추가할 수 있도록 고안된 거야.

태그는 주로 영어로 된 (메타 정보) 키워드로, 꺾쇠 괄호(‘더 크다’ 및 ‘더 작다’ 기호)로 둘러싸여 있어서, 프로그램이 태그와 일반 단어를 혼동하지 않도록 해.

예제:

<img>

태그는 또한 문서를 처리하는 프로그램에 유용한 다양한 메타 정보를 포함할 수 있어.

2. HTML-문서 예제

태그를 처리하는 가장 인기 있는 프로그램은 바로 브라우저야. 브라우저가 너한테 보여주는 모든 것은 HTML-문서에 추가된 태그를 처리한 결과물이야.

예를 들어 브라우저가 너한테 이런 페이지를 보여준다고 해봐:

마눌 마눌 — 고양이과에 속하는 육식 포유동물이야. 외모와 크기 면에서 집 고양이와 비슷하지만, 더 짧고 두꺼운 몸통과 다리, 둥근 동공, 낮은 귀, 그리고 길고 두꺼운 털로 구별돼.

이 페이지의 HTML-문서는 아래와 같이 보일 거야:

      
<h1>마눌</h1>
<p> 마눌 — 고양이과에 속하는 육식 포유동물이야. 외모와 크기 면에서
<a href="#">집 고양이</a>와 비슷하지만, 더 짧고 두꺼운 몸통과 다리, 
둥근 동공, 낮은 귀, 그리고 길고 두꺼운 털로 구별돼. </p>
<img src="manul.jpg">
      
    

이 예제에서는 텍스트와 태그(h1, p, a, img)를 볼 수 있어. 브라우저는 태그를 인식하고, 태그 안의 텍스트를 제목, 링크로 변환했으며, 텍스트 아래에 이미지를 추가했어. 진짜 마법 같지?