Chapter05 HTML 홈페이지 만들기 misuk6389@naver.com
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 홈페이지 만들기
프로그램 5-5 Chapter05 [그림 5-5] FRAMETag5의 실행결과 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 홈페이지 만들기
프로그램 5-10 Chapter05 [그림 5-14] 배너의 링크를 클릭했을 경우 실행결과 HTML 홈페이지 만들기
글자 스크롤하기 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할 Chapter05 <MARQUEE> 태그 글자가 브라우저 창에 흐르게 하는 역할 DIRECTION 속성의 값에 따라 글자가 흐르는 방향이 달라짐 형식 : <MARQUEE 속성=값 속성=값.....> 내용 </MARQUEE> 속성 : DIRECTION, BEFAVIOR, WIDTH, HEIGHT, VSPACE, HSPACE, SCROLLMOUNT, SCROLLDELAY, LOOP, BGCOLOR 예제 : <BODY> <MARQUEE DIRECTION="left"> 흐르는 글자 </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 홈페이지 만들기
이미지 맵 만들기 이미지 맵 만들기 <IMG> 태그의 USEMAP 속성을 사용, 속성의 값은 ‘#맵이름’ 형식 Chapter05 이미지 맵 만들기 <IMG> 태그의 USEMAP 속성을 사용, 속성의 값은 ‘#맵이름’ 형식 <MAP> 태그를 사용하여 삽입한 그림의 어떠한 부분에 링크시킬것인지 지정 <MAP> 태그 안에는 <AREA> 태그를 사용하는데 이 태그를 사용하여 영역을 지정 HTML 홈페이지 만들기
이미지 맵 만들기 <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 홈페이지 만들기
이미지 맵 만들기 이미지 맵 만들기 형식 : <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 홈페이지 만들기
<AREA> 태그의 속성 Chapter05 HTML 홈페이지 만들기
프로그램 5-12 Chapter05 [그림 5-16] MAPTag의 실행결과 HTML 홈페이지 만들기
프로그램 5-12 [그림 5-17] 링크를 선택했을 경우 실행결과 [그림 5-18] 링크를 선택했을 경우 실행결과 Chapter05 [그림 5-17] 링크를 선택했을 경우 실행결과 [그림 5-18] 링크를 선택했을 경우 실행결과 HTML 홈페이지 만들기
메타 태그 사용하기 <META> 태그 웹 페이지의 내용을 담고 있고 웹 브라우저에 정보를 전달하는 역할 Chapter05 <META> 태그 웹 페이지의 내용을 담고 있고 웹 브라우저에 정보를 전달하는 역할 형식 : <META 속성=값 속성=값.....> 속성 : NAME, HTTP-EQUIV, CONTENT, CHARSET, URL 예제 : <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ks_c_5601-1987" HTML 홈페이지 만들기
메타 태그 사용하기 메타 태그 기능 홈페이지에서 한글이 깨져 나오는 것을 미리 방지 Chapter05 메타 태그 기능 홈페이지에서 한글이 깨져 나오는 것을 미리 방지 HTTP-EQUIV 속성의 값을 ‘Content-Type’로 지정하고 CONTENT 속성의 값은 ‘text/html; charset=euc-kr’ 지정 일정한 시간이 지나면 자동으로 지정된 사이트로 이동하는 기능이 있음 HTTP-EQUIV 속성의 값을 ‘refresh’로 지정해야 하고 시간은 CONTENT 속성의 값으로 지정 HTML 홈페이지 만들기
<META> 태그의 속성 Chapter05 HTML 홈페이지 만들기
프로그램 5-13 Chapter05 [그림 5-19] METATag의 실행결과 HTML 홈페이지 만들기
프로그램 5-13 Chapter05 [그림 5-20] METATag의 실행결과 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 홈페이지 만들기
프로그램 5-14 Chapter05 [그림 5-21] EMBEDTag의 실행결과 HTML 홈페이지 만들기
배경음악 지정하기 <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 홈페이지 만들기
<BGSOUND> 태그의 속성 Chapter05 HTML 홈페이지 만들기
프로그램 5-15 Chapter05 [그림 5-22] BGSOUNDTag의 실행결과 HTML 홈페이지 만들기