★ 기본적인 태그사용방법모음
기본용어설명
ㅇ HTTP(Hyper Text Transfer Protocol)
WWW를 지원하는 서버와 클라이언트간의 정보규약을 위한규약
ㅇ HyperLink
하나의 문서에 나타낼 수 있는 각 미디어들 사이의 상호연결
ㅇ HTML(Hyper Text Markup Language)
문서 내부에 관련된 새로운 문서로 연결하는 Link생성, Hypermedia형식의 문서작성
ㅇ URL(Uniform Resource Locator)
인터넷상의 특정 형태의 파일, 문서, 그 문서에 접근하는 방법의 형식 http://호스트명.도메인/디렉토리/문서명(파일명)
<html>html의 시작
<head>브라우져 창의 제목으로 표시되는 부분</head>
<body>웹 페이지상에 나타내고자 하는 모든 정보를 표시하는 부분</body>
</html> html의 끝
HTML 환경설정
브라우져 상의 표시되는 배경, 이미지, 글자색, 연결문서, 표시색 등을설정, 각 부속성 들을 동시에 사용가능 하구요.
<BODY BACKGROUND="grim.jpg" BGCOLOR="#ffffff" TEXT="#000000"
LINK="#000fff" VLINK="#ffab96">
BACKGROUND : 배경에 들어갈 그림 지정
BGCOLOR : 배경색 지정 값은 24비트
TEXT : 텍스트색깔
LINK : 아직 사용하지 않은 링크 색 지정
VLINK : 이미 가본 색 지정
ALINK : Accept Link
위에서 사용되는 색상들은 RGB 값은 16진수로 조정한것으로 6자리 숫자중 앞의 두개는 RED다음 두개는 Green 마지막은 Blue의 값. 즉 각 색상들은0x000000 ~ 0xffffff 까지 가능하답니다..
글꼴의 표기
1) 글자의 크기
ㅇ <H1-6>문장</H1-6>표기방식:주로 제목에 사용
(크기:6,5,4,3,2,1)순
ㅇ <font size=3>글자</font>표기방식:n=1~7(크기:7,6,....,1)순
▷ 문장의 중간이나 문장중 일부분에 적용시 사용
▷ 구조 : <font size=n>글자</font>
2) 글자의 강조 : 브라우져 의존적
ㅇ <b>문장</b> : 굵은 글자표시
ㅇ <i>문장</i> : 이탤릭체
ㅇ <tt>문장</tt> : 타이프라이터체
ㅇ <u>문장</u> : 글자에 밑줄
ㅇ <blink>문장</blink> : 글자에 깜박거리는 효과
문장과 문단을 나누는 태그
1) link break :
<br>
ㅇ 문장 끝에서 '엔터'를 한번 친 효과
2) paragraph :
<p>
ㅇ 문장 끝에서 엔터를 두번 친 효과
3) horizontal rule :
<hr>
ㅇ 입체형의 수평선을 그어 아래, 위의 텍스트를 나누어 줌
ㅇ 브라우져의 폭에 따라 다르며, 두께, 위치, 길이등의 속성이 부가
<hr align=left|right|center>*수평선의 위치를 배열
<hr size=n>*선의 굵기를 지정하는 속성
<hr width=n>*선의 폭을 지정하는 속성
<hr size=4 width=50% align=left>*각각의 속성을 혼합사용</font>
특정문장을 규정하는 태그
1) 사용자 입력방식대로 문장표기 : Preformatted, 태그내부에 다른 태그 표시 가능
ㅇ HTML은<br>, <p>태그를 인식해야만 다음행으로 이동
ㅇ <pre></pre>태그를 이용하면 입력한 문장형태로 브라우져 표시
ㅇ 구조 : <pre>문장</pre>
ㅇ 부가속성 : <pre width=n>문장</pre>, 글자간 폭 지정
2) 태그를 무시하는 Preformatted tag :
ㅇ 태그와 같은 속성이나 태그 내부에 다른 태그를 무시하고 출력
ㅇ 구조 : <xmp>문장
3) 주소나 URL표시 :
ㅇ E-mail주소나 URL표기시 사용 : 이탤릭체 표시(연결은 아님)
ㅇ 구조 : <adderss>문장</address>
4) 인용문 쓰기
ㅇ 구조 : <blockquote>문장</blockquote>
5) 페이지 가운데 정렬
ㅇ 구조 : <center>태그 </center>
6) 문장정렬 시키는 태그
ㅇ 구조 : <p align=left | center | right>문장
하이퍼 링크
<a href="*.html#">연결문서 설명</a>
연결시킬 파일의 경로 및 파일 이름과 단축버튼으로 사용할 텍스트 또는 아이콘 지정 연결된 문서는
하이라이트 또는 파란색으로 표시(브라우져특성반영)
1) 링크시키기 (앵커와 하이퍼텍스트 레퍼런스)
사용예>
<a href="solomoon.com">솔로문의홈</a>
2) 문서의 특정부분으로 연결하기
ㅇ 동일문서내의 특정부분으로 연결 : 목차 --> 설명문으로 이동
사용예>
<a href="../winsock.html#소개">윈도우 소켓에 대한 소개</a>
<a name="소개">윈도우 소켓(winsock.dll</a>
* 목차중 '윈도우 소켓에 대한 소개'를 클릭하면 브라우져는 현 재 디렉토리위의 'winsock.dll'을 읽은 후
'소켓'이라고 지정 된 부분으로 옮겨갑니다.
페이지에 이미지 넣기
문서내에는 GIF, JPG, XBM의 포맷을 사용할 수 있습니다.
1) 페이지에 이미지를 추가하는 방법
ㅇ 구조 :
<img src = "URL">
ㅇ 정렬 : 이미지 파일을 텍스트에 맞추어 정렬
ㅇ 구조 :
<img src="URL" align=left | right | texttop | absmiddle | baseline |
bsbottom>
사용예
<img src="http://user.chollian.net/~solomoon/img8/007.jpg" align=right alt="배경그림">
ㅇ 기타 사용되는 태그들
alt : 이미지 설명 (사용예:alt="배경그림")
border : 테두리 경계
width, height : 이미지 크기 확대, 축소
hspace, vspace: 이미지에 여백주기
테이블 작성하기
일반문서에서 이용되는 테이블과 동일 다양한 형태의 페이지 작성 가능
1) 기본형식
ㅇ <table></table> : 도표의 시작과 끝을 표시
ㅇ <tr></tr> : 도표의 줄을표시
ㅇ <th> : 도표안의 제목을 표시, 기본값으로 중앙소트와
굵은글씨체(bold)
ㅇ <td></td> : 도표안에 데이터 입력부분, 기본값으로 왼쪽정렬
과 일반 문자체
ㅇ 구조
<tr><th colspan=픽셀수rowspan=픽셀수></tr>
<tr><td align=left|center|right valign=top|middle|bottom></td>
2) 기타 사용되는 태그들
ㅇ <table border=픽셀수>: 테이블 바깥쪽 테두리 두께 설정
cellspacing : 테이블 전체선의 굵기 지정
width,height : 테이블 크기지정
cellpadding : 테이블안에 여백지정
ㅇ <th colspan=숫자> : 큰 제목 밑에 작은 제목을 만들고,
그밑에 세로로 데이타 셀 작성
rowspan : 큰 제목 옆에 작은 제목을 만들고,
그옆으로 가로로 데이타 셀 작성
ㅇ <td align=left|center|right> : 텍스트들의 정렬방식
ㅇ <td valign=top|middle|bottom> : 셀내에서 정렬방식
html의기본구조
html문서는 head와 body 두 부분으로 나누어진다.
head는 문서의 설명부분이고 body는 문서의 내용을 기술하는 부분이다.
--------------------------------------------------
<html> --------------------------- html 문서의 시작
<head> --------------------------- 문서의 설명
<title>문서의제목</title> --------- 브라우저의 상단에 표시되는 문서제목
<body> --------- 밑에 있는 body을 설정하시면되요.*^^*
사이에 브라우저상에 보여줄 내용 -- 텍스트와 그림으로 구성된 몸체
(java-script.applet.등등 이곳에 자신의 원하는 모양을 만드세요)
</body>
</html> -------------------------- html문서의 끝
▶ <head> ∼ </head>
이 태그안에 기술될 수 있는 태그는 다음과 같다.
♡.<title> 문서의 제목
♡.<script> 여러 가지 언어의 스크립트정의
♡.<meta> 여러 가지 메타 태그 기술
♡.<style> 문서에서 사용될 여러 가지 스타일 정의
▶ <body> ∼ </body>
문서의 실제 내용을 기술해 주는 부분이다.
◈◈.body 바탕설정.◈◈
--------------------------------------------------<html>
<head>
<title>문서의제목</title>
<body background=배경그림 bgcolor=색상 text=색상 link=색상 vlink=색상 alink=색상>
사이에 브라우저상에 보여줄 내용 -- 텍스트와 그림으로 구성된 몸체
(java-script.applet.등등 이곳에 자신의 원하는 모양을 만드세요)
</body>
</html>
--------------------------------------------------
<body background=배경그림 bgcolor=색상 text=색상 link=색상 vlink=색상 alink=색상>
기본적으로 이런식.*^^* <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
♡.background는 배경그림을 지정한다.
(예을들어 이런식으로 해주시면 됨니다.(ex.background=good.gif)그냥 url을 적어주셔도 됨니다.)
♡.bgcolor는 배경색상을 지정한다.(ex.bgcolor=yellow)색상코드을 넣으세용.^^;;
♡.text는 해당 페이지의 문자 색상을 지정한다.
♡.link는 링크가 되어 있는 문자의 색상을 지정한다.
♡.vlink는 링크가 되어있는 문서 중 한번 방문했던 링크의 색상을 지정한다.
♡.alink는 링크가 되어있는 문자를 마우스로 선택하는 순간 변하는 색상을 지정한다.
※.body 설정하는데 불필요 할뗴는 사용하고 싶은것들만 사용할수 있습니다.
예을들어 <body bgcolor=green> 이렇케만 사용하시면 바탕화면 색상만 설정할수 있겠죠.^^;;
★.그밖에 명령어들.*^^*
ⓐ.bgproperties="fixed" 배경그림을 고정시켜주는 명령어입니다.*^^*
ⓑ.topmargin 화면에 나타나는 문서의 위 여백을 지정합니다.
ⓒ.leftmargin 화면에 나타나는 문서의 좌측여백을 지정합니다.
예제)━☞ <body bgproperties="fixed" topmargin=10 leftmargin=10>
======================================================
<iframe>
이것은 익스플로러에서만 적용되었던 태그이기 때문에 그 막강한 기능에 비해 사용하는 분들은 적은 편이었습니다. 그런데 최근 모습을 드러낸 넷스케잎 6.0버전에서 드뎌 이 태그를 지원하므로 앞으로는 넷스케잎에서 지원되지 않음을 아쉬워하며 '울며겨자먹기' 식으로 사용할 필요는 없을 듯하네요.
<IFRAME SRC="xxx.html" width=xxx height=xxx></IFRAME>
너무 간단한가요? 몇가지 속성에 대해서 더 알아보기로 하죠.
속성 설명
SRC : 프레임 내부에 보여질 문서 혹은 사이트의 URL을 지정
FRAMEBORDER : 프레임 둘레에 테두리 표시 여부를 결정하는 속성. "0"은 테두리가 없는 상태로 표시되고, "1"은 테두리 표시
WIDTH와 HEIGHT : 프레임의 넓이와 높이를 지정하는 속성으로 픽셀 값이나 비율(%)로 지정
MARGINWIDTH와 MARGINHEIGHT : 프레임과 나타날 내용 사이의 수평 여백과 수직 여백을 지정하는 속성
SCROLLING : 프레임의 스크롤 바의 유무를 지정. yes:스크롤바가 나타남, no:스크롤 바가 나타나지 않음, auto(default):브라우저가 필요에 따라 수평, 수직의 스크롤 바를 표시
NAME : iframe의 이름을 지정. 이것은 target 속성으로 연결시킬 때 필요
글자들이 줄넘기 하듯.... 위로 뜨게 하는 방법이래요....
<font size=2 color=색깔 face=가을체><marquee direction=up behavior=alternate height=25>할말
</marquee><br>
-----------------------------------------------------------------------
글자가 깜빡이는 방법
<font size=2 color=색깔 face=가을체><marquee behavior=alternate width=300 scrollamount=3000>할말</font>
size 크기 3 4 5 .....
-----------------------------------------------------------------------
글자를 옆으로 움직이기
<marquee behavior=alternate><b><font size=2 color=색깔 face=가을체>할말</font><font door=purple>
-----------------------------------------------------------------------
글씨 올라가게 하기
<marquee direction ="up" scrollamount ="2" style = "text-align:center">
<font size=2 color=색깔 face=가을체>
===================================================
배경화면에 글씨가 올라가기
<TABLE border="0" cellpadding="0" background="배경화면 주소"> <TD width="600" height="450"><P align="center"><marquee style="text-align:center;" behavior="loop" direction="up" scrolldelay="7" scrollamount="1"><br>
<br><FONT color="white" size="3"face="바탕체"><B><br>
<center><br><B>( 버클리풍의 사랑 노래 - 詩 황동규 )</B><br><br>
내 그대에게 해주려는 것은<br>
꽃꽃이도<br>
벽에 그림달기도 아니고<br>
땅의 가슴 간지르기 시작했음을 알아내는 것,<br>
이국(異國) 햇빛 속에서 겁없이.<br><br>
</marquee></TD></font></p></TR></TABLE><br>
</center><br>
</font><br></TD>
**참고: 글이 올라가는 속도는 scrolldelay로 조절함(숫자가 클수록 느림)
=====================================================
글자에 배경넣기
<marquee align="middle" behavior="slide" bgcolor="#ff0000" border=5>내용은 여기에.</font></marquee>
** 이렇게 하면 빨간배경에 글씨가 나타남
======================================================
글씨에 마우스가 닿으면 작은상자가 생김
<A HREF=""on-MOUSEOVER = "alert('날 건드리지 마세요!!!')")>내용적고 끝에</A>
=====================================================
링크시기는 방법
1]기초링크(여기를 누르세요)
<a href="...링크시키고 싶은주소 ..">여기를 누르세요 </a>
2]이미지에 링크를 할경우
<a href="...링크시키고 싶은주소 .."><img src=" 이미지주소"></a>
3]링크를 하면서 글씨에 배경넣기
<a href="...링크시키고 싶은 주소">
<span style="background-color:pink;">
<font face="굴림" size="3" color="PURPLE"> 여길 누르세요</a></span></p>
-->이렇게 하면 핑크바탕에 보라색글씨로 링크가 됨
4] 3]번에 마우스를 대면 작은 설명줄이 나오는걸 추가함
<p align="left" title="이곳은 잡동사니를 모은곳입니다"><a href="...링크시키고 싶은 주소">
<span style="background-color:pink;">
<font face="굴림" size="3" color="PURPLE"> 여길 누르세요</a></span></p>
======================================================
글자를 움직이기 위해서는 글자 앞뒤에
<MARQUEE> ~~ </MARQUEE> 를 써넣으면 돼지요.
<예제>
<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>
아래로 계속 떨어지는 경우입니다.
=====================================================
◆ 홈페이지에 사운드 넣기 ◆
※ 자동으로 사운드 재생(넷스케이프 3.0, 익스플로러 3.0 이상)
문서가 열리면서 배경음악이 연주 됨.
◆ <[안내]태그제한으로등록되지않습니다-BGSOUND> 태그를 이용하여 Source 지정.
태그의 방법: <[안내]태그제한으로등록되지않습니다-BGSOUND SRC = " ">
※" " 안에 음악파일의 주소를 씁니다.
※ 사용가능한 옵션: LOOP (반복회수를 지정)
◆<A HREF>태그를 이용한 방법
태그의 방법 : ＜A HREF="sound.mid">음악파일</A>
'음악파일'이란 링크부분을 마우스로 클릭하면 'sound.mid'라는 사운드파일을 플레이해주는 윈도우가 새롭게 만들어지고, 사운드 파일을 로드한 다음 자동으로 플레이됩니다.
◆ 배경음악으로 사운드넣기
<EMBED invokeURLs=false SRC="background.wav" AUTOSTART=true HIDDEN=true LOOP=infinite>
사운드를 배경음악으로 넣고 싶을 때는 <EMBED invokeURLs=false>태그를 이용하면 됩니다. 그러면 홈페이지에 접속하면 자동으로 배경음악이 나옵니다.
여기에 쓰인 'AUTOSTART' 옵션은 'TRUE'라고 지정하면 홈페이지에 접속하면 자동으로 음악이 플레이 됩니다. 원하지 않을 경우에는 'FALSE'로 지정하면 됩니다.
'HIDDEN'옵션은 음악을 정지하고 플레이하는 조절판이 보이지 않게 할 때 쓰이는 옵션입니다. 조절판을 보이게 하려면 WIDTH=100 HEIGHT=60 같은 식으로 조절판의 크기를 적어주면 됩니다. 물론 위치도 ALIGN="right"처럼 해주면 조절판이 오른쪽으로 위치되죠.
'LOOP'옵션은 음악을 몇 번 반복할 것인가를 정해 주게 됩니다. infinite는 계속 반복을 나타냅니다. 한번만 나오게 하려면 'LOOP=1'이라고 적어주면 되겠죠?
======================================================
프레임에서 이미지 여백을 없애려면
프레임에서 상하 좌우 여백을 없애주려면 해당 프레임의 frame 태그 부분에 marginwidth=0과 marginheight=0 을 지정해 주면 됩니다.
<html>
<head>
</head>
<frameset cols="180,*" frameborder=0 framespacing=0 border=0>
<frame name="xxx" src="frame1.html" marginwidth=0 marginheight=0>
<frame name="yyy" src="frame2.html">
</frameset>
</html>
☞ 프레임이 없는 문서의 화면 상단 여백을 없애려면?
<body marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>
=====================================================
링크페이지로 이동할 때 화면이 춤을 춥니다.
<meta http-equiv="page-enter" content="RevealTrans(duration=5,transition=23)">
<meta http-equiv="page-exit" content="RevealTrans(duration=5,transition=23)">
=====================================================
br 을 생략할수 있는 방법
태그문서에서 줄바꾸기를 할때 <br>을 붙여야 하는데
줄마다 일일이 붙이기 번거롭습니다.
이런땐 문서의 맨위에 <pre>....문서끝에</pre>를 해주면
줄마다 <br>을 해주지 않고 enter만 해줘도
줄바꾸기로 인식을 합니다..
이곳의 게시판이나, 드림게시판은 이 pre가 적용된거죠..
====================================================
문서에 여백주기
게시판에 글을 올릴때 그냥 쓰면
왼쪽화면에 너무 붙어서 모양이 안납니다.
일일이 스페이스바를 누르면 불편하고..등등
문서의 맨위에
[p style="margin-left:150px"]
를 한다음 글을쓰면
왼쪽여백이 생겨서 글이 안쪽으로 들어옵니다.
150px는 상황에 맞게 숫자를 조절하고..50,60,70..등등
====================================================
공지사항 창넣기
일단 공지로 넣고싶은 파일을 만든다음,
공지사항이 뜨길원하는 파일에 아래소스를 적주세요..
<script language="java-script">
var menuWindow = null; function openNoticeWindow()
{noticeWindow=window.open('공지로 넣고싶은 파일이름','게시판','resizable=no,
scrollbars=no,width=327,height=405,left=250,top=125') ;}
openNoticeWindow() ;</script>
