웹프로그래밍 () HTML () 2006 년봄학기 문양세강원대학교컴퓨터과학과 웹페이지제작단계및환경 주제와주제와내용선정 어떤어떤내용을내용을담을담을것인지것인지,, 어떤어떤단계로단계로제작할제작할것인지것인지결정결정 디자인디자인 웹페이지페이지구조구조 저작권저작권확인확인 로고로고, 아이콘, 아이콘또는또는멀티미디어멀티미디어등다양한다양한소재를소재를어떻게어떻게꾸밀꾸밀것인지것인지구성구성 웹페이지페이지내용을내용을분류분류 / / 정리정리후구조적으로구조적으로구성하여구성하여흐름도나흐름도나사이트사이트맵을맵을종이에종이에그려본다그려본다.. 자바자바스크립트나스크립트나그림그림등을등을사용할사용할때,, 저작권에저작권에대한대한내용에내용에주의주의 웹페이지페이지등록등록 인터넷인터넷서비스서비스제공업체인제공업체인 ISP ISP 의웹서버에서버에등록등록 웹페이지페이지홍보홍보 검색엔진에검색엔진에등록하여등록하여모든모든사용자에게사용자에게홍보홍보 Page 2 1
웹페이지제작시고려사항 웹페이지로딩시간이 10초이하로한다 ( 너무복잡하지않게 ) 웹페이지의제목을의미있게붙인다. 혼동을일으키기쉬운링크를만들지않는다. 방문객이웹사이트의구조를쉽게파악할수있도록구성한다. 좌우 / 상하로길게스크롤되는문서를만들지않는다. 각페이지마다이전 / 상위페이지로의링크를만들어페이지간의이동을쉽게한다. 사이트내의링크는상대경로를사용한다 (Portable) 지나치게애니메이션을많이사용해서사용자의눈을피로하게하지않는다특정한환경을가정하고웹페이지를만드는것은좋은자세가아니다. 웹사이트의내용이계속업데이트 (update) 되어야한다. Page 3 HTML 개요 정의 WWW 상의문서를기술하기위한언어로서, 플랫폼에관계없이사용가능한 Hypertext 문서를만들수있는 Markup 언어이다. Markup 언어일반텍스트문서에 < 와 > 로둘러쌓인약속된 Tag 를붙임으로써, Tag 에내포된기능을 Web Brower 가인식하여실행할수있도록지시 (markup) 해주는기능을하는언어 장점 Web 상에서손쉽게 Hypertext 및 Hypermedia 기능을갖는문서를만든다. Web 상에서문서를쉽고빠르게다운로드받는다. 이식성 (Portability) 이높으며사용이편리하다. 단점 고정된 Tag만을제공하여사용자가새로운 Tag를정의할수없다. 문서자체가구조화되어있지않아 (semi-structured), 효과적인검색, 재사용, 검증이어렵다. Page 4 2
HTML 구성요소 (1/3) HTML document 텍스트 (Text) 태그 (Tag) 스크립트 (Script) 텍스트 (Text) HTML 문서에포함된텍스트는웹문서의본문에해당 사용자가웹문서를읽을때, 화면에나타나는텍스트자체를의미 태그 (Tag) < 과 > 기호로둘러쌓은문서의중간중간에붙여주는일종의꼬리표 태그의형식 <tag> 문서의문자열 ( 텍스트 ) </tag> <tag> 를시작태그, </tag> 를종료태그라한다. 시작태그에의해지정된기능이부여되고, 그기능은종료태그를만나면끝난다. Page 5 HTML 구성요소 (2/3) 태그 (Tag) ( 계속 ) 태그의속성 (attribute) 태그는속성을가질수있다. 속성은지정된태그에대하여보다자세한환경과정보를규정한다. ( 예 : color, size) 태그의종류 : 복합 / 단독태그 복합태그 : <title> </title>, <p> </p>, <body> </body> 단독태크 : <br>, <hr> 태그의종류 : 속성의유무 속성이꼭필요한태그 : <a href="...">...</a>, <img src="..."> 속성이옵션인태그 : <hr noshade> 속성이없는태그 : <em>...</em> 태그의특성 대소문자의구별이없다. 복합태크는엇갈려서사용할수없다. (wrong: <big><blink> 잘못된예제 </big></blink> 포함할수없는태그를포함시킬수없다. (wrong: <h1><h2> 잘못된예제 </h2></h1> Page 6 3
HTML 구성요소 (3/3) 스크립트 (Script) Client Side Script - 웹클라이언트 ( 브라우저 ) 에서수행 (execute) 되는간단한명령어집합 - 일반프로그래밍언어에비해간단하고, Compile이아닌Interpret 방식에의해수행됨 - 예 : JavaScript, VBScript Server Side Script 웹클라이언트에서요청한내용을처리하기위해웹서버에서수행되는프로그램 예 : ASP, PHP, JSP Page 7 HTML 문서의기본구성및특성 HTML 문서의구조 <html> </html> <head> </head> <body> </body> 머리말 ( 제목 ) 웹페이지의본문 --> 1 HTML 문서의머리말부분 --> 2 HTML 문서의본문부분 HTML 문서의머리말 : 보통문서에대한제목과전반적인정보를담는영역 HTML 문서의본문 : 대부분의 HTML 문서의내용이바로이영역에해당 HTML 문서의특성 공백 (space) 문자가연속된경우에는한글자의공백문자로만인식 엔터 (enter) 나탭 (tab) 도하나의공백문자로인식 Page 8 4
HTML 태그 - <HTML>, <HEAD>, <TITLE> <HTML> </HTML> HTML 문서임을의미하며, 모든 HTML 문서는 <HTML> 로시작하여 </HTML> 로끝난다. <HEAD> </HEAD> HTML 문서의머리말 (header) 영역을나타낸다. <TITLE> </TITLE> HTML 문서의제목을브라우저의타이틀바에표시한다. <HTML> 태크는생략됨 Page 9 HTML 태그 - <BODY> <BODY> </BODY> HTML 문서의 Main이되는본문영역 ( 문서의실제내용부분 ) 속성 : background, bgcolor, text, link, vlink, alink Page 10 5
HTML 태그 - <! - comment --> <!-- --> 주석 (comment) 에해당하며, 여러줄에걸쳐사용할수는없다 (C 와다름에유의 ). Page 11 HTML 태그 - <BASE> <BASE HREF = > HTML 문서에서참조하는 URL 의상대경로를지정한다. - <BASE HREF = http://cs1.kangwon.ac.kr/~ysmoon/ > 라지정되어있으면, - <A HREF = web_prog/web_prog.html > </A> 은 - <A HREF = http://cs1.kangwon.ac.kr/~ysmoon/web_prog/web_prog.html > </A> 와동일하다. Page 12 6
HTML 태그 - <P>, <BR> (1/2) <P> Paragraph의약어로서, 단락을구분 ( 줄바꿈과동시에한줄을띄는역할 ) 을수행한다. 단독태크로사용된다. 속성 : ALIGN = LEFT RIGHT CENTER <BR> BReak의약어로서, 문장에서줄바꾸기기능을한다. 단독태크로사용된다. 속성 : CLEAR = CLEAR LEFT RIGHT ALL Page 13 HTML 태그 - <P>, <BR> (2/2) Page 14 7
HTML 태그 - <PRE> <PRE> </PRE> Preformatted text 의약어로서, 입력된내용을그대로브라우저화면에출력한다. Page 15 HTML 태그 - <HR> <HR> Horizontal Ruler의약어로서, 웹페이지안에선 / 경계선을그리는데사용된다. 속성 : size, width, align, noshade Page 16 8
HTML 태그 - <CENTER>, <NOBR> <CENTER> </CENTER> <CENTER> 와 </CENTER> 사이에포함된모든내용을브라우저화면의중앙으로정렬 <NOBR> </NOBR> NO line BReak의약어로서, 웹브라우저에의해임으로줄바꿈이일어나지않도록한다. ( 일반적으로브라우저화면크기를조절하면문장의줄바꿈이일어난다.) Page 17 HTML 태그 - <BLOCKQUOTE> <BLOCKQUOTE> </BLOCKQUOTE> 웹페이지에서 인용단락 을표시할때사용한다. 인용된내용을좌우에적당한여백을주어구분하여보여준다. Page 18 9
HTML 태그 - <Hn> <Hn> </Hn> 웹페이지에서 ( 주로제목이나머리글의 ) 글자크기를지정하기위해사용한다. 상대적크기이며, <Hn> 에서 n은 1( 큰글자 ) ~ 6( 작은글자 ) 의숫자를사용한다. <Hn> 은줄바꿈 (line break) 기능을포함한다. Page 19 HTML 태그 - <BASEFONT> <BASEFONT SIZE=n> 기본폰트크기 (default = 3) 를지정한다. n은 1~7의숫자로지정하며, 값이클수록글자크기가커진다. Page 20 10
HTML 태그 - <FONT> <FONT> </FONT> 웹페이지에서글자의크기 (size), 색상 (color), 글꼴 (face) 을지정한다. 속성 : size, color, face Page 21 HTML 태그 - <I>, <B>, <U>, (1/2) <I> </I> : 글자를이탤릭 (italic) 체로지정한다. <B> </B> : 글자를볼드 (bold) 체로지정한다. <U> </U> : 글자를밑줄 (underline) 체로지정한다. <TT> </TT> : 글자를타자 (teletype) 체로지정한다. <BLINK> </BLINK> : 글자를깜박거리도록지정한다. <SUP> </SUP> : 글자를위첨자 (Superscript) 로지정한다. <SUB> </SUB> : 글자를아래첨자 (Subscript) 로지정한다. <S> </S> : 글자를삭제된문자 (strike through) 로지정한다. Page 22 11
HTML 태그 - <I>, <B>, <U>, (2/2) Page 23 HTML 태그 리스트태그 (1/5) 리스트태그 : 문서를서술식이아닌개조식으로표현할수있다. Bullet List 축구는 11명이둥근공을가지고사각형의큰경기장에서경기한다. 야구는 9명이배트, 글러브, 작은공을가지고다이아몬드형의경기장에서경기한다. 탁구는 2명혹은4명이라켓과매우작고가벼운공을가지고테이블위에서경기한다. Numbered List 1. 축구는 11명이둥근공을가지고사각형의큰경기장에서경기한다. 2. 야구는 9명이배트, 글러브, 작은공을가지고다이아몬드형의경기장에서경기한다. 3. 탁구는 2명혹은4명이라켓과매우작고가벼운공을가지고테이블위에서경기한다. Definition List 축구 11명이둥근공을가지고사각형의큰경기장에서경기한다. 야구 9명이배트, 글러브, 작은공을가지고다이아몬드형의경기장에서경기한다. 탁구 2명혹은4명이라켓과매우작고가벼운공을가지고테이블위에서경기한다. Page 24 12
HTML 태그 리스트태그 (2/5) <UL> </UL> Unordered List의약어로서, Bullet List를지정한다. Bullet List 내부에다시 Bullet List를중첩하여표현할수있다. 속성 : type = circle square disk (circle =, square =, disk = ) <OL> </OL> Ordered List의약어로서, 목록앞에순서 ( 일반적으로숫자 ) 가표시된다. Bullet List 내부에다시 Bullet List를중첩하여표현할수있다. 속성 : type = A a I i 1, start = n <LI> </LI> Unordered/Ordered List 내부에서각아이템을명시한다. 속성 : - type = circle square disk (circle =, square =, disk = ) UL에서 - type = A a I i 1 OL에서 - value = n OL에서시작번호를지정 Page 25 HTML 태그 리스트태그 (3/5) Page 26 13
HTML 태그 리스트태그 (4/5) Definition List <DL> </DL> : 용어정의를위한리스트를만든다. (<UL>, <OL> 에해당 ) <DT> </DT> : 리스트의항목 (term) 으로지정한다. ( 정의 부분에해당 ) <DD>..</DD> : 항목에대한설명 (description) 을포함한다, Page 27 HTML 태그 리스트태그 (5/5) Menu List (<MENU> </MENU>) 메뉴 와같이길이가짧은순서없는목록을만들때사용한다. Directory List (<DIR> </DIR>) 파일이름과같이길이가짧은목록을나타낼때사용한다 ( 글자수가 24 자이내로제한 ). Page 28 14
색깔 (Color) 지정방법 색깔이름을사용하는방법 ( red, black, gray, ) 컬러코드를사용하는방법 (#FFFFFF, #080808 RRGGBB in hexa code) Color Chart Color Code 변환 Page 29 이미지 (image) 삽입방법 (1/2) 태그 : <IMG SRC = image file path > 속성 : src, align, width, height, hspace, vspace, border Page 30 15
이미지 (image) 삽입방법 (2/2) Page 31 Hypertext Links (1/2) Hypertext Link 의활용 다른웹페이지로이동시키거나, 현웹페이지의다른위치로이동시킨다. 파일을다운로드받을수있게하거나, 이미지파일을보여준다. E-mail을보낼수있게하거나, FTP 서버로접속이가능하게한다. Hypertext Link 를위한태그 타문서연결 : <A HREF = 연결하고자하는다른문서의 URL > </A> 문서내연결 <A HREF = #defined_label > </A> <A NAME = defined_label > </A> Page 32 16
Hypertext Links (2/2) Page 33 테이블 (Table) (1/3) <TABLE> </TABLE> 테이블의시작과끝을나타내는태그이다. 속성 : border, width, height, cellspacing, cellpadding, cgcolor <CAPTION> </CAPTION> 테이블제목 (caption) 을나타낸다. 속성 : align = top bottom <TR> </TR> Table Row의약어로서, 테이블의새로운행 (row) 이시작한다. 속성 : align = left right center, valign = top bottom middle <TD> </TD> 테이블에서각셀 (cell) 을정의하는태그이다. 속성 : align, valign, colspan, rowspan, nowrap, width, bgcolor, width, height Page 34 17
테이블 (Table) (2/3) <TH> </TH> Table Heading 을의미하며, 테이블의맨윗행 ( 헤더, header) 를나타낸다. <TR> 과쓰임이유사하나, 글자체가 Bold 체로중앙정렬되는특성을가진다. <CAPTION> <TABLE> [ 표 1] 강원대학교컴퓨터과학과성적분포 <TH> <TR> <TD> Page 35 테이블 (Table) (3/3) Page 36 18
프레임 (Frame) (1/3) 브라우저의윈도우를여러작은윈도우로나누어각각에다른웹페이지를보여주는기능을수행한다. Page 37 프레임 (Frame) (2/3) 프레임문서의구조 일반웹페이지구조 <html> <head><title>...</title></head> <body>... 웹페이지본문... </body> </html> 프레임문서구조 <html> <head><title>...</title></head> <frameset>... 프레임선언... </frameset> </html> <FRAMESET> </FRAMESET> 화면을프레임으로분할하며, <BODY> 태그대신사용한다. 속성 : ROWS, COLS ( 예 : ROWS = 50%,50%, COLS = *, *, 2* ) <FRAME> </FRAME> 각각의프레임에들어갈정보를정의한다. (Browsing할웹페이지를지정한다.) SRC = URL, NAME, MARGINWIDTH, SCROLLING, NORESIZE Page 38 19
프레임 (Frame) (3/3) Page 39 사운드 ( 오디오 ) 이용 사운드파일다운로드하기 <A HREF = music/sound01.mid >sound01.mid(20kb)</a> 음악들려주기 <EMBED SRC = music/sound01.mid autostart=true loop=2> Page 40 20
동영상 ( 비디오 ) 이용 동영상파일다운로드하기 <A HREF = movie/video02.avi >video02.avi(12mb)</a> 동영상실행 (play) 하기 <EMBED SRC = movie/video02.avi autostart=true> Page 41 웹페이지등록및게시판연결 웹페이지등록 Private한웹서버나Naver 등에서무료웹서버계정을활용한다. 웹서핑등을통하여자신에게적합한웹서버계정을구축한다. 게시판연결 웹서버에서제공하는무료게시판을링크하여활용한다. 게시판소스 (CGI 등 ) 를다운로드하여 Private 웹서버에설치하고링크한다. ( 게시판을직접프로그래밍하는것도한방편 ) Page 42 21