웹제작스쿨
HTML 문서의 기본 구조
<HTML> : HTML 문서의 시작
<HEAD> : HTML 문서의 헤더 부분
<TITLE> HTML 문서의 제목 </TITLE>
</HEAD>
<BODY> : HTML 문서의 몸체
본문내용
</BODY>
</HTML> : HTML 문서의 종료
HTML 문서 기본태그
<HTML> ... </HTML> HTML 문서의 처음과 끝
<HEAD> ... </HEAD> HTML 문서의 관한 일반 정보를 담은 머리말
<BODY> ... </BODY> HTML 문서의 실제적인 내용이 들어가는곳
<TITLE> ... </TITLE> HTML 문서의 제목
문서 구성 태그
<Hn> ... </Hn> 각 단락의 제목
<P> ... </P> 단락 구분
<BR> 줄 바꾸기
<HR> 수평선 그리기
<CENTER> ... </CENTER> 가운데 정렬
<!-- ... --> 주석
문자의 논리적 스타일 태그
<DFN> ... </DFN> 단어 정의
<EM> ... </EM> 문자 강조
<CITE> ... </CITE> 문장 인용
<CODE> ... </CODE> 컴퓨터 프로그램 코드
<KBD> ... </KBD> 사용자 키보드 입력
<SAMP> ... </SAMP> 컴퓨터 상태 메시지
<STRONG> ... </STRONG> 문자를 강하게 강조
<VAR> ... </VAR> 변수 이름
문자의 물리적 스타일 태그
<B> ... </B> 볼드체(굵게)
<I> ... </I> 이탤릭체
<U> ... </U> 밑줄 문자
<TT> ... </TT> 타자기 입력
<BLINK> ... </BLINK> 껌뻑거리는 문자
<SUB> ... </SUB> 밑첨자
<SUP> ... </SUP> 윗첨자
폰트와 기타 태그
<FONT> ... </FONT> 폰트 크기 지정
<PRE> ... </PRE> 문단 포맷 그대로 유지
<BLOCKQUOTE> ... </BLOCKQUOTE> 문장 인용
<ADDRESS> ... </ADDRESS> 저작자 주소
목록을 만들기 위한 태그
<OL> ... </OL> 순서있는 목록
<UL> ... </UL> 순서없는 목록
<MENU> ... </MENU> 메뉴 목록
<DIR> ... </DIR> 디렉토리 목록
<LI> ... </LI> 목록
<DL> ... </DL> 용어 정의 목록
<DT> ... </DT> 용어 제목
<DD> ... </DD> 용어 설명
표를 만들기 위한 태그
<TABLE> ... </TABLE> 표 작성
<CAPTION> ... </CAPTION> 표의 제목
<TH> ... </TH> 표의 헤더
<TD> ... </TD> 표의 데이터
<TR> ... </TR> 표의 각 줄이 끝났음을 알림
HTML 문서 연결을 위한 태그
<A> ... </A> 하이퍼텍스트 연결
이미지 삽입을 위한 태그
<IMG> 이미지 삽입
사용자 입력 양식을 위한 태그
<FORM> ... </FORM> 입력 양식의 시작과 끝
<INPUT TYPE="text"> 텍스트 입력 양식
<INPUT TYPE="password"> 암호 입력 양식
<INPUT TYPE="checkbox"> 체크 박스
<INPUT TYPE="hidden"> 숨겨진 입력 양식
<INPUT TYPE="image"> 이미지 입력 양식
<INPUT TYPE="radio"> 라디오 버튼
<INPUT TYPE="submit"> 데이터 보내기 버튼
<INPUT TYPE="reset"> 리셋 버튼
<SELECT> ... </SELECT> 여러 개의 목록을 나열한 후 선택
<OPTION> ... </OPTION> SELECT의 각 목록 나열
<TEXTAREA> ... </TEXTAREA> 텍스트 영역 입력 양식
<TITLE> </TITLE>
윈도우 타이틀바에 쓰여지는 제목
<H숫자> </H숫자> -문장을 확대 숫자범위 : 1 ~~ 7
<BR> 라인(줄,칸) 바꾸기, 한칸아래로
<BR CLEAR=left,right,all> 공백 만들기
<P> 문단을 구분
<CENTER> </CENTER> 글씨나 그림을 중앙에 정렬
<IMG> 홈페이지에 그림을 등록
<IMG SRC="그림화일명"> 그림화일 선택
ALIGN=top,middle,bottom> 그림위치설정 (상단,중앙,하단)
나머지 ALIGN=left,right,texttop,absmiddle,baseline,absbottom> 그림위치설정
<BORDER=숫자> 테두리 굵기설절 , 0은 테두리 없애기
<WIDTH=숫자 HEIGHT=숫자> 그림크기지정
<VSPACE=숫자> 그림의 아래,위의 거리 지정
<HSPACE=숫자> 그림의 좌우 거리 지정
<ALT="그림 대신 사용할 제목"> 그림이 나오지 않을때 대신 사용하는 제목
<A> </A>
문장이나 다른홈페이지 연결, E-MAIL쓰기
<A HREF="연결할화일명.htm">연결할화일 제목</A>
<A HREF="연결할 다른 홈페이지 주소">다른홈페이지제목</A>
<A HREF="자기 이메일 주소">주소 제목</A>
그림으로 문장이나 다른홈페이지 연결, E-MAIL쓰기그림화일명
<A HREF="연결할화일명.html"><IMG SRC="그림화일명"></A>
<A HREF="연결할 다른 홈페이지 주소"><IMG SRC="그림화일명"></A>
<A HREF="자기 이메일 주소">주소 제목</A>
인용 및 테이블 만들기
<PRE> </PRE> 둘러싸인 내용을 그대로 홈페이지 넣는다. 띄어씌기도
<BLOCKQUOTE> </BLOCKQUOTE> 인용할때 사용할때 태그로 들여쓰기 기능
참고 : 중간에 <BR>과 <P>를 사용한다
<TABLE> </TABLE> 테이블(표)를 만든다
<TABLE BORDER=숫자> 테두리 두께조정, 입체감
<WIDTH="숫자%"> 표 내부의 긴 길이를 지정
<HIGHT="숫자%"> 표 내부의 줄 높이를 지정
<CELLSPACING=숫자> 표의 안여백 지정
<CELLSPADDING=숫자> 내용 선의 굵기
<TR> </TR> 테이블의 칸수를 늘릴때, 참고 : <TATLE>중간에 사용
<TD> </TD> 칸 안에 내용 넣기, 참고 : <TATLE>중간에 사용
<TD ALIGN=light,left,center> 칸안의 내용 정렬 방식 (가로)
<VALIGN=top,bottom,middle> 칸안의 내용 정렬 방식 (세로)
<ROWSPAN=숫자> 숫자만큼의 줄을 합치기
<COLSPAN=숫자> 숫자만큼의 칸을 합치기
주의 : 이 기능사용후바로뒤의 <TD>는 아무 옵션없이 사용
배경과 문자색을 지정
<BODY> </BODY>
<BODY BGCOLOR="#ffffff"> 배경색 지정
#ffffff 은 색상코인데, 흰색을 나타냅니다. 색상코드는 색깔별로 틀립니다.
<TEXT="#ffffff"> 문자색 지정
<BACKGROUND="배경그림할 파일명"> 배경그림넣기
<ALINK="#ffffff"> 한번 방문한곳의 연결색
<VLINK="#ffffff"> 키워드를 마우스로 클릭후 그것과 연결된 문서가 화면 나오기 전색
<LINK="#ffffff"> 한번도 방문하지 않은곳의 연결색
<MAP> - 정의 부분이라는 것을 알리는 역할
<MAP NAME="호출할 때(불러들일 때) 사용하는 이름">
<AREA> - 영역에 대한 정보
<AREA SHAPE=rect,circle,polygon> 사각형,원,다각형을 알리기 위해
<default> 지정한 좌표 이외의 영역을 선택했을때의 값
<COORDS="좌표1,좌표2,좌표3,좌표4"> 사각형 그릴때의 설정값 방식
"x중심,y중심,반지름"> 원 그릴때의 설장값 방식
"x좌료1,y좌표1,x좌표2,y좌표2,…,x좌표n,y좌표n> 다각형 그릴때의 설정갑 방식, n은 각형의 갯수
<A HREF="연결된 문서 이름"> 문서연결하기
예)
<MAP NAME="이름">
<AREA SHAPE=rect COORDS="0,0,100,110" HREF="sam1.htm">
"100,0,200,110" 2
"0,110,200,190" 3
<AREA SHAPE=default HREF="index.html">
</MAP>
<FONT> </FONT>- 지정한 부분의 글씨색과 크기지정
<FONT COLOR="#ffffff"> 글씨색 지정
<SIZE=숫자> 글씨의 크기 지정, 숫자범위 : 1~~7
<SIZE=+숫자,-숫자> 처음 글씨 크기보다 +숫자만큼 크게, 처음 글씨 크기보다 -숫자만큼 작게
<HR> 가로선을 긋는다.
<HR SIZE=숫자> 가로선 굵기 지정, 숫자가 크면 두껍다
<WIDTH=숫자,숫자%> 숫자는창의 크기에 영향주지안는다. 숫자%는 창의 폭에 다라 길이도 달라진다
<ALIGN=left,right,center> 가로선 위치설정
<NOSHADE> 가로선의 그림자 없애기
<B> </B> 글자를 두껍고 진하게
<I> </I> 글자를 이탤릭체로
<TT> </TT> 타이프라이터 형태로 문자를 찍는다
<EM> </EM> 이탤릭체로, 문장을 강조
<BLINK> </BLINK> 글씨를 깜박이게
넷스케이프 <EMBED>
<EMBED SRC="화일명.mid"> 음악화일 선택
AUTOSTART=true> 접속과 동시에 음악화일 자동실행
HIDDEN=true> 안보이게
REPEAT=true,false> 반복실행,1번실행
익스프롤러 <BGSOUND>
<BGSOUND SRC="화일명.mid"> 음악화일 선택
<SOUND SRC="화일명.mid"> 음악화일 선택
DELAY=10> 반복실행
<CODE> </CODE> 프로그램 소스등을 보여줄때 사용 (고딕체)
<CITE> </CITE> 글을 인용할때 (이탤릭체)
<DFN> </DFN> 문장을 정의할때 (MSIE에서 이탤릭체로 표현됨)
<MENU> </MENU> 메뉴를 나타낼때
<DIR> </DIR> <MENU>와 비슷, 목록의 길이가 24자이내로 짧은 목록에 사용
<NOBR> </NOBR> 넷스케이프 창의 크기가 변하더라도 문장이 정리되는 기능
<WBR> <NOBR>중간에 쓰는 기능으로 줄을 바꿀때 사용
<SAMP> </SAMP> Sample이나 example을 적을때
<FRAMESET> </FRAMESET> 넷스케이프에서 창을 만드는 효과
<FRAMESET ROWS="숫자,숫자%> 가로로 프레임을 나눌때 사용
*숫자 사용할때 : 셀 단위로 기입한다.
예)
<FRAMESET ROWS="*,2*"> 가로로 두프레임 아래 프레임이 위의 창에 2배
<FRAMESET ROWS="*,50"> 아래 프레임의 크기를 50픽셀로 고정하고
나머지는 위의 프레임이 차지한다
*숫자%를 사용할때
주의 : 나눈 창의 %의 합이 100%가 되어야 한다는 점
<FRAMESET COLS="숫자,숫자%"> 창을 세로로 나눌때 쓴다
*사용법은 위의 ROWS와 같다
<FRAME> </FRAME> <FRAMESET>로 지정된 프레임에 들어가는 문서를 지정
<FRAME SRC="프레임이 가리킬 주소">
NAME="프레임 이름"> TARGET와 같이쓴다
TARGET="NAME에서 지정된 이름">
MARGINWIDTH="숫자"> 폭의 여백지정 (숫자는 픽셀)
MARGIHIGHT="숫자"> 높이의 여백지정
SCROLLING="yes,no,auto"> 프레임에 스크롤바를 지정한다
<NOFRAME> </NOFRAME> <FRAME>를 인식 못하는 브라우저를 위해서 만들어 놓은 기능
<CAPTION> </CAPTION> 표의 설명을 넣는다
<CAPTION ALIGN=top,bottom> 설명을 표의 위와 아래에 배치
<U> </U> 문장에 밑줄을 친다
<UL> </UL> 정의된 각각의 목록에 자동번호가 붙지않는다
<ADDRESS> </ADDRESS> 주소를 나타내기 위해서 사용
<BASEFONT SIZE=숫자> 문서 전체의 기본 폰트 크기를 지정
<OL> </OL> 번호가 붙는 목록 만들기
<OL TYPE=1,A,a,I>
START=숫자> 시작할 정수의 기입
예) <OL TYPE=1 START=5>
<LI> <OL>안에 번호를 차례대로 붙인다. <OL> </OL>사이에서만 사용된다
<LI TYPE=1,A,a,I>
VALUE=숫자> <OL>에서만 사용됨,항목번호 새로지정
예)
<OL TYPE=1 START=3>
<LI>
<LI TYPE=A VALUE=4>
<LI>
</OL>
결과) 3.
D.
E.
특수 문자의 사용
< 기호를 사용하려는 곳에 <를 기입
> 기호를 사용하려는 곳에 >를 기입
& 기호를 사용하려는 곳에 &를 기입
" 기호를 사용하려는 곳에 "를 기입
"o 기호를 사용하려는 곳에 &OULM를 기입
~n 기호를 사용하려는 곳에 &NTILDE를 기입
`E 기호를 사용하려는 곳에 &EGRAVE를기입
html 문서의 기본적인 형식
html 문서는 title부분, header부분, body부분으로 구성되어 있다.
여기서, title은 html 문서의 제목을 나타내는 것이며, headr 부분은 html 문서에 관한 여러 정보를 나타내는 부분, body부분은
html 문서의 실제 본문을 가르킨다.
다음은 html 문서의 기본형식
<html>
<head>
<title>
html 문서의 제목
</title>
</head>
<body>
본문내용
</body>
</html>
이다.
<html> - </html>에서는 head, body가 들어간다.
<head> - </head>에서는 title, isindex, base, nextid, link, meta가 들어간다
<body> - </body>에서는 p, hr, dir, dl, menu, ol, ul, hn, address,
blockquote, form, pre가 들어간다
<title> - <title>에서는 제목 글자만 들어간다.
html 문서 모양 만들기
글자의 크기를 지정하기 위한 hn tag, 단락을 지정하기 p tag, 단락과 단락을 나누는 br tag, 단락과 단락 사이에 수평선을 그리는 hr tag 등이 있다.
<hn> - <hn>에서는 n은 1-6까지의 숫자를 쓸 수 있다.
여기서, h1은 가장 큰 제목의 경우일때 쓰며, h2, h3, h4, h5, h6 순으로 크기가 작아진다.
만약, 글자 하나만을 크게 하기 위해서는 이런 tag를 쓸수 있다. <font size=n> - </font> tag가 있다.
<p>는 단락이 시작하는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분하기 위한 역할을 한다.
<br>은 html 문서를 만들다가 단지 줄을 바꾸고 싶을 때 사용하게 된다. <p>와 다른 점은 문단과 문단 사이에 빈 줄을 넣지 않고 줄만 바꾼다는 것이다.
<hr>은 화면위에 수평선을 그리고 싶을 때 사용하게 된다.
여기서. hr tag은 속성을 가지고 있는데 size, widht, align, noshade등의 속성을 가지고 있다.
<hr size = n>은 수평선의 두께를 지정하는 속성, <hr width = n > 수평선의 넓이를 지정하는 속성 <hr align = align> align에는 left, right, center가 들어간다.
<hr noshade>는 수평선의 음영 효과를 없앤 것이다.
<center> - </center>는 문단을 가운데로 정열시키는 정렬 tag이다. 이 태그 사이에 든 모든 문장은 가운데로 정열된다.
