-
728x90
태그정리
메모장에 다음 TAG를 입력하여 HTML문서를 만든다.
<HTML>
<HEAD>
<title> 제목표시줄에 들어갈 내용 </title>
</HEAD>
<BODY> 본문작성(아래 청색태그 이용)
</BODY>
</HTML>
◈ 기본태그
<body bgcolor="색상(yellow)">...문서의 기본 배경색 지정
<body text="색상(red)">...문서의 기본 글자색 지정
<h1> (제목 문서) </h1>...글짜 크기(1~6)
<marquee scrollamount=“1”.속도 scrolldelay=“300”.지연direction=“left”. 방향 height=“500”>.높이 (문서) </marquee>
<font color=“navy” size=“4”> (문서) </font>.글자에 색상과 크기
<hr>.가로줄 치기 </hr>
<br>.줄바꾸기
<P>.줄바꾸고 한칸띄움
<b>.글자굵게 (문서) </b>
<P align=정렬위치>문서</p>.(center, left, right)
① <i></i>. 글자 기울게 , <u></u>.글자에 밑줄
② <font face="돋움체">돋움체 </font>.글꼴 바꿀 때
③ 함께사용 <font size="숫자“ color="색상명" face="글꼴명">문서</font>
④ <a href="링크시킬주소">링크걸어줄문서</a>.링크걸기-현재창에서 열림
⑤ <a href=“링크시킬주소”target="-blank">링크걸어줄문서</a>. 새로운 창에서 열림
(예) 링크시킬주소:<a href=“http://www.yahoo.co.kr">문서</a>
⑥ <img src=“그림주소”.gif>
1. 글자태그
<font size=“크기” color=“색상”>
2. 문서태그
①<body bgcolor="색상값"> .본문에 배경색 넣기
②<body background="그림주소"> .배경 그림을 깔 때
③<body text="색상값"> .전체 글자색을 조절
④<hr> .선 긋기(닫기가 없음)
⑤<hr size="숫자"> .선 두께 조절
⑥<hr width="숫자"> .선 길이 조절
⑦<hr style="color색상값"> .선 색상 조절
⑧<hr width="숫자"or "숫자%"> .숫자만큼 지정된 길이 or 화면 비율에 숫자%만큼 자동조절
⑨<p algin=위치(right, left, center)> </p> .문서의 정열 방향 태그
3. 그림태그
①<img src=“이미지주소” align=“위치”> .그림을 (top, bottom, right, left)
②<div align="위치“> 그림</div> .그림의 위치 정렬 (left, center, right)
③<img src=“그림주소” width="숫자"> .가로크기 조절
height="숫자"> .세로크기 조절
④<img src=“그림주소” border=”숫자" .그림의 가장자리에 테두리(0.1.2..)
⑤<img src=“그림주소” border=숫자 style="border-color."색깔"> .테두리색깔변경
⑥<a href=“링크시킬주소”> .링크걸기
⑦<img src=“그림주소”></a> .현재 창에서 페이지 바뀜
⑧<a href=“링크시킬주소” target="blank"><img src="그림주소"></a> .새창으로 이동
4. 음악태그
①<bgsound src="음악주소"> .재생기가나타나지 않는 태그
②<embed src="음악주소"> .재생기가 나타나게 함
③<embed src="음악주소" hidden="true"> .재생기 안 보임
④<embed src="음악주소"loop=infinite(-1)> .음악이 무한 반복
⑤<a href="음악주소"> 음악 듣기</a> .글씨로 링크할 때 사용
5. 연결태그
①<a href="링크시킬주소" 여기를 누르세요</a> .링크연결, 현재창에서 이동
②<a href="링크시킬주소" target="-blank" 여기를 누르세요.</a> .새 창으로 이동하여 열림
③<a href="연결주소"><img src="그림주소">border=0 </a> .그림에 테두리 없이 연결
④<a href="큰그림주소"><img src="작은그림주소"></a> .작은그림 누르면 큰 그림이 열림
⑤<a href="#" onclick="window.open"링크주소","new","resizable=no channelmode".retun false> 문구</a> .새창이 모니터 화면 꽉 차게 풀 스크린으로 열림
⑥<a href="자료있는곳주소"> -자료 다운받기 클릭, 글씨태그 . 자료다운 받기 태그
6. MARQUEE(마키)태그
bg color=“바탕색” (ffff99.노랑바탕) .흐르는 글자판의 바탕색 지정
align="left,top,middle,bottom" .흘러가는 scrolling 글자들의 줄 위치 지정
<marquee bgcolor="#ffffff"> .하얀색 바탕 위를 흐르는 글자들</marquee>
①direction="left, right, up, down" .글자 흐름의 방향을 지정
②heigt="숫자,% .marquee의 높이를 지정
③hspace="숫자" .글자흐름이 시작되는 위치 설정(-숫자도)
④loop="숫자,-1,nfinite(무제한)" .숫자만큼 또는 무제한 글자를 흐르게 한다
⑤scrollamount="숫자" .흐르는 글자의 속도 조절(숫자 클수록 빠르다)
⑥scrolldelay="숫자" .흐르는 글자들이 멈추며 흐르는 효과(클수록 느림)
⑦vspace="숫자" .상하의 여백을 지정
⑧width="숫자, %" .길이를 지정
(주의)※ 흐르는 글자들을 <font>로 특별한 글꼴을 만들려면 아래와 같이<marquee> 태그 바깥에 <font> 태그를 위치시키는 태그 대칭으로 해야만 한다.
<font face="궁서"><marquee> 궁서글꼴이다</marquee> </font>
(속성1)<marquee behavior=scrol>문서</marquee> .일정방향 속성
(속성2)<marquee behavior=slide>문서</marquee>.흐르다 마지막에서 멈춤
(속성3)<marquee behavior=alternate>문서</marquee> .좌우로 왕복 한다
또는=behavior>,
(속성4)<marquee scrolldelay="숫자(300~)">문서</marquee> .숫자 클수록 스크롤 지연이 많음
(속성5)<marquee scrollamount="숫자(3~)">문서</marquee> .수치가 클수록 스크롤 속도가 빠름
▶작성된 HTML문서를 확인 한다
①메모장의 파일-저장(저장 위치를 바탕 화면 또는 00, 파일 형식을 모든 파일, 이름을 test.html(반드시 영어로)로 입력)-저장
*새로 만든 메모장-새로만들기 (test02.html 로 저장)
②바탕 화면 또는 00에 만들어진 아이콘을 더블 클릭하면 웹브라우저가 실행되고 웹페이지가 표시됨
③카페 블로그 게시판에 옮기기