ソースコードをブログに表示

Webデザインの勉強

HTMLの基本構造

  • 以下のようにブログに表示させなさい
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基本構造の練習</title>
</head>
<body>
</body>
</html>


【課題03】

以下の語句は何を表すのか（または、何をする役割なのか）答えなさい。

  • meta　

　　ヘッダー内に記述し、文書についての情報となる「メタデータ」を指定する要素

  • http-equiv

　　MIMEタイプ、言語設定などHTTPサーバーへの情報を記述

  • charset

　　character set　文字をコンピュータ内部表現の数値に変換する対応表や方式

  • head

　ブラウザに内容のルールを伝える（ブラウザでは不過視）

  • body

　閲覧者に内容の意味を伝える（ブラウザでは可視）

内容を記述した場合

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基本構造の練習</title>
</head>
<body>
<h1>ページ全体を理解できる記事タイトル</h1>
<p>要約</p>
<h2>記事の大見出し</h2>
<p>記事の結論を書く本文</p>
<h3>記事の小見出し</h3>
<p>記事の結論に至る検証を書く本文（１）</p>
<ul>
<li>文章の内容の表す（順番を変えても意味の変わらない項目の）箇条書き（１）</li>
<li>文章の内容の表す（順番を変えても意味の変わらない項目の）箇条書き（２）</li>
<li>文章の内容の表す（順番を変えても意味の変わらない項目の）箇条書き（３）</li>
<li>文章の内容の表す（順番を変えても意味の変わらない項目の）箇条書き（４）</li>
<li>文章の内容の表す（順番を変えても意味の変わらない項目の）箇条書き（５）</li>
</ul>
<p>記事の結論に至る検証を書く本文（１）</p>
<ol>
<li>文章の内容の表す（順番を追って読んで欲しい項目の）箇条書き（１）</li>
<li>文章の内容の表す（順番を追って読んで欲しい項目の）箇条書き（２）</li>
<li>文章の内容の表す（順番を追って読んで欲しい項目の）箇条書き（３）</li>
<li>文章の内容の表す（順番を追って読んで欲しい項目の）箇条書き（４）</li>
<li>文章の内容の表す（順番を追って読んで欲しい項目の）箇条書き（５）</li>
</ol>
<h3>最終的な結論の小見出し</h3>
<p>最終的な結論を書く本文</p>
</body>
</html>


【課題04】

以下の語句は何を表すのか（または、何をする役割なのか）答えなさい。

  • h1 一番重要な見出し
  • ul マーク付きリスト（順序が置き換わっても意味が伝わる並列な内容）
  • ol 番号付きリスト（順序が意味をもつ内容）
  • li リスト