앞에서 작성한 커피 전문점 홈페이지를 개선하여 보자. 먼저 메뉴를 누르면 커피 전문점의메뉴에 대한 자셍한 설명을 보여주는 웹 페이지로 연결되도록 하자. 리스트를 사용하여 메뉴를 화면에 표시한다.
-소스코드-
메인 페이지
<!DOCTYPE html>
<html>
<head>
<title>Web Programming</title>
</head>
<body>
<h1>Welcom to Web coffee</h1>
<img src="coffee.png">
<p>
하우스 로스팅 원두의 신선한 커피를 맛보고 싶다면 <em>공인 1급 바리스타</em>가 최고급 원두만을 직접 엄선하여 사용합니다.
</p>
<h2>메뉴</h2>
<p>
메뉴에 대하여 자세히 알고 싶다면 <a href="menu.html">여기</a>를 클릭하세요
</p>
</body>
</html>
메뉴 페이지
<!DOCTYPE html>
<html>
<head>
<title>Web Programming</title>
</head>
<body>
<h1>메뉴 </h1>
<ul>
<li>
아메리카노<br />
<img src="americano.jpg" width="100" height="100">
에스프레소에 물을 넣어 연하게 마시는 커피
</li>
<li>
카페라떼<br />
<img src="cafealtte.jpg" width="100" height="100">
에스프레소(Caffe)와 우유(Late)를 넣은 커피
</li>
<li>
카푸치노<br />
<img src="cappuccino.jpg" width="100" height="100">
우유를 섞은 커피에 계핏가루를 뿌린 이탈리아식 커피
</li>
</ul>
<a href="7.html">메인으로 돌아가기</a>
</body>
</html>
'프로그래밍' 카테고리의 다른 글
| 온라인 HTML에디터 (0) | 2021.11.20 |
|---|---|
| 이력서 형식(63p) (0) | 2021.11.06 |
| 일주일 스케줄표(62p) (0) | 2021.11.06 |
| 에그 스크램블 레시피(62p) (0) | 2021.11.06 |
| HTML을 이용하여 개인 홈페이지 만들기(56~58p) (0) | 2021.10.30 |
