|
|
|
|
|
|
|
|
<HTML Tag>에 대하여 : 현재 내용
목록
| 글자크기(제목) | 줄
바꿈Tag | 문단(시작·종료)Tag
| 문장(이미지)위치정렬Tag | 문장(글자)크기지정Tag
| 색 지정Tag | 위치·색·크기
복합사용
예 | 글꼴 변환 | 문장
들여쓰기 | 문서에 '이미지'배경
넣기 | 문서에 배경색 넣기
| 문장에'이미지'넣기 및 align=속성
| 링크 걸기 : 동일문서
: 다른문서 : 다른문서의
특정 위치로 : 사이트 이동
| border=" " | 이미지에
설명문 넣기 | 하이퍼링크의
색상 | "TARGET"
| 표 만들기 | 프레임
문서 | 프레임 나누기
| 속성 | 프레임'가로/세로'로
만들기 |
|
|
|
|
글자크기
글자크기 지정 태그<H>
: |
|
<H1>HTML문서</H1>
|
HTML문서 |
|
<H2>HTML문서</H2>
|
HTML문서
|
|
<H3>HTML문서</H3>
|
HTML문서
|
|
<H4>HTML문서</H4>
|
HTML문서
|
|
<H5>HTML문서</H5>
|
HTML문서
|
|
<H6>HTML문서</H6>
|
HTML문서 |
|
태그
줄바꿈 태그<BR>
:☞ 줄만 바꿔주는 태그-[<BR>태그는
단독으로
쓰임]
|
|
<BR>줄<BR>바꿈<BR>태그
|
줄
바꿈
태그
|
|
시작·종료
문단의 시작·종료 태그<P>
:☞ '문단'과 '문단'을
구분
|
|
<P>태그 연습...</P><P>연습문장을 작성하고 있습니다.</P>
|
태그 연습...
연습문장을 작성하고 있습니다. |
|
☞참고 : 문단 태그<P>는
종료태그</P>를
생략해도 결과는 같음.
|
|
<P>태그 연습...<P>연습문장을 작성하고 있습니다.</P>
|
태그 연습...
연습문장을 작성하고 있습니다. |
|
정렬
문서의 문장 정렬(위치)
:☞ 화면의 표시위치를
지정.(왼쪽·중앙·오른쪽)
|
|
<p align="left">안녕하세요!</P>
|
안녕하세요!
|
|
<p align="center">정렬
위치</P>
|
정렬 위치
|
|
<p align="right">이렇게
되요.</P>
|
이렇게 되요.
|
|
출력
글자의 크기 지정
:☞ 화면에 나타나는 크기 -
<font size="*"></font> |
|
글자크기
|
<p><font size="1">글자크기</font></p>
|
|
글자크기
|
<p><font size="2">글자크기</font></p>
|
|
글자크기
|
<p><font size="3">글자크기</font></p>
|
|
글자크기
|
<p><font size="4">글자크기</font></p>
|
|
글자크기
|
<p><font size="5">글자크기</font></p>
|
|
글자크기
|
<p><font size="6">글자크기</font></p>
|
|
글자크기
|
<p><font size="7">글자크기</font></p>
|
|
내용
글자의 색 지정 :☞
글자의 색 - <font color="*"></font> |
|
빨간색입니다
|
<p><font color="red">빨간색입니다</font></p>
|
|
파란색이고요
|
<p><font color="blue">파란색이고요</font></p>
|
|
고동색과
|
<p><font color="brown">고동색과</font></p>
|
|
녹색입니다
|
<p><font color="green">녹색입니다</font></p>
|
|
색상표 번호
|
<p><font color="#ff00ff">색상표 번호</font></p>
|
|
☞ 링크
: 색상표
< 216 색상코드 : 의 사용은
"#색상코드No"
순서대로
복합 사용 (정렬·색·크기)
:☞ HTML 입력내용(순서대로): 글자검정은 기본색.
|
|
중앙 정렬 예문
|
<p align="center"><font size="5"
color="blue">중앙 정렬 </font><font size="5"
color="red">예문</font></p>
|
|
중앙 정렬
예문
|
<p align="center"><font size="5"
color="blue">중앙 </font><font size="3">정렬</font><font
size="5" color="blue"></font><font
size="5" color="red">예문</font></p>
|
|
TML 입
글꼴 변환 태그
:☞ <font face="*"></font> |
|
굴림체 글꼴로
|
<p><font face="굴림체">굴림체
글꼴</font></p>
|
|
HTML 태그
문장 들여쓰기 태그 :☞
<blockquote>***</blockquote> |
웃어른이 예의가 없으면 이로 인하여
아랫사람을 부릴 수가 없고, 아랫사람이 예의가 없으
면 이로 인하여 웃어른을 모실 수가 없다.
|
<blockqudte>와 </blockqudte>사이의 문장이 들여쓰기
상태로 표시됩니다.
☞ HTML 입력 내용
<blockquote><p>웃어른이 예의가
없으면 이로 인하여 아랫사람을 부릴 수가 없고,<p>아랫사람이
예의가 없으면 이로 인하여 웃어른을 모실 수가 없다.</blockquote>
|
|
바탕화면
배경 색·이미지 넣기 :
☞
문서의 바탕에 배경이미지-<body background="이미지화일명">
</head> 태그 다음에 바로 들어감.
<body background="../image/back.gif">
배경색
☞
문서의 바탕에 배경 색상넣기-<BODY BGCOLOR = 색상코드 또는 색상명>
</head> 태그 다음에 바로 들어감.
<body bgcolor = #0000FF>
☞ 링크
: 색상표
< 216 색상코드 : 의 사용은
"#색상코드No"
IMG
글 내용중에 이미지 넣기 :☞
<IMG SRC = "이미지위치/이름"
"조건등·등">
조건 : width, height, border ; *"속성" |
|
이해가 잘  되나요
?
|
이해가 잘 <img src="../sen_mal/fm_study.gif"
width="40" height="40"
border="0">되나요 ?
|
|
align="속성" 삽입
: <img src="../sen_mal/fm_study.gif"
align="속성" width="40"
height="40" border="0">
|
|
align="top" 삽입시▷
|
이해가 잘 되나요
?
|
|
align="middle" 삽입시▷
|
이해가 잘 되나요
?
|
|
align="bottom" 삽입시▷
|
이해가 잘 되나요
?
|
|
링크
<링크> 페이지
이동 : 한 문서 내에서, 또는 다른 문서나 타 사이트로 쉽게
이동하기 위해 문서내의 특정 글자나 이미지에 이동할 주소를 연결하여
놓은 것을 말함.
☞ 기본 태그 내용>
: <A HREF = "이동할 위치 및 주소">링크표시대상</A>
문서내
같은 문서 내 이동 :☞
<a href="#이동할위치">링크표시대상</a>
*예문)
HTML 문서의 ①글자크기를 바꾸어 봅시다.
| ②☞
이동하기
① : <p>HTML 문서의 <a href="#글자크기">①글자크기</a>를
바꾸어 봅시다.</p>
② : <p><a href="#글자크기">②☞
이동하기</a></p>
☞ 위
① ②의 "글자크기"는
문서 내용중에 있는 실제부분을
말 합니다.
이동할
다른문서로 이동
:☞
<A HREF = "이동할 화일명">링크표시대상</A>
*예문)
HTML 문서의 ①기본내용을 보며 비교해
볼까요. | ②☞
이동
① : HTML 문서의 <a href="samplefile0.htm">①기본내용</a>을
보며 비교해 볼까요.
② : <p><a
href="samplefile0.htm">②☞
이동</a></p>
특정
다른문서의 특정 위치로 :☞
<A HREF = "화일명#특정 부분 이름">
이동</A>
*예문)
HTML 문서의 ①작업내용을 비교한
것을 볼까요. | ②☞
이동
① : HTML 문서의 <a href="samplefile0.htm#쉽게">①작업내용</a>을
비교한 것을 볼까요.
② : <p><a
href="samplefile0.htm#쉽게">②☞
이동</a></p>
☞위
① ②의 "쉽게"도
이동할 문서의 내용중에 있는 실제부분을
말 합니다.
사이트
다른 사이트로 이동 :☞
<A HREF = " 사이트
주소">글·기타내용</A>
텍스트에 링크 ▷
[사이트 드림위즈로 이동.]
<p>사이트 <a href="http://www.dreamwiz.com/">드림위즈</a>로
이동</p>
이미지에 링크를 한 경우 ▷
['나모'로 ]
<p>'나모'로<a href="http://www.namo.co.kr/"><img src="../te_click.gif" width="80"
height="30" border="0"></a></p>
border
boder :☞
<선의 굵기에 관계한다>
표작업시에 border="1" 등으로
표시가 되어 숫자의 내용으로 굵기를 조절하며, '이미지'에서 테두리 선을 보이게 하는
속성도 가지고 있다(단 '넷스케이프'에서 보이며, 익스플로러 3.0 이하에서는
안됨). 또한 하이퍼링크된 '그림이미지'에 나타나는 테두리 선을 없애는데
border="0" 속성을 이용하여 없앨
수 있다.
|
|
border="1" 일때
|
border="2" 인 경우
|
|
이미지에 설명문 넣기 : <img src=···>에
alt="namo로 이동함"을
삽입
하이퍼
|
|
하이퍼 링크의 색상 :☞
<임의로 색상을 바꾸려면...>
|
|
LINK : 방문하지 않은 곳
ALINK :클릭시 나타나는 색
VLINK :방문 했던 곳
|
<body link = 색상명&코드> -
Link
<body alink = 색상명&코드> -
Activated
<body vlink = 색상명&코드> -
Visited
|
|
예) : <BODY LINK = #EEEEF3 ALINK = #FF0000 VLINK=
#D7D7DC>
|
|
하이퍼링크의 속성은 <body>태그에서 지정되며, 중간에서 임의로
바꿀 수가 없다.
대상화면
'TARGET' :☞
< 링크시 대상화면을 열어,
표시할 장소 >
웹 문서를 몇 개의 프레임으로
나눴을 경우(한 화면을 상하 또는 좌우로
나누어 구분해 놓는 것) 링크되는 파일을 열 대상화면의
지정된 이름을 말합니다.
표
'표' 만들기 : (이해) :☞
<table>태그로 시작 되어 </table>까지
|
| ↓ '웹' 표시화면 |
↓
HTML 입력내용 |
태그
관계 ↓ |
|
|
<p><table border="1">
<td> </p>
</td>
</table>
|
선굵기"1"의 기본표
<table>
<td></td>
</table>
|
|
|
<table border="1">
<tr>
<td width="100">
<p> </p>
</td>
</tr>
<tr>
<td
width="100">
<p> </p>
</td>
</tr>
</table>
|
폭이 "100"인
셀이
위 아래 두줄인
표
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
|
|
|
<table border="1">
<tr>
<td
width="30">
<p> </p>
</td>
<td
width="70">
<p> </p>
</td>
</tr>
<tr>
<td
width="30">
<p> </p>
</td>
<td
width="70">
<p> </p>
</td>
</tr>
</table>
|
위 아래 두줄을
폭이
다른 두개의
셀
'30'과 '70'으로
나눈 상태.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
|
|
|
각 셀의 높이를 원하는 크기로 지정하려면 hight="?"를,
색을 넣으려면 bgcolor="색상명&코드"를, 셀안의 내용
삽입은 <td>내용 삽입되는 곳</td>이
됩니다. 전체 예)【<td width="100" hight=" ?
" bgcolog="색상명&코드">셀안의
내용<td>】이 됩니다. 또한 셀안의 내용을 정렬하려면 align=left·right·center
중에 하나를 선택하여 넣으시면 됩니다.
'표 태그' 내용 이제 이해 되죠. (셀 나눔 태그<td></td>가
줄 나눔 태그<tr></tr>에서 벗어나거나
걸쳐서 사용되지 못하는 것만 주의하면 되죠)
|
|
즉 : <tr>
"몇 개가 되든<td>***</td>는
이 안에서 놀아야 되죠."</tr>
<table> "<tr>***</tr>도
같죠 <tr>***</tr>는
이 안에서 놀아야죠. " </table>
|
|
프레임
프레임 문서 :☞
프레임 셋 태그 - <FRAMESET>
</FRAMESET>
프레임 문서는 웹 화면에 표시되는 한 화면을 둘 또는 그이상으로
나누어 놓은 것을 말하는데, 기본적으로 "화면에 나타날 프레임
형식을 지정하는 문서"와 "각 프레임 안에 표시되는 실제
문서"의 두가지로 구분되며, 기본적으로 필요한 '실제문서'의 수는 프레임으로
화면을 나눈 수 만큼이 됩니다.
|
|
<frameset cols=" ">또는
<frameset
rows=" ">
|
COLS=" "는 화면을
세로로
나눔
ROWS=" "는
화면을 가로로
나눔
" "는 화면을
나누는 할당 정보가 들어감.
|
|
|
|
<frame src=" ">
<frame src="
">
<frame src=" ">
|
SRC=" "는 나눈 각 프레임에
들어갈 문서의 주소(url)를 " "안에 지정하며, <frame
src=" ">의 수는 나눈 프레임
수만큼 지정해 주어야 한다.
|
|
</frameset>
|
프레임셋 종료 태그
|
|
프레임 나누기
프레임 나누기 :☞
<픽셀단위 : % 비율>
|
| 픽셀로 구분('숫자' 기입)
|
<frameset cols="20,*">또는
<frameset
rows="20,30,*">
|
|
|
<frameset cols="20,*">
화면을
세로(좌우 두개)로 나누며
20픽셀의 a와, 나머지전부(*)를 b화면으로
함
|
|
|
<frameset
rows="20,30,*">
화면을
가로방향으로 세개로 나누며
20픽셀의 a와,
30픽셀의 b와 나머지전부(*)를 c화면으로
함.
|
| 비율로 구분('숫자%' 기입)
|
<frameset cols="30%,70%">또는
<frameset
rows="20%,30%,50%">
|
|
|
<frameset cols="30%,70%">
화면을
세로(좌우 두개)로 나누며,전체화면의
30%를 a로, 나머지
70%를 b화면으로
함
|
|
|
<frameset
rows="20%,30%,50%">
화면을
가로방향으로 세개로 나누며
20%의 a와,
30%의 b와 나머지 50%를 c화면으로
함.
|
|
|
☞ " , "
안의 내용에 따라 프레임이 나누어지며,
프레임 수도 정해진다.
따라 프레임
정해진 프레임 'a b c ...'는 :☞
<frame src=" ">로
내용을 지정을 해준다.
<frame src="표시될
화일명&url" name="프레임의
이름을 정함">
|
|
|
<html>
<head><title>프레임연습</title></head>
<frameset
rows="40%,60%">
<frame src="sample1.htm"
name="main">
<frame src="sample2.htm"
name="view">
</frameset>
</html>
|
|
웹 화면에는 위의 40%의 'main'프레임 면에는 'sample1.htm'문서가
표시되며, 아래쪽에 60%를 차지하는 'view'프레임 면에는 'sample2.htm'문서가
차지하게 됩니다.
여기서 name="명(名)"의「명(名)」이
다른 프레임에서 인식할 수 있는 '프레임의 이름'이 됩니다. 곧 문서나
다른 페이지(url)등을 링크할 경우 불러올 문서를 열어 보여줄 Target
프레임(Target="명(名)")이
됩니다.
그외 속성 :
NORESIZE
: 프레임 간의 경계선을 마우스로 끌어 이동시킬 수 없도록 고정.
SCROLLING
: 스크롤바 표시 여부를 지정. 값은 'yes' · 'no'
· 'auto'로 'auto'는 화면의 크기에 따라 알아서
나타나도록 지정함.
<noframe></noframe>
: 프레임을 지원하지 않는 경우를 위해 안내문 삽입태그로 태그안의
내용은 프레임을 지원하는 부라우져에서는 나타나지 않는다.
(가로·세로)
프레임 복합 사용 :
같이 쓰기 : <가로나눔·세로나눔>
|
|
|
<html>
<head><title>복합프레임</title></head>
<frameset cols="20%,*">
<frame src="sample1.htm"
name="main">
<frameset
rows="30%,*">
<frame src="file1.htm"
name="next">
<frame src="test3.htm"
name="view">
</frameset>
</frameset>
</html>
|
|
웹 화면에는 우선 좌측 20%로 지정한 'main'프레임
면에는 'sample1.htm'문서가 표시되며, 좌측
20%를 뺀 나머지 면에서, 위쪽의 30%를 'next'프레임이
차지하여 'file1.htm'문서가 표시되며, 나머지
부분이 'view'프레임이 되어 'test3.htm'문서가
표시되게 됩니다.
|
|
맨위 ▲
top (키보드'Home'키⇔'page
up'키) ▲
top
|
