HTML 입문

안녕하세요. 포스팅을 맡게된 cocy입니다.

웹개발을 시작하신 여러분을 환영합니다!

포스팅에 앞서 HTML의 기본 개념 설명부터 시작하겠습니다.

HTML은 Hyper Text Markup Language 즉,

겁나게 멋진 문자를 표시하는 언어입니다.

사실 프로그래밍 언어라고 하기엔 좀 무색할 정도로 심플하고 단순합니다.

그래서 html을 문서라고 하지 보통 웹페이지라고 하진 않지요, 그래서 Document, 세글자를 따서 Dom(돔)이라고 불립니다.

이 html문서를 좀더 다이나믹하게 해주는 프로그래밍 언어가 바로 자바스크립트 입니다.

자바스크립트는 프로그래밍언어인 JAVA와는 관련이 없구요,

사용자의 웹 브라우저 내에서 동작하는 스크립트 언어입니다.

html에서 각종 태그에는 속성들이 존재하는데,

이중 이벤트를 감지할 수 있는 속성들(onclick-클릭시, onblur- 포커스 상실, ondbclick- 더블클릭 등)을

바로 자바스크립트와 연계하여 Dom을 조작할 수 있는데요, 이 부분에 관해서는 자바스크립트 강좌를 보시면 되겠습니다.

그럼 바로 코딩에 들어가겠습니다.

윈도우 + R 키를 누른후 "notepad"를 치고 엔터를 입력합니다.

메모장입니다. 저는 이게 편하지만 시작>보조프로그램>메모장 으로 하셔도 상관없습니다.

그리고 나서 다음 코드를 입력해주세요.

너무나도 친숙하고 간단한, HTML의 기본 구조를 가진 html 웹페이지가 만들어졌습니다!

여기에 쓰인 코드에 대한 설명을 잠깐 해보죠.

여기서 보이는 '<' 와 '>'안에 들어간 텍스트를 '태그'라고 불립니다.

<html>태그는 이 코드는 html을 시작하겠다는 태그이고

</html>태그는 html을 종료하겠다는 코드입니다. 즉 태그 앞에 '/'가 붙으면 종료하겠다는 코드입니다.

마찬가지로 이외에도 수많은 태그들(head, body, a, input, span........등등)이 있지만,

포스팅을 진행해 나가면서 필요에 의해 하나씩 배워보도록 하겠습니다.

조금 더 가자면 HTML은 브라우저의 엔진에서 작동하는 인터프리터 언어(번역어)이기때문에 위의 구조를 맞추지 않고,

<body>안의 단순 텍스트만 입력하더라도 같은 화면이 출력 될 것입니다.

하지만 구조를 맞추지 않는다는것은 각기다른 사용자의 웹브라우져에서 똑같이 표시될수 없을 수 있으며

이는 웹표준에 어긋난다는 의미입니다.

그리고 웹에는 각종 검색 봇들이 존재하는데 이러한 검색 엔진에서 내가 만든 페이지를 검색하게 만들고 싶다면

구조를 맞춰서 코딩하는 습관을 들이시는게 좋습니다.

아무리 좋은 홈페이지라도 아무도 이용하지 않는다면 무용지물이지요.

타이핑이 끝나셨다면 파일> 다른이름으로 저장 을 클릭하시고,

파일형식은 모든파일, 파일이름은 hello.html로 저장해주세요.

그리고 사용하시는 브라우저를 이용해 해당 파일을 여시면 다음과 같은 화면을 보실 수 있을겁니다.

수고하셨습니다.

다음 강의부터는 개발툴을 메모장이 아닌 Eclipse로 진행하도록 하겠습니다.

이클립스 설치법은 아래의 포스팅를 참고하세요 ^^

[스크랩] 버전별 explorer 적용법 (0)	2012.06.28
[본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글입력폼 (11)	2012.06.13
[본격 게시판짜기 Part1.1 - 게시판도 HTML부터] 게시글 리스트 (32)	2012.06.13

Custom + Maker