[3강] 하이퍼링크, 멀티미디어 제어

○ ver 1 (2009.1.23)

□ 지난주 복습

- 단축키 : 공통(^C, ^X, ^V, ^A), 문서(^O,^S,^N,^F,^H,^P,^Z)

- HTML 문서의 기본구조

- <FONT> 태그 <font size=1 face=굴림 color=#cccccc>~</font>

- 글자 관련태그 (font, &nbsp, br, p, center, u, i...),

□ 링크(하이퍼링크)

내용	태그	속성	비고
■ 기본 형식	<a href="test.htm">~</a>
새창에서 열기	<a href="http://jinbo21.net" target=_blank>~</a>	target=_blank(새창), _self(현재창), _top(전체창), _parent(상위프레임)
상대경로	<a href="test.htm">~</a> <a href="./test.htm">~</a> <a href="../test.htm">~</a> <a href="/test.htm">~</a> <a href="dirname/test.htm">~</a>		상대경로, 절대경로의 이해. 장단점
절대경로	<a href="http://jinbo21.net/test.htm">~</a>
현재 페이지 내에서 링크	<a href="#이름">~</a> <a name="이름">~</a>
font 태그와의 혼합 (○)	<a href=1.htm><font color=red>연습</font></a>
font 태그와의 혼합 (×)	<font color=red><a href=1.htm>연습</a></font>
메일 링크	<a href=“mailto:eco239@hanmail.net”>이메일</a>

★ 실습 :

1) 링크 걸기 실습 (새창에서 열기, 메일 링크, 현재 페이지 내에서 링크)

□ 멀티미디어

내용	태그	속성	비고
■ 기본 형식	<img src="image.jpg">
응용(이미지 사이즈, 테두리 조정)	<img src="image.jpg" width=300 height=200 border=1 hspace=5 vspacer=10 alt="이미지 설명글" align="right" onfocus=“blur();>	width(가로 크기. px 또는 %), height(세로크기), border(테두리 두께), hspace(가로 여백), vspace(세로여백), alt(설명글), align(left,right,center), onfocus=blur()	-‘알씨’를 이용해서 이미지 크기 줄이기, 이미지 자르기 -픽셀에 대한 이해 - 이미지 형식에 대한 이해(jpeg,gif,png,bmp)
응용(그림의 일부분에만 링크걸기-사각형)	<img src="~" usemap="#MapName"> <map name="MapName"> <area shape="rect" coords="50,100,200,60" href="#"></map>
응용(그림의 일부분에만 링크걸기-원형)	<img src="~" usemap="#MapName"> <map name="MapName"> <area shape="circle" coords="50,100,20" href="#"></map>
응용(그림의 일부분에만 링크걸기-다각형)	<img src="~" usemap="#MapName"> <map name="MapName"> <area shape="poly" coords="10,50,90,50,90,70,130..." href="#"></map>
응용(배경 음악)	<bgsound src="music.mid" loop="-1">	loop(반복횟수. -1은 무한대)	음악파일
응용(배경 이미지)	<body background="image.jpg">
동영상/음악/플래쉬	<embed src="movie.wmv" autostart="true" hidden="false" loop="true" width="400" height="300">	true, false	*동영상:avi,wmv,mpg(mpeg),mov,rm(ram) *음악:wma,mid,wav,mp3 *플래쉬: swf
동영상/음악/플래쉬 (정밀제어)	<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300"> <PARAM NAME="Filename" VALUE="mms://61.37.35.4/vod/028.wmv"> <param name="CurrentPosition" value="167"> <param name="ClickToPlay" value="true"> <param name="AutoSize" value="true"> <param name="ShowControls" value="true"> <param name="ShowAudioControls" value="true"> <param name="ShowTracker" value="true"> <param name="ShowStatusBar" value="false"> <param name="ShowCaptioning" value="false"> <param name="AutoRewind" value="true"> <param name="Enabled" value="true"> <param name="EnableTracker" value="true"> <param name="SendWarningEvents" value="true"> <param name="SendErrorEvents" value="true"> <param name="SendKeyboardEvents" value="false"> <param name="SendMouseClickEvents" value="false"> <param name="SendMouseMoveEvents" value="false"> <param name="TransparentAtStart" value="false"> <param name="ShowDisplay" value="false"> <param name="EnablePositionControls" value="true"> <param name="PlayCount" value="1"> <param name="EnableContextMenu" value="true"> <param name="ShowPositionControls" value="true"> <param name="ShowGotoBar" value="false"> <param name="Volume" value="0"> <param name="SelectionStart" value="-1"> <param name="SelectionEnd" value="498"> <param name="AutoStart" value="true"> </OBJECT>

★ 실습 :

1) 이미지 훔쳐오기 : 주요 사이트에서 ①한 개의 이미지 절대경로를 알아내서, 내 문서에 이미지를 나타내고, 이미지를 클릭하면 새창에서 해당 사이트로 이동하게 링크 걸기

※ 이미지 절대경로 알아내기 : 해당 이미지에서 마우스 오른쪽 버튼 클릭 ⇒ 속성 ⇒ 주소 드래그 ⇒ 복사(^C)

※ 마우스 오른쪽 버튼 사용을 막아놓은 경우에는 소스 분석 또는 미지 캡쳐(Print Screen) 후 수정

2) 그림과 글자를 어울리게 정렬 : 그리 크지 않은 이미지를 찾아서 글의 오른쪽에 정렬