HTML

Size: px

Start display at page:

Download "HTML"

남주 설
5 years ago
Views:

1 Hyper Text Markup Language Bok, Jong Soon 1

2 HTML 문서의특징 HyperText Markup Language WWW 문서제작에쓰임 SpaceBar, Tab, Enter 인식못함 텍스트문서의형태 컴퓨터기종에독립적 확장명 :.html,.htm 태그는대소문자구별안함 파일명은가급적영문자로통일 태그의순서를가급적지켜야함 2

3 HTML 태그의구조 (1) Markup Tag 사용형태 영문대소문자구별없음 <tag>... </tag> 예 ) <title> 태그이용 </title> <tag attribute=argument>... </tag> 예 ) <font size=3>... </font> <tag> 예 ) <br> 3

4 HTML 태그의구조 (2) 사용의주의사항 중첩되어사용안됨 <B><I>... </B></I> <B><I>... </I></B> (x) (o) 4

5 HTML 문서의기본구조 <HTML> <HEAD>... </HEAD> <BODY>... </BODY> </HTML> 5

6 HTML 문서의예 <html> <head> <title> 여기는제목입니다 </title> </head> <body> <h1> 헤드라인입니다.</h1> 여기는본문입니다. </body> </html> 6

7 HTML 문서에서의주석 한줄주석  여러줄주석

8 <HEAD> </HEAD> <head>... </head> 문서에대한정보를나타냄 HEAD 속에사용하는태그 <title>... </title> <meta> <base> <style> </style> <script> </script> 8

9 <TITLE> </TITLE> 사이트의제목을보여줌 사용자의북마크에도움 되도록타이틀명은한글로설정 짧고, 명료하게사이트의특성을전달하도록 사이트의브랜드명을적을수도 도메인네임을한글로표현가능

10 <META> </META>(1) 한글폰트지정 <META http-equiv= content-type content= text/html;charset=euc-kr > Keywords 지정 <META name= keywords content= 키워드내용 > 홈페이지홍보용으로많이이용 검색로봇은웹사이트의 META 태그나타이틀등을수집

11 <META> </META>(2) Description 지정 <META name= Description content= 내용설명 > 검색엔진과관련된태그 홈페이지홍보 HTML 문서이동 <META http-equiv= Refresh content= time;url= 이동할주소 > Time : interval time (seconds)

12 <META> </META>(3) 저자명지정 <META name= author content= 저자명 > 저자명또는제작자명기록

13 <BASE> <base href= URL > HTML 문서속에사용되는파일링크들의기본설정 URL 링크 예 1 예 2 HEAD: <base href= /pub/ > BODY: <a href= filename1.html > BODY: <a href= /pub/filename1.html > 두가지경우는동일한링크 13

14 <BODY>(1) <body>... </body> 문서의실제내용이들어감 각종태그를사용하여문서표현 14

15 <BODY>(2) 배경색지정 bgcolor= 16진수 / 색상명 기본값은흰색 (#ffffff, white) 글자색지정 text= 16진수 / 색상명 기본값은검은색 (#000000, black) 배경이미지지정 background= 이미지명 text tile for background 를의미

16 <BODY>(3) 배경이미지고정하기 (Watermark) bgproperties= fixed 스크롤바를내려도글자만움직이고배경이미지는고정으로 MSIE 에서만지원 링크글자색상지정 link= 16 진수 vlink= 16 진수 alink= 16 진수 link = Unvisited Link ( 기본값 : 파란색 ) vlink = Visited Link ( 기본값 : 보라색 ) alink = Active Link ( 기본값 : 빨간색 )

17 <BODY>(4) 브라우저여백지정 leftmargin= 0 topmargin= 0 marginwidth= 0 marginheight= 0 leftmargin, topmargin 은 MSIE에서인식 marginwidth, marginheight 은네스케이프에서인식

18 Head Line Tag 문서내의단계별제목 1 ~ 6 까지의레벨 <h1>... </h1> <h2>... </h2> <h3>... </h3> h4, h5, h6 레벨순서대로사용 18

19 문단 (1) <p>... </p> <p align=left cente r right> 문단바꾸기 <br> : 줄바꾸기 <hr> : 선그리기 <hr size=6 width= 70% > 19

20 문단 (2) <pre>... </pre> Preformatted 공백과줄바꾸기인식 내부의태그인식 20

21 문단 (3) <listing>... </listing> 태그무시 공백과빈줄인식 글씨체가바뀜 21

22 문단 (4) <blockquote> 인용구삽입에이용 공백, 줄바꾸기무시 <center>... </center> 가운데정렬 공백, 줄바꾸기무시 22

23 문단 (6) <address> 문서수정일 저자정보 <! > 코멘트 23

24 글자모양 물리적형태 <b>... </b> <I>... </I> <tt>... </tt> <big>... </big> <small>... </small> <blink>... </blink> <sub>... </sub> <sup>... </sup> <u>... </u> 24

25 글자크기 글자크기 <font size=n>..</font> <basefont size=n> 25

26 특수문자 특수문자 <, >, &, 그외 26

27 리스트만들기 (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

28 리스트만들기 (2) 정의리스트 <dl> <dt> 정의항목 <dd> 설명 </dl> <dl compact> 28

29 리스트만들기 (3) 리스트들은중첩사용가능 시작태그와마감태그의대응주의 29

30 Hyperlink (1) 앵커정의 <a href= ml > 파랑새 </a> 에링크를... <a href= bbird.html > 파랑새 </a> 에링크를... 30

Hyperlink (2) 다른문서내의특정부분으로링크 : Home.html : <a href= http://www.test.com/bird.html#blu ebird > 파랑새 </a> bbird.

31 Hyperlink (2) 다른문서내의특정부분으로링크 : Home.html : <a href= ebird > 파랑새 </a> bbird.html : <a name= bluebird > 이새는..</a> 동일문서내의특정부분으로링크 : bbird.html : <a href= #bluebird > 파랑새 </a> bbird.html : <a name= bluebird > 이새는..</a> 31

32 Hyperlink (3) 절대경로와상대경로 예 ) html.html에서 home.html 지정시 절대경로 : <a href= > 상대경로 : Doc <a href=../home.html > home.html Mydoc html.html 32

이미지넣기 (1).jpg,.gif, png 파일 <img src= image_url > <img src= http://www.

33 이미지넣기 (1).jpg,.gif, png 파일 <img src= image_url > <img src= > <img src= images/www-kr.gif > Homepage and... 33

34 이미지넣기 (2) 크기지정 : width=x, height=x ( 단위 : 픽셀 ) 34

35 이미지넣기 (3) 이미지정렬 <img src=... align=top middle bottom right left> <p align=center><img src=... > </p> 35

36 이미지넣기 (4) 이미지제목넣기 <img src= htmlicon.gif alt= [htmlicon] > 텍스트베이스브라우저에서사용 로딩시간동안이미지위치에보여줌 36

37 이미지넣기 (5) 백그라운드이미지넣기 <body background= background.gif > 외부이미지지정하기 <a href= ex_img.jpg > <img src= in_img.jpg ></a> 37

38 표작성 (1) <table>..</table> : 표의시작과끝 - border=n : 외부테두리두께 - cellspacing=n : 셀간격 - cellpadding=n : 셀내부여백 - width=n : 표의너비 - height=n : 표의높이 <tr>..</tr> : 열지정 <th>..</th> : 셀헤더지정 <td>..</td> : 셀데이타지정 38

39 표작성 (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

40 표작성 (3) 캡션 <caption align=top bottom>...</caption> 셀데이타의정렬및셀합병 colspan : 열합병 rowspan : 행합병 align=left center right valign=top middle bottom 40

41 표작성 (4) 41

42 문서의색지정 <body... > 에서지정 #rrggbb 또는색명 bgcolor : 문서뒷배경 text : 글자색 link alink : active link vlink : visited link <body bgcolor= #ffffff text= # link= #0000ff alink= #ff00ff vlink= #2f4f2f > 42

43 FORM 형식 <form method= get action= >... </form> method : 서버로데이터를전달하는방법 action : 실행할서버프로그램을지정, 없으면현재문서의 URL 이사용 FORM 입력방식 input, select, textarea 43

44 Form 의구분 텍스트입력종류 textarea, input, hidden, password 버튼종류 submit & reset, check, radio 메뉴종류 select, select single, select multiple

45 Form 의형식 <form>...</form> 포함가능 : input, select, textarea, p, hr, dir, dl, menu, ol, ul, address, blockquote, pre 속성 : method, action, enctype

46 Form 의형식 <form> 내에또다른 <form> 의생성불가능 형식 <form [action=... method=... ]>...</form>

47 INPUT 태그 (1) 하나의단어나한줄의입력 <input attribute=value... > 47

48 INPUT 태그 (2) attribute type : 입력할데이터의종류 (checkbox, hidden, submit, password, radio, reset...) name : 입력받을데이터의이름 value : name의초기값설정, type의영향받음 checked : checkbox나 radio에서사용 size : 텍스트입력창의크기를글자수로지정 maxlength : 입력할수있는문자의최대길이 48

49 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

50 SELECT 태그 (1) 여러개의선택리스트중하나이상선택 <select attribute=value... > 50

51 SELECT 태그 (2) attribute name : 입력받을데이터의이름 size : 보여줄선택항목의수 multiple : 복수선택이가능하도록지정 option : 선택항목지정 value : 선택항목의이름 selected : 현재항목이선택된상태로보이게함 51

52 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

53 SELECT 태그 (4) <form method=get action= > <select multiple name=fruit> <option value=apple> 사과 <option value=banana selected > 바나나 <option value=cherry> 체리 </select> </form> 53

54 TEXTAREA 태그 (1) FORM 내에서여러개의단어및문장의입력 <textarea attribute=value... > attribute name : 입력받을데이터의이름 rows, cols : 입력창의크기, 텍스트의줄수와글자수 54

55 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

56 TEXTAREA 태그 (3) 56

57 FRAME (1) 57

58 FRAME (2) 다중윈도 프레임마다독립적인 URL 가짐 프레임마다 NAME 이지정되어서결과를다른프레임에보여줌 크기조정과방지가능 BODY 대신 FRAMESET 태그사용 58

59 FRAME (3) <frameset>... </frameset> 프레임의시작과끝 rows, cols : 프레임의열과행의크기지정 <frameset rows= 20, 60, 20 > <frameset rows= 20%, 60%, 20% > <frameset rows= 100, *, 100 > frame, noframes, 또다른 frameset 태그이용 59

60 FRAME (4) <frame attribute=value...>... </frame> 실제프레임안에들어가는정보지정 attribute src : 프레임에보여질 HTML문서의 URL name : 프레임의이름 사용자정의, _blank, _self, _parent, _top 등 marginwidth : 프레임의좌우여백 scrolling : 스크롤바생성유무, yes no auto noresize : 프레임크기고정 60

61 FRAME (5) <noframe>... </noframe> 프레임이지원되지않는브라우저를위한태그 내용을하나의페이지로보여줌 61

62 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

63 문서작성방법 일반에디터사용 vi, emacs, 메모장, 워드패드등 HTML 전용에디터사용 자동으로태그생성 converter 이용 63

64 고려사항 (1) 전체구성 계층구조로 파일의크기 전송시간 전체문서의흐름 링크? 복사? 복사 : 단계적인버전이생기는문서 링크 : FAQ, RFC, 특정주제사이트 64

65 고려사항 (2) 각각의문서에서는... 저자표시 문서에관한상태정보제공 적절한링크 짧고명확한제목 어느브라우저에서나같은화면을... 프린트하기좋게배려를 65

66 고려사항 (3) 충분한테스트를! 지속적인관심과보완 66

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용