HTML5 | CSS
독서 웹페이지 관련 페이지
웹개발자지망생
2023. 7. 18. 17:28
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홈</title>
<frameset rows ="30%, 65%, 5%" frameborder = "1"> <!-- 행을 나누는 비율-->
<frame src="title.html"></frame>
<frameset cols = "20%, 80%">
<frame src="menu.html"></frame>
<frame src="notice.html" name = "right"></frame>
</frameset>
<frame src="bottom.html"></frame>
<frame src="">
</frame>
</frameset>
</head>
<body>
</body>
</html>menu.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메뉴</title>
<style>
a {
text-decoration-line: none;
}
</style>
</head>
<body bgcolor="#fffafa">
<ul>
<li><a href = "books.html" target ="right"><h2>추천도서</h2></a></li>
<li><a href = "guide.html" target ="right"><h2>독서지도법</h2></a></li>
<li><a href = "readingnews.html" target ="right"><h2>독서소식</h2></a></li>
<li><a href = "edunews.html" target ="right"><h2>교육소식</h2></a></li>
</ul>
</body>
</html>notice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공지사항</title>
<style>
.fontStyle1 {
color:#800000;
font-family: 맑은고딕;
font-size:50px;
}
.fontStyle2 {
color:#800000;
font-family: 맑은고딕;
font-size:20px;
}
</style>
</head>
<body>
<h2 class = "fontStyle1">공지사항</h2>
<div class ="fontStyle2">
<marquee>사이트를 방문해주셔서 감사합니다.</marquee>
<ul>
<li>신간 도서가 있습니다.</li>
<li>교육일정 공지</li>
<li>급식 메뉴</li>
</ul>
</div>
<img src="images/infologo.jpg" align = "left">
</body>
</html>readingnews.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독서소식</title>
<style>
ul {
color:#800000;
font-family: 맑은 고딕;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li><h2>어린이날 서점으로의 문화 여행</h2></li>
<img src="images/16.jpg" width="500" height="350"><p></p>
<li><h2>도서관, 군부대 등 다채로운 독서문화행사</h2></li>
국립중앙도서관에서는 "책읽는 기쁨 책속에서 지혜를"이라는 주제 아래 최근
유네스코 세계기록유산으로 등재된... 어쩌구 저쩌구....
</ul>
</body>
</html>title.html
!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타이틀</title>
<style type="text/css">
span {
color:#00008d;
font-family: 휴먼굵은샘체;
font-size: 70px;
}
</style>
</head>
<body bgcolor="#ffffe0">
<div>
<img src="images/headrlogo.jpg" width="500" height="280">
<span>아이들을 위한 독서 지도 </span>
<div>
</body>
</html>guide.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독서지도법</title>
<style>
dl {
color: #800000;
font-family: 맑은 고딕;
font-size:30px;
}
</style>
</head>
<body>
<dl>
<dt><image src = "images/13.jpg"></image></dt>
<dd>0-2세 영유아 시기에는 자장가 노래와 명언을 들려주고....</dd><p></p>
<dt><image src = "images/14.jpg"></image></dt>
<dd>단편 동화나 환성 동화를 봄으로써 흥미를 갖고 보고한다....</dd><p></p>
<dt><image src = "images/15.jpg"></image></dt>
<dd>중등 시기는 교과서와 관련된 책을 선정해주는 것이 좋으며....</dd><p></p>
</dl>
</body>
</html>edunews.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>교육소식</title>
<style>
ol {
color:#800000;
font-family: 맑은 고딕;
font-size:30px;
}
</style>
</head>
<body>
<ol>
<h2>청소년 인문학교</h2>
<li>기간 : 2023년 7월 ~ 12월</li>
<li>대상 : 중고등학생</li>
<li>장소 : 도서관</li>
<li>내용 및 방법 : 자체 토론 후 저자 초정 강연</li>
<img src = "images/17.jpg" width = "700" height="350"><p></p>
</ol>
</body>
</html>bottom.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>저작권</title>
<style>
center {
color:#696969;
font-family: 'Time new Roman', Times, serif;
}
</style>
</head>
<body bgcolor="#d3d3d3">
<center>2023 kiwook kim All right reserved</center>
</body>
</html>book.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>추천 도서</title>
<style>
ul {
color:#800000;
font-family: 맑은 고딕;
font-size:30px;
}
h2 {
color:#800000;
font-family: 맑은 고딕;
font-size:50px;
}
</style>
</head>
<body>
<h2>오늘의 추천 도서</h2>
<ul>
<li>유아</li><p></p>
<img src = "images/1.jpg" width="100" height="150" border = "1" hspace = 20> <!-- hspace 이미지간격-->
<img src = "images/2.jpg" width="100" height="150" border = "1" hspace = 20>
<img src = "images/3.jpg" width="100" height="150" border = "1" hspace = 20>
<p></p>
<li>초등</li><p></p>
<img src = "images/4.jpg" width="100" height="150" border = "1" hspace = 20> <!-- hspace 이미지간격-->
<img src = "images/5.jpg" width="100" height="150" border = "1" hspace = 20>
<img src = "images/6.jpg" width="100" height="150" border = "1" hspace = 20>
<p></p>
<li>중고</li><p></p>
<img src = "images/7.jpg" width="100" height="150" border = "1" hspace = 20> <!-- hspace 이미지간격-->
<img src = "images/8.jpg" width="100" height="150" border = "1" hspace = 20>
<img src = "images/9.jpg" width="100" height="150" border = "1" hspace = 20>
<p></p>
<li>전문서</li><p></p>
<img src = "images/10.jpg" width="100" height="150" border = "1" hspace = 20> <!-- hspace 이미지간격-->
<img src = "images/11.jpg" width="100" height="150" border = "1" hspace = 20>
<img src = "images/12.jpg" width="100" height="150" border = "1" hspace = 20>
<p></p>
</ul>
</body>
</html>