読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

復習 - HTML文書構造

チェックテスト

<!DOCTYPE html>
<meta charset="utf-8">
  • CSSの外部参照 P.073
<link rel="stylesheet" href="css/style.css">
  • 外側の下を空ける P.092
h1 { margin-bottom: 20px; }
  • 内側を空ける P.092
p { padding: 20px; }
  • 下部に枠線を設定 P.075
p#content { border-bottom: 2px solid #00F; }
  • ブラウザの初期値を0に設定 P.131
body { margin: 0; padding: 0; }
  • 文字色と背景色を設定 P.073
h1 { color: white; background-color: brown; padding: 16px; }



手順のチェック

以下の手順は、必ず実行しましょう。

  1. DTDHTML5)の入力
  2. HTMLの基本構造の入力
  3. meta(文字コード)の入力
  4. title要素の入力
  5. 文書構造の設定(見出し+本文)
  6. ブラウザでプレビュー
  7. HTML文法チェックW3C公式サイト
  8. CSSは外部リンクで記述
  9. 再度ブラウザでプレビュー
  10. CSS文法チェックW3C公式サイト
Q01
  • DTD HTML5で基本構造を記述しなさい

  (meta要素 文字コード指定も含む)

Q02
  • 池袋で猫カフェ「CatCafé」を開いてお客さんを呼びたいと思います
  • 適切なtitle要素を記述しなさい
Q03
CatCaf&#233;のにゃんこ紹介

●あたる(白キジトラ・オス)

目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

[写真:幅200px 高さ200px]

特徴
大きな目と耳。まがったしっぽ。

性格
マイペース。
Q04
  • Q03の内容に「もっと見る→」というテキストを追加して、クリックしたら「cat」フォルダー内の「ataru.html」に遷移するように記述しなさい
Q05
  • にゃんこの紹介を表組みで作りたいと思います(大きさは適宜)
  • 「名前」「オス・メス」「特徴」「性格」「写真」という項目で、「あたる」を例に表示させなさい
Q06
Copyright &#169; CatCaf&#233;. All Rights Reserved.
Q07
  • HTMLドキュメントと同一階層にある「cssフォルダー」内にある、「style.css」を読み込む記述をしなさい

解答例

A01・A02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>池袋の猫カフェ|CatCafe</title>
</head>
<body>
</body>
</html>


アキュート・アクセント

  • フランス語の場合、accent aigu (アクサンテギュ)といい、e (通常曖昧母音に発音される)に付加することで発音を [e] に変える働きをする
A03
<h1>CatCafeのにゃんこ紹介</h1>
<h2>●あたる(白キジトラ・オス)</h2>
<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。性格はいたってマイペース。
段ボール箱のかどや柱で爪とぎをするのが大好き。</p>
<P><img src="" width="200" height="200" alt="あたるの写真"></P>
<dl>
<dt>特徴:</dt><dd>大きな目と耳。まがったしっぽ。</dd>
<dt>性格:</dt><dd>マイペース。</dd>
</dl>
A04
<p class="more"><a href="cat/ataru.html">もっと見る→</a></p>
A05
<table width="546" border="1">
<tr>
  <th>名前</th>
  <th>オス・<br>メス</th>
  <th>特徴</th>
  <th>性格</th>
  <th>写真</th>
</tr>
<tr align="center">
  <td>あたる</td>
  <td>オス</td>
  <td>大きな目と耳。<br>まがったしっぽ。</td>
  <td>マイペース。</td>
  <td><img src="" width="200" height="200" alt="あたるの写真"></td>
</tr>
</table>
table {
  border-collapse: collapse;
}
th {
  background: #F5F5F5;
}



A06
<p><small>Copyright (c) CatCafe. All Rights Reserved.</small></p>
A07
<link rel="stylesheet" href="css/style.css">
広告を非表示にする