Hyper Text Markup Language Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr 1
HTML 문서의특징 HyperText Markup Language WWW 문서제작에쓰임 SpaceBar, Tab, Enter 인식못함 텍스트문서의형태 컴퓨터기종에독립적 확장명 :.html,.htm 태그는대소문자구별안함 파일명은가급적영문자로통일 태그의순서를가급적지켜야함 2
HTML 태그의구조 (1) Markup Tag 사용형태 영문대소문자구별없음 <tag>... </tag> 예 ) <title> 태그이용 </title> <tag attribute=argument>... </tag> 예 ) <font size=3>... </font> <tag> 예 ) <br> 3
HTML 태그의구조 (2) 사용의주의사항 중첩되어사용안됨 <B><I>... </B></I> <B><I>... </I></B> (x) (o) 4
HTML 문서의기본구조 <HTML> <HEAD>... </HEAD> <BODY>... </BODY> </HTML> 5
HTML 문서의예 <html> <head> <title> 여기는제목입니다 </title> </head> <body> <h1> 헤드라인입니다.</h1> 여기는본문입니다. </body> </html> 6
HTML 문서에서의주석 한줄주석 <!-- --> 여러줄주석 <!-- -->
<HEAD> </HEAD> <head>... </head> 문서에대한정보를나타냄 HEAD 속에사용하는태그 <title>... </title> <meta> <base> <style> </style> <script> </script> 8
<TITLE> </TITLE> 사이트의제목을보여줌 사용자의북마크에도움 되도록타이틀명은한글로설정 짧고, 명료하게사이트의특성을전달하도록 사이트의브랜드명을적을수도 도메인네임을한글로표현가능
<META> </META>(1) 한글폰트지정 <META http-equiv= content-type content= text/html;charset=euc-kr > Keywords 지정 <META name= keywords content= 키워드내용 > 홈페이지홍보용으로많이이용 검색로봇은웹사이트의 META 태그나타이틀등을수집
<META> </META>(2) Description 지정 <META name= Description content= 내용설명 > 검색엔진과관련된태그 홈페이지홍보 HTML 문서이동 <META http-equiv= Refresh content= time;url= 이동할주소 > Time : interval time (seconds)
<META> </META>(3) 저자명지정 <META name= author content= 저자명 > 저자명또는제작자명기록
<BASE> <base href= URL > HTML 문서속에사용되는파일링크들의기본설정 URL 링크 예 1 예 2 HEAD: <base href= /pub/ > BODY: <a href= filename1.html > BODY: <a href= /pub/filename1.html > 두가지경우는동일한링크 13
<BODY>(1) <body>... </body> 문서의실제내용이들어감 각종태그를사용하여문서표현 14
<BODY>(2) 배경색지정 bgcolor= 16진수 / 색상명 기본값은흰색 (#ffffff, white) 글자색지정 text= 16진수 / 색상명 기본값은검은색 (#000000, black) 배경이미지지정 background= 이미지명 text tile for background 를의미
<BODY>(3) 배경이미지고정하기 (Watermark) bgproperties= fixed 스크롤바를내려도글자만움직이고배경이미지는고정으로 MSIE 에서만지원 링크글자색상지정 link= 16 진수 vlink= 16 진수 alink= 16 진수 link = Unvisited Link ( 기본값 : 파란색 ) vlink = Visited Link ( 기본값 : 보라색 ) alink = Active Link ( 기본값 : 빨간색 )
<BODY>(4) 브라우저여백지정 leftmargin= 0 topmargin= 0 marginwidth= 0 marginheight= 0 leftmargin, topmargin 은 MSIE에서인식 marginwidth, marginheight 은네스케이프에서인식
Head Line Tag 문서내의단계별제목 1 ~ 6 까지의레벨 <h1>... </h1> <h2>... </h2> <h3>... </h3> h4, h5, h6 레벨순서대로사용 18
문단 (1) <p>... </p> <p align=left cente r right> 문단바꾸기 <br> : 줄바꾸기 <hr> : 선그리기 <hr size=6 width= 70% > 19
문단 (2) <pre>... </pre> Preformatted 공백과줄바꾸기인식 내부의태그인식 20
문단 (3) <listing>... </listing> 태그무시 공백과빈줄인식 글씨체가바뀜 21
문단 (4) <blockquote> 인용구삽입에이용 공백, 줄바꾸기무시 <center>... </center> 가운데정렬 공백, 줄바꾸기무시 22
문단 (6) <address> 문서수정일 저자정보 <!--... --> 코멘트 23
글자모양 물리적형태 <b>... </b> <I>... </I> <tt>... </tt> <big>... </big> <small>... </small> <blink>... </blink> <sub>... </sub> <sup>... </sup> <u>... </u> 24
글자크기 글자크기 <font size=n>..</font> <basefont size=n> 25
특수문자 특수문자 <, >, &, 그외 26
리스트만들기 (1) 순서리스트 <ol><li>..<li>..</ol> <ol type=a a I i 1 start=n> <li value=n> 무순서리스트 <ul><li>..<li>..</ul> <ul type=disc circle squ are> 27
리스트만들기 (2) 정의리스트 <dl> <dt> 정의항목 <dd> 설명 </dl> <dl compact> 28
리스트만들기 (3) 리스트들은중첩사용가능 시작태그와마감태그의대응주의 29
Hyperlink (1) 앵커정의 <a href= http://www.test.com/bluebird.ht ml > 파랑새 </a> 에링크를... <a href= bbird.html > 파랑새 </a> 에링크를... 30
Hyperlink (2) 다른문서내의특정부분으로링크 : Home.html : <a href= http://www.test.com/bird.html#blu ebird > 파랑새 </a> bbird.html : <a name= bluebird > 이새는..</a> 동일문서내의특정부분으로링크 : bbird.html : <a href= #bluebird > 파랑새 </a> bbird.html : <a name= bluebird > 이새는..</a> 31
Hyperlink (3) 절대경로와상대경로 예 ) html.html에서 home.html 지정시 절대경로 : <a href= http://www.test.co.kr/doc/home.html > 상대경로 : Doc <a href=../home.html > home.html Mydoc html.html 32
이미지넣기 (1).jpg,.gif, png 파일 <img src= image_url > <img src= http://www.test.com/wwwkr.gif > <img src= images/www-kr.gif > Homepage and... 33
이미지넣기 (2) 크기지정 : width=x, height=x ( 단위 : 픽셀 ) 34
이미지넣기 (3) 이미지정렬 <img src=... align=top middle bottom right left> <p align=center><img src=... > </p> 35
이미지넣기 (4) 이미지제목넣기 <img src= htmlicon.gif alt= [htmlicon] > 텍스트베이스브라우저에서사용 로딩시간동안이미지위치에보여줌 36
이미지넣기 (5) 백그라운드이미지넣기 <body background= background.gif > 외부이미지지정하기 <a href= ex_img.jpg > <img src= in_img.jpg ></a> 37
표작성 (1) <table>..</table> : 표의시작과끝 - border=n : 외부테두리두께 - cellspacing=n : 셀간격 - cellpadding=n : 셀내부여백 - width=n : 표의너비 - height=n : 표의높이 <tr>..</tr> : 열지정 <th>..</th> : 셀헤더지정 <td>..</td> : 셀데이타지정 38
표작성 (2) <table border=1 cellspacing=1 cellpadding=1> <tr><th>no.</th><th> 시간 </th></tr> <tr><td>1</td><td>10:00</td></tr> </table> <table border=5 cellspacing=5 cellpadding=5 width=100 height=50> 39
표작성 (3) 캡션 <caption align=top bottom>...</caption> 셀데이타의정렬및셀합병 colspan : 열합병 rowspan : 행합병 align=left center right valign=top middle bottom 40
표작성 (4) 41
문서의색지정 <body... > 에서지정 #rrggbb 또는색명 bgcolor : 문서뒷배경 text : 글자색 link alink : active link vlink : visited link <body bgcolor= #ffffff text= #000000 link= #0000ff alink= #ff00ff vlink= #2f4f2f > 42
FORM 형식 <form method= get action= >... </form> method : 서버로데이터를전달하는방법 action : 실행할서버프로그램을지정, 없으면현재문서의 URL 이사용 FORM 입력방식 input, select, textarea 43
Form 의구분 텍스트입력종류 textarea, input, hidden, password 버튼종류 submit & reset, check, radio 메뉴종류 select, select single, select multiple
Form 의형식 <form>...</form> 포함가능 : input, select, textarea, p, hr, dir, dl, menu, ol, ul, address, blockquote, pre 속성 : method, action, enctype
Form 의형식 <form> 내에또다른 <form> 의생성불가능 형식 <form [action=... method=... ]>...</form>
INPUT 태그 (1) 하나의단어나한줄의입력 <input attribute=value... > 47
INPUT 태그 (2) attribute type : 입력할데이터의종류 (checkbox, hidden, submit, password, radio, reset...) name : 입력받을데이터의이름 value : name의초기값설정, type의영향받음 checked : checkbox나 radio에서사용 size : 텍스트입력창의크기를글자수로지정 maxlength : 입력할수있는문자의최대길이 48
INPUT 태그 (3) <form method=get action= > <input name=id value=bbird size=30 maxlength=50 type=text> <input name=b type=checkbox> <input name=c type=radio checked> <input name=d type=password><br> <input type=submit value=submit> <input type=reset value=reset> </form> 49
SELECT 태그 (1) 여러개의선택리스트중하나이상선택 <select attribute=value... > 50
SELECT 태그 (2) attribute name : 입력받을데이터의이름 size : 보여줄선택항목의수 multiple : 복수선택이가능하도록지정 option : 선택항목지정 value : 선택항목의이름 selected : 현재항목이선택된상태로보이게함 51
SELECT 태그 (3) <form method=get action= > <select name=group> <option value=web>the Web <option value=news>usenet <option value=gopher>gopher <option value=ftp> ftp <option value=telnet> telnet <option value=bbs>bbs </select> <input type=submit value=submit> </form> 52
SELECT 태그 (4) <form method=get action= > <select multiple name=fruit> <option value=apple> 사과 <option value=banana selected > 바나나 <option value=cherry> 체리 </select> </form> 53
TEXTAREA 태그 (1) FORM 내에서여러개의단어및문장의입력 <textarea attribute=value... > attribute name : 입력받을데이터의이름 rows, cols : 입력창의크기, 텍스트의줄수와글자수 54
TEXTAREA 태그 (2) <FORM method=get action= > <B> Selection Criteria: </B> <BR> <textarea name=q cols=30 rows=3> default </textarea><p> <B> Results Ranking Criteria: </B> <BR> <textarea name=r cols=30 rows=1> </textarea> </FORM> 55
TEXTAREA 태그 (3) 56
FRAME (1) 57
FRAME (2) 다중윈도 프레임마다독립적인 URL 가짐 프레임마다 NAME 이지정되어서결과를다른프레임에보여줌 크기조정과방지가능 BODY 대신 FRAMESET 태그사용 58
FRAME (3) <frameset>... </frameset> 프레임의시작과끝 rows, cols : 프레임의열과행의크기지정 <frameset rows= 20, 60, 20 > <frameset rows= 20%, 60%, 20% > <frameset rows= 100, *, 100 > frame, noframes, 또다른 frameset 태그이용 59
FRAME (4) <frame attribute=value...>... </frame> 실제프레임안에들어가는정보지정 attribute src : 프레임에보여질 HTML문서의 URL name : 프레임의이름 사용자정의, _blank, _self, _parent, _top 등 marginwidth : 프레임의좌우여백 scrolling : 스크롤바생성유무, yes no auto noresize : 프레임크기고정 60
FRAME (5) <noframe>... </noframe> 프레임이지원되지않는브라우저를위한태그 내용을하나의페이지로보여줌 61
FRAME (6) <html> <frameset rows = "90%, 10%"> <frameset cols ="25%, 75%"> <frame Name = "menu" src="fr1.html" scrolling = "no"> <frame Name = "main" src="fr2.html"> </frameset> <frame name = "tail" src="fr3.html" scrolling ="no"> </frameset> </html> 62
문서작성방법 일반에디터사용 vi, emacs, 메모장, 워드패드등 HTML 전용에디터사용 자동으로태그생성 converter 이용 63
고려사항 (1) 전체구성 계층구조로 파일의크기 전송시간 전체문서의흐름 링크? 복사? 복사 : 단계적인버전이생기는문서 링크 : FAQ, RFC, 특정주제사이트 64
고려사항 (2) 각각의문서에서는... 저자표시 문서에관한상태정보제공 적절한링크 짧고명확한제목 어느브라우저에서나같은화면을... 프린트하기좋게배려를 65
고려사항 (3) 충분한테스트를! 지속적인관심과보완 66