HTML q q MENU DIR DIR LI LIST

  • Slides: 41
Download presentation
HTML

HTML

인터넷 기타 기본 태그 들 q 메뉴와 디렉토리 리스트 q <MENU>와 <DIR>태그는 짧은 단어들의

인터넷 기타 기본 태그 들 q 메뉴와 디렉토리 리스트 q <MENU>와 <DIR>태그는 짧은 단어들의 리스트를 표현하는 데 사용 <DIR> <LI> LIST ITEM 1 <LI> LIST ITEM 2 …… </DIR> <MENU> <LI> LIST ITEM 1 <LI> LIST ITEM 2 …… </MENU> q 글자이동 태그 : MARQUEE q 자바스크립트 없이 흐르는 문자를 표현할 수 있는 태그 <MARQUEE BEHAVIOR=ALTERNATE | SCROLL | SLIDE BGCOLOR=color DIRECTION=DOWN | LEFT | RIGHT | UP HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=milliseconds STYLE=css 1 -properties TITLE=text VSPACE=n WIDTH=n> This is a scrolling marquee </MARQUEE> q 속성 값에 따라 여러 형태의 표현을 할 수 있다. 65

인터넷 HTML 문서 작성 예제 3 파일명 : 순서없는리스트. html <html> <head> <TITLE>순서없는 리스트

인터넷 HTML 문서 작성 예제 3 파일명 : 순서없는리스트. html <html> <head> <TITLE>순서없는 리스트 예제</TITLE></HEAD> 디폴트 블릿 기호 사용 <UL> <LI> DATA STRUCTURE <LI> INTERNET <ul> SQUARE 블릿 기호 사용 <LI> DATA STRUCTURE <LI> INTERNET </UL> </ul></body> </html> 파일명 : 순서있는리스트. html <html> <head> <TITLE>순서있는 리스트 예제</TITLE></HEAD> <BODY bdcolor = "white" ALIGN = CENTER> <OL TYPE = 1> <FONTSIZE = #5><LH><STRONG><LI> 순서 학습<BR></STRONG></LH> <OL TYPE = I> <LH><STRONG> HEADER 1 </STRONG></LH><BR> <LI> ITEM 1 -1 <LI> ITEM 1 -2 <UL> <LH><STRONG>SUB HEADER </STRONG></LH><BR> <LI> ITEM 1 -2 -1 <LI> ITEM 1 -2 -2 <LI> ITEM 1 -2 -3 </UL> <LI> ITEM 1 -3 </UL> </OL></body> </html> 68

인터넷 HTML 문서 작성 예제 6 파일명 : FONT예제. html <html> <head> <TITLE>font 사용하기</TITLE>

인터넷 HTML 문서 작성 예제 6 파일명 : FONT예제. html <html> <head> <TITLE>font 사용하기</TITLE> </HEAD> <body bgcolor="white"> <font size=1 color=“blue” face = “Comic Sans MS”> font 1 size</font></br> <font size=2 color=“red” face = “Gothic”> font 2 size</font></br> <font size=3 color=“green” face = “Arial”> font 3 size</font></br> <font size=4 color=“yellow” face = “Book Man”> font 4 size</font></br> <font size=5 color=“darkblue” face = “Impact”> font 5 size</font></br> <font size=+2 color=“gold” face = “Arial Narrow”> font default(3)+2=5 size</font></br> <font size=6 color=“silver” face = “Garamond”> font 6 size</font></br> <font size=7 color=“black” face = “궁서체”> font 7 size</font></br> </body> </html> 파일명 : Heading. html <html> <head> <TITLE>Hn 사용하기</TITLE> </HEAD> <body bgcolor="white"> <h 1> Heading 1</h 1> <h 2> Heading 2</h 2> <h 3> Heading 3</h 3> <strong> Heading 4는 디폴트 값입니다. 이 줄은 < H 4> 를 사용하지 않고 그냥 썼습니다. </strong> <h 5> Heading 5</h 5> <h 6> Heading 6</h 6> </body> </html> 71

인터넷 HTML 문서 작성 예제 8 파일명 : 스타일시트. html <html> <head><style> <!-- body

인터넷 HTML 문서 작성 예제 8 파일명 : 스타일시트. html <html> <head><style> <!-- body font-family: Sans-serif u font-family : Britannic Bold --> </style> <title> Example Style tag</title> </head> <body> Style practice sample text 1 : The style of this words is Sans-serif <u> Sample text 2 : The Style of this words is Britannic Bold. </u> </body> </html> 파일명 : 마키. html <html> <head><TITLE>marquee 사용하기</TITLE> </head> <body> <marquee bgcolor="green" border="0">배경색이 녹색이죠. </marquee> <p> <font color=“gold“ face="굴림"> <marquee BEHAVIOR="scroll" border="0" width="500"> scroll입니다. </marquee></font><p> <marquee WIDTH="50%" HEIGHT="50" border="0" direction="up"> 아래에서 위로. . . </marquee><p> <marquee WIDTH="50%" HEIGHT="50" border="0" direction="down">위에서 아래로. . . </marquee> </body> </html> 73

인터넷 표(table) 만들기 2 q <CAPTION>태그 q 표의 제목을 나타내는 태그 q <TABLE> 내에서만

인터넷 표(table) 만들기 2 q <CAPTION>태그 q 표의 제목을 나타내는 태그 q <TABLE> 내에서만 사용 q <CAPTION>caption_of_table</CAPTION> q <TR> q 표의 행(TABLE ROW)을 표현 <TR> heading cells(TH elements) and data cells(TD elements) </TR> <th>와<td>에서 지정된 속성값이 <tr>에서 지정된 속성들의 기본값보다 우선 </tr>은 생략 가능 q <TD>, <TH> 는 <TR>과 같은 구조 <TABLE><CATPION> …… </CAPTION> <TR><TH BGCOLOR=“YELLOW”> ……. . </TH> <TH BGCOLOR=“YELLOW”> ………… </TH></TR> <TR><TD> …………… </TD></TR></TABLE> 76

인터넷 HTML 문서 작성 예제 9 파일명 : 표그리기 1. html <html> <head> <TITLE>표

인터넷 HTML 문서 작성 예제 9 파일명 : 표그리기 1. html <html> <head> <TITLE>표 예제</TITLE></HEAD> <BODY Bg. COLOR = "lightsteel. BLUE"> <TABLE BORDER = 5> <CAPTION> HELLO WORLD</CAPTION> <TR><TD>WELCOME TO THE WORLD WIDE WEB !</TD> </TABLE> </body></html> 파일명 : 표그리기 2. html <html> <head><TITLE>표 예제 2 : attributes</TITLE></HEAD> <BODY BGCOLOR = “LIGHTSTEELBLUE"> <TABLE BORDER = 1 CELLPADDING=5> <CAPTION align = top><FONT COLOR = "WHITE" SIZE = 6> 내 컴퓨터</CAPTION></FONT> <FONT COLOR = "YELLOW"> <TR bgcolor="white"><TH> CPU 종류</TH> <TH> MEMORY 크기</TH> <TH> Hard Disk 크기</TH> <TH bgcolor="yellow"> 운영체제</TH> <TR bgcolor="orange" FONT COLOR = "black"><TD>Pentium 200 dual</TD> <TD> 128 MB</TD> <TD><FONT COLOR = "PINK"> 2 GB * 2</TD> <TD bgcolor="lightgreen"><FONT COLOR = "PINK"> Windows NT 4. 0</TD> </TABLE></body> </html> 80

인터넷 HTML 문서 작성 예제 10 파일명 : 표그리기 3. html <html> <head> <TITLE>표

인터넷 HTML 문서 작성 예제 10 파일명 : 표그리기 3. html <html> <head> <TITLE>표 예제 3 : attributes</TITLE> </HEAD> <BODY BGCOLOR = "GOLD"> <TABLE BORDER = 1 CELLPADDING=5> <CAPTION><FONT COLOR = "WHITE" SIZE = 6> 내 컴퓨터</CAPTION></FONT> <FONT COLOR = "YELLOW"> <TR><TH BGCOLOR = "LIGHTSTEELBLUE"><FONT COLOR = "YELLOW"> CPU 종류 </TH> <TH BGCOLOR = "CHOLATE"> <FONT COLOR = "YELLOW">MEMORY 크기</TH> <TH BGCOLOR = "DEEPPINK"><FONT COLOR = "YELLOW"> Hard Disk 크기</TH> <TH BGCOLOR = "LIGHTSEAGREEN"><FONT COLOR = "YELLOW"> 운영체제</TH> <TR BGCOLOR = "LIGHT PINK"><TD><FONT COLOR = "BLUE"> Pentium 200 dual</TD> <TD><FONT COLOR = "BLUE"> 128 MB</TD> <TD><FONT COLOR = "BLUE"> 2 GB * 2</TD> <TD><FONT COLOR = "BLUE"> Windows NT 4. 0</TD> </TABLE></body> </html> 81

인터넷 HTML 문서 작성 예제 11 파일명 : 표그리기 4. html <html> <head><TITLE>표 예제

인터넷 HTML 문서 작성 예제 11 파일명 : 표그리기 4. html <html> <head><TITLE>표 예제 4 : 어색한 공란을 가진 표</TITLE> </HEAD> <BODY BGCOLOR = "LIGHTGREY"> <TABLE BORDER = 1 CELLPADDING=5> <CAPTION><FONT COLOR = "ORANGE" SIZE = 6>공란이 이러면 안되겠지 !</CAPTION></FONT> <TR BGCOLOR = "LIGHTWOOD" ><TH><FONT COLOR = "YELLOW"> CPU 종류</TH> <TH><FONT COLOR = "YELLOW">MEMORY 크기</TH> <TH><FONT COLOR = "YELLOW"> Hard Disk 크기</TH> <TH><FONT COLOR = "YELLOW">운영체제</TH> <TH><FONT COLOR = "YELLOW"> DVD Drive</TH> <TR BGCOLOR = "LIGHTPINK"><FONT COLOR = "BLUE"><TD> DVD Drive</TD> <TD> 128 MB</TD> <TD> 2 GB * 2</TD> <TD> Windows NT 4. 0</TD> <TD></TD> </TABLE><BR> <HR COLOR = "MEDIUMORCHID" SIZE = 5 WIDTH = 100%><BR> <TABLE BORDER = 1 CELLPADDING=5> <CAPTION><FONT COLOR = "ORANGE" SIZE = 6> 이런 공란은 어때요? </CAPTION></FONT> <TR BGCOLOR = "LIMEGREEN"><TH> <FONT COLOR = "YELLOW"> CPU 종류</TH> <FONT COLOR = "YELLOW">MEMORY 크기</TH> <FONT COLOR = "YELLOW"> Hard Disk 크기</TH> <FONT COLOR = "YELLOW"> 운영체제</TH> <FONT COLOR = "YELLOW"> DVD Drive</TH> <TR BGCOLOR = "LIGHTPINK"><TD><FONT COLOR = "BLUE"> DVD Drive</TD> <TD><FONT COLOR = "BLUE"> 128 MB</TD> <FONT COLOR = "BLUE"> 2 GB * 2</TD> <TD><FONT COLOR = "BLUE"> Windows NT 4. 0</TD> <TD><BR></TD> <!-- <BR> 대신에 &NBSP; 를 써도 동일한 효과! --> </TABLE></body> </html> 82

인터넷 HTML 문서 작성 예제 12 파일명 : 표그리기 5. html <html> <head<TITLE>표 예제

인터넷 HTML 문서 작성 예제 12 파일명 : 표그리기 5. html <html> <head<TITLE>표 예제 5 : 여러 칸 합치기 - 가로/세로칸</TITLE> </HEAD> <BODY BGCOLOR = "LIGHTSTEELBLUE"> <TABLE BORDER = 2 CELLPADDING=5> <CAPTION><FONT COLOR = "ORANGE" SIZE = 6><BLINK> COLSPAN 사용의 예</CAPTION></FONT></BLINK> <TR><TH BGCOLOR = "LIMEGREEN"> <FONT COLOR = "YELLOW"> CPU 종류</TH> <TH BGCOLOR = "LIMEGREEN"> <FONT COLOR = "YELLOW">MEMORY 크기</TH> <TH BGCOLOR = "LIMEGREEN"> <FONT COLOR = "YELLOW"> Hard Disk 크기</TH> <TH BGCOLOR = "LIMEGREEN"> <FONT COLOR = "YELLOW"> SCANNER</TH> <TH BGCOLOR = "LIMEGREEN"> <FONT COLOR = "YELLOW"> DVD Drive</TH> <TR BGCOLOR = "LIGHTPINK"><TD> <FONT COLOR = "BLUE"> Pentium 200 duals</TD> <TD><FONT COLOR = "BLUE"> 128 MB</TD> <TD><FONT COLOR = "BLUE"> 2 GB * 2</TD> <TD COLSPAN=2><FONT COLOR = "BLUE"> 둘다 없음. </TD> </TABLE> <BR> <HR SIZE = 5 WIDTH = 100%> <BR> <TABLE BORDER = 5 CELLPADDING=5> <CAPTION><FONT COLOR = "ORANGE" SIZE = 6> ROWSPAN의 예 - My Friends</CAPTION></FONT> <TR><TH ROWSPAN=2 BGCOLOR = "LIMEGREEN"> <FONT COLOR = "YELLOW"> 예쁜 내 친구들</TH> <TH BGCOLOR = "SKYBLUE"><FONT COLOR = "YELLOW">머라이어</TH> <TH BGCOLOR = "SKYBLUE"><FONT COLOR = "YELLOW">박찬호 </TH> <TH BGCOLOR = "SKYBLUE"><FONT COLOR = "YELLOW">피어스브론스넌</TH> <TH BGCOLOR = "SKYBLUE"><FONT COLOR = "YELLOW">양조위</TH> <TR BGCOLOR = "LIGHTPINK"><TD><FONT COLOR = "BLUE"> 팝의 왕초</TD> <TD><FONT COLOR = "BLUE">멋진 한국인</TD> <TD><FONT COLOR = "BLUE">007 끝내줘요. . </TD> <TD><FONT COLOR = "BLUE">잘난 영화배우</TD> </TABLE></body></html> 83

인터넷 HTML 문서 작성 예제 13 파일명 : 표그리기 6. html <html> <head> <TITLE>표를

인터넷 HTML 문서 작성 예제 13 파일명 : 표그리기 6. html <html> <head> <TITLE>표를 이용한 여러 효과</TITLE> </HEAD> <BODY BGCOLOR = "#333333"> <TABLE BORDER = 2 CELLPADDING=5 CELLSPACING = 5> <CAPTION><FONT COLOR = "ORANGE" SIZE =4><B> 내가 좋아하는 사람의 사진</CAPTION></FONT></B> <TR><TH BGCOLOR = "LIGHTSTEELBLUE"> <FONT COLOR = "DARKBLUE"> 머라이어 캐리</TH> <TH BGCOLOR = "LIGHTSTEELBLUE"> <IMG SRC="VIDEO_MARIAHCAREY. JPG" ></TH> <TH BGCOLOR = "LIGHTSTEELBLUE"> <IMG SRC="ALBUM 1. JPG" ></TH> </TABLE></body> </html> 84

인터넷 파일명 : 프레임. html <HTML> <HEAD> <TITLE>간단한 프레임 나누기</TITLE> </HEAD> <frameset cols=30%, 70%>

인터넷 파일명 : 프레임. html <HTML> <HEAD> <TITLE>간단한 프레임 나누기</TITLE> </HEAD> <frameset cols=30%, 70%> <frame src = "ex_frame_sub 1. html"> <frame src = "ex_frame_sub 2. html"> </frameset> </HTML> 파일명 : ex_frame_sub 1. html <HTML> <HEAD> <TITLE>ex_frame_sub 1. html file</TITLE> </HEAD> <BODY BGCOLOR = "VERYLIGHTGREY"> <FONT SIZE=5><B> 머라이어가 좋다. . </FONT> <HR SIZE=4> <IMG SRC="MCAREY. GIF"> </BODY> </HTML> 파일명 : ex_frame_sub 2. html <HTML> <HEAD> <TITLE>ex_frame_sub 2. html file</TITLE> </HEAD> <BODY BGCOLOR = "lightsteelblue"> <FONT SIZE=5><B> 내가 왜 좋아하는가 하며는요. . . </FONT><BR> <HR SIZE=4> 노래를 너무 너무 잘해서. . <BR> 열심히 노력한 모습이 좋아서. . <BR> 한 우물을 파면 성공할 수 있다는 믿음을 주어서. . . <BR> </BODY> </HTML> 89

인터넷 파일명 : 프레임2 <HTML> <HEAD> <TITLE>프레임 이름 지정과 연결/다양하게 나누기</TITLE> </HEAD> <frameset cols=30%,

인터넷 파일명 : 프레임2 <HTML> <HEAD> <TITLE>프레임 이름 지정과 연결/다양하게 나누기</TITLE> </HEAD> <frameset cols=30%, 70% framespacing=20> <frame src = ex_frame_sub 1. html name="frame 1"> <frameset rows=60%, *> <frame src = ex_frame_sub 2. html NAME="frame 2"> <frame src = ex_frame_sub 6. html NAME="frame 3"> </frameset> </HTML> 파일명 : ex_frame_sub 6. html <HTML> <HEAD> <TITLE>프레임 이름 지정과 연결/다양하게 나누기</TITLE> </HEAD> <body bgcolor="brass"><ul> <li><a href=ex_frame_sub 7. html target="frame 1">FRAME 1에 출력!</A><p> <li><a href=other 1. html target="_blank">새로운 창에 출력!</a></ul> </BODY> </HTML> 파일명 : ex_frame_sub 7. html <<HTML> <HEAD> <TITLE>프레임 이름 지정과 연결/다양하게 나누기</TITLE> </HEAD> <body bgcolor="yellow"> <p> 우측하단 frame에서 "frame 1에 출력"을 선택하면 링크에 의해 이 글이 frame 1에 출력 되는 것입니다. <p><p><p> <a href=ex_frame_sub 1. html target="frame 1">머라이어다시보기</a> </BODY> </HTML> 90

인터넷 파일명 : 프레임4 <HTML> <HEAD> <TITLE>검색엔진 연결하기. . . </TITLE> </HEAD> <frameset cols=40%,

인터넷 파일명 : 프레임4 <HTML> <HEAD> <TITLE>검색엔진 연결하기. . . </TITLE> </HEAD> <frameset cols=40%, * framespacing=5> <frame src = ex_frame_sub 41. html name="left"> <frameset rows=70%, *> <frame src = ex_frame_sub 42. html NAME="upper"> <frame src = ex_frame_sub 43. html NAME="lower"> </frameset> </HTML> 파일명 : ex_frame_sub 41. html <HTML> <HEAD> <TITLE>ex_frame_sub 1. html file</TITLE> </HEAD> <BODY BGCOLOR = "VERYLIGHTGREY"> <p align=center> <img src="sale. gif" height = 400 align=left> <FONT SIZE=5><B></FONT> <검색시스템> <HR SIZE=4> <ul> <li><a href="Ex_frame_sub 411. html"><small>한글 검색</small></a> <li><a href="Ex_frame_sub 412. html"><small>English Search</small></a> </ul> </BODY> </HTML> 91

인터넷 파일명 : ex_fram_sub 42. html <HTML> <HEAD> <TITLE>ex_frame_sub 42. html file</TITLE> </HEAD> <BODY

인터넷 파일명 : ex_fram_sub 42. html <HTML> <HEAD> <TITLE>ex_frame_sub 42. html file</TITLE> </HEAD> <BODY BGCOLOR = "gold"> <p align=center> <img src = "progress. gif"> <ul> <lh><h 4>대표적 한글 검색 엔진 </h 4></lh> <li><a href="http: //simmany. hnc. net/" target="upper">심마니</a> <li><a href="http: //www. kachi. com/" target="upper">까치네</a> <li><a href="http: //kor-seek. chungnam. ac. kr/cgi-bin/Korea" target="upper">Korseek</a> </ul> <HR SIZE=4> <h 4><lh>Major Engligh Search Englishes </font></lh></h 4> <font size=4> <li><a href="http: //www. yahoo. com/" target="upper">Yahoo!</a> <li><a href="http: //www. altavista. digital. com/" target="upper">Altavista!</a> </ul> </center> </BODY> </HTML> 파일명 : ex_frame_sub 43. html <HTML> <HEAD> <TITLE>ex_frame_sub 43. html file</TITLE> </HEAD> <BODY BGCOLOR = "silver"> <align=center> <h 4>오늘을 어떤 뉴스가? </h 4> <img src = "kokr 054. gif" border=0 usemap="#map 2"> <map name="map 2"> "> <area shape="rect" coords="0, 0, 130, 48" href="http: //www. chosun. com/" alt="조선일보 </map> 92

인터넷 파일명 : ex_frame_sub 43. html </map> <h 4>정보등록하기 </h 4> <img src =

인터넷 파일명 : ex_frame_sub 43. html </map> <h 4>정보등록하기 </h 4> <img src = "ent_sl. gif" border=0 usemap="#map 3"> <map name="map 3"> <area shape="rect" coords="0, 0, 140, 49" target="_blank"> href="ex_form_text. html" </map> </center> </BODY> </HTML> 파일명 : ex_frame_sub 411. html <HTML> <HEAD> <TITLE>ex_frame_sub 1. html file</TITLE> </HEAD> <BODY BGCOLOR = "VERYLIGHTGREY"> <p align=center> 한글 검색 시스템은 여러분이 WWW에서 한글 검색어를 이용하여 빠르게 해당 정보가 있는 사이트로 찾아갈수 있도록. . <a href="ex_frame_sub 41. html" target="left">앞으로 가기!</a> </BODY> </HTML> 파일명 : ex_frame_sub 412. html <HTML> <HEAD><TITLE>ex_frame_sub 1. html file</TITLE></HEAD> <BODY BGCOLOR = "VERYLIGHTGREY"> <p align=center> English Search Engineen Use the English Search Word Look up in the Site Search the Site. . <a href="ex_frame_sub 41. html" target="left">Go Back!</a></BODY></HTML>> 93

인터넷 파일명 : ex_img 1 <html> <head> <title>이미지 예 1</title> </head> <body bgcolor="lime"> <img

인터넷 파일명 : ex_img 1 <html> <head> <title>이미지 예 1</title> </head> <body bgcolor="lime"> <img src="santa. gif"> </body> </html> 파일명 : ex_img 2 <html><head><title>이미지 예 2</title></head> <body bgcolor="lime"> <p align=center> <img src="santa. gif" alt="산타네 집"> </p> </body></html> 파일명 : ex_img 3 <html> <head> <title>이미지 예 3 -align 속성중 top의 예</title> </head> <body bgcolor="lime"> <p>Align에 따른 차이점 분석 <img src="santa. gif" alt="산타네 집" width=190 height=243 align=top> <p>align을 top으로 했을 때 이미지의 top 부분에 위치 산타네 집에 오신걸 환영해요. 산타 할아버지는 지금 주무신데요. 사슴만 나를 반갑게 마중나왔어요. 올 크리스마스는 매우 해피 <p> 94

인터넷 파일명 : ex_img 5 <html> <head> <title>이미지 예 5 -작은이미지 : 큰이미지</title> </head>

인터넷 파일명 : ex_img 5 <html> <head> <title>이미지 예 5 -작은이미지 : 큰이미지</title> </head> <body bgcolor="lime"> <p align=center> 작은 이미지를 클릭하면 큰 이미지 로드<p> <p align=center> <a href="Ex_ext_image_sub. html"> <img src="실습. bmp" alt="호순이" border=0></a> </p> </body> </html> 파일명 : ex_ext_image_sub. html <html> <head> <title> 큰이미지로 </title> </head> <body bgcolor="lime"> <p align=center> 큰 이미지가 로드 되었습니다. <p> <img src="실습 1. gif" alt="산타네 집"> </p> </body> </html 96