[HTML 쉽게 이해하기 강좌 #1] - HTML의 기본

혹시 HTML이라는 들어보셨나요?
못들어보셨다구요? 이제 배우신다구요?
HTML이 뭔지 쉽게 설명해 드릴테니 저만 따라오세요.
그럼 출발!

HTML이란 무엇일까요?

    HTML은 HyperText Markup Language의 약자입니다.
    아래 그림을 보시면 빨강색으로 표시된 앞자를 따서 간단하게 HTML이라고 씁니다. HTML이 뭐냐하면 약자의 끝에 Language라고 써 있듯이 언어입니다. 한국어, 영어, 일본어 등과 같이 언어라는 것입니다.

    무슨 언어냐 하면 PC에 있는 웹브라우저(쉽게 말해 인터넷을 할 수 있게 하는 녀석)을 말하죠. 이 녀석에게 'OOO해' 라고 말하는 것입니다. 영어권의 사람들에게 영어로 말을 해야 알아들을 수 있듯이 컴퓨터에게는 HTML이라는 언어로 표현해야 알아듣고 그에 맞게 일을 할 수 있다는 것입니다.

이 페이지도 HTML로 만들어진 것입니다. 신기하죠? 
HTML을 이용하면 아래와 같은 화면을 만들 수 있다는 것입니다.
여러분도 저만 따라오시면 충분히 만드실 수 있습니다.

<사진> HTML을 이용해서 만들어진 블로그

하기 전에 무엇이 필요할까요?

    HTML이라는 언어에 대해서 배우기 전에 먼저 필요한 준비물을 알아보도록 하겠습니다. 뭐 좋은 것도 있겠지만 가장 쉽게 접할 수 있는 것은 바로 [메모장]입니다. 메모장으로도 HTML문서를 만들어 보고 웹 브라우저가 어떻게 알아들었는지 확인해 볼 수 있습니다.

아래의 그림은 HTML문서를 편집할 수 있는 메모장입니다.

<그림> 윈도우에서 기본으로 제공하는 메모장

메모장으로 시작해 봅시다

손이 심심하신가요?
그러면 이제부터 한번 손으로 직접 입력해 가면서 해보도록 하겠습니다.
화면에 보이는 것과 같이 입력해 봅니다.

<그림> HTML 코드 입력 화면>

위의 코드를 입력한 다음, 메뉴의 [파일(F)]을 눌러 저장(S)를 클릭합니다.

<그림> 저장하는 화면

아래 그림과 같이 파일이름을 test.html로 저장합니다.

HTML문서는 저장할 때 .html 또는 .htm을 끝에 입력해 줍니다. 이것을 파일의 확장자라고 합니다.

<그림> 저장할 파일 이름을 지정하는 화면

위와 같이 하면 바탕화면에 아래와 같은 그림이 보일 거에요.
이것이 바로 위에서 저장한 파일입니다.

위의 아이콘을 두 번 클릭해서 실행해 보도록 하겠습니다. 짜잔!

위와 같이 나왔다면 성공입니다. ^^

이것도 알아두세요

우리가 컴퓨터에서 인터넷 사이트에 접속할 때 아래와 같이 주소를 입력했던 것을 기억하실 것입니다. 먼저 아래의 화면을 통해 각자가 무엇을 의미하는지 알아보도록 하겠습니다.

프로토콜: HTTP, gopher, ftp, telnet, mailto, news 

서버주소: 일반적인 인터넷(IP) 주소

포트 번호: 접근 가능한 포트 번호, HTTP는 80이고, telnet는 23임

디렉토리: 서버상에서의 디렉토리

파일이름: 파일에 대한 이름, 일반적으로 HTML문서의 경우 .html이나 .htm을 사용

HTML 첫번째 강좌를 마치며

이제 첫번째 강좌가 끝났네요.
이제부터 HTML의 세계에 빠져보아요^^

아래의 링크를 누르시면 다음 강좌로 이동합니다^^

 

[HTML 쉽게 이해하기 강좌 #2] - HTML 시작하기 

글 잘 보셨나요?  잘 보셨다면 아래에 손가락 모양을 꾹 눌러주세요 1초도 안걸려요^^