開発環境
- OS X Mavericks - Apple(OS)
- Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
- BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
- HTML (マークアップ言語)
- Cascading Style Sheets(CSS) (スタイルシート)
Head First HTML and CSS (Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media )のChapter 2(Going Further with Hypertext: Meeting the "HT" in HTML)、EXERCISE(p.68)を解いてみる。
EXERCISE(p.68)
入出力結果(Terminal)
$ ls -R ./ ../ beverages/ images/ lounge.html* ./beverages: ./ ../ elixir.html* ./images: ./ blue.jpg* green.jpg* red.jpg* ../ drinks.gif* lightblue.jpg* $
HTML (BBEdit, Emacs)
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="images/drinks.gif">
<p>
Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out our detailed <a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
</body>
</html>
0 コメント:
コメントを投稿