2017年6月21日水曜日

開発環境

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 12.(HTML5 Markup Modern HTML)、EXERCISE(No. 8765) を取り組んでみる。

EXERCISE(No. 8765)

Header Providing all the caffeine you need to power your life.

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

Main
Article

Header 1

Paragraph

Header 1

Paragraph

Header 1

Paragraph

Footer

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 コメント:

コメントを投稿