컴퓨터 공부방(임시)
[3강] 하이퍼링크, 멀티미디어 제어
| | 꼬리찌바 |
|
|
|
|
[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,  , 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) 그림과 글자를 어울리게 정렬 : 그리 크지 않은 이미지를 찾아서 글의 오른쪽에 정렬
작성일 : 2009-01-23 15:37
|
|
|
|
|
목록(전체 5건)
|
|
|
|
|
|
|
즐겨찾기 |
|
|
|
|
|
|
|
|
![[중앙당] 당원가입](/images/menu_top_ipdang.gif)
239_HTML_3강_링크_멀티미디어.hwp
