HTML and CSS - Going Further with Hypertext: Meeting the "HT" in HTML(parent folder)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

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)

lounge.html

<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>

beverages/elixir.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>

Kamimura's blog

2014年10月19日日曜日

HTML and CSS - Going Further with Hypertext: Meeting the "HT" in HTML(parent folder)

0 コメント:

コメントを投稿