HTML5 演習基礎
【演習1】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A01</title> </head> <body> <section> <h1>日記</h1> <time datetime="2011-05-03" pubdate="pubdate">2011年5月3日</time> <p>今日は春休みに旅行先をピックアップした。</p> <p>別府温泉<br>大分県別府市</p> </section> </body> </html>
【演習2】
!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A02</title> </head> <body> <section> <h1>読書メモ</h1> <p>宮沢賢治作品を読みました。</p> <cite>オツベルと象</cite> <p>牛飼いが話す物語で、<q>オツベルときたら大したもんだ。</q>というフレーズが印象的だった。</p> <blockquote> 「まあ、よかったねやせたねえ。」みんなはしずかにそばにより、鎖と銅をはずしてやった。<br> 「ああ、ありがとう。ほんとにぼくは助かったよ。」<mark>白象はさびしくわらって</mark>そう云った。 </blockquote> <p>強調部分は象の気持ちをよく表していると感じた箇所です。</p> </section> </body> </html>
【演習3】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A03</title> </head> <body> <section> <h1>強調表現</h1> <p>私は<em>今日</em>、図書館に行きたかった。</p> <p>本の貸し出し期間は<strong>2週間</strong>です</p> <p>この演習では<b>強調表現</b>を取り上げました。</p> </section> </body> </html>
【演習4】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A04</title> </head> <body> <p><dfn title="Time,Place,Occation">TPO</dfn>は、時と場所と場合にあった服装やふることであると定義されています。</p> <p><abbr title="United States of America">USA</abbr>はアメリカ合衆国の略称です。</p> </body> </html>
【演習5】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A05</title> </head> <body> <p>地名にルピを振ってみよう。</p> <p>※ルビに対応していないブラウザでも見えるようにしよう</p> <p><ruby>日本橋<rp>(</rp><rt>にほんばし</rt><rp>)</rp></ruby></p> <p><ruby>馬喰<rp>(</rp><rt>ばくろ</rt><rp>)</rp>町<rp>(</rp><rt>ちょう</rt><rp>)</rp></ruby></p> </body> </html>
【演習6】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A06</title> </head> <body> <h1>化学式を書いてみよう</h1> <p>二酸化炭素の化学式はCO<sub>2</sub>です。</p> </body> </html>
【演習7】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A07</title> </head> <body> <h1>面積の単位を表示しよう</h1> <p>1辺の長さが1メートルの正方形の面積は、1m<sup>2</sup>と表します。</p> </body> </html>
【演習8】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A08</title> </head> <body> <h1>HTMLソースを表示しよう</h1> <p>やってみよう！<br>5で作成したHTMLソースの一部を表示しよう。</p> <pre><p>100<sup>2</sup>は、10,000になります。<p></pre> </body> </html>
【演習9】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A09</title> </head> <body> <h1>写真を表示しよう</h1> <p>今日出かけた水族館の写真です</p> <p><img src="images/06.png" width="150" height="130" alt="カラフルでかわいい魚がたくさん泳いでいる水族館です"></p> </body> </html>
【演習10】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A10</title> </head> <body> <h1>ページ内の別の個所にリンクしてみよう</h1> <p>このページの内で移動しよう。</p> <p><a href="#bara">バラの写真はこちら</a></p> <p><img src="images/05.png" width="390" height="360" alt="カラフルでかわいいお花です"></p> <p id="bara"><img src="images/07.png" width="390" height="360" alt="とてもあざやかなピンクのバラです"></p> <p id="happa"><img src="images/08.png" width="390" height="360" alt="きれいな緑の葉に赤の葉脈が生えます"></p> <p>このようにページ内でリンクする場合には、リンク先にidを設定します。</p> </body> </html>
【演習11】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A11</title> </head> <body> <h1>違うページの指定した箇所にリンクしてみよう</h1> <p>このページから【演習A10】の葉っぱの写真の箇所にリンクします。</p> <p><a href="ensyu_A10.html#happa">葉っぱの写真はこちら</a></p> <p><img src="images/05.png" width="390" height="360" alt="カラフルでかわいいお花です"></p> <p><img src="images/07.png" width="390" height="360" alt="とてもあざやかなピンクのバラです"></p> <p><img src="images/08.png" width="390" height="360" alt="きれいな緑の葉に赤の葉脈が生えます"></p> <p>このようにページ内でリンクする場合には、リンク先にidを設定します。</p> </body> </html>
【演習12】
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>基礎演習A12</title> </head> <body> <h1>画像にリンクを貼ってみよう</h1> <p>このページの画像から【演習A10】にリンクします。</p> <p><a href="ensyu_A10.html"><img src="images/07.png" width="80" height="70" alt="バラの写真" </p> </body> </html>
