1.
태그란?
HTML은 브라우저상에서 홈페이지를 보여주는 역할을 한다다. 그러니까 HTML로 작성한 문서만 브라우저상에 보인다는 것이다. 이 HTML을 작성한는 명령어가 태그 인것이다.
2. 태그의 종류
<HTML> HTML 문서 </HTML>
<HEAD> HEAD 부분 </HEAD>
<TITLE> 웹브라우저의 윈도우 타이틀 바의 제목 </TITLE>
<BR> 한 줄을 띄워 준다.
<Hn> 글자크기 지정(n이 클수록 작은글자 1~6까지) </Hn>
<P>단락 변경(한 줄 띄기) </P>
<HR> 줄 긋기
<HR SIZE=n> 두께 n 픽셀
<HR WIDTH=n> 길이 n 픽셀
<HR ALIGN=[LEFT, RIGHT, CENTER]> [왼쪽, 오른쪽, 가운데] 정렬
<CENTER></CENTER> 문단의 가운데 정렬
<!-- 주석내용--> 주석 달기
<B> 강조체 </B>
<I>이탤릭체 </I>
<U>밑줄체 </U>
<TT> 고정폭 문자 </TT>
<BLINK> 깜빡거리는 문자 </BLINK>
<SUB> 아래 첨자 </SUB>
<SUP> 윗 첨자 </SUP>
<EM> 강조 화면 상에서 이탤릭체 </EM>
<STRONG> EM 보다 강한 강조로 볼드체로 보인다. </STRONG>
<VAR> 변수 이름을 표시할 때 사용, 이탤릭체로 표시 </VAR>
<CITE> 부분 인용 택으로 화면상에서 이탤릭체로 표시 </CITE>
<DFN> 용어 정의 택으로 이탤릭체나 볼드체로 표시 </DFN>
<KBD> 사용자 키보드 입력으로 사용자가 입력하는 글꼴은 고정폭문자로 화면에 표시된다. </KBD>
<CODE> 타이핑한 컴퓨터 프로그램 코드를 표시할 때 사용하는 택으로 화면상에는 고정폭 문자로 표시 </CODE>
<OL> 번호가 표시되는 목록을 작성 </OL>
<UL> 번호가 없는 목록을 작성 </UL>
<LI> 모록의 아이템 작성
<LI>&???; 이스케이프 코드를 사용해서 표시
<MENU> 좀 더 짧은 목록을 위한 TAG </MENU>
<DIR> 주로 디렉토리의 리스트 등을 표시 </DIR>
<A HREF="경로 파일명"> 이름 </A>
<A HREF="URL 주소"> 이름 </A>
<IMG SRC="그림 파일 이름.GIF">
<IMG SRC="그림 파일 이름.GIF" ALIGN=[TOP, MIDDLE, BOTTOM]> 그림의 [윗부분, 가운데, 아래와 글의 윗부분]에 글 정렬
<IMG SRC="그림 파일 이름.GIF" ALT="그림설명"> 그림을 볼 수 없을때 그림 대신 ALT로 지정해준 문자를 화면에 표시함
<BODY BGCOLOR="#ffffff" TEXT="#??????"LINK="#??????" VLINK="#?????? " ALINK="#??????" BACKGROUND="그림파일.JPG">
'#코드' 값의 색을 바탕색,본문, 링크, 방문한 링크, 활성화 링크색, 배경 그림으로 지정
<TABLE> 표작성 </TABLE>
<TABLE BORDER=n CELLSPACING=n WIDTH=n HEIGHT=n> 테두리 두께 n, 셀 간격n, 가로세로 50인 표
<TH> 표 위의 제목을 지정한다. </TH>
<TD> 표의 내용을 적어 준다. </TD>
<CAPTION> 테이블의 제목을 지정한다. </CAPTION>
<TR> 행의 끝을 지정한다. </TR>
<FRAMESET COL="n%, m%:> 2개의 칼럼을 n,m%씩 분할(ROW로 지정하면 가로로 2개로 화면이 n,m%씩 분할)</FRAME>
<FRAME SRC="파일명"> 이미지나 URL을 지정한다.
<FRAME SRC="파일명.HTM" NAME="..."> 지정된 프레임을 부르고 그 분할된 창의 이름을 ... 로 지정한다.
<...TARGET...> NAME으로 지정한 분할된 창을 조절한다. 예를 들면링크를 시키거나 그림을 부를때 분할된 상태에서 TARGET을
지정하면 TARGET에 해당하는 창에서 URL이 나타나거나 그림을 불러올수 있다.
<FRAME SCROLLING="[YES, NO, AUTO]"> 분할된 창의 스크롤 바를 지정, 없앰, 자동선택
3. 문서태그
가. 문서의 구조를 결정 -> 구조태그
<html>~</html>
<head>~</head>
<boay>~</body>
위의 태그들은 html로 작성된 문서의 구조를 표시하기 위해 사용된다. <html>태그는 문서가 HTML로 작성된 것을
표시하는 것으로 문서전체의 가장 처음과 마지막에 위치한다.
<head> 태그안에는 문서의 제목이나 특징, 제작자의 정보등 문서에 관한 정보를 기술한다.
이속에 기술된 정보는 <title>~</title>로 같혀진 텍스트 외에는 화면에 출력되지 않는다.
그리고 <body>~</body>태그 안에 들어있는 내용이 브라우저에 표시되는 문서가 된다. 이 태그들의 순서가 바뀌어서는 안된다.
나. 홈페이지 문서의 제목 넣기
<title>~</title>
문서의 제목을 달때 사용하는 태그로 반드시 <head>~</head>태그 사이에 놓인다. 이 태그로 싸여진 부분이 타이틀바에 표시된다.
<title>태그로 제목을 정하지않으면 파일명이 제목을 대신한다. 한글표시를 하지 못하는 브라우져도 있으므로 가능한 영어로 표기한다.
다. 설명달기
<!-- -->
<!-- -->태그를 사용하면 코멘트를 적어 넣을 수 있다. 브라우져에는 표시되지 않기 때문에 주의할 점 등을 적을때 사용한다.
라. 문서 설명 달기
<meta http-equiv="x" contend="y">
<meta name="x" contend="y">
x=Expires (문서의 유효기간) Keyword (문서의 키워드) Reply-to (문서에 대한 메일 수신처) Index Type (문서를 분류할 때 항목명 등)
y=x에 대한 정보
<meta>태그는 문서에 대한 부가적 정보, 즉 다른 html 태그로 정의 할수 없는 정보를 기술할 때 사용한다.
name이나 http-equiv 옵션으로 정보의 유형을,컨텐트 옵션으로 구체적인 정보를 정의 한다.
4. 페이지 태그
가. 배경색 바꾸기
<body bgcolor="color"> ~ </body>
color=#RRGGBB (color name)
컴퓨터에서 색을 다룰 때는 색의 3원색인 빨강(red) 초록(green) 파랑(blue)을 두자리씩 16진수(0~9 숫자와 a~f의 알파벳 조합)로 표기해 표시한다.
R, G, B 각각에 대해 두자리의 16진수이기 때문에 256×256×256=16,777,126이 된다. 최대 1600만색 이상의 색상표시가 가능한 것이다.
나. 글자색 바꾸기
<body text="color"> ~ </body> 표준 텍스트 색
<body link="color"> ~ </body> 링크 부분의 색
<body alink="color"> ~ </body> 링크를 클릭한 순간부터 데이터를 읽어오고 있는 도중의 색(Active Link)
<body vlink="color"> ~ </body> 이미 읽어온 페이지 링크 부분의 색(Visited Link)
다. 특정 글자색 바꾸기
<font color=option> ~ </font> option=#RRGGBB (color name)
앞에서 텍스트 색을 <body> 태그 옵션으로 지정하는 법을 설명했는데 <font>태그로 색을 지정하는 옵션을 사용해도 텍스트 색을 바꿀수 있다.
이것은 <font>태그로 갇힌 곳에만 적용되기 때문에 부분적인 색지정에 편리하다.
라. 배경에 그림 이용하기
<body background="이미지 파일명">
<body> 태그 옵션으로 배경에 이미지를 사용할 수 있다. 읽어온 이미지는 연속적인 타일 모양으로 표시된다.
마. 여백 설정하기
<body leftmargin="num"> ~ </body>
<body topmargin="num"> ~ </body>
num=픽셀 수
페이지 전체에 걸쳐 왼쪽 혹은 위의 여백폭을 설정한다. 디폴트 마진은 무효가 되고, 0을 지정하면 왼쪽(위) 끝에 정렬된다.
바. 가로선 넣기
<hr option>
option size=x 선의 굵기(픽셀수)
width=x 선의 길이(픽셀수나 %)
align=left (center, right)
noshade
5. 글자태그
가. 줄바꾸기
<br>
소스를 보면 알겠지만 HTML 문서 안에서 줄을 바꿔도 브라우저상에서는 변화가 없다. 브라우저에서 줄을 바꿀 때는 <br> 태그를 사용한다.
나. 단락바꾸기
<p>
줄을 바꿀 때오 같이 문서 안의 단락도 브라우저는 무시한다. 단락을 설정하고 싶을 때는 <p> 태그를 사용한다.
텍스트의 줄이 바뀌면서 한줄만큼의 스페이스가 들어간다.
다. 줄바꾸지 않고 사용하기
<nobr> ~ </nobr>
대개 브라우저에는 텍스트렙(TextWrap)이라는 기능이 있어 텍스트를 한 화면 안에 다 담겨지도록 윈도우 폭에 맞춰 자동적으로
줄을 바꾼다. 그러나 <nobr> ~ </nobr> 태그를 사용하면 그 안에 입력된 텍스트는 줄바꿈 없이 한줄로 표시된다.
라. 강제 줄바꿈
<wbr>
줄을 바꾸고 싶지 않는 <nobr> ~ </nobr> 태그 속의 특정한 위치에서 개행하고 싶을 때 이 태그를 사용한다. <br> 은 강제적으로 줄을 바꾸지만
<wbr> 은 개행 위치의 후보를 지정하는 태그이기 때문에 반드시 그 위치에서 줄이 바뀐다고 한정할 수 없다.
마. 텍스트 위치지정
<p align="option"> ~ </p>
option=left, center, right
행 정렬은 다음의 <hnum align="option"> 태그와 함께 각각 단락을 설정하는 <p> 태그나 폰트 크기를 지정하는 <hnum> 태그의 확장으로
작용한다. <p align="option"> 태그에서 옵션은 left. right, center 를 지정해, 왼쪽 정렬(표준), 중간정렬, 오른쪽정렬을 한다.
바. 텍스트 크기와 위치 지정
<hnum align="option"> ~ </hnum>
num= 1 ~ 6
option=left, center, right
폰트 크기를 지정하는 <hnum align="option"> ~ </hnum> 태그의 확장으로 <p align="option"> 태그와 같이 행 정렬의 위치를 설정한다.
num 에 문자 크기를, 옵션에 위치(좌/우/중간)를 적어준다.
사. div 태그로 행정렬 하기
<div align="option"> ~ </div>
option=left, center, right
아. 가운데 정렬
<center> ~ </center>
브라우저 윈도우 폭에 맞춰 중심에 텍스트나 이미지가 표시된다. 중간에 다른 태그를 넣을 수도 있다.
자. 실제 위치에 그대로 정렬
<pre> ~ </pre>
<pre> 태그로 둘러싸인 HTML 문서에서 입력한 스페이스, 줄바꾸기 등이 브라우저에 그대로 표시된다.
등폭 폰트로 표시되기 때문에 폰트의 아름다움은 떨어지지만 그래도 레이아웃을 자유롭게 할수 있다.
차. 문자열 움직이지 <마퀴 태그>
<marquee option> ~ </marquee>
MS-EXPLORER 확장 기능에 스크롤하는 문자열(Marquee)을 만드는 기능이 있다. 이를 위해 사용되는 것이 <marquee> 태그로써
위치나 움직임등 다양한 설정을 할수 있다.
(1) 위치에 관한 것
align=top, middle, bottom(문자열의 위치)
height=픽셀수나 %(문자열의 높이)
width=픽셀수나 %(문자열의 넓이)
hspace=픽셀수(문자열의 왼쪽 여백)
vspace=픽셀수(문자열의 위쪽 여백)
(2) 움직임에 관한 것
behavior=scroll, slide, alternate
direction=left, right
(3) 회수와 시간에 관한 것
loop=num, -1, infinite
scrolldelay=num
scrollamount=num
(4) 색에 관한 것
bgcolor=#RRGGBB, colorname
-------- 마퀴태그의 사용예 --------------
<marquee> ~~ </marquee><p> : 기본형으로 왼쪽으로 무한 루프이다.
<marquee behavior="alternate"> ~~ </marquee><p> : 오른쪽 왼쪽으로 왔다갔다 한다
<marquee behavior="slide"> ~~ </marquee> <p> : 왼쪽에서 와서 멈춘다
<marquee direction="right"> ~~ </marquee> <p> : 오른쪽으로 계속 흐른다.
<marquee scrollamount="1"> ~~ </marquee> <p> : 움직이는 속도를 나타낸다
<marquee scrollamount="3"> ~~ </marquee> <p> : 움직이는 속도를 나타낸다다<숫자가 적을수록 느리게>
<marquee scrollamount="10"> ~~ </marquee> <p> : 움직이는 속도를 나타낸다다. <숫자가 적을수록 느리게>
<marquee scrolldelay="500"> ~~ </marquee><p> : 움직임이 지연되는 속도를 지정한다.
<marquee loop="3"> ~~ </marquee><p> : 왼쪽으로 3회 반복합니다. 숫자는 횟수를 나타낸다.
<marquee bgcolor="yellow"> ~~ </marquee><p> : 글자에 바탕을 만들어준다다.<노란색 바탕>
<marquee direction="down"> ~~ </marquee><p> : 아래로 계속 떨어지게 한다.
6. 글꼴 태그
가. 글자크기
<Hnum> ~ </Hnum>
num=1~6
<h1>이 최대, <h6>이 최소가 된다. 원래의 문자에 작용하는 태그이기 때문에 문자는 볼드체로 되고, 태그의 앞뒤는 강제적으로
줄이 바뀌어 스페이스가 들어간다. 브라우져에 따라 폰트 지정 태그가 없는 것도 있기 때문에 폰트 크기를 지정할 때 사용되기도 한다.
나. 절대치로 문자크기 바꾸기
<font size=num> ~ </font>
num=1~7
제목 이외의 문자 크기를 지정하는 태그이다. <Hnum> 태그와는 반대로 num 수치가 클수록 문자 크기가 커지므로 주의해야 한다.
또 앞뒤로 줄이 바뀌지도 않으며 스페이스도 들어가지 않는다.
다. 상대치로 글자크기 바꾸기
<basefont size=num>
<font size=±num>
num=1~7
<font size=num> 태그는 직접 문자 크기를 지정했지만 위의 태그로는 우선 base font size로 기준이 되는 크기를 결정하고,
기준 문자 크기로부터 몇 단계 큰지를, 플러스 마이너스를 사용해 상대적으로 지정한다.
HTML문서의 맨 앞에 <basefont size=num> 태그를 적어주면 이후 파일의 끝까지 상대값으로 문자 크기를 변형할 수 있다.
라. 글자모양 꾸미기
<b>~</b> bold
<i>~</i> italic
<s>~</s> strike through
<tt>~</tt> typewriter
<u>~</u> underline
<sup>~</sup> superscript
<sub>~</sub> subscript
<big>~</big> 조금 큰 문자
<small>~</small> 조금 작은 문자
<em>~</em> emphasis 강조
<strong>~</strong> stronger 더 강한 강조
<font face="fontname">
fontname=Arial, Lucida, Sans, Times Roman 등등
<font> 태그에 face 옵션을 달면, 사용하는 서체를 지정할 수 있다. 쉼표(,)로 구분하면 여러종류의 후보 서체를 나열해
그 순서에 따라 사용하는 우선 순위를 매길 수 있다. 방문자의 브라우저에서 어떤 서체도 사용할 수 없을 때는
디폴트로 표시된다. 단 홈페이지 방문자의 브라우저의 서체 설정에 따라 생각한대로 표시되지 않을수 있다.
마. 특수폰트
& 키워드
& 아스키코드
태그 표기에 사용되는 기호(<,>,&,ⓒ,®등)나 키보드에서는 입력할 수 없는 문자를 특수폰트라고 부른다.
이 특수폰트를 브라우저에 표시하고 싶을 때는 name entity라고 불리는 서식을 사용한다.
키워드에는 특정폰트를 표시하는 문자, 아스키코드에는 문자의 아스키코드를 입력한다.
단 모든 특수폰트가 표준으로 지원되는 것이 아니어서 브라우저에 따라서 표시되지 않을수도 있으니 주의해야 한다.
특수폰트중에서는 한칸 띄우기에 쓰이는 가 가장많이 쓰인다.
7. 링크
가. 링크의 사용
다른 문서를 링크 한다. <a href="URL"> ~ </a>
같은 문서안에서 다른 위치로 이동한다.
<a href="#키워드"> ~ </a>
<a name="키워드:> ~ </a>
다른 문서안에서 다른 위치로 이동한다.
<a href="URL#키워드"> ~ </a>
<a name="키워드"> ~ </a>
나. 링크로 메일 발송
<a href="mailto:메일주소"> ~ </a>
링크 설정을 통해 메일 주소를 지정할 때는 위의 태그를 사용한다.
※ link=원하는색 하면 링크글자색
alink=원하는색은 마우스를 눌렀을때색
vlink=원하는색은 한번이라두 누른적있는링크의 색
넣어야 할곳:(a href="주소" link=red alink=white)
8. 그림의 링크
가. 이미지의 사용
<img src="파일명">
이미지를 표시하기 위한 기본 태그이다. src는 source의 의미로 입력한 파일명에 해당하는 이미지를 표시한다.
나. 이미지의 크기변경
<img src="파일명" alt="text">
<img src="파일명" width="x" height="y">
x=가로폭의 픽셀수나 %
y=세로폭의 픽셀수나 %
이미지를 지원하지 않는 브라우저를 사용하는 사람을 위해 그림대신 표시되는 텍스트를 지정하는 것이 alt옵션이다.
이미지가 크다면 읽어오는 동안에 그림대신 글이 먼저 표시된다. 이미지의 크기를 미리 지정해 주면 브라우져가 이미지 크기를
계산하는 시간을 줄일수 있어 속도가 약간 빨라진다.
다. 이미지의 제목 넣기
<img src="파일명" alt="text">
<img src="파일명" width="x" height="y">
x=가로폭의 픽셀수나 %
y=세로폭의 픽셀수나 %
이미지를 지원하지 않는 브라우저를 사용하는 사람을 위해 그림대신 표시되는 텍스트를 지정하는 것이 alt옵션이다.
이미지가 크다면 읽어오는 동안에 그림대신 글이 먼저 표시된다. 이미지의 크기를 미리 지정해 주면 브라우져가 이미지 크기를
계산하는 시간을 줄일수 있어 속도가 약간 빨라진다.
라. 경계선 넣기
<img src="파일명" border="num">
num=경계선의 굵기(픽셀수)
이미지를 링크 버튼으로 설정하면 이미지 주변에 경계선이 그어지지만 일반적으로 이미지에는 경계선이 그어지지 않는다.
border옵션으로 이미지에 경계선을 그리거나 지울수 있다.
마. 이미지와 텍스트의 배열 지정
<img src="파일명" align="option">
option=top, middle(center), bottom(표준), left, right
이미지를 마치 하나의 텍스트와 같이 취급해 문자열 사이에 배치하는 기능이 있다.
align옵션을 사용하면 이미지와 텍스트의 배열을 지정할수 있다. top은 이미지의 위쪽에, middle 혹은 center은 이미지 중간에
bottom은 이미지 하단에 맞추어 배열한다. 지정하지 않을때는 bottom이 적용된다.
이미지 옆에 여러줄의 텍스트를 배치 시키려면 left, right옵션을 선택한다. 이미지가 왼쪽 혹은 오른쪽에 위치하고
나머지 텍스트가 반대쪽에 위치한다. 이미지를 넘어선 글은 이미지 아래에 위치한다.
바. 이미지와 텍스트 간격조정
<img src="파일명" vspace="x" hspace="y">
x=이미지에 대한 상하 여백(픽셀수)
y=이미지에 대한 좌우 여백(픽셀수)
vspace나 hspace는 이미지와 텍스트 사이에 간격을 띄우고 싶을때 사용한다.
<br clear>
<br clear="option">
option=all, left, right
텍스트 중간을 잘라서 그 이하 텍스트는 이미지 아래줄에 이어서 표시한다. left 옵션을 주면 이미지는 왼쪽으로
치우치게 되고 오른쪽에 텍스트가 표시된다.
사. 2단계 이미지 표시
<img src="파일명" lowsrc="이미지파일2">
<img src>태그에 lowsrc 옵션으로 이미지를 지정하면 2단계로 표시할수 있다. 대개 lowsrc쪽에 용량이 작은 이미지파일을 지정한다.
(alt옵션으로 이미지 대신 글을 표시하듯이 적은 용량의 그림을 먼저 띄운다.)
아. 이미지 맵 사용
<img src="파일명" usemap="#맵이름">
<map name>="맵이름"> ~ </map>
<area option>
option shape="rect", "circle", "polygon", "default"
cords="좌표,좌표, ......" (픽셀수)
href="링크하는 url"
nohref
alt="대신 표시되는 텍스트"
서버쪽 이미지맵과 달리 전체 처리를 브라우저가 실행해 서버쪽에서 처리할 필요가 없는 이미지맵 기능이 클라이언트(사용자측) 이미지 맵이다.
<img src="이미지 파일명" usemap="#맵이름"> 은 클라이언트 이미지맵 기능을 사용하는 것과 그때 어떤 맵을 사용하는지를 지정한다.
<map name="맵이름"> ~ </map>은 어떤 이미지가 클라이언트 맵인지를 정의하는 것과 함께 그 맵에 이름을 붙인다.
<img> 태그로부터 맵을 참조할 때 이 이름을 지정하는 것이다. shape는 맵으로 정의된 영역의 모양을 지정한다.
"rect"(직사각형) "circle"(원) "polygon"(다각형) "default"(어떤 영역에도 들어 있지 않은 장소)의 옵션 중 선택해 지정할수 있다.
shape를 지정하지 않으면 "rect"를 지정한 것으로 풀이한다. cords는 영역의 좌표로 픽셀로 지정한다.
href는 링크하는 url을 적는다. 상대경로를 지정한 경우, 맵을 정의 하고 있는 문서의 url이 기준이 된다.
그리고 이미지를 지원하지 않는 브라우저를 위해서 alt로 텍스트를 표현한다.
자. 그림의 위치를 훔져오기
여러분이 많이 질문하는게 파일명에는 어떤걸 넣냐?? 이건말이죠 만약 자신의 홈페이지를 만들때는 자신의 이미지가 있는 경로를 쓰는거죠
예를 들어 (img src="그림/love.jpg") 이건 그림 파일안에 러브란 이미지을 불러내는 거죠 그럼 채팅할때나 방명록에는 파일명을 어떻게 적냐하면
불러낼 그림을 오른쪽 클릭하면 등록정보가 나옵니다.그럼 맨위에 보면 http://www.어쩌고저쩌고가 나오는데 그걸 복사해서 파일명넣는데다 뿥이시면 ok
9. 음악의 링크
먼저 음악 삽입할수 있는건 MIDI 나 MP3 RA 파일을 넣을수 있습니다. 각각 장단점이 있죠 보통 홈페이지에 넣으려면
MIDI 를 사용하죠 목소리는 나오지 않지만 빠르죠 파일이 작으니까요 아주 가끔 MP3를 넣는경우도 꽤 있지만 느려요
나중에 인터넷 사용자가 모두 케이블을 사용하면 또 몰라두 그리고 RA 파일은 듣는 사람이 리얼 플레이가 않설치되어 있으면 못듣는거죠
하지만 목소리가 나온다는 장점이 있죠 mp3의 4/1 크기라나??
(bgsound src="음악주소"> 이런씩입니다. MIDI MP3 wave 가 이걸씁니다.
(embed src="음악주소">이건 넷스케이프에서도 가능한 명령 입니다. 플래시를 하는 사람들이 많이 쓰죠
(a href="리얼 음악주소" target-"new">아무 글자
보시다시피 ra, ram 파일을 불러올때 사용되는 링크태그입니다.
이 태그는 사운드 태그라기보다도 링크태그인데...ra, ram 파일을 링크시키고 밑줄이 쳐진 글자를 클릭하면 리얼플레이어가
실행되면서 음악이 나오게 됩니다.
주로 채팅방에서 많이 사용됩니다.
10. 동영상의 링크
가장 좋은방법은 <A HREF="나도 동영상.mpg">동영상</A>입니다. 먼저 동영상 파일확장자 몇가지만 짚고 넘어가지요..
먼저 MPG(Motion Picture Expert Group) 가 있습니다. 속도가 빠르고 압축 효율이높으며 기종에 관계 없이 사용 가능합니다.
그다음은.. Quicktime 프로그램의 확장자인 MOV 로 원래 매킨토시 운영 체제에서 제공되는 동화상 규약입니다.
그리고 AVI(Audio Video Interleaved)가 있지요. Windows에서 기본으로 제공되는 동화상 입니다.
사용은 편리하지만 압축률이 낮은게 단점이랍니다..
그다음에 Real Video 로 확장자 는 ra, ram 로 Real Audio와 같습니다 rm 사운드만을 지원하던 Real Audio에 비디오 기능을 추가한 것입니다
파일 크기가 작고 전송 속도는 빨라 뮤직 비디오, 실시간 방송 등에 사용됩니다 하지만,화질이 떨어지는 것이 단점 이라면 단점이죠..
가. 동영상넣는 테그
<EMBED autostart=true SRC=NUDE.mov AUTOSTART=true width=n height=n LOOP=true or n>
모든 파일은 기본적으로 이렇게하시면되구요.. 옵션으로.. PLUGINSPAGE="URL" 하시면..
플러그인이 설치되어 있지 않은 사용자를 위하여 해당 플러그인을 제공하는 사이트의 주소를 적어주기도합니다
나. MOV 파일은 이렇게 하셔도 됩니다..
<EMBED SRC=NUDE.mov PLAYEVERYFRAME=true or false AUTOPLAY=true or false width=n
height=n LOOP=true or false or palindrome>
PLAYEVERYFRAME 을 true 로하면 저성능 컴퓨터에서도 모든 프레임을 재생합니다.
LOOP를 palindrome 로 하면 재생과 역재생을 반복합니다.
다. AVI 파일은 이렇게도합니다..
<EMBED SRC="NUDE.avi" SHOWCONTROLS="true or false" NOMENU="true or false" WIDTH=n HEIGHT=n>
SHOWCONTROLS 는 컨트롤러 의 표시여부이구요.. NOMENU 는 플레이 백 메뉴의 표시여부입니다..
라. 그리고 이렇게 쓰기도합니다..
<OBJECT CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="FileName" VALUE="NUDE.avi"> </OBJECT> 이때 사용하는 object는 CLASSID라는 고유한 번호를 지정하여야 합니다.
11. 표 태그
가. 표의 사용
<table> ~ </table> (테두리 없음)
<table> ~ </table border=num> (테두리 있음)
<tr> ~ </tr> (줄을 정의한다)
<td> ~ </td> (칸을 만든다)
td는 table data, tr은 table row <td> ~ </td>로 둘러싼 부분이 하나의 칸으로 만들어 진다.
이것을 가로방향의 칸수만큼 나열해 <tr> ~ </tr>로 둘러싸면 가로1줄이 만들어진다.
이 작업을 반복하면 원하는 줄과 칸만큼 표를 만들수 있게된다.
나. 표의 위치
<table align="option">
option=left, right
align옵션으로 표가 놓이는 위치를 왼쪽이나 오른쪽으로 지정한다.
다. 표의 항목명
<th> ~ </th>
th는 table header의 약자이다.
라. 표의 제목
<capion> ~ </capion>
<capion align="option> ~ </capion>
option=top, bottom
<capion> ~ </capion> 은 표에 제목을 붙이는 테그이다. align=top을 지정했을때는 표의 위에, bottom은 표의 아래 중심에 표시된다.
아무것도 표시하지 않으면 표의 위에 표시된다.
마. 셀의 폭지정
<td rowspan="num"> ~ </td>
<td colspan="num"> ~ </td>
<th rowspan="num"> ~ </th>
<th colspan="num"> ~ </th>
row(줄),column(열)의 span(폭)을 표시하는 옵션이다. rowspan은 세로폭을 colspan은 가로폭을 지정해 여러줄에 겹친 셀을 만든다.
바. 표의 크기
<table width="x" height="y">
x=표의 가로(픽셀 혹은 %)
y=표의 세로(픽셀 혹은 %)
width, height 옵션으로 표의 크기를 지정할수 있다. %로지정하면 브라우저의 윈도우크기에 대한 비율이되어..
크기를 바꾸면 표의 크기도 바뀐다.
사. 괘선의 굵기
<table option> ~ </table>
option
border="num"
cellspacing="num"
cellpadding="num"
<table> 태그에 옵션을 붙이면 괘선의 굵기나 표 안의 텍스트 사이의 간격을 변경할 수 있다.
border는 괘선의 굵기를 지정한다.(디폴트는 1) cellspacing 은 표를 만드는 전체 테두리의 굵기를 지정한다.(디폴트는 2)
cellpadding 은 괘선과 괘선 안의 텍스트 사이의 간격을 조정한다.(디폴트는 1)
아. 셀안의 텍스트 지정
<tr align="x" valign="y"> ~ </tr>
<td align="x" valign="y"> ~ </td>
<th align="x" valign="y"> ~ </th>
x= left, center, right
y= top, middle, bottom, baseline
셀안의 텍스트 위치를 지정하는 옵션입니다. align으로 수평방향을 지정하고 valign으로 수직방향을 지정합니다.
넷스케이프에서 지정할수 있는 baseline은 top과 같지만 각 셀의 텍스트의 첫번째 줄의 베이스라인을 맞추는 성질이 있습니다.
자. 줄바꾸기 제한하기
<td nowrap> ~ </td>
<th nowrap> ~ </th>
일반적으로 표는 브라우저가 자동적으로 계산해 데이터를 각 셀에 잘 넣어주기 때문에 텍스트도 임의의 위치에서
자동적으로 줄이 바뀌게 된다.
이 자동 줄바꾸기를 하지 않게 하기 위해서는 <td>, <th>태그에 nowrap 옵션을 지정한다.
차. 셀에 색넣기
<td option> ~ <td>
option bgcolor=#RRGGBB, colorname
<td>태그에 bgcolor 옵션을 추가하면 표의 각 셀의 배경에 색을 지정할 수 있다. 색 지정은 #RRGGBB방식 혹은 색 이름으로 한다.
12. 프레임 태그
(FRAMESET></FRAMESET) 한 페이지에 두개 이상의 창을 작성 좀어렵운거예요
(FRAMESET COLS="n,*") 부라우저의 화면에 세로 방향으로 금을 그어 화면을 나누는 방식
(FRAMESET ROWS="n,*") 부라우저의 화면에 가로 방향으로 금을그어 화면을 나누는 방식
(FRAME SRC="문서.파일명") 프레임에 불러올 HTML문서 링크
(MARGINWIDTH=n) 프레임 창의 가로 여백을 지정
(MARGINHEIGHT=n) 프레임 창의 세로 여백을 지정
(SCROLLING=YES,NO,AUTO) 프레임 차의 스크롤 지정여부,자동여부
(FRAMEBORDER=n) 프레임의 경계선의 크기를 지정
(NAME= ) 프레임에 고유의 이름을 간단하게 씀
(TARGET=_BLANK,_TOP,파일명) 프레임 창에서 링크된 경우 링크될때 보여주는 창을 지정
제 홈에 보면 위아래한번 왼쪽오른쪽한번으로 쪼개져 있죠 바로그거예요
(FRAMESET COLS="180, *" border=0>
(FRAME SRC="2.html" NAME="frame1">
(FRAMESET ROWS="106, *" border=0>
(FRAME SRC="4.html" NAME="frame3">
(FRAME SRC="3.html" name="frame2">
(/frame>
(/frame>
맨위줄은 왼쪽과 오른쪽을 나눴습니다. 그리고 2째줄은 왼쪽 프레임에
어떤문서를 출력할지 결정합니다.그리곤 왼쪽 프레임의 이름을 붙입니다.
3째줄은 다시 위쪽과 아래쪽을 나눕니다. 그리고 똑같이 연결될 문서랑 이름을 지정합니다. 제일 큰 메인프레임은
맨밑에 오네요 역시 문서랑 이름을 지정합니다. 여기서 이름을 지정하는건 매우 중요합니다. 왼쪽 메뉴를 누르면 오른쪽 메인화면에 나타나게 하기 위해섭니다.
그러니깐 링크태그의 타겟을 프레임 이름으로 해주면 그프레임에 나타나는거죠. 예를들면
(a TARGET="frame2" href="ht.html")(/a)
보통 링크태그에 타겟을 넣어주어 프레임 2 인 메인화면에 ht.html이란 문서를 보여주게 되는겁니다.
