HTML

HTML5:address要素とfooter要素

【HTML5課題23】 連絡先を表示させなさい。 <body> <header> <h1>カフェランチブログ</h1> </header> <article> <h2>7月1週目ランチ</h2> <p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け!ぜひ食べに来てくださいね。</p> <p><img src="image/locomoco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p> <aside> <h3>ロコモコ丼の豆知識</h3> <p>ハワイ島で学生向けの…</p></aside></article></body>

HTML5:figure要素とfigurecaption要素

【HTML5課題22】 写真と写真タイトルをまとめて表示させなさい。 <body> <header> <h1>カフェランチブログ</h1> </header> <article> <h2>人気スイーツについて</h2> <p>疲れた時に美味しいスイーツを食べると、疲れも吹っ飛びますね。人気のバナナ豆乳シェイクのようなドリンクをはじめ、スイーツの定番である自家</p></article></body>…

HTML5:hgroup要素とaside要素

【HTML5課題20】 見出しをまとめて表示させなさい。 <body> <header> <hgroup> <h1>七夕</h1> <h2>日本五節句の一つ</h2> </hgroup> </header> <section> <h3>七夕の語源</h3> <p>「古事記」または、日本書紀に登場する。</p> </section> </body> hgroup要素 フロー・コンテンツ、ヘディング・コンテンツ 見出しをグループ化する 【HTML5課題21】 補足情報も含めて…

HTML5:section要素とarticle要素

【HTML5課題18】 文章を内容でわけて表示させなさい。 <header> <h1>クリスマスオーナメント</h1> <p>クリスマスツリーに飾られるオーナメントをご紹介します。</p> </header> <section> <h2>ツリートップ</h2> <p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が</p></section>…

HTML5 テキストの論理構造(3)

【HTML5課題11】 日付を表示させなさい。 <body> <h1>上野動物園のパンダに赤ちゃんが生まれる</h1> <time datetime="2012-07-06" pubdate="pubdate">2012年7月6日</time> 2012年7月6日 </body> 【HTML5課題12】 話している部分を区別して表示させなさい。 <body> <h1>日記内で人が話している部分を区別</h1> <p>今日はとても暑い日だった。日陰を歩いてい</p></body>…

HTML5 テキストの論理構造(2)

【HTML5課題05】 TPOを定義語として表示させなさい。 <body> <h1>TPOを定義語としての記述</h1> <p><dfn title="Time,Place,Occasion">TPO</dfn>は、時と場合と場所にあった服装や振る舞いをすることであると定義されています。</p> </body> 【HTML5課題06】 USAを略語として表示させなさい。 <body> <h1>USAを略語として記述</h1> <p><abbr title="United States of America">USA</abbr>はアメリカ</p></body>…

HTML5 テキストの論理構造(1)

【HTML5課題01】 ドキュメントタイプ宣言を記述し、エンコードタイプを「UTF-8」で記述しなさい。 <html lang="ja"> <meta charset="UTF-8"> <head> <title></title> </head> <body> </body> </html> 【HTML5課題02】 「em 要素」は、一般的な "イタリック" 要素ではありません ムードや音声を表すようなテキストを、その段落の他の部分から際立たせ…

HTMLリンク

テキストリンク 画像リンク メールリンク <a href="移動先のアドレス">○○○のページへ移動</a> <a href="移動先のアドレス"><img src="画像の場所" width="幅" height="高さ" alt="大替え文字"></a> <a href="mailto:xxx.net">お問い合わせ(メールソフトが起動する)</a>

HTML04

以下の内容をHTML文章にしてブログに載せなさい DTDは「XHTML 1.0 Strict」 DTDがわからない場合は、テキスト「上級レイアウト」を読むこと Layout WorkflowNavigationA1 NavigationA2 NavigationA3 NavigationA4 NavigationA5スタイルシートによるレイアウ…

HTML03

<html> <head> <title>HTML03</title> </head> <body> <h1>インテリアショップ a Interior</h1> <h2>インフォメーション</h2> <p>インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</p> <dl> <dt>2012年4月25日オープン</dt> <dd>復刻版の商品が再入荷しました。</dd> <dt>2012年4月26日</dt> <dd>クロックスが入荷しました。</dd> <dt>2012年4月</dt></dl></body></html>…

HTML02

<html> <head> <title>HTML02</title> </head> <body> <h1>デザインの話</h1> <p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p> <h2>パッケージの色</h2> <p>パッケージにはいろいろな色があります。歴史とと</p></body></html>…

HTML01

<html> <head> <title>[HTML01]文書構造の練習</title> </head> <body> <h1>結論:大見出し</h1> <p>要約</p> <h2>結論:検証</h2> <p>解説</p> <ul> <li>検証の項目</li> <li>検証の項目</li> <li>検証の項目</li> </ul> <p>解説</p> <ol> <li>順序ある検証の項目</li> <li>順序ある検証の項目</li> <li>順序ある検証の項目</li> </ol> <img src="~~~~" width="100" height="100"> <dl> <dt>9月2…</dt></dl></body></html>

HTMLで表示する内容は、文書構造と呼ばれる仕組みです。では、「文書構造」とは何か説明なさい

見出し、リストなどを利用し文書を見やすくする為の構造のこと

「<」と「>」の読み方

「<」 小なり 不等号(より小) 左アングルブラケット 「>」 大なり 不等号(より大) 右アングルブラケット|

HTMLの基本構造の役割

~~ 文章に関する指定などを書く。 TITLEタグをいれタイトルを付けられる CSSを使う場合どのCSSを使うかの選択 文字コードの選択 など~~ 文書の本体を表す。 本文を記入 画像の表示 リンクを貼る など

HTMLの基本構造をソースで表示

<html> <head> <title>タイトル</title> </head> <body> </body> </html>