Intro
우선은 틀부터 배워야 겠지요?
Code HTML기본 틀
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
<HTML>
Explanation
자 이게 기본 HTML 다큐먼트의 포맷입니다.
HTML다큐먼트는 <HTML>태그로 시작하구요 </HTML>태그로 끝납니다.
그리고 사람에게 머리와 몸통이 있듯이, 글에 서론과 본론이 있듯이,
HTML다큐먼트에는 HEAD(머리)와 BODY(몸통)이 있어요.
BODY에 우리가 브라우져를키고 사이트들을 가보면 보이는 내용물들이 들어있구요.
HEAD에는 맨위에 사이트이름 이라던가하는 내용에 들어가지않는것들이 들어있어요.
자 제목을 넣어볼까요.
Code 제목
<HTML>
<HEAD>
<TITLE> 이것은 제목이다 </TITLE>
</HEAD>
<HEAD>
<TITLE> 이것은 제목이다 </TITLE>
</HEAD>
Explanation
<TITLE>태그와 </TITLE>태그 사이에 원하시는 제목을 적으시면
글을 쓸때 본론이 여러 패러그래프로 나뉘어져있고 패러그래프에 헤딩을 달아주기도 안달아주기도 하지요?
Code 헤딩과 패러그래프
<BODY>
<H1> 이것은 H1 머릿말이다 </H1>
<H2> 이것은 H2 머릿말이다 </H2>
<H3> 이것은 H3 머릿말이다 </H3>
<H4> 이것은 H4 머릿말이다 </H4>
<H5> 이것은 H5 머릿말이다 </H5>
<H6> 이것은 H6 머릿말이다 </H6>
<P> 이것은 첫번째 패러그래프 </P>
<P> 이것은 두번째 패러그래프 </P>
<P> 이것은 세번째 패러그래프 </P>
</BODY>
<H1> 이것은 H1 머릿말이다 </H1>
<H2> 이것은 H2 머릿말이다 </H2>
<H3> 이것은 H3 머릿말이다 </H3>
<H4> 이것은 H4 머릿말이다 </H4>
<H5> 이것은 H5 머릿말이다 </H5>
<H6> 이것은 H6 머릿말이다 </H6>
<P> 이것은 첫번째 패러그래프 </P>
<P> 이것은 두번째 패러그래프 </P>
<P> 이것은 세번째 패러그래프 </P>
</BODY>
Explanation
<H1>부터 <H6>까지 헤딩 태그에요
숫자 1이 젤 큰사이즈고 6이 젤 작은사이즈 헤딩이 되어요.
<FONT SIZE="8">뭐이런식으로 글씨 크기를 조절할수도있는데 왜 헤딩을 쓰느냐하면은요.
헤딩은 자동으로 밑에줄에 빈줄을 하나 넣어줘요.
그리고 HTML자체네에서 헤딩과 그냥 크기만 조절한 문장을 구분할수도있구요.
<P>는 패러그래프 태그인데요 이것두 마찬가지로 밑에 빈줄을 하나 넣어줘요.
그냥 <P>태그 쓰지않고 글쫘아악쓰고 <BR>(엔터태그)를 넣어줘도 보이는건 같지만 말이죠.
전체 코드를 볼까요
Code
<HTML>
<HEAD>
<TITLE> 이것은 제목이다 </TITLE>
</HEAD>
<BODY>
<H1> 이것은 H1 머릿말이다 </H1>
<H2> 이것은 H2 머릿말이다 </H2>
<H3> 이것은 H3 머릿말이다 </H3>
<H4> 이것은 H4 머릿말이다 </H4>
<H5> 이것은 H5 머릿말이다 </H5>
<H6> 이것은 H6 머릿말이다 </H6>
<P> 이것은 첫번째 패러그래프 </P>
<P> 이것은 두번째 패러그래프 </P>
<P> 이것은 세번째 패러그래프 </P>
</BODY>
</HTML>
<HEAD>
<TITLE> 이것은 제목이다 </TITLE>
</HEAD>
<BODY>
<H1> 이것은 H1 머릿말이다 </H1>
<H2> 이것은 H2 머릿말이다 </H2>
<H3> 이것은 H3 머릿말이다 </H3>
<H4> 이것은 H4 머릿말이다 </H4>
<H5> 이것은 H5 머릿말이다 </H5>
<H6> 이것은 H6 머릿말이다 </H6>
<P> 이것은 첫번째 패러그래프 </P>
<P> 이것은 두번째 패러그래프 </P>
<P> 이것은 세번째 패러그래프 </P>
</BODY>
</HTML>
Picture
HTML다큐먼트 여는법
코드 복사해보셔서 저번에 추천한 태그연습장에 복사해넣으셔서 해보세요.
아니면 Notepad에 코드 복사하시고 저장을 하시구요. 확장자를 .txt에서 .html 로 바꾸신후에
여시면 브라우져에 HTML다큐먼트가 열려요.
Outro
HTML태그는요 항상 열고 닫기를 해주세요.
닫지 않아두 문제없이 돌아가는 태그들도 많지만요.
좋은 프로그래밍 스타일을 유지하고싶거나 정석대로 하고싶으시다면
열은 코드는 꼭 닫아주세요.
<H3> 하고 열었으면 </H3>하고 닫아주라는 말이죠.
닫을땐 슬래쉬가 붙고요~
<BR>같이 닫을 필요없는 코드들은요, </ BR>이렇게 한번에 열면서 닫아요.
무슨 소리냐면 <BR>이거쓰지말고 </ BR>이거한번만 쓰라이거죠. 그런데 이런태그는
슬래쉬하고 한칸뛰고 써요.
그리고 대문자든 소문자든 둘다 된답니다~
이히히
'HTML' 카테고리의 다른 글
| [HTML 일기/리뷰]HTML책을 하나 샀어요. (0) | 2011.01.26 |
|---|---|
| HTML이란 무엇일까? 태그(Tag)는 무엇일까? (2) | 2011.01.18 |
| [HTML]유용한 태그(tag) 연습장을 소개합니다. (2) | 2011.01.15 |
