HTML 실습

HTML 실습

Contents

1.

2.

3.

1. 글자 관련

2. 서식 관련

3. 표 관련

4. 하이퍼링크 관련

5. 프레임 관련

6. 멀티미디어 관련

7. 배경 등 꾸미기 관련

8. 아이템화 관련

3.4 하이퍼링크 태그

1.

3.4 하이퍼링크 태그 <A> </A>

1.

<A>…</A>

기능 다른 문서나 같은 문서 내의 특정 부분으로 연결해주는 역할을 한다.

속성 HREF : 연결할 문서의 URL

NAME : 문서 내의 이동할 책 갈피 이름(책갈피 위치 지정시 사용, 연결할 때

#NAME 형식으로 지정)

TARGET : 새로 열릴 페이지가 실행도리 브라우저나 프레임[현재 창(_SELF), 새 창(_BLANK), 상위 창(_PARENT), 전체 창(_TOP), 해당 창(프레임 이름)]

TITLE : 연결에 대한 설명

사용 예 <A HREF=“http://www.kumoh.ac.kr” TARGET=“_BLANK”>금오공대</A>

<A NAME=“T1”> T1 위치 지정</A>

<A HREF=“#T1”> T1로 이동</A>

☞ TARGET은 FRAME 구분 후의 위치 지정시에도 사용됨

html-tp-page21n.html

3.4 하이퍼링크 태그 <A> </A>

1.

A. <A> 태그 사이 문자는 다른 일반 문자와 색상이 다르며, 보통 밑 줄이 그어져 있다. 또 마우스 포인터를 그 문자 위에 갖다 놓으면 손 모양의 아이콘으로 바뀐다. 링크는 내 컴퓨터 안의 다른 HTML 파일 연결과 내부 문서 연결, 웹의 다른 문서, 그리고 이메일, 파 일 등을 링크시킬 수 있다.

2.

A. 같은 위치에 있는 다른 문서로 연결하기

B. 다른 디렉토리에 있는 문서로 연결하기

C. 다른 웹 사이트로 연결하기

3.4 책갈피 만들기

1.

2.

A. ① NAME 속성을 이용해 문서 내의 특정 부분에 책갈피 이름을 설정

 <A NAME="

name

B. ② 하이퍼링크 설정시 대상 문서와 연결할 책갈피 이름을 지정

 <A HREF="문서url

#name

C. 특히 한 문서 내에서는 문서 URL을 생략할 수 있다.

html-tp-page23n.html

3.5 프레임 문서

1.

A. <FRAMESET> 태그는 문서 창을 어떻게 나눌 것인지를 지정한다.

이 때 ROW는 가로로 분할할 때, COLS는 세로로 분할할 때 사용 되고 픽셀 단위나 비율로 결정한다.

B. <FRAME> 태그는 각 프레임에서 보여줄 웹 문서를 지정하고, 프 레임에 이름을 지정하는 데 사용된다.

C. <FRAME> 태그는 <FRAMESET>에서 창을 나눈 프레임 수만큼 필요하다.

<FRAMESET ROWS=“가로 분할 크기” COLS=“세로 분할 크기”>

<FRMAE SRC=“문서1.HTM” NAME=“LEFT”>

<FRMAE SRC=“문서2.HTM” NAME=“RIGHT”>

</FRAMESET>

3.5 프레임 문서

1.

<FRAMESET> ... </FRAMESET>

기능 화면 분할을 통해 여러 개의 문서를 한번에 보여준다.

속성 COLS : 세로로 나눌 프레임 수(px, %, *). 화면을 세로 방향으로 나눌 때 왼쪽과 오른쪽의 가로폭 크기 값을 쉼표로 구분하여 지정한다. 각 창의 크기는 픽셀과 % 로 표현하여 나눌 수 있는데, % 단위는 화면 전체를 100으로 했을 때의 상대적인 크기를 의미한다. 창을 두 개로 나눌 때는 일반적으로 하나는 n(%)로 지정하고 나머지는 *로 지정한다.

ROWS : 가로로 나눌 프레임 수(px, %, *). 화면을 가로로 나눌 때 위와 아래의 높이 값을 쉼표로 구분해 지정한다.

BORDER : 프레임 경계선 두께

사용 예 <FRAMESET ROWS=“80, *” BORDER=”0”>

<FRAME SRC=“TOP.HTM”>

<FRAME SRC=“BOTTOM.HTM”>

</FRAMESET>

html-tp-page25n-TB/LR/TBR/TBLR.html

3.5 프레임 문서

1.

<FRAME>

기능 프레임 문서를 지정한다.

속성 SRC : 프레임에 출력할 문서의 URL. <FRAME> 태그에 SRC 속성은 반드시 첨가되어야 하 는 것으로 프레임에 불러올 HTML 문서의 파일 이름을 적어준다. 경로가 다르면 경로까지 지정해 주어야 한다.

NAME : 프레임 이름 제공. 프레임을 연결할 때 NAME 속성으로 이름을 주어 연결된 문서가 어느 프레임에 보여질지 지정한다.

SCROLLING : 이동 막대 출력 여부 결정. [스크롤 바를 보여줄 때(yes), 스크롤 바를 보여주지 않을 때(no), 브라우저가 문서의 양에 따라 스크롤 바의 존재 여부를 자동으로 선택할 때(auto)]

NORESIZE : 프레임 크기 조절 불가. 즉, 사용자가 프레임의 경계를 드래그해 프레임의 크기를 조정하지 못하게 하는 것이다.

MARGINWIDTH : 프레임 내의 가로 여백 MARGINHEIGHT : 프레임 내의 세로 여백 사용 예 <FRAMESET ROWS=“80, *” BORDER=”0”>

<FRAME SRC=“TOP.HTM” NAME=“TOPFRAME” FRAMEBORDER=“”

SCROLLING=“no” NORESIZE>

<FRAME SRC=“BOTTOM.HTM” NAME=“BOTTOMFRAME” ID=“MMFRAME”>

</FRAMESET>

target 사용한 frame 예제 설명

html-tp-page26n.html

3.5 프레임 문서

1.

A. 문서 내에 사각형 모양의 프레임을 생성한다. 마치 문서 위에 새 로운 창이 있는 것처럼 보이는데 이를 플로팅(Floating) 프레임이 라 한다. 플로팅 프레임을 만들 때는 <IFRAME> 태그를 사용한다.

<IFRAME>

기능 플로팅 프레임을 만든다.

속성 SRC : 프레임에 출력할 문서의 URL WIDTH : 프레임 내의 가로 여백 HEIGHT : 프레임 내의 세로 여백

ALIGN : 프레임의 위치 정렬 [왼쪽(LEFT), 가운데(CENTER), 오른쪽(RIGHT)]

사용 예 <IFRAME SRC=”http://www.naver.com” ALIGN=“CENTER” WIDTH=800 HEIGHT=300>

</IFRAME>

html-tp-page27n.html

3.6 멀티미디어 태그 – 그림 태그 <IMG>

1.

다양한 속성을 통해 크기나 삽입 위치를 조정 가능하다.

<IMG>

기능 그림(Image)을 삽입한다.

속성 SRC : 그림의 경로(URL)와 파일 이름

BORDER : 그림의 테두리 두께(기본 값은 0)

WIDTH : 그림의 가로 크기 값을 픽셀 값(px)이나 비율 값(%)으로 설정 HEIGHT: 그림의 세로 크기 값을 픽셀 값(px)이나 비율 값(%)으로 설정 ALIGN : 문자열과 함께 사용될 그림의 위치 정렬[그림의 왼쪽에 문자열

정렬(LEFT), 그림의 오른쪽에 문자열 정렬(RIGHT), 그림의 제일 상단과 문자열의 상단을 맞춤(TOP), 문자열의 밑선을 그림의 가운데에 맞춤(MIDDLE), 그림의 하단과 문자열의 하단을 맞춤(BOTTOM)]

ALT : 그림에 대한 설명

HSPACE/HORIZONTAL/SPACE : 그림의 좌우 여백 값 VSPACE/VERTICAL/SPACE : 그림의 상하 여백값

사용 예 <IMG SRC=“IMAGES/PIC.jpg” WIDTH=“32” HEIGHT=“32” ALT=“아이콘”> 시작 html-tp-page28n.html

3.6 멀티미디어 태그 – 그림 태그 <IMG>

1.

3.6 멀티미디어 태그 – 그림 태그 <IMG> / <MAP>

1. 이미지 맵

A. 하나의 이미지를 여러 개의 영역으로 구분하여 서로 다른 하이퍼링크를 만드는 것을 말한다.

B. 이러한 형태는 웹 페이지에서 지도의 특정 부분을 클릭하면 해당지역과 관련된 페이지로 이동하는 형태를 많이 볼 수 있다.

C. <IMG> 태그로 그림을 삽입한 후 <MAP>과 <AREA> 태그를 이용해 맵 을 만든다

<IMG SRC=“이미지URL” USEMAP=“#맵이름”>

<MAP NAME=“맵이름”>

<AREA SHAPE=“맵형태” COORDS=“죄표값” HREF=“링크URL”>

</MAP>

3.6 멀티미디어 태그 – 그림 태그 <IMG> / <MAP>

shape="rect" 사각형 shape="circle" 원

shape="poly" 다각형

html-tp-page31n.html/music

3.6 멀티미디어 태그 – 그림 응용

1.

onmouseover="this.src='bomb_over.jpg'"

onmouseout="this.src='bomb.jpg'">

A. onmouseover 속성은 마우스를 올렸을때 나타낼 이미지를 this.src에 경로를 지정

B. onmouseout 속성은 마우스를 다시 땟을때 나타낼 이미지를 this.src에 경로를 지정

2.

A. this.src 안에 이미지경로는 쌍따옴표가 아닌 그냥 따옴표

html-tp-page32n.html

3.6 멀티미디어 태그 – 그림 응용

<table border="1" width="520" height="38" cellspacing="0" cellpadding="0" background="./NaverBg.jpg“>

<tr>

<td>

<table border="0" valign="middle" cellspacing="0" cellpadding="0“>

<tr>

<td width="10"></td>

<td><a href="http://mail.naver.com"><img src="./Naver1.jpg" border="0"></a></td>

<td width="3"></td>

<td><img src="./Naver2.jpg" border="0"></td>

<td width="3"></td>

<td><img src="./Naver3.jpg" border="0"></td>

<td width="3"></td>

<td><img src="./Naver1.jpg" border="0"></td>

<td width="3"></td>

<td><img src="./Naver2.jpg" border="0"></td>

<td width="3"></td>

<td><img src="./Naver3.jpg" border="0"></td>

<td width="10"></td>

</tr>

</table>

</td>

</tr>

</table>

html-tp-page33n.html

3.6 멀티미디어 태그 - <EMBED>

1.

<EMBED>

기능 브라우저 자체의 실행이 아닌 사용자 컴퓨터에 설치된 미디어플레이어와 같은 플러그인 프로그램에 의해 실행될 수 있게 해준다.

속성 SRC : 재생할 미디어 파일 URL WIDTH : 재생기 가로 크기 값 HEIGHT : 재생기 세로 크기 값

LOOP : 실행 횟수 [계속(TRUE), 한번(FALSE), 횟수(반복 횟수)]

CONTROLLER : 재생기 아래 조절판 유무 [표시(YES), 숨김(NO)]

AUTOSTART : 페이지 로딩시 자동 재생 [자동 재생(YES), 멈춤(NO)]

HIDDEN : 재생기 숨김 유무 [표시(YES), 숨김(NO)]

사용 예 <EMBED SRC=“music.asf” WIDTH=“100” HEIGHT=“100” LOOP=“TRUE”

HIDDEN=“FALSE” AUTOSTART=“TRUE”> </EMGED>

3.6 멀티미디어 태그 - <EMBED>

1.

html-tp-page35n.html

멀티미디어 태그 - <EMBED> 응용

1.

html-tp-page36n.html

3.7 문서 배경 꾸미기 태그

1.

배경색, 배경 이미지, 글자색, 링크색 등을 지정

2.

<BODY> ... </BODY>

기능 문서의 본문 내용으로, 사용자 화면에 보여질 내용이 들어간다.

속성 BACKGROUND : 문서 전체 배경 이미지 BGCOLOR : 문서 전체 배경색

TEXT : 문서 전체 텍스트 색상

LINK : 문서 내의 모든 연결 텍스트 색상 VLINK : 문서 내의 모든 방문한 텍스트 색상 ALINK : 문서 내의 모든 활성 텍스트 색상 LEFTMARGIN : 문서의 왼쪽 여백

TOPMARGIN : 문서의 위쪽 여백 BGSOUND: 배경음악

사용 예 <BODY BACKGROUND=“Yuna1.jpg", BGCOLOR="#099FF", TEXT="#00FFFF", LINK="#00FFFF", ALINK="#99CCCC",

VLINK="#FFFFFF" LEFTMARGIN=”0” TOPMARGIN=”0”> ... </BODY>

html-tp-page37n.html

3.7 문서 배경 꾸미기 태그 - <BODY>

1.

3.7 문서 배경 꾸미기 태그 - <BODY>

1.

3.7 문서 배경 꾸미기 태그 - <BODY>

1.

A. http://se.kumoh.ac.kr/~hytoiy/image/back0.gif...

3.7 문서 배경 꾸미기 태그 - <BODY>

<html>

<head>

<title>배경을 꾸미고 음악 넣기</title>

</head>

<body background="배경이미지.jpg" bgcolor="red" bgsound src="배경음악.wav">

</body>

</html>

또는

<bgsound src="배경음악파일주소" loop="infinite">

html-tp-page41n.html

3.7 움직이는 글자 표현 태그 - <MARQUEE>

1.

<MARQUEE> ... </MARQUEE>

기능 흐르는 문자열을 구현한다.

속성 BEHAVIOR : 흐르는 작동 방식[스크롤(SCROLL), 슬라이드(SLIDE), 왕복(ALTERNATE)]

DIRECTION : 흐르는 이동 방향[왼쪽(LEFT), 오른쪽(RIGHT), 위(UP), 아래(DOWN)]

WIDTH : 흐르는 문자열의 가로 크기 값 HEIGHT : 흐르는 문자열의 세로 크기 값 HSPACE : 흐르는 문자열의 좌우 여백 값 VSPACE : 흐르는 문자열의 상하 여백 값

LOOP : 실행 횟수[무한 반복(INFINITE, -1), 정해진 수(NUMBER)]

SCROLLDELAY : 지연 시간[단위 : msec]

SCROLLAMOUNT : 이동 속도[단위 : 픽셀(px)]

사용 예 <MARQUEE BEHAVIOR=”SCROLL” DIRECTION=”RIGHT> 문자를 흐르게 합니다

</MARQUEE>

html-tp-page42n.html

3.8 목록 태그 - <LI>

1.

2.

A. TYPE=disc, circle, square (소문자로 사용)

B. DISC : ● , CIRCLE: ○ , SQUARE: ■

※ <ul>태그에서도 동일하게 사용됨 예)

<LI TYPE=square> EAST </LI>

<LI> WEST </LI>

<LI TYPE=circle> NORTH </LI>

<LI> SOUTH </LI>

html-tp-page43n.html

3.8 목록 태그 - <OL> 순서 있는 목록

1.

2.

A. TYPE=A, a, I, I, 1 값을 가짐

 A: 대문자 알파벳

 a : 소문자 알파벳

 I : 대문자 로마숫자

 i : 소문자 로마숫자

 1 : 숫자

B. START=n 리스트의 시작 번호를 임의로 바꿀 수 있음

예)

A. <OL TYPE=1 START=2> <LI> </LI> </OL>

html-tp-page44n.html

3.8 목록 태그 - <UL> 순서 없는 목록

1.

2.

A. TYPE=disc, circle, square (소문자 사용)

B. DISC : ● , CIRCLE: ○ , SQUARE: ■

html-tp-page45n.html

홈페이지 관련 사이트 모음

1.

A. http://sakai.ivy.ro/