開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 12.(HTML5 Markup Modern HTML)、EXERCISE(No. 8765) を取り組んでみる。
EXERCISE(No. 8765)
BEVERAGES
House Blend, $1.49
Mocha Cafe Latte, $2.35
Cappuccino, $1.89
Chai Tea, $1.85
ELIXIRS
We proudly serve elixirs brewed by our friends at the Head First Lounge.
Green Tea Cooler, $2.99
Raspberry Ice Concentration, $2.99
Blueberry Bliss Elixir, $2.99
Cranberry Antioxidant Blast, $2.99
Chai Chiller, $2.99
Black Brain Brew, $2.99
Header 1
Paragraph
Header 1
Paragraph
Header 1
Paragraph
HTML5
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sample4.css">
</head>
<body>
<header>
Header
<img id="headerLogo" alt="Starbuzz Coffee Logo image" src="">
<img id="headerSlogan"
alt="Providing all the caffeine you need to power your life." src="">
</header>
<nav>Nav</nav>
<div id="tableContainer">
<div id="tabelRow">
<section id="drinks0">
<h1>BEVERAGES</h1>
<p>House Blend, $1.49</p>
<p>Mocha Cafe Latte, $2.35</p>
<p>Cappuccino, $1.89</p>
<p>Chai Tea, $1.85</p>
<h1>ELIXIRS</h1>
<p>
We proudly serve elixirs brewed by our friends
at the Head First Lounge.
</p>
<p>Green Tea Cooler, $2.99</p>
<p>Raspberry Ice Concentration, $2.99</p>
<p>Blueberry Bliss Elixir, $2.99</p>
<p>Cranberry Antioxidant Blast, $2.99</p>
<p>Chai Chiller, $2.99</p>
<p>Black Brain Brew, $2.99</p>
</section>
<section id="main0">
Main
<article>
Article
<h1>Header 1</h1>
<p>Paragraph</p>
</article>
<article>
<h1>Header 1</h1>
<p>Paragraph</p>
</article>
<article>
<h1>Header 1</h1>
<p>Paragraph</p>
</article>
</section>
<aside>
Aside
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->
<footer>Footer</footer>
</body>
</html>
CSS(Stylesheet)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sample4.css">
</head>
<body>
<header>
Header
<img id="headerLogo" alt="Starbuzz Coffee Logo image" src="">
<img id="headerSlogan"
alt="Providing all the caffeine you need to power your life." src="">
</header>
<div id="tableContainer">
<div id="tabelRow">
<section id="drinks0">
<h1>BEVERAGES</h1>
<p>House Blend, $1.49</p>
<p>Mocha Cafe Latte, $2.35</p>
<p>Cappuccino, $1.89</p>
<p>Chai Tea, $1.85</p>
<h1>ELIXIRS</h1>
<p>
We proudly serve elixirs brewed by our friends
at the Head First Lounge.
</p>
<p>Green Tea Cooler, $2.99</p>
<p>Raspberry Ice Concentration, $2.99</p>
<p>Blueberry Bliss Elixir, $2.99</p>
<p>Cranberry Antioxidant Blast, $2.99</p>
<p>Chai Chiller, $2.99</p>
<p>Black Brain Brew, $2.99</p>
</section>
<section id="main0">
Main
<article>
Article
<h1>Header 1</h1>
<p>Paragraph</p>
</article>
<article>
<h1>Header 1</h1>
<p>Paragraph</p>
</article>
<article>
<h1>Header 1</h1>
<p>Paragraph</p>
</article>
</section>
<aside>
Sidebar
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->
<footer>Footer</footer>
</body>
</html>
0 コメント:
コメントを投稿