과제1> 결과화면을 보고 html로 추가하기
<html>
<head>
<title>커피에 대하여</title>
</head>
<body bgcolor="FFF3DE">
<a name=top></a>
<h1 align=center>
<font size=7 color="brown" face="MurrayHill Bd BT">About Coffee</font>
</h1>
<table align="center" border=0 width="500" cellspacing="0" cellpadding="0">
<tr align="left">
<td rowspan="3"><img src="images/coffee_01.gif" border=0></td>
<td>
<img src="images/coffee_02.gif" border=0></td>
</tr>
<tr>
<td><img src="images/coffee_03.gif" border=0></td>
</tr>
<tr>
<td><img src="images/coffee_04.gif" border=0></td>
</tr>
</table>
<table align="center" border=0 width="500" cellpadding=30 cellspacing=0>
<tr>
<td colspan="2" bgcolor=f8daa8>
<!-- 두번째 행에 포함되는 내용 시작************************************************* -->
<br><br>
<a name=note1></a>
<b>*커피의 기원*</b><br><br>
에티오피아의 고원 아비시니아에 전해지는 이야기로, 양치기 칼디가 양떼들이 흥분 상태로 뛰노는 것을 보고 그 원인을 조사해 본 결과 목장 근처의 나무에서 빨간 열매를 먹었기 때문이라는 것을 알아내었다.<br>
이 사실을 수도원 원장에게 알려 열매를따서 끓여 먹어보니 전신에 기운이 솟는것을 느끼고 다른 제자들도 같은 경험을하게 되었다. <br><br><br>
<center>
<a href="#top"><img src="images/up.gif" border=0></a>
</center><br><br><br>
<a name=note2></a>
<b>*커피의 어원*</b><br><br>
커피라는 말의 뿌리는 에티오피아의 카파(caffa)라는 말에서 찾을 수 있다.<br>
카파란 "힘"을 뜻하는 아랍어로 에티오피아에서 커피나무가 야생하는 곳의 지명이기도 하다. <br>
이 말은 '힘과 정열'을 뜻하는 희랍어 'kawef'와 통한다. <br>
그리고 카파가 아라비아에서 'qahwa' (와인의 아랍어)가 되고 터키에 건너와 '카베(kqhve)'로 유럽에 건너가 '카페(cafe)', 미국에서는 '커피', 일본에서는 '고히'로 불러지고 있다. <br><br><br>
<center>
<a href="#top"><img src="images/up.gif" border=0></a>
</center><br><br><br>
<a name=note3></a>
<b>*커피의 역사*</b> <br><br>
커피나무의 원산지는 에티오피아, 오늘날처럼 맛는 음료로 발전한 곳은 아라비아 지역이다. <br>
1,000년경 이미 커피를 볶아 삶은 물을 마시고 있었다.<br>
즉, 에티오피아를 발원점으로 홍해를 건너 아라비아 지역에, 그리고 중앙아시아의 터키에 이르러 음료로서 자리를 잡게된 것이다. <br>
우리나라는 아관파천 무렵 1895년경 러시아 공사관에서 고종황제가 마신것이 처음, 그 후 독일의 손탁이라는 여인이 중구 정동에 커피점을 차린것이 효시이다. <br><br><br>
<center>
<a href="#top"><img src="images/up.gif" border=0></a>
</center>
<!-- 두번째 행에 포함되는 내용 끝************************************************* -->
</td>
</tr>
</table>
</body>
</html>
예제> 꿈해몽 풀이 홈페이지
<html>
<head>
<title>꿈해몽</title>
<!-- 코딩1 -->
<base target="in">
</head>
<body><table width=100% height=100%>
<tr>
<td align=center>
<!-- 종속 테이블 시작 -->
<table width="600" border="0" cellspacing="0" cellpadding="1" align="center">
<tr><td><img src="images/title.gif" width="600" height="100"></td></tr>
<tr><td> </td></tr>
<tr><td bgcolor=cornflowerblue>
<!-- 코딩2 -->
<!-- iframe 사용 : 파일 불러 오는 창 -->
<iframe src="default.htm" name="in" width="600" height="300"
border="1" marginwidth="40" marginheight="20"></iframe>
</td></tr>
<tr>
<td align="center">
<!-- 코딩3 -->
<a href="pig.htm"><img src="images/pig.gif" border="0"></a>
<a href="ghost.htm"><img src="images/ghost.gif" border="0"></a>
<a href="default.htm"><img src="images/home.gif" border="0"></a>
</td>
</tr>
</table>
<!-- 종속 테이블 끝 -->
</td>
</tr>
</table>
</html>하이퍼 링크 문자 꾸미기
<html>
<head><title>하이퍼링크 문자 꾸미기</title>
<style type="text/css">
td,body{margin:0; color: #330099; font-size:10pt; padding-left:20px; line-height:17pt }
/*기본스타일*/
a{text-decoration:none; color: #666699; font-size:10pt}/*하이퍼링크 스타일*/
a:hover{color: #3399CC}/*마우스가 올라오면 바뀔 문자*/
/*코딩1 : 기본설정값*/
a.default:link {color:blue;text-decoration:underline;}
a.default:visited {color:purple;text-decoration:underline;}
a.default:active {color:red;text-decoration:underline;}
/*코딩2 : 글자색이 변해요*/
a.color:hover{color:blue}
/*코딩3 : 밑줄*/
a.underline:hover{text-decoration:underline;}
/*코딩4 : 진한 실선 밑줄*/
a.solid:hover{border:0px solid ; border-bottom-width:2px }
/*코딩5 : 점선*/
a.dotted:hover{border:0px dotted ; border-bottom-width:2px }
/*코딩6 : 사각형 모양*/
a.square:hover{border:1 solid ;padding:0px }
/*코딩7 : 배경색이 변해요*/
a.bgchange{background-color: #FFCC66; color:white; width:80px; margin:2px; text-align:center}
a.bgchange:hover{background-color: #FF9900; color:white;}
/*코딩8 : 배경색이 나타나요*/
a.bgcolor:hover{background-color:#3399CC; color:white}
/*코딩9 : 글자가 커진다.*/
a.bigfont:hover{font-size:12pt}
/*코딩10 : 꾹 눌러지는 느낌*/
a.move:hover{position:relative; top:-1px; left:-1px}
/*코딩11 : 앞에 그림이 떠요*/
a.bullet:link{padding-left:15pt}
a.bullet:visited{padding-left:15pt}
a.bullet:hover{background:url(bullet.gif) no-repeat; padding-left:15pt}
/*코딩12 : 웃는 스마일 이미지가 되요*/
a.list:link{list-style-image:url(bullet1.gif);color:orange}
a.list:visited{list-style-image:url(bullet1.gif);color:orange}
a.list:hover{list-style-image:url(bullet2.gif);color:#FF3300}
</style>
</head>
<body background="bg.gif">
<table width=500 height=100% bgcolor=white align=center border=0>
<tr valign=top><td width=50%>
마우스를 올리면..
<hr>
<b>기본값</b><br>
<a href="http://www.naver.com" class=default>네이버</a><br>
<a href="http://www.empas.com" class=default>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=default>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=default>100hot</a><br>
<br><br>
<hr>
<b>글자색이 변해요</b><br>
<a href="http://www.naver.com" class=color>네이버</a><br>
<a href="http://www.empas.com" class=color>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=color>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=color>100hot</a><br>
<br><br>
<hr>
<b>밑줄이 생겨요</b><br>
<a href="http://www.naver.com" class=underline>네이버</a><br>
<a href="http://www.empas.com" class=underline>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=underline>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=underline>100hot</a><br>
<br><br>
<hr>
<b>진한 밑줄이 생겨요</b><br>
<a href="http://www.naver.com" class=solid>네이버</a><br>
<a href="http://www.empas.com" class=solid>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=solid>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=solid>100hot</a><br>
<br><br>
<hr>
<b>점선이 생겨요</b><br>
<a href="http://www.naver.com" class=dotted>네이버</a><br>
<a href="http://www.empas.com" class=dotted>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=dotted>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=dotted>100hot</a><br>
<br><br>
<hr>
<b>사각박스가 생겨요</b><br>
<a href="http://www.naver.com" class=square>네이버</a><br>
<a href="http://www.empas.com" class=square>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=square>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=square>100hot</a><br>
<br><br>
</td><td>
마우스를 올리면..
<hr>
<b>배경색이 나타나요</b><br>
<a href="http://www.naver.com" class=bgcolor>네이버</a><br>
<a href="http://www.empas.com" class=bgcolor>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=bgcolor>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=bgcolor>100hot</a><br>
<br><br>
<hr>
<b>글자가 커져요</b><br>
<a href="http://www.naver.com" class=bigfont>네이버</a><br>
<a href="http://www.empas.com" class=bigfont>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=bigfont>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=bigfont>100hot</a><br>
<br><br>
<hr>
<b>글자를 누른것 같아요</b><br>
<a href="http://www.naver.com" class=move>네이버</a><br>
<a href="http://www.empas.com" class=move>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=move>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=move>100hot</a><br>
<br><br>
<hr>
<b>앞에 그림이 떠요</b><br>
<a href="http://www.naver.com" class=bullet>네이버</a><br>
<a href="http://www.empas.com" class=bullet>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=bullet>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=bullet>100hot</a><br>
<br><br>
<hr>
<ul><b>웃어요..^^</b>
<li><a href="http://www.naver.com" class=list>네이버</a>
<li><a href="http://www.empas.com" class=list>엠파스</a>
<li><a href="http://www.yahoo.co.kr" class=list>야후 코리아</a>
<li><a href="http://www.100hot.co.kr" class=list>100hot</a>
</ul>
<br>
<hr>
<b>배경색이 변해요</b><br>
<a href="http://www.naver.com" class=bgchange>네이버</a><br>
<a href="http://www.empas.com" class=bgchange>엠파스</a><br>
<a href="http://www.yahoo.co.kr" class=bgchange>야후 코리아</a><br>
<a href="http://www.100hot.co.kr" class=bgchange>100hot</a><br>
<br><br>
</td>
</tr>
</table>
</body>
</html>
스타일시트를 사용해서 결과화면처럼 출력