HTML5 - CSS - Layout and Positioning: Arranging Elements(block elements, nested)

Head First HTML and CSS

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 11.(Layout and Positioning: Arranging Elements)、BE THE BROWSER(No. 7610) を取り組んでみる。

BE THE BROWSER(No. 7610)

Header1

Paragraph

Paragraph

Paragraph

Paragraph

Paragraph, em detailed directions

Header2

Lemon Breeze

Paragraph

Header3

Paragraph

Header3

Paragraph

Paragraph elixirs.

Header2

Paragraph

• li1
• li2
• li3
• li4
• li5

Paragraph

HTML5

d<div>
  <p><img alt="Head First Lounge"></p>
  <h1>Header1</h1>
  <p>
    Paragraph
  </p>
  <p>
    Paragraph
  </p>
  <p id="guarantee">
    Paragraph
  </p>
  <p>
    Paragraph
  </p>
  <p>
    Paragraph, <em>em</em>
    <a title="Detailed Directions to the Lounge">detailed directions</a> 
  </p>
  <h2>Header2</h2>
  <p>
    <img src="" alt="Lemon Breeze Elixir">
  </p>
  <h3>Lemon Breeze</h3>
  <p>
    Paragraph
  </p>
  <p>
    <img src="" alt="Chai Chiller Elixir">
  </p>
  <h3>Header3</h3>
  <p>
    Paragraph
  </p>
  <p>
    <img src="" alt="Black Brain Brew Elixir">
  </p>
  <h3>Header3</h3>
  <p>
    Paragraph
  </p>

  <p>
    Paragraph
    <a title="Head First Lounge Elixirs">elixirs</a>.
  </p>

  <h2>Header2</h2>
  <p>
    Paragraph
  </p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
  </ul>

  <p id="footer">
    Paragraph
  </p>
</div>