Chapter05 HTML 홈페이지 만들기 HTML & JavaScript
Contents Chapter05 1. 프레임 나누기 2. 홈페이지 만들기 3. 그 밖의 태그 HTML 홈페이지 만들기
프레임 나누기 <FRAMESET> 태그 Chapter05 <FRAMESET> 태그 하나의 화면을 몇 개로 분할하고 나눈 화면에 서로 다른 페이지를 보여주기 위한 역할 화면을 상하로 나누는 ROWS 속성과 화면을 가로로 나누는 COLS 속성이 있음 페이지의 내용을 말하는 것이 아니라 화면 자체를 나누는 역할을 하므로 <BODY> 태그 사이에 넣지 않음 HTML 홈페이지 만들기
<FRAMESET> 태그의 속성 Chapter05 HTML 홈페이지 만들기
프레임 나누기 <FRAME> 태그 나누어진 화면에 페이지를 표시 Chapter05 <FRAME> 태그 나누어진 화면에 페이지를 표시 기본적으로 SRC 속성을 사용하여 불러올 페이지의 URL을 값으로 지정 <FRAME> 태그는 화면이 나누어진 수만큼 사용하며 <FRAMESET>와 </FRAMESET> 사이에 선언 HTML 홈페이지 만들기
프레임 나누기 <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 홈페이지 만들기
<FRAME> 태그의 속성 Chapter05 HTML 홈페이지 만들기
프로그램 5-1 Chapter05 [그림 5-1] FRAMETag1의 실행결과 HTML 홈페이지 만들기
프로그램 5-2 Chapter05 [그림 5-2] FRAMETag2의 실행결과 HTML 홈페이지 만들기
프로그램 5-3 Chapter05 [그림 5-3] FRAMETag3의 실행결과 HTML 홈페이지 만들기
프레임 속성 지정하기 <FRAME> 태그의 속성 사용 방법 SCROLLING 속성 스크롤바를 나타낼지의 여부를 지정 Chapter05 <FRAME> 태그의 속성 사용 방법 SCROLLING 속성 스크롤바를 나타낼지의 여부를 지정 ‘yes’, ‘no’, ‘auto’을 사용할 수 있음 기본 값은 ‘auto’로 지정되어 있으며 이는 자동으로 브라우저 창의 크기에 따라 자동으로 스크롤바가 생기고 없어짐 MARGINHEIGHT속성, MARGINWIDTH 속성 프레임의 상하 여백과 좌우 여백을 지정 속성의 값으로는 픽셀 단위로 지정 HTML 홈페이지 만들기
프로그램 5-4 Chapter05 [그림 5-4] FRAMETag4의 실행결과 HTML 홈페이지 만들기
프레임 속성 지정하기 <FRAME> 태그의 속성 사용 방법 FRAMEBORDER 속성 Chapter05 <FRAME> 태그의 속성 사용 방법 FRAMEBORDER 속성 경계선을 지정하는 ‘yes’ 또는 ‘1’ 값이 있으며 경계선을 없애고자 할 때는 ‘no’ 또는 ‘0’ 값으로 지정 BORDER 속성 생성된 프레임의 두께를 지정 HTML 홈페이지 만들기
페이지 안에 다른 페이지 포함히기 <IFRAME> 태그 창 안에 다른 창을 삽입 Chapter05 <IFRAME> 태그 창 안에 다른 창을 삽입 SRC 속성을 사용하여 다른 문서의 URL을 지정하며 WIDTH 속성과 HEIGHT 속성을 사용하여 내부에 삽입할 창의 가로, 세로 크기를 지정 HTML 홈페이지 만들기
페이지 안에 다른 페이지 포함히기 <IFRAME> 태그 형식 : Chapter05 <IFRAME> 태그 형식 : <IFRAME SRC="URL" 속성=값 속성=값.....> </IFRAME> 속성 : SRC, NAME, SCROLLING, ALIGN, FRAMEBORDER, WIDTH, HEIGHT, MARGINHEIGHT, MARGINWIDTH 예제 : <BODY> <IFRAME SRC="http://www.ehan.co.kr"> </IFRAME> </BODY> HTML 홈페이지 만들기
프로그램 5-6 Chapter05 [그림 5-6] IFRAMETag의 실행결과 HTML 홈페이지 만들기
홈페이지 만들기 Chapter05 홈페이지 구조 HTML 홈페이지 만들기
프로그램 5-7 Chapter05 [그림 5-7] Banner의 실행결과 HTML 홈페이지 만들기
프로그램 5-8 Chapter05 [그림 5-8] Menu의 실행결과 HTML 홈페이지 만들기
프로그램 5-9 Chapter05 [그림 5-9] Right의 실행결과 HTML 홈페이지 만들기
프로그램 5-10 Chapter05 [그림 5-10] Main의 실행결과 HTML 홈페이지 만들기
프로그램 5-10 Chapter05 [그림 5-11] 나의 소개 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
프로그램 5-10 Chapter05 [그림 5-12] 포토 앨범 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
프로그램 5-10 Chapter05 [그림 5-13] 회원 가입 메뉴를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
글자 스크롤하기 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할 Chapter05 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할 DIRECTION 속성의 값에 따라 글자가 흐르는 방향이 달라짐 형식 : <MARQUEE 속성=값 속성=값.....> 내용 </MARQUEE> 속성 : DIRECTION, BEFAVIOR, WIDTH, HEIGHT, VSPACE, HSPACE, SCROLLMOUNT, SCROLLDELAY, LOOP, BGCOLOR 예제 : <BODY> <MARQUEE > 흐르는 글자 </MARQUEE> </BODY> HTML 홈페이지 만들기
글자 스크롤하기 <MARQUEE> 태그 속성 사용하기 BEHAVIOR 속성 Chapter05 <MARQUEE> 태그 속성 사용하기 BEHAVIOR 속성 ‘scroll’, ‘slide’, ‘altermate’ 값을 가짐 글자의 움직임에 변화를 주는 역할 WIDTH 속성, HEIGHT 속성 픽셀 값 또는 퍼센트(%)로 값을 지정하며 스크롤 범위를 지정 VSPACE 속성, HSPACE 속성 픽셀 값 또는 퍼센트(%)로 값을 지정하는데 흐르는 글자의 상하좌우 여백을 지정하는 역할 HTML 홈페이지 만들기
<MARQUEE> 태그의 속성 Chapter05 HTML 홈페이지 만들기
프로그램 5-11 Chapter05 [그림 5-15] MARQUEETag의 실행결과 HTML 홈페이지 만들기
멀티미디어 삽입하기 <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 홈페이지 만들기
<EMBED> 태그의 속성 Chapter05 HTML 홈페이지 만들기
배경음악 지정하기 <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 홈페이지 만들기
Html+javaScript HTML을 이용한 홈페이지 만들기 프로젝트 설명
￭ 홈페이지 : 한 페이지를 3개(위, 왼쪽, 오른쪽)의 프레임으로 나눈다. Html+javaScript 지시 사항 ￭ 홈페이지 : 한 페이지를 3개(위, 왼쪽, 오른쪽)의 프레임으로 나눈다. 배너 창(위 : 아래 = 20: 80) 메뉴 창 본문 창 (좌 : 우 = 25: 75) ￭ 배너 창 : 위 프레임을 광고가 뜨는 배너 창으로 설정하고 배너 이미지 "banner.gif" 파일을 삽입한다. 배너와 텍스트를 클릭하면 현재 페이지에 한국정보처리학회 홈페이지(http://www.kips.or.kr) 가 나타나도록 한다. ￭ 메뉴 창 : 아래 왼쪽 프레임을 메뉴 창으로 설정한다. 배경색은 #FCF5C5을 사용하고 가장 위에는 녹색 H2 글씨로 "메뉴창"이라는 텍스트를 삽입한다. 메뉴는 다섯 가지로 구성한다. ￭ "나의 소개" 메뉴 : "나의 소개" 메뉴를 클릭하면 "my.html" 파일이 본문 창에 뜨도록 설정한다. "my.html" 파일은 배경 이미지로 "eva2.jpg"파일을 사용하고, 글자색은 주황색과 하얀색을 사용하여 개인 프로필을 만든다.
￭ "회원 가입" 메뉴 : "회원 가입" 메뉴를 클릭하면 3주차에서 만든 "ch3.html" 파일이 새 창에 뜨도록 설정한다. Html+javaScript 지시 사항 ￭ "윤동주 님의 시" 메뉴 : "윤동주 님의 시" 메뉴를 클릭하면 1주차에서 만든 "ch1.html" 파일이 본문 창에 뜨도록 설정한다. ￭ "회원 가입" 메뉴 : "회원 가입" 메뉴를 클릭하면 3주차에서 만든 "ch3.html" 파일이 새 창에 뜨도록 설정한다. ￭ "링크 사이트" 메뉴 : "링크 사이트" 메뉴를 클릭하면 "link.html" 파일이 새 창에 뜨도록 설정한다. "link.html" 파일은 배경색으로 #1E90FF을 사용하고, 웹 사이트 상에 있는 이미지 주소를 가져와 이미지를 삽입하고, 링크를 설정한다. ￭ 본문 창 : 아래 오른쪽 프레임을 본문 창으로 설정한다. 배경 이미지는 "is32a.jpeg" 파일을 사용하고, 가장 위에는 하얀색 H2의 글씨로 "본문창"이라는 텍스트를 삽입한다.