Download presentation
Presentation is loading. Please wait.
1
Chapter05 HTML 홈페이지 만들기
2
Contents Chapter05 1. 프레임 나누기 2. 홈페이지 만들기 3. 그 밖의 태그 HTML 홈페이지 만들기
3
프레임 나누기 <FRAMESET> 태그
Chapter05 <FRAMESET> 태그 하나의 화면을 몇 개로 분할하고 나눈 화면에 서로 다룬 페이지를 보여주기 위한 역할 화면을 상하로 나누는 ROWS 속성과 화면을 가로로 나누는 COLS 속성이 있음 페이지의 내용을 말하는 것이 아니라 화면 자체를 나누는 역할을 하므로 <BODY> 태그 사이에 넣지 않음 HTML 홈페이지 만들기
4
<FRAMESET> 태그의 속성
Chapter05 HTML 홈페이지 만들기
5
프레임 나누기 <FRAME> 태그 나누어진 화면에 페이지를 표시
Chapter05 <FRAME> 태그 나누어진 화면에 페이지를 표시 기본적으로 SRC 속성을 사용하여 불러올 페이지의 URL을 값으로 지정 <FRAME> 태그는 화면이 나누어진 수만큼 사용하며 <FRAMESET>와 </FRAMESET> 사이에 선언 HTML 홈페이지 만들기
6
프레임 나누기 <FRAME> 태그 형식 : <FRAMESET 속성=값 속성=값.....>
Chapter05 <FRAME> 태그 형식 : <FRAMESET 속성=값 속성=값.....> <FRAME SRC="URL" 속성=값 속성=값.....> </FRAMESET> 속성 : SRC, NAME, SCROLLING, FRAMEBORDER, FRAMESPACING, BORDERCOLOR, MARGINHEIGHT, MARGINWIDTH 예제 : <FRAMESET ROWS="50%, 50%"> <FRAME SRC="First.html" NAME="First"> <FRAME SRC="Second.html" NAME="Second"> </FRAMESET> HTML 홈페이지 만들기
7
<FRAME> 태그의 속성 Chapter05 HTML 홈페이지 만들기
8
프로그램 5-1 Chapter05 [그림 5-1] FRAMETag1의 실행결과 HTML 홈페이지 만들기
![프로그램 5-1 Chapter05 [그림 5-1] FRAMETag1의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/8/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-1+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-1%5D+FRAMETag1%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-1 Chapter05 [그림 5-1] FRAMETag1의 실행결과 HTML 홈페이지 만들기")
9
프로그램 5-2 Chapter05 [그림 5-2] FRAMETag2의 실행결과 HTML 홈페이지 만들기
![프로그램 5-2 Chapter05 [그림 5-2] FRAMETag2의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/9/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-2+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-2%5D+FRAMETag2%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-2 Chapter05 [그림 5-2] FRAMETag2의 실행결과 HTML 홈페이지 만들기")
10
프로그램 5-3 Chapter05 [그림 5-3] FRAMETag3의 실행결과 HTML 홈페이지 만들기
![프로그램 5-3 Chapter05 [그림 5-3] FRAMETag3의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/10/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-3+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-3%5D+FRAMETag3%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-3 Chapter05 [그림 5-3] FRAMETag3의 실행결과 HTML 홈페이지 만들기")
11
프레임 속성 지정하기 <FRAME> 태그의 속성 사용 방법 SCROLLING 속성 스크롤바를 나타낼지의 여부를 지정
Chapter05 <FRAME> 태그의 속성 사용 방법 SCROLLING 속성 스크롤바를 나타낼지의 여부를 지정 ‘yes’, ‘no’, ‘auto’을 사용할 수 있음 기본 값은 ‘auto’로 지정되어 있으며 이는 자동으로 브라우저 창의 크기에 따라 자동으로 스크롤바가 생기고 없어짐 MARGINHEIGHT속성, MARGINWIDTH 속성 프레임의 상하 여백과 좌우 여백을 지정 속성의 값으로는 픽셀 단위로 지정 HTML 홈페이지 만들기
12
프로그램 5-4 Chapter05 [그림 5-4] FRAMETag4의 실행결과 HTML 홈페이지 만들기
![프로그램 5-4 Chapter05 [그림 5-4] FRAMETag4의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/12/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-4+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-4%5D+FRAMETag4%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-4 Chapter05 [그림 5-4] FRAMETag4의 실행결과 HTML 홈페이지 만들기")
13
프레임 속성 지정하기 <FRAME> 태그의 속성 사용 방법 FRAMEBORDER 속성
Chapter05 <FRAME> 태그의 속성 사용 방법 FRAMEBORDER 속성 경계선을 지정하는 ‘yes’ 또는 ‘1’ 값이 있으며 경계선을 없애고자 할 때는 ‘no’ 또는 ‘0’ 값으로 지정 BORDER 속성 생성된 프레임의 두께를 지정 HTML 홈페이지 만들기
14
프로그램 5-5 Chapter05 [그림 5-5] FRAMETag5의 실행결과 HTML 홈페이지 만들기
![프로그램 5-5 Chapter05 [그림 5-5] FRAMETag5의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/14/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-5+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-5%5D+FRAMETag5%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-5 Chapter05 [그림 5-5] FRAMETag5의 실행결과 HTML 홈페이지 만들기")
15
페이지 안에 다른 페이지 포함히기 <IFRAME> 태그 창 안에 다른 창을 삽입
Chapter05 <IFRAME> 태그 창 안에 다른 창을 삽입 SRC 속성을 사용하여 다른 문서의 URL을 지정하며 WIDTH 속성과 HEIGHT 속성을 사용하여 내부에 삽입할 창의 가로, 세로 크기를 지정 HTML 홈페이지 만들기
16
페이지 안에 다른 페이지 포함히기 <IFRAME> 태그 형식 :
Chapter05 <IFRAME> 태그 형식 : <IFRAME SRC="URL" 속성=값 속성=값.....> </IFRAME> 속성 : SRC, NAME, SCROLLING, ALIGN, FRAMEBORDER, WIDTH, HEIGHT, MARGINHEIGHT, MARGINWIDTH 예제 : <BODY> <IFRAME SRC=" </IFRAME> </BODY> HTML 홈페이지 만들기
17
프로그램 5-6 Chapter05 [그림 5-6] IFRAMETag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-6 Chapter05 [그림 5-6] IFRAMETag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/17/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-6+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-6%5D+IFRAMETag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-6 Chapter05 [그림 5-6] IFRAMETag의 실행결과 HTML 홈페이지 만들기")
18
홈페이지 만들기 Chapter05 홈페이지 구조 HTML 홈페이지 만들기
19
프로그램 5-7 Chapter05 [그림 5-7] Banner의 실행결과 HTML 홈페이지 만들기
![프로그램 5-7 Chapter05 [그림 5-7] Banner의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/19/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-7+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-7%5D+Banner%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-7 Chapter05 [그림 5-7] Banner의 실행결과 HTML 홈페이지 만들기")
20
프로그램 5-8 Chapter05 [그림 5-8] Menu의 실행결과 HTML 홈페이지 만들기
![프로그램 5-8 Chapter05 [그림 5-8] Menu의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/20/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-8+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-8%5D+Menu%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-8 Chapter05 [그림 5-8] Menu의 실행결과 HTML 홈페이지 만들기")
21
프로그램 5-9 Chapter05 [그림 5-9] Right의 실행결과 HTML 홈페이지 만들기
![프로그램 5-9 Chapter05 [그림 5-9] Right의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/21/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-9+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-9%5D+Right%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-9 Chapter05 [그림 5-9] Right의 실행결과 HTML 홈페이지 만들기")
22
프로그램 5-10 Chapter05 [그림 5-10] Main의 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-10] Main의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/22/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-10+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-10%5D+Main%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-10 Chapter05 [그림 5-10] Main의 실행결과 HTML 홈페이지 만들기")
23
프로그램 5-10 Chapter05 [그림 5-11] 나의 소개 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-11] 나의 소개 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/23/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-10+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-11%5D+%EB%82%98%EC%9D%98+%EC%86%8C%EA%B0%9C+%EB%A9%94%EB%89%B4%EB%A5%BC+%ED%81%B4%EB%A6%AD%ED%96%88%EC%9D%84+%EA%B2%BD%EC%9A%B0+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-10 Chapter05 [그림 5-11] 나의 소개 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기")
24
프로그램 5-10 Chapter05 [그림 5-12] 포토 앨범 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-12] 포토 앨범 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/24/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-10+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-12%5D+%ED%8F%AC%ED%86%A0+%EC%95%A8%EB%B2%94+%EB%A9%94%EB%89%B4%EB%A5%BC+%ED%81%B4%EB%A6%AD%ED%96%88%EC%9D%84+%EA%B2%BD%EC%9A%B0+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-10 Chapter05 [그림 5-12] 포토 앨범 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기")
25
프로그램 5-10 Chapter05 [그림 5-13] 회원 가입 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-13] 회원 가입 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/25/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-10+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-13%5D+%ED%9A%8C%EC%9B%90+%EA%B0%80%EC%9E%85+%EB%A9%94%EB%89%B4%EB%A5%BC+%ED%81%B4%EB%A6%AD%ED%96%88%EC%9D%84+%EA%B2%BD%EC%9A%B0+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-10 Chapter05 [그림 5-13] 회원 가입 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기")
26
프로그램 5-10 Chapter05 [그림 5-14] 배너의 링크를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-14] 배너의 링크를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/26/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-10+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-14%5D+%EB%B0%B0%EB%84%88%EC%9D%98+%EB%A7%81%ED%81%AC%EB%A5%BC+%ED%81%B4%EB%A6%AD%ED%96%88%EC%9D%84+%EA%B2%BD%EC%9A%B0+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-10 Chapter05 [그림 5-14] 배너의 링크를 클릭했을 경우 실행결과 HTML 홈페이지 만들기")
27
글자 스크롤하기 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할
Chapter05 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할 DIRECTION 속성의 값에 따라 글자가 흐르는 방향이 달라짐 형식 : <MARQUEE 속성=값 속성=값.....> 내용 </MARQUEE> 속성 : DIRECTION, BEFAVIOR, WIDTH, HEIGHT, VSPACE, HSPACE, SCROLLMOUNT, SCROLLDELAY, LOOP, BGCOLOR 예제 : <BODY> <MARQUEE DIRECTION="left"> 흐르는 글자 </MARQUEE> </BODY> HTML 홈페이지 만들기
28
글자 스크롤하기 <MARQUEE> 태그 속성 사용하기 BEHAVIOR 속성
Chapter05 <MARQUEE> 태그 속성 사용하기 BEHAVIOR 속성 ‘scroll’, ‘slide’, ‘altermate’ 값을 가짐 글자의 움직임에 변화를 주는 역할 WIDTH 속성, HEIGHT 속성 픽셀 값 또는 퍼센트(%)로 값을 지정하며 스크롤 범위를 지정 VSPACE 속성, HSPACE 속성 픽셀 값 또는 퍼센트(%)로 값을 지정하는데 흐르는 글자의 상하좌우 여백을 지정하는 역할 HTML 홈페이지 만들기
29
<MARQUEE> 태그의 속성
Chapter05 HTML 홈페이지 만들기
30
프로그램 5-11 Chapter05 [그림 5-15] MARQUEETag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-11 Chapter05 [그림 5-15] MARQUEETag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/30/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-11+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-15%5D+MARQUEETag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-11 Chapter05 [그림 5-15] MARQUEETag의 실행결과 HTML 홈페이지 만들기")
31
이미지 맵 만들기 이미지 맵 만들기 <IMG> 태그의 USEMAP 속성을 사용, 속성의 값은 ‘#맵이름’ 형식
Chapter05 이미지 맵 만들기 <IMG> 태그의 USEMAP 속성을 사용, 속성의 값은 ‘#맵이름’ 형식 <MAP> 태그를 사용하여 삽입한 그림의 어떠한 부분에 링크시킬것인지 지정 <MAP> 태그 안에는 <AREA> 태그를 사용하는데 이 태그를 사용하여 영역을 지정 HTML 홈페이지 만들기
32
이미지 맵 만들기 <AREA> 태그의 SHAPE 속성 링크를 지정할 영역의 모양을 설정하는 역할
Chapter05 <AREA> 태그의 SHAPE 속성 링크를 지정할 영역의 모양을 설정하는 역할 ‘rect’, ‘circle’, ‘poly’ 3가지가 있는데 이에 따라 COORDS 값을 지정하는 방식도 변하게 됨 ‘rect’는 사각형 모양의 영역을 지정하는 값이며 이에 따라 COORDS 값은 왼쪽 위 꼭지점 X, Y 좌표, 오른쪽 아래 꼭지점 X, Y 좌표값, 총 4개의 좌표값을 지정 ‘circle’ 값은 원 모양의 영역을 지정하는 값이며 이에 따라 COORDS 값은 원의 중심 X, Y 좌표, 그리고 원의 반경, 총 3개의 좌표값을 지정 ‘poly’ 값은 다각형 모양의 영역을 지정하며 COORDS 값은 다각형의 각 꼭지점 X, Y 좌표를 지정 HTML 홈페이지 만들기
33
이미지 맵 만들기 이미지 맵 만들기 형식 : <IMG SRC="URL" USEMAP="#맵이름">
Chapter05 이미지 맵 만들기 형식 : <IMG SRC="URL" USEMAP="#맵이름"> <MAP NAME="맵이름"> <AREA SHAPE="속성" COORDS="좌표" HREF="URL"> </MAP> 속성 : SHAPE, COORDS, HREF, TARGET, ALT 예제 : <BODY> <IMG SRC="Flower1.jpg" USEMAP="#001"> <MAP NAME="001"> <AREA SHAPE="rect" COORDS="5,5,100,50" HREF="Flower2.jpg"> </MAP> </BODY> HTML 홈페이지 만들기
34
<AREA> 태그의 속성 Chapter05 HTML 홈페이지 만들기
35
프로그램 5-12 Chapter05 [그림 5-16] MAPTag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-12 Chapter05 [그림 5-16] MAPTag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/35/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-12+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-16%5D+MAPTag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-12 Chapter05 [그림 5-16] MAPTag의 실행결과 HTML 홈페이지 만들기")
36
프로그램 5-12 [그림 5-17] 링크를 선택했을 경우 실행결과 [그림 5-18] 링크를 선택했을 경우 실행결과
Chapter05 [그림 5-17] 링크를 선택했을 경우 실행결과 [그림 5-18] 링크를 선택했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-12 [그림 5-17] 링크를 선택했을 경우 실행결과 [그림 5-18] 링크를 선택했을 경우 실행결과](http://slidesplayer.org/slide/11973613/68/images/36/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-12+%5B%EA%B7%B8%EB%A6%BC+5-17%5D+%EB%A7%81%ED%81%AC%EB%A5%BC+%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84+%EA%B2%BD%EC%9A%B0+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%5B%EA%B7%B8%EB%A6%BC+5-18%5D+%EB%A7%81%ED%81%AC%EB%A5%BC+%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84+%EA%B2%BD%EC%9A%B0+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC.jpg "Chapter05. [그림 5-17] 링크를 선택했을 경우 실행결과. [그림 5-18] 링크를 선택했을 경우 실행결과. HTML 홈페이지 만들기.")
37
메타 태그 사용하기 <META> 태그 웹 페이지의 내용을 담고 있고 웹 브라우저에 정보를 전달하는 역할
Chapter05 <META> 태그 웹 페이지의 내용을 담고 있고 웹 브라우저에 정보를 전달하는 역할 형식 : <META 속성=값 속성=값.....> 속성 : NAME, HTTP-EQUIV, CONTENT, CHARSET, URL 예제 : <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ks_c_ " HTML 홈페이지 만들기
38
메타 태그 사용하기 메타 태그 기능 홈페이지에서 한글이 깨져 나오는 것을 미리 방지
Chapter05 메타 태그 기능 홈페이지에서 한글이 깨져 나오는 것을 미리 방지 HTTP-EQUIV 속성의 값을 ‘Content-Type’로 지정하고 CONTENT 속성의 값은 ‘text/html; charset=euc-kr’ 지정 일정한 시간이 지나면 자동으로 지정된 사이트로 이동하는 기능이 있음 HTTP-EQUIV 속성의 값을 ‘refresh’로 지정해야 하고 시간은 CONTENT 속성의 값으로 지정 HTML 홈페이지 만들기
39
<META> 태그의 속성 Chapter05 HTML 홈페이지 만들기
40
프로그램 5-13 Chapter05 [그림 5-19] METATag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-13 Chapter05 [그림 5-19] METATag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/40/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-13+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-19%5D+METATag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-13 Chapter05 [그림 5-19] METATag의 실행결과 HTML 홈페이지 만들기")
41
프로그램 5-13 Chapter05 [그림 5-20] METATag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-13 Chapter05 [그림 5-20] METATag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/41/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-13+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-20%5D+METATag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-13 Chapter05 [그림 5-20] METATag의 실행결과 HTML 홈페이지 만들기")
42
멀티미디어 삽입하기 <EMBED> 태그
Chapter05 <EMBED> 태그 플러그인 프로그램을 사용해서 표시되는 데이터나 동영상을 웹 페이지에 삽입하기 위해 사용하는 태그 SRC속성을 기본적으로 사용해야 함 AUTOSTART 속성을 사용하여 동영상의 자동 실행 여부를 지정 형식 : <EMBED SRC="URL" 속성=값 속성=값.....> 속성 : SRC, WIDTH, HEIGHT, NAME, AUTOSTART, HIDDEN, LOOP, VOLUME 예제 : <BODY> <EMBED SRC="MusicVideo.avi" WIDTH="300" HEIGHT="300"> </BODY> HTML 홈페이지 만들기
43
<EMBED> 태그의 속성 Chapter05 HTML 홈페이지 만들기
44
프로그램 5-14 Chapter05 [그림 5-21] EMBEDTag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-14 Chapter05 [그림 5-21] EMBEDTag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/44/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-14+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-21%5D+EMBEDTag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-14 Chapter05 [그림 5-21] EMBEDTag의 실행결과 HTML 홈페이지 만들기")
45
배경음악 지정하기 <BGSOUND> 태그 배경음악 지정 WAVE, AIFF, AU, MID 파일형식 지원
Chapter05 <BGSOUND> 태그 배경음악 지정 WAVE, AIFF, AU, MID 파일형식 지원 SRC 속성으로 음악 파일의 경로를 지정하고 LOOP 속성으로 재생 횟수를 지정 형식 : <BGSOUND SRC="URL" LOOP="수치"> 속성 : SRC, LOOP 예제 : <BODY> <BGSOUND SRC="Start.wav" LOOP="infinite"> </BODY> HTML 홈페이지 만들기
46
<BGSOUND> 태그의 속성
Chapter05 HTML 홈페이지 만들기
47
프로그램 5-15 Chapter05 [그림 5-22] BGSOUNDTag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-15 Chapter05 [그림 5-22] BGSOUNDTag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/11973613/68/images/47/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+5-15+Chapter05+%5B%EA%B7%B8%EB%A6%BC+5-22%5D+BGSOUNDTag%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+HTML+%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80+%EB%A7%8C%EB%93%A4%EA%B8%B0.jpg "프로그램 5-15 Chapter05 [그림 5-22] BGSOUNDTag의 실행결과 HTML 홈페이지 만들기")
Similar presentations
