開発環境
- 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)、EXERCISE(No. 7706) を取り組んでみる。
EXERCISE(No. 7706)
Header1
Paragraph id="amazing"
Paragraph
Paragraph
Paragraph
Paragraph, em detailed directions
Header2
Lemon Breeze
Paragraph
Header3
Paragraph
Header3
Paragraph
Paragraph elixirs.
Header2
Paragraph
- li1
- li2
- li3
- li4
- li5
HTML5
<!doctype html> <html> <head> <link rel="stylesheet" href="sample2.css"> </head> <body> <div> <p><img alt="Head First Lounge"></p> <h1>Header1</h1> <p id="amazing"> Paragraph id="amazing" </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> </body> </html>
CSS(Stylesheet)
#amazing { width: 200px; float: right; }
0 コメント:
コメントを投稿