HTML (Hyper Text Markup Language)

HTML은 인터넷에서 문서를 작성하는 기본 규약 입니다.
문서들 끼리 서로 연결되기 때문에 (Hyper Text) 라는 용어가 쓰이고, 원하는 대로 문서의 논리 구조나 서식등을 필요한 부분에 지정해서 사용할 수 있기 때문에 (Markup Language) 라고 합니다.

어렵게 이야기 했지만 실은 간단합니다. 기존처럼 텍스트를 작성하다가 원하는 부분에 <>, </>를 표시해서 원하는 형태로 표현할 수 있습니다. 이것은 내가 원하는 형태를 지정할 수 있는 일종의 표시라고 보시면 됩니다. 그래서 Tag 라고 이야기합니다. 우리가 어떤 것들을 찾기 쉽게 또는 알기 쉽게 표현할 때 '태그'를 달아 두는 것과 같은 의미입니다. 이 표시 사이에 있는 글자들은 이 표시에 명시된 대로 표현됩니다.

아마도 북스토리를 접속하기 위해서 '인터넷 익스플로러'를 사용하시겠지요. 인터넷 익스플로러가 작성하신 텍스트를 하나하나 표시하다가 <>, </>를 만나면 이 <>, </>이 명령하는 대로 그려주게 됩니다. 즉 이 HTML 이라는 명령을 이해하고 실행해주는 것이지요. 예를 들어서 글자를 두껍게 표시하라는 명령어로는 strong 이 있습니다. <strong>와 </strong> 사이에 있는 글자들은 두껍게 표시됩니다. 즉 <strong>두껍다 </strong>을 내용에 입력하시면 다음과 같이 표시 됩니다 : 두껍다 <strong>, </strong>은 두껍게 하라는 명령이기 때문에 '두껍다' 가 두껍다로 변하면서 자신의 역할을 다하게 되는 것이죠.

그림을 표시하는 것은 마찬가지로 내가 그림을 넣고 싶은 곳에 <>, </>으로 그림을 넣으라고 지시하게 됩니다. 다만 북스토리의 편집기에서는 첨부파일을 한개만 삽입할 수 있기 때문에 보덕님이 운영하시는 Yes24나 Aladdin 의 블로그에 그림을 삽입하시고 그 그림의 위치를 지정하면 '인터넷 익스플로러'가 그 위치로 찾아가서 그림을 가져다가 보여줍니다. 그렇기 때문에 그림의 위치를 알아야 하는데요. 그림의 위치를 찾는 방법은 북스토리님이 이미 설명해 놓으셨습니다.

그림의 경우에는 '그려라' 라는 명령을 사용해야 겠죠. 그것은 그림이라는 뜻인 imgae의 준말인 'img'를 사용합니다. 다만 그림의 경우에는 그림이 있는 위치가 표시되어야 합니다. src="위치" 라고 표시합니다. 다만 그림의 경우에는 여기까지 그려라 하는 </img> 를 사용하지 않으셔도 됩니다. <img src="위치"> 이렇게 표시하시면 <img src="위치">는 그림으로 바뀌어서 나타나게 되는 것이죠.

예를 들어서 위의 북스토리 로고의 위치는 로고에 마우스를 갖다 대고 오른쪽 마우스키를 누르고 메뉴를 띄어서 속성을 보면 http://bookstory.kr/image/booklogo.gif 라고 나옵니다.
이것을 <img src=http://bookstory.kr/image/booklogo.gif> 라고 적어 놓으면 아래와 같이 그림으로 표시됩니다.



이렇듯이 인터넷에서는 그림이나 음악파일등이 위와 같은 위치로 표시됩니다. 이것을 인터넷 주소라고 하고 전문 용어로는 URL 이라고 합니다. URL은 (Uniform resource locator)의 준말로 uniform(표준화된) resource(자원, 인터넷에서는 그림, 음악, 페이지 등을 자원이라고 부릅니다) locator(위치) 라는 의미이죠.

이렇게 글을 작성하시다가 그림을 넣고 싶으신 위치에 위와 같이 적어 두시면 작성한 후에 그림으로 변해서 나타납니다.

또, 음악의 경우에는 페에지에 끼워 넣으라는 명령을 사용하는데 "embed" 입니다. 그리고 역시 위치는 src="위치"를 사용합니다.

음악 한곡을 삽입해 보죠. 제 블로그에 삽입해 놓은 음악 중에 김해송 선생의 "청춘계급" 이란 곡을 이 페이지에 삽입해 보겠습니다. 이 곡의 위치는 http://pds1.egloos.com/pds/1/200608/15/17/[1]1938_youth_class.asf 입니다.

이미 어떻게 사용하는지 알고 계십니다.

<embed src="http://pds1.egloos.com/pds/1/200608/15/17/[1]1938_youth_class.asf" autostart="false"></embed>

이렇게 작성하시면 실제로 페이지가 표현될 때 아래와 같이 표시됩니다.



음악 플레이어가 나타났죠? |> 를 누르시면 김해송의 "청춘계급" 음악이 연주될 겁니다.
위에 위치 뒤에 한칸 띄어서 autostart="false" 라고 되어 있는 것은 페이지가 표시되면서 음악이 연주되지 않고 대기하기 위해서 표시한 것입니다. 만약에 페이지가 표시되면서 음악이 연주되게 하고 싶으시면 그냥

<embed src="http://pds1.egloos.com/pds/1/200608/15/17/[1]1938_youth_class.asf"></embed>

이렇게 적으시면 됩니다.

어려운 듯 하지만 생각보다는 쉽습니다.
연습하고 자주 사용하시다 보면 이렇게 쉬운 것을~ 하시게 될 겁니다.

즐거운 북스토리 생활 되시기 바라면서 이만 줄입니다.
감사합니다.


댓글 (0)