HTML의 기본형태 |
<HTML> |
<------ HTML
문서의 시작 |
<HEAD> |
< -----┐ |
<TITLE>
문서의 제목 </TITLE> |
|
HTML 문서의 머리 부분 |
</HEAD> |
< -----┘ |
|
|
<BODY> |
< -----┐ |
|
| |
... HTML
문서의 내용 ... |
|
HTML 문서의 몸통 부분 |
|
| |
</BODY> |
< -----┘ |
</HTML> |
<------ HTML
문서의 종료 |
모든 HTML
문서는 머리부분(HEAD)과 몸통 부분(BODY)부분으로 나뉘어
집니다. 또 머리 부분(HEAD)에는 HTML 문서의 타이틀(TITLE)을
포함하고 있습니다. |
HTML 문서의 시작과 종료 |
사용법 |
<HTML>
~ </HTML> |
설명 |
HTML
문서의 시작과 종료를 나타냅니다. HTML은 HTML 언어로
만들어졌기 때문에 <HTML>로 시작해서 </HTML>로
끝나야 합니다. |
HTML 문서의 머리부분 |
사용법 |
<HEAD>
~ </HEAD> |
설명 |
<HEAD>
태그는 일반적으로 HTML 문서에 관한 정보들을 나타내는데
실제로 타이틀(TITLE)을 제외하고 다른 정보들은 웹 브라우저에
나타나지 않습니다. |
HTML 문서의 제목 |
사용법 |
<TITLE>
~ </TITLE> |
설명 |
<TITLE> 태그는
HTML 문서의 타이틀(제목)을 지정하는 태그입니다. <HEAD>
~ </HEAD>사이에 기입합니다. <TITLE> 태그로
지정한 문서의 타이틀은 웹 브라우저의 화면 상단에 나타납니다.
이 태그는 64문자 이내로 기입하는 것입 좋습니다. |
예제1 |
<html>
<head><title>???의
홈페이지</title></head>
</html> |
HTML 문서의 본문 |
사용법 |
<BODY> ~ </BODY> |
설 명 |
<BODY>
태그는 HTML 문서의 실제적인 내용이 들어가는 곳으로,
<BODY>와 </BODY> 안에 포함되는 내용이 웹
브라우저 화면에 나타나게 됩니다. |
옵션 |
설명 |
BACKGROUND="이미지
파일" |
배경으로
들어가는 이미지 파일의 지정 |
BGCOLOR="#RGB" |
배경색의
지정 |
TEXT="#RGB" |
문자색의
지정 |
LINK="#RGB" |
링크색의
지정 |
VLINK="#RGB" |
방문한
것이 있는 링크의 색 지정 |
ALINK="#RGB" |
링크를
클릭했을 때의 색 지정 |
|
예 제 |
<html>
<head><title>???의
홈페이지</title></head>
<body bgcolor="blue">
</body>
</html> |
예 제 |
<html>
<head><title>???의
홈페이지</title></head>
<body bgcolor="red"
text="yellow">
지금 보고 계시는 글꼴색은
yellow입니다.
</body>
</html> |
예 제 |
<html>
<head><title>???의 홈페이지</title></head>
<body background="images/back.gif">
이 경우는 'images'라는 폴더에 'back.gif'라는 파일이
들어있어야 합니다.
</body>
</html> |
<H>
태그 |
사용법 |
<H>...</H> |
설 명 |
문서내의 제목들을 지정한다.
제목들에는 1-6의 번호가 붙여지는데, <H1>은 문서의
가장 큰 제목을 표시하며 <H3>는 하위 제목을 표시한다.
일반적으로 제목 태그들 내의 텍스트들은 굵은 글꼴로 표시되며
일반적인 문서 텍스들보다는 더 크게 표시가 된다. |
<BR>
태그 (Line BReak) |
사용법 |
<BR> |
설 명 |
줄바꿈을 해주는 태그입니다.
일반적으로 소스상에 어떤 내용을 치고 엔터키를 눌러도,
웹 브라우저 상에는 한줄로 붙여 나옵니다. 이부분을 줄바꿈을
해주려면 인위적으로 <br>이라는 태그를 사용해야
합니다. |
<HR>
태그 |
사용법 |
<HR> |
설 명 |
문서에 수평선(자)을
그린다. 이것은 보통 문서를 시각적으로 몇 개의 부분으로
나누어준다. |
예 제 |
<H1> 제목입니다
</H1>
<HR ALIGN="LEFT" WIDTH="60%">
아마도 본문이 들어가겠죠.... |
<P>
태그 |
사용법 |
<P> |
설 명 |
문서내의 단락을 설정해
준다.
<p>는 <br>을 두 번 사용한 것과
같습니다. |
예 제 |
<P> 단락을 설정하는
예제입니다. </P>
<P> 안녕하세요... 단락을
테스트 중입니다.</P> |
<PRE>
태그 |
사용법 |
<PRE>...</PRE> |
설 명 |
미리 서식 설정된 평범한
텍스트가 들어간다. 이것은 문서에 컴퓨터 프로그램 출력물이나
소스 코드를 추가할 경우 유용하다.
이 태그 내에서 다른 태그를 사용할
경우 사용된 태그는 브라우저에의해 해당태그의 본래 의미대로
해석된다. |
예 제 |
<PRE>
#include
<stdio.h>
void main(void)
{
printf("Hello
World!\n");
}
</PRE> |
<XMP>
태그 |
사용법 |
<XMP>...</XMP> |
설 명 |
문서 내에 미리 서식
설정되어진 텍스트들을 삽입한다. <PRE> 태그와는
달리, <XMP> 태그내의 HTML 태그들을 브라우저가
인터럽트를 하지 않는다. HTML 3.2에서는 이 태그를 더
이상 사용하지 않으므로 이것 대신 <PRE>를 사용하도록
하자 |
예 제 |
<XMP>이
태그내의 <H4>다른 태그들</H4>은 무시된다.</XMP> |
<FONT>
태그 |
사용법 |
<FONT>...</FONT> |
설 명 |
브라우저가 텍스트를
표시하는데 사용할 글꼴의 특성들을 설정하거나 변경한다. |
예 제 |
The cat was really
<FONT SIZE="+3">BIG!</FONT>
<font size=1>웹마스터 1과정</font><br>
<font size=2>웹마스터 1과정</font><br>
<font size=3>웹마스터 1과정</font><br>
<font size=4>웹마스터 1과정</font><br>
<font size=5>웹마스터 1과정</font><br>
<font size=6>웹마스터 1과정</font><br>
<font size=7>웹마스터 1과정</font><p>
<font color=#0000ff>웹마스터 1과정</font><br>
<font color=#ff0000>웹마스터 1과정</font><br>
<font color=green>웹마스터 1과정</font><br>
<font color=cyan>웹마스터 1과정</font><p>
<font face=궁서>어서오세요</font><br>
<font face=바탕>어서오세요</font><br>
<font face=돋움>어서오세요</font><br>
<font face=굴림>어서오세요</font><p>
<font size=4 color=blue face=궁서>안녕하세요</font><br>
<font size=2 color=red face=돋움>안녕하세요</font><br>
<font size=5 color=yellow face=굴림>안녕하세요</font><br> |
속 성 |
SIZE : 크기조절 1-7
COLOR : 문자열의 색상 조절
FACE : 글꼴 변환 |
<BLOCKQUOTE>
태그 |
사용법 |
<BLOCKQUOTE>...</BLOCKQUOTE> |
설 명 |
한 문단
전체를 들여쓰기 위해 사용
텍스트의 들여쓰기
기능, 문서 내의 직접 인용문에 사용하기 좋다. |
예 제 |
단어란 <BLOCKQUOTE>글쎄요
뭐라고 설명을 못하겠네요....</BLOCKQUOTE> |
속 성 |
|
<CENTER>
태그 |
사용법 |
<CENTER>...</CENTER> |
설 명 |
문서를
가운데로 정렬
문서에서 텍스트의 좌우 여백이
동일하도록 만든다. 이 태그는 현재 <DIV ALIGN="CENTER">
속성으로 공식적으로 대체가 되었는데 HTML 3.2에서는 호환성의
목적으로만 추가가 되었다. |
예 제 |
<CENTER> 가운데
정렬입니다. </CENTER> |
속 성 |
|
<ADDRESS>
태그 |
사용법 |
<ADDRESS>...</ADDRESS> |
설 명 |
주소를 다른 내용과
구별이 되게 표시해 준다. |
예 제 |
<ADDRESS>서울시
동대문구 제기1동</ADDRESS> |
속 성 |
|
주석
태그 |
사용법 |
<!
: 한줄주석
<!--...--> : 문단주석 |
설 명 |
문서에 주석문을 삽입한다.
주석문은 문서 소스에서는 보이지만 브라우저에서는
표시되지 않는다. 소스코드에 설명을 달 때 사용한다. |
예 제 |
<!-- 주석문. 브라우저에서는
보이지 않는 부분입니다 -->
<H1>안녕하세요
!</H1> |
속 성 |
|
|