【HTML01】文書構造の練習
- 以下の内容をHTML文章にしてブログに載せなさい。
- DTDとmetaは不要
メモ
- table border="1" width="650"はDWで構築するとできてしまいますが、装飾部分なのでcss記述したら削除。
<html> <head> <title>【HTML01】文書構造の練習</title> </head> <body> <h1>結論：大見出し</h1> <p>要約</p> <h2>結論：検証</h2> <h3>解説</h3> <ul> <li>検証の項目</li> <li>検証の項目</li> <li>検証の項目</li> </ul> <ol> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> </ol> <img src="01.jpg" width="100" alt="犬の画像" height="100" /> <dl> <dt>9月25日</dt> <dd>フェリカテクニカルアカデミーWeb実践講座開講</dd> <dt>9月26日</dt> <dd>HTMLの基本構造の入力練習</dd> <dt>9月27日</dt> <dd>定義型リストと表組みの練習</dd> </dl> <table border="1" width="650" summary="表組み"> <tr> <th>科目</th> <td>内容</td> </tr> <tr> <th>Webサイト構築</th> <td>正しい文書構造を理解する（パラグラフの概念）</td> </tr> <tr> <th>プログラミング</th> <td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td> </tr> <tr> <th>Web画像</th> <td>力学からコンピュータの描画を理解する</td> </tr> </table> </body> </html>
【HTML02】
- 以下の内容をHTML文章にしてブログに載せなさい
- DTDとmetaは不要
<html> <head> <title>【HTML02】</title> </head> <body> <h1>デザインの話</h1> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> <h2>パッケージの色</h2> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p> <p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。</p> </body> </html>
【HTML03】
- 以下の内容をHTML文章にしてブログに載せなさい
- DTDとmetaは不要
<html> <head> <title>【HTML03】文書構造の練習</title> </head> <body> <h1>インテリアショップ a Interior</h1> <h2>インフォメーション</h2> <p>インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</p> <dl> <dt>2012年4月27日</dt> <dd>復刻版の商品が再入荷しました。</dd> <dt>2012年4月26日</dt> <dd>クロックスが入荷しました。</dd> <dt>2012年4月25日</dt> <dd>オープン 家具・新商品入荷しました。</dd> </dl> <img src="01.jpg" width="400" height="121" alt="商品の画像" /> <h3>コンセプト</h3> <p>インテリアについての「想い」を感じてください。</p> <h3>ショップ</h3> <p>店内のイメージ写真と会社案内。</p> <h3>商品紹介</h3> <p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p> <h3>店舗へのアクセス</h3> <p> Interior」までの交通機関のご案内です。</p> <h3>ブログ</h3> <p>スタッフの「ブログ」です。</P> <h3>お問い合わせ</h3> <p>インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。</p> </body> </html>
【HTML04】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>【HTML04】</title> </head> <body> <h1>Layout Workflow</h1> <ul> <li><a href="#">NavigationA1</a></li> <li><a href="#">NavigationA2</a></li> <li><a href="#">NavigationA3</a></li> <li><a href="#">NavigationA4</a></li> <li><a href="#">NavigationA5</a></li> </ul> <h2>スタイルシートによるレイアウトワークフロー</h2> <h3>本文のレイアウト</h3> <p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p> <p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p> <h2>スタイルシートによるレイアウトワークフロー</h2> <h3>本文のレイアウト</h3> <p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p> <p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p> <h3>補足情報</h3> <p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p> <h3>補足情報</h3> <ul> <li><a href="#">NavigationB1</a></li> <li><a href="#">NavigationB2</a></li> <li><a href="#">NavigationB3</a></li> <li><a href="#">NavigationB4</a></li> <li><a href="#">NavigationB5</a></li> </ul> </body>
