HTML 실습
Contents 1. HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련
3.4 하이퍼링크태그 1. 하이퍼링크란윈도우의도움말같은형태로문서안에특정문자열이나이미지를마우스로클릭했을때관련된다른문서, 그림, 음악, 동영상등을연결
3.4 하이퍼링크태그 <A> </A> html-tp-page21n.html 1. 하이퍼링크설정하기 : <A> 태그 <A> </A> 기능다른문서나같은문서내의특정부분으로연결해주는역할을한다. 속성 사용예 HREF : 연결할문서의 URL NAME : 문서내의이동할책갈피이름 ( 책갈피위치지정시사용, 연결할때 #NAME 형식으로지정 ) TARGET : 새로열릴페이지가실행도리브라우저나프레임 [ 현재창 (_SELF), 새창 (_BLANK), 상위창 (_PARENT), 전체창 (_TOP), 해당창 ( 프레임이름 )] TITLE : 연결에대한설명 <A HREF= http://www.kumoh.ac.kr TARGET= _BLANK > 금오공대 </A> <A NAME= T1 > T1 위치지정 </A> <A HREF= #T1 > T1 로이동 </A> TARGET 은 FRAME 구분후의위치지정시에도사용됨
3.4 하이퍼링크태그 <A> </A> 1. A 는 "Anchor( 닻 )" 의약자 A. <A> 태그사이문자는다른일반문자와색상이다르며, 보통밑줄이그어져있다. 또마우스포인터를그문자위에갖다놓으면손모양의아이콘으로바뀐다. 링크는내컴퓨터안의다른 HTML 파일연결과내부문서연결, 웹의다른문서, 그리고이메일, 파일등을링크시킬수있다. 2. 다음과같이다양하게하이퍼링크를설정할수있다. A. 같은위치에있는다른문서로연결하기 B. 다른디렉토리에있는문서로연결하기 C. 다른웹사이트로연결하기
3.4 책갈피만들기 1. 책갈피는문서내의특정부분에이름을정해두고이위 치에연결되도록하는기능 2. <A> 태그를이용한책갈피설정 A. 1 NAME 속성을이용해문서내의특정부분에책갈피이름을설정 <A NAME="name">..</A> B. 2 하이퍼링크설정시대상문서와연결할책갈피이름을지정 <A HREF=" 문서 url#name">... </A> C. 특히한문서내에서는문서 URL 을생략할수있다. html-tp-page23n.html
3.5 프레임문서 1. 프레임을지정하는기본형식 <FRAMESET ROWS= 가로분할크기 COLS= 세로분할크기 > <FRMAE SRC= 문서1.HTM NAME= LEFT > <FRMAE SRC= 문서2.HTM NAME= RIGHT > </FRAMESET> A. <FRAMESET> 태그는문서창을어떻게나눌것인지를지정한다. 이때 ROW는가로로분할할때, COLS는세로로분할할때사용되고픽셀단위나비율로결정한다. B. <FRAME> 태그는각프레임에서보여줄웹문서를지정하고, 프레임에이름을지정하는데사용된다. C. <FRAME> 태그는 <FRAMESET> 에서창을나눈프레임수만큼필요하다.
3.5 프레임문서 1. <FRAMESET> 태그 <FRAMESET>... </FRAMESET> 기능화면분할을통해여러개의문서를한번에보여준다. 속성 사용예 COLS : 세로로나눌프레임수 (px, %, *). 화면을세로방향으로나눌때왼쪽과오른쪽의가로폭크기값을쉼표로구분하여지정한다. 각창의크기는픽셀과 % 로표현하여나눌수있는데, % 단위는화면전체를 100 으로했을때의상대적인크기를의미한다. 창을두개로나눌때는일반적으로하나는 n(%) 로지정하고나머지는 * 로지정한다. ROWS : 가로로나눌프레임수 (px, %, *). 화면을가로로나눌때위와아래의높이값을쉼표로구분해지정한다. BORDER : 프레임경계선두께 <FRAMESET ROWS= 80, * BORDER= 0 > <FRAME SRC= TOP.HTM > <FRAME SRC= BOTTOM.HTM > </FRAMESET> html-tp-page25n-tb/lr/tbr/tblr.html
3.5 프레임문서 1. <FRAME> 태그 target 사용한 frame 예제설명 <FRAME> 기능프레임문서를지정한다. 속성 SRC : 프레임에출력할문서의 URL. <FRAME> 태그에 SRC 속성은반드시첨가되어야하 는것으로프레임에불러올 HTML 문서의파일이름을적어준다. 경로가다르면경로까지 지정해주어야한다. NAME : 프레임이름제공. 프레임을연결할때 NAME 속성으로이름을주어연결된 문서가어느프레임에보여질지지정한다. SCROLLING : 이동막대출력여부결정. [ 스크롤바를보여줄때 (yes), 스크롤바를 보여주지않을때 (no), 브라우저가문서의양에따라스크롤바의존재여부를자동으로 선택할때 (auto)] NORESIZE : 프레임크기조절불가. 즉, 사용자가프레임의경계를드래그해프레임의 크기를조정하지못하게하는것이다. MARGINWIDTH : 프레임내의가로여백 MARGINHEIGHT : 프레임내의세로여백 사용예 <FRAMESET ROWS= 80, * BORDER= 0 > <FRAME SRC= TOP.HTM NAME= TOPFRAME FRAMEBORDER= SCROLLING= no NORESIZE> <FRAME SRC= BOTTOM.HTM NAME= BOTTOMFRAME ID= MMFRAME > </FRAMESET> html-tp-page26n.html
3.5 프레임문서 1. <IFRAME> 태그 A. 문서내에사각형모양의프레임을생성한다. 마치문서위에새로운창이있는것처럼보이는데이를플로팅 (Floating) 프레임이라한다. 플로팅프레임을만들때는 <IFRAME> 태그를사용한다. <IFRAME> 기능플로팅프레임을만든다. 속성 SRC : 프레임에출력할문서의 URL WIDTH : 프레임내의가로여백 HEIGHT : 프레임내의세로여백 ALIGN : 프레임의위치정렬 [ 왼쪽 (LEFT), 가운데 (CENTER), 오른쪽 (RIGHT)] 사용예 <IFRAME SRC= http://www.naver.com ALIGN= CENTER WIDTH=800 HEIGHT=300> </IFRAME> html-tp-page27n.html
3.6 멀티미디어태그 그림태그 <IMG> 1. <IMG> 태그는웹페이지에그림삽입할때는이용한다. 다양한속성을통해크기나삽입위치를조정가능하다. <IMG> 기능그림 (Image) 을삽입한다. 속성 SRC : 그림의경로 (URL) 와파일이름 BORDER : 그림의테두리두께 ( 기본값은 0) WIDTH : 그림의가로크기값을픽셀값 (px) 이나비율값 (%) 으로설정 HEIGHT: 그림의세로크기값을픽셀값 (px) 이나비율값 (%) 으로설정 ALIGN : 문자열과함께사용될그림의위치정렬 [ 그림의왼쪽에문자열 정렬 (LEFT), 그림의오른쪽에문자열정렬 (RIGHT), 그림의제일상단과문자열의상단을맞춤 (TOP), 문자열의밑선을그림의가운데에맞춤 (MIDDLE), 그림의하단과문자열의하단을맞춤 (BOTTOM)] ALT : 그림에대한설명 HSPACE/HORIZONTAL/SPACE : 그림의좌우여백값 VSPACE/VERTICAL/SPACE : 그림의상하여백값 사용예 <IMG SRC= IMAGES/PIC.jpg WIDTH= 32 HEIGHT= 32 ALT= 아이콘 > 시작 html-tp-page28n.html
3.6 멀티미디어태그 그림태그 <IMG> 1. 텍스트와그림의정렬
3.6 멀티미디어태그 그림태그 <IMG> / <MAP> 1. 이미지맵 A. 하나의이미지를여러개의영역으로구분하여서로다른하이퍼링크를만드는것을말한다. B. 이러한형태는웹페이지에서지도의특정부분을클릭하면해당지역과관련된페이지로이동하는형태를많이볼수있다. C. <IMG> 태그로그림을삽입한후 <MAP> 과 <AREA> 태그를이용해맵을만든다 <IMG SRC= 이미지 URL USEMAP= # 맵이름 > <MAP NAME= 맵이름 > <AREA SHAPE= 맵형태 COORDS= 죄표값 HREF= 링크 URL > </MAP>
3.6 멀티미디어태그 그림태그 <IMG> / <MAP> shape="rect" 사각형 shape="circle" 원 shape="poly" 다각형 html-tp-page31n.html/music
3.6 멀티미디어태그 그림응용 1. <img src="bomb.jpg" onmouseover="this.src='bomb_over.jpg'" onmouseout="this.src='bomb.jpg'"> A. onmouseover 속성은마우스를올렸을때나타낼이미지를 this.src에경로를지정 B. onmouseout 속성은마우스를다시땟을때나타낼이미지를 this.src에경로를지정 2. 주의사항 A. this.src 안에이미지경로는쌍따옴표가아닌그냥따옴표 html-tp-page32n.html
3.6 멀티미디어태그 그림응용 <table border="1" width="520" height="38" cellspacing="0" cellpadding="0" background="./naverbg.jpg > <tr> <td> <table border="0" valign="middle" cellspacing="0" cellpadding="0 > <tr> <td width="10"></td> <td><a href="http://mail.naver.com"><img src="./naver1.jpg" border="0"></a></td> <td width="3"></td> <td><img src="./naver2.jpg" border="0"></td> <td width="3"></td> <td><img src="./naver3.jpg" border="0"></td> <td width="3"></td> <td><img src="./naver1.jpg" border="0"></td> <td width="3"></td> <td><img src="./naver2.jpg" border="0"></td> <td width="3"></td> <td><img src="./naver3.jpg" border="0"></td> <td width="10"></td> </tr> </table> </td> </tr> </table> html-tp-page33n.html
3.6 멀티미디어태그 - <EMBED> 1. <EMBED> 태그는하이퍼링크가설정된텍스트클릭시음악파일재생윈도우가열리면서음악을재생하거나, 웹페이지에접속시음악이나오게할때이용한다. <EMBED> 기능 속성 브라우저자체의실행이아닌사용자컴퓨터에설치된미디어플레이어와같은플러그인프로그램에의해실행될수있게해준다. SRC : 재생할미디어파일 URL WIDTH : 재생기가로크기값 HEIGHT : 재생기세로크기값 LOOP : 실행횟수 [ 계속 (TRUE), 한번 (FALSE), 횟수 ( 반복횟수 )] CONTROLLER : 재생기아래조절판유무 [ 표시 (YES), 숨김 (NO)] AUTOSTART : 페이지로딩시자동재생 [ 자동재생 (YES), 멈춤 (NO)] HIDDEN : 재생기숨김유무 [ 표시 (YES), 숨김 (NO)] 사용예 <EMBED SRC= music.asf WIDTH= 100 HEIGHT= 100 LOOP= TRUE HIDDEN= FALSE AUTOSTART= TRUE > </EMGED>
3.6 멀티미디어태그 - <EMBED> 1. 동영상및 mp3 등 embed 가능 html-tp-page35n.html
멀티미디어태그 - <EMBED> 응용 1. 이미지안에동영상삽입 html-tp-page36n.html
3.7 문서배경꾸미기태그 1. <BODY> 태그통해배경색, 배경이미지, 글자색, 링크색등을지정 2. <BODY>... </BODY> 태그지정속성은문서전체영향 <BODY>... </BODY> 기능문서의본문내용으로, 사용자화면에보여질내용이들어간다. 속성 사용예 BACKGROUND : 문서전체배경이미지 BGCOLOR : 문서전체배경색 TEXT : 문서전체텍스트색상 LINK : 문서내의모든연결텍스트색상 VLINK : 문서내의모든방문한텍스트색상 ALINK : 문서내의모든활성텍스트색상 LEFTMARGIN : 문서의왼쪽여백 TOPMARGIN : 문서의위쪽여백 BGSOUND: 배경음악 <BODY BACKGROUND= Yuna1.jpg", BGCOLOR="#099FF", TEXT="#00FFFF", LINK="#00FFFF", ALINK="#99CCCC", VLINK="#FFFFFF" LEFTMARGIN= 0 TOPMARGIN= 0 >... </BODY> html-tp-page37n.html
3.7 문서배경꾸미기태그 - <BODY> 1. BGCOLOR 속성은배경색을지정할수있으며이를통해 서웹문서에색다른분위기를연출할수있다.
3.7 문서배경꾸미기태그 - <BODY> 1. 배경이미지를넣기위해서 BACKGROUND=" 그림파일경로 / 파일이름 속성을사용한다. 현재작성하고있는 HTML 파일과그림파일이다른폴더안에있다면, 경로를지정해주어야한다.
3.7 문서배경꾸미기태그 - <BODY> 1. 참고용배경이미지위치 A. http://se.kumoh.ac.kr/~hytoiy/image/back0.gif...
3.7 문서배경꾸미기태그 - <BODY> <html> <head> <title> 배경을꾸미고음악넣기 </title> </head> <body background=" 배경이미지.jpg" bgcolor="red" bgsound src=" 배경음악.wav"> </body> </html> 또는 <bgsound src=" 배경음악파일주소 " loop="infinite"> html-tp-page41n.html
3.7 움직이는글자표현태그 - <MARQUEE> 1. <MARQUEE> 태그를통해글자가상하좌우로움직이는 효과가가능함 <MARQUEE>... </MARQUEE> 기능흐르는문자열을구현한다. 속성 사용예 BEHAVIOR : 흐르는작동방식 [ 스크롤 (SCROLL), 슬라이드 (SLIDE), 왕복 (ALTERNATE)] DIRECTION : 흐르는이동방향 [ 왼쪽 (LEFT), 오른쪽 (RIGHT), 위 (UP), 아래 (DOWN)] WIDTH : 흐르는문자열의가로크기값 HEIGHT : 흐르는문자열의세로크기값 HSPACE : 흐르는문자열의좌우여백값 VSPACE : 흐르는문자열의상하여백값 LOOP : 실행횟수 [ 무한반복 (INFINITE, -1), 정해진수 (NUMBER)] SCROLLDELAY : 지연시간 [ 단위 : msec] SCROLLAMOUNT : 이동속도 [ 단위 : 픽셀 (px)] <MARQUEE BEHAVIOR= SCROLL DIRECTION= RIGHT> 문자를흐르게합니다 </MARQUEE> html-tp-page42n.html
3.8 목록태그 - <LI> 1. <LI> ~ </LI> 태그는항목추가시사용 (</LI> 태그를종료시생략도가능함 ) 2. 옵션 A. TYPE=disc, circle, square ( 소문자로사용 ) B. DISC :, CIRCLE:, SQUARE: <ul> 태그에서도동일하게사용됨예 ) <LI TYPE=square> EAST </LI> <LI> WEST </LI> <LI TYPE=circle> NORTH </LI> <LI> SOUTH </LI> html-tp-page43n.html
3.8 목록태그 - <OL> 순서있는목록 1. <OL> ~ </OL> 태그는순서있는정렬된목록을출력하며목록앞에숫자를붙임 ( 기본값은숫자 ) 2. 속성 A. TYPE=A, a, I, I, 1 값을가짐 A: 대문자알파벳 a : 소문자알파벳 I : 대문자로마숫자 i : 소문자로마숫자 1 : 숫자 B. START=n 리스트의시작번호를임의로바꿀수있음 예 ) A. <OL TYPE=1 START=2> <LI> </LI> </OL> html-tp-page44n.html
3.8 목록태그 - <UL> 순서없는목록 1. <UL>~</UL> 태그는목록앞에기호를붙여서순서없이리스트 ( 기본값은 DISC) 2. 옵션 A. TYPE=disc, circle, square ( 소문자사용 ) B. DISC :, CIRCLE:, SQUARE: html-tp-page45n.html
홈페이지관련사이트모음 1. 아이콘및배경화면 A. http://sakai.ivy.ro/