오늘부터 Web Programming 의 기초부터 한번 써볼려 합니다.
목차
1. HTML의 기본구조
2. Head 에 들어가는 태그
    i. Title
3. Body 에 들어가는 태그
    * Block Element vs Inline Element
    i. p, 문단
    ii. heading, 제목
    iii. hr, 수평선
    * Attribute, 속성
    iv. anchor, 링크
    v. br, 줄바꿈
    vi. img, 이미지
    vii. em, strong, 강조
4. 기타
    * Comment, 주석
    * Validation, 인증
1. HTML 의 기본 구조
xHTML 에 앞서 웹 페이지에 가장 기본이 되는것은 HTML 입니다.
HTML 은 Hypertext Markup Language 의 줄임말로 웹페이지의 기본 내용과 구조를 담고 있습니다.

HTML파일 안에 내용들에는 HTML 태그들이 그 내용들을 둘러싸고 있습니다. 즉.

이런 구조로 HTML 파일을 작성하게 됩니다.

xHTML은 HTML에서 한단계 업그레이드(?)된 버젼으로 2000년도에 W3C (World Wide Web Consortium) 의 표준으로 자리잡게 됩니다.
기나긴 역사 이야기는 생략하고..

xHTML의 기본 페이지 구조는 이렇게 됩니다.

즉, head 태그 안에는 HTML 페이지에 대한 각종 정보가 들어가 있고, body 태그 안에는 HTML 페이지의 내용이 들어가게 됩니다.
이러한 HTML 파일들은 .html 의 확장자를 가지게 됩니다.

2. head 에 들어가는 태그들..
기본적인 태그로는 title 태그가 있습니다.
즉 페이지의 제목을 알려줍니다.
이렇게 적용하였을 경우 이렇게 보여지게 됩니다.


3. body 에 들어가는 태그들..
* Block Element vs Inline Element
Body 에 들어가는 태그는 크게 두 종류로 나눌수 있습니다.
첫번째로 살펴볼것은 Block Element 라고 불립니다.
블록을 전부 차지한다는 뜻으로, 한 화면에 큰 블록을 차지하게 됩니다.
이런 태그로는 paragraph (문단), list (목록), table (표) 등등이 존재합니다.
이러한 태그를 연달아서 사용할 경우 브라우저에서 임의적으로 두 블록 사이에 여백을 두게 됩니다.

이에 상응하여 Inline Element 는 블록이 아닌 작은 영역에 사용됩니다.
주로 작은 효과를 주기 위해 사용됩니다.
이러한 태그들중에는 Bold (진하게), Italic (기울림), Image (이미지) 등등이 존재합니다.
이러한 태그들을 사용하기 위해서는 Block Element 안에 넣어서 사용해야 합니다.
한 Block Element 안에 또 다른 Inline Element 는 허용이 되며 또한 Inline Element 안에 또 다른 Inline Element 를 넣어서 사용할수 있습니다 .

이제 몇가지 body 태그를 살펴보면서 block element 와 inline element의 차이를 보겠습니다.

i. P 태그 (Block)
Paragraph 의 약자로 문단을 나타낼때 쓰는 태그입니다.

결과
(HTML 에서는 띄어쓰기, 즉, white space 를 무시합니다)

ii. Heading 태그 (Block)
제목이라고 볼수 있습니다. h1, h2, ..., h6 까지 존재합니다.

결과


iii. Hr 태그 (Block)
Horizontal Rule 태그라 하여 페이지 전체에 수평선(?) 을 그리게 됩니다.
또한 hr 태그는 특별히 닫는 태그가 없기에 다른 방식으로 표기됩니다. 즉,
이렇게 쓰게 됩니다.
결과는..


* Attribute, 속성
이제 몇가지 Inline Element 를 살펴 보게 될텐데요,
그전에 HTML 태그의 속성을 좀더 알아보도록 하겠습니다.

HTML 의 몇몇 태그들은 Attribute (속성) 이라는 추가 정보를 포함할수 있습니다. 즉,

가 되는것입니다.

iv. Anchor, 링크 (Inline)
페이지에 링크를 걸때 사용합니다. 짧게 a 로 씁니다.
href: 링크를 눌러 도착할 곳, 절대경로나 상대경로 두가지다 사용가능합니다.
title: 링크에 대한 설명입니다.
이렇게 쓰게 됩니다.
결과는..

(구글 검색에 마우스만 올려보세요 ^^)

v. br, 줄바꿈 (Inline)
HTML 에서 많은 띄어쓰기나 엔터를 무시하게 됩니다. 엔터를 사용하기 위해선 br 태그를 넣어 줍니다.
title: 링크에 대한 설명입니다.
br은 닫는 태그가 따로 없기에 <br /> 으로 써주게 됩니다.
결과는..


vi. img, 이미지 (Inline)
그림을 넣을때 쓰는 태그 입니다. 여러가지 속성 이 존재합니다.
의무적으로 필요한 속성에는 두가지가 있습니다.
src : 이미지의 경로를 나타냅니다
alt : 이미지를 로드 하지 못하였을경우 대신 보여줄 텍스트를 표기합니다.

img 또한 닫는 태그가 따로 없기에 Self Closing 을 해야 합니다.
결과는.. <이미지 로드 성공할 경우>

<이미지 로드 실패할 경우>

vii. Em, Strong 태그 (Inline)
em: Emphasized text - 강조된 텍스트
strong : Strongly Emphasized text - 아주 강조된 텍스트
일반적으로 em 을 사용할시 글자가 기울림 효과가 나타나고 strong 을 사용할시 진하게 표시됩니다.
이 같이 inline Element 를 여러번 사용할수도 있습니다.
결과는..

결과를 보면 블로그란 글자는 기울림이, 자주자주 라는 글자는 진하게, 그리고 주세요는 기울림과 진하게가 동시에 적용된것을 볼수 있습니다. (em 이 먼저오나 strong 이 먼져 오나 상광없습니다.
즉, <em><strong>내용</strong></em> 과 <strong><em>내용</em></strong> 은 동일합니다.


4. 기타
* 주석
HTML 코드 안에 주석이나 설명을 달아 놓을때는 <!-- .. --> 을 사용하게 됩니다.
body 뿐만 아니라 아무곳에서나 다 적용이 가능합니다.

결과는..


* W3C XHTML Validator
자신의 xHTML 페이지가 제대로 코딩 되었는지 확인하는 방법입니다.
body 뿐만 아니라 아무곳에서나 다 적용이 가능합니다.

결과는..
이런 이미지가 하나 뜨게 됩니다.
validator.w3.org 에가서 직접 코드를 인증 받을수도 있고
이 코드를 넣어 놓고 클릭할시 자동으로 인증 페이지로 연결해 줍니다.
이 인증 방식은 매우 까다롭기(?) 때문에 몇몇 브라우져 에서 정상 작동할지언정 여기서 인증이 되지 않을수도 있습니다. 다만 친절히 어디가 잘못 되엇는지 알려주기 때문에 쉽게 고칠수 있습니다.


마무리..
다음 글에서는 작성한 HTML의 겉모습을 꾸밀수 있는 CSS 에 대해 서술해 보겠습니다.
유용한 링크들 : W3C school - HTML 태그 목록 - 링크