Download presentation
Presentation is loading. Please wait.
1
Chapter05 HTML 홈페이지 만들기 HTML & JavaScript
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/16514181/96/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/16514181/96/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/16514181/96/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/16514181/96/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
페이지 안에 다른 페이지 포함히기 <IFRAME> 태그 창 안에 다른 창을 삽입
Chapter05 <IFRAME> 태그 창 안에 다른 창을 삽입 SRC 속성을 사용하여 다른 문서의 URL을 지정하며 WIDTH 속성과 HEIGHT 속성을 사용하여 내부에 삽입할 창의 가로, 세로 크기를 지정 HTML 홈페이지 만들기
15
페이지 안에 다른 페이지 포함히기 <IFRAME> 태그 형식 :
Chapter05 <IFRAME> 태그 형식 : <IFRAME SRC="URL" 속성=값 속성=값.....> </IFRAME> 속성 : SRC, NAME, SCROLLING, ALIGN, FRAMEBORDER, WIDTH, HEIGHT, MARGINHEIGHT, MARGINWIDTH 예제 : <BODY> <IFRAME SRC=" </IFRAME> </BODY> HTML 홈페이지 만들기
16
프로그램 5-6 Chapter05 [그림 5-6] IFRAMETag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-6 Chapter05 [그림 5-6] IFRAMETag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/images/16/%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 홈페이지 만들기")
17
홈페이지 만들기 Chapter05 홈페이지 구조 HTML 홈페이지 만들기
18
프로그램 5-7 Chapter05 [그림 5-7] Banner의 실행결과 HTML 홈페이지 만들기
![프로그램 5-7 Chapter05 [그림 5-7] Banner의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/images/18/%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 홈페이지 만들기")
19
프로그램 5-8 Chapter05 [그림 5-8] Menu의 실행결과 HTML 홈페이지 만들기
![프로그램 5-8 Chapter05 [그림 5-8] Menu의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/images/19/%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 홈페이지 만들기")
20
프로그램 5-9 Chapter05 [그림 5-9] Right의 실행결과 HTML 홈페이지 만들기
![프로그램 5-9 Chapter05 [그림 5-9] Right의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/images/20/%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 홈페이지 만들기")
21
프로그램 5-10 Chapter05 [그림 5-10] Main의 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-10] Main의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/images/21/%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 홈페이지 만들기")
22
프로그램 5-10 Chapter05 [그림 5-11] 나의 소개 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-11] 나의 소개 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/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-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 홈페이지 만들기")
23
프로그램 5-10 Chapter05 [그림 5-12] 포토 앨범 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-12] 포토 앨범 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/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-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 홈페이지 만들기")
24
프로그램 5-10 Chapter05 [그림 5-13] 회원 가입 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
![프로그램 5-10 Chapter05 [그림 5-13] 회원 가입 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/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-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 홈페이지 만들기")
25
글자 스크롤하기 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할
Chapter05 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할 DIRECTION 속성의 값에 따라 글자가 흐르는 방향이 달라짐 형식 : <MARQUEE 속성=값 속성=값.....> 내용 </MARQUEE> 속성 : DIRECTION, BEFAVIOR, WIDTH, HEIGHT, VSPACE, HSPACE, SCROLLMOUNT, SCROLLDELAY, LOOP, BGCOLOR 예제 : <BODY> <MARQUEE > 흐르는 글자 </MARQUEE> </BODY> HTML 홈페이지 만들기
26
글자 스크롤하기 <MARQUEE> 태그 속성 사용하기 BEHAVIOR 속성
Chapter05 <MARQUEE> 태그 속성 사용하기 BEHAVIOR 속성 ‘scroll’, ‘slide’, ‘altermate’ 값을 가짐 글자의 움직임에 변화를 주는 역할 WIDTH 속성, HEIGHT 속성 픽셀 값 또는 퍼센트(%)로 값을 지정하며 스크롤 범위를 지정 VSPACE 속성, HSPACE 속성 픽셀 값 또는 퍼센트(%)로 값을 지정하는데 흐르는 글자의 상하좌우 여백을 지정하는 역할 HTML 홈페이지 만들기
27
<MARQUEE> 태그의 속성
Chapter05 HTML 홈페이지 만들기
28
프로그램 5-11 Chapter05 [그림 5-15] MARQUEETag의 실행결과 HTML 홈페이지 만들기
![프로그램 5-11 Chapter05 [그림 5-15] MARQUEETag의 실행결과 HTML 홈페이지 만들기](http://slidesplayer.org/slide/16514181/96/images/28/%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 홈페이지 만들기")
29
멀티미디어 삽입하기 <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 홈페이지 만들기
30
<EMBED> 태그의 속성 Chapter05 HTML 홈페이지 만들기
31
배경음악 지정하기 <BGSOUND> 태그 배경음악 지정 WAVE, AIFF, AU, MID, MP3 파일형식 지원
Chapter05 <BGSOUND> 태그 배경음악 지정 WAVE, AIFF, AU, MID, MP3 파일형식 지원 SRC 속성으로 음악 파일의 경로를 지정하고 LOOP 속성으로 재생 횟수를 지정 형식 : <BGSOUND SRC="URL" LOOP="수치"> 속성 : SRC, LOOP 예제 : <BODY> <BGSOUND SRC="Start.wav" LOOP="infinite"> </BODY> HTML 홈페이지 만들기
32
Html+javaScript HTML을 이용한 홈페이지 만들기 프로젝트 설명
33
￭ 홈페이지 : 한 페이지를 3개(위, 왼쪽, 오른쪽)의 프레임으로 나눈다.
Html+javaScript 지시 사항 ￭ 홈페이지 : 한 페이지를 3개(위, 왼쪽, 오른쪽)의 프레임으로 나눈다. 배너 창(위 : 아래 = 20: 80) 메뉴 창 본문 창 (좌 : 우 = 25: 75) ￭ 배너 창 : 위 프레임을 광고가 뜨는 배너 창으로 설정하고 배너 이미지 "banner.gif" 파일을 삽입한다. 배너와 텍스트를 클릭하면 현재 페이지에 한국정보처리학회 홈페이지( 가 나타나도록 한다. ￭ 메뉴 창 : 아래 왼쪽 프레임을 메뉴 창으로 설정한다. 배경색은 #FCF5C5을 사용하고 가장 위에는 녹색 H2 글씨로 "메뉴창"이라는 텍스트를 삽입한다. 메뉴는 다섯 가지로 구성한다. ￭ "나의 소개" 메뉴 : "나의 소개" 메뉴를 클릭하면 "my.html" 파일이 본문 창에 뜨도록 설정한다. "my.html" 파일은 배경 이미지로 "eva2.jpg"파일을 사용하고, 글자색은 주황색과 하얀색을 사용하여 개인 프로필을 만든다.
34
￭ "회원 가입" 메뉴 : "회원 가입" 메뉴를 클릭하면 3주차에서 만든 "ch3.html" 파일이 새 창에 뜨도록 설정한다.
Html+javaScript 지시 사항 ￭ "윤동주 님의 시" 메뉴 : "윤동주 님의 시" 메뉴를 클릭하면 1주차에서 만든 "ch1.html" 파일이 본문 창에 뜨도록 설정한다. ￭ "회원 가입" 메뉴 : "회원 가입" 메뉴를 클릭하면 3주차에서 만든 "ch3.html" 파일이 새 창에 뜨도록 설정한다. ￭ "링크 사이트" 메뉴 : "링크 사이트" 메뉴를 클릭하면 "link.html" 파일이 새 창에 뜨도록 설정한다. "link.html" 파일은 배경색으로 #1E90FF을 사용하고, 웹 사이트 상에 있는 이미지 주소를 가져와 이미지를 삽입하고, 링크를 설정한다. ￭ 본문 창 : 아래 오른쪽 프레임을 본문 창으로 설정한다. 배경 이미지는 "is32a.jpeg" 파일을 사용하고, 가장 위에는 하얀색 H2의 글씨로 "본문창"이라는 텍스트를 삽입한다.
Similar presentations
