- HTMLの仕組み
- HTMLの構成
- 部活のページの構成
HTMLの仕組み
HTMLはタグと呼ばれるものを用いて，記述していきます．タグというのは，<foo></foo>や<bar/>など，<>を使って記述します．
ここでのfooやbarというのはメタ構文変数というもので，実際に使う時，この場所には場合によって鯖ざまな文字列が入ります．
<foo></foo>型のタグの具体的な例としては，<html></html>というものがあり，これはhtmlタグというものです．
また，このタグに囲まれている文字列とhtmlタグを呼ぶときは，html要素と言います．
<bar/>型のタグの具体的な例としては<br/>があり，これはbrタグというものです．
また，<foo></foo>型のタグは，必ず<foo>に対応したタグ，つまり</foo>がどこかにないといけません．
<foo></foo>はfoo要素を構成するもので，foo要素の始めと終わりを明確に示すためのものです．
<foo/>型のタグは，それ自体がもうすでに1つの要素なので，単体で使用出来ます．
タグの一覧はHTMLクイックリファレンスのタグリファレンスで見ることができます．
この他に．コメントというものがあり．<!--コメント-->と言うフォーマットで記述されます．
コメントは，その場所に対してなにか書き残したいけどページに反映させたくない，といった時などに有効です．
HTMLの構成
次に，HTMLの構成について見ていきます．HTMLは<html></html>の中に<head></head>，<body></body>が入っている．
というのがhtmlの基本的な構成です．
ちなみに，上記の言葉を用いて繰り返すと「html要素の中にhead要素，body要素が入っている」と言う事ができます．
まず頭が来て，次に胴体が来ます．わかりやすいですね．
head要素の中には，そのページを表示するときの設定などを書いて．body要素に，ページのコンテンツを書きます．
以下に一例を示します．
<!--HTMLの構造-->
<html>
<head>
</head>
<body>
foo<br/>
bar
</body>
</html>
しかし，どんなwebページでも，HTMLで作られていればこのフォーマットで書かれているので，head要素とbody要素さえわかれば，もう理解できたも同然になります．
逆に言えば，このフォーマットが守られていないと，HTMLとして成り立っていないので，（HTMLとして）理解することはできなくなります．
つまり，インターネットブラウザはHTMLのhead要素とbody要素を自動で読み取って，私達に理解しやすい形で提供してくれているわけです．
部活のページの構成
では，実際に部活のページのHTMLの構成を見てみましょう（説明の都合上テンプレートになっています）．
いちいちタグの中身もコピーすると長くなってしまうので，タグのみ示します．<!--部活ページの構造-->
<html class="" lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="">
<meta name="author" content="author">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<h1 class="left" id="title">タイトル</h1>
</header>
<div id="contents">
<nav>
<ul>
<li><a href="#" class="current"></a></li>
<li><a href="../index.html"></a></li>
<li><a href="#"></a></li>
<li><a href="http://example.com"></a></li>
<li><a href="http://example.org"></a></li>
</ul>
</nav>
<div id="main">
<article>
<h2></h2>
<div class="box">
<p>
<br><br>
</p>
<aside>
<p><br>
</p>
</aside>
</div>
</article>
</div>
</div>
<footer>
フッター<br>
</footer>
</body>
</html>これも，上記の「html要素の中にhead要素，body要素が入っている」と言うフォーマットに沿っていることがわかります．
head要素はページの設定なので今は置いといて，body要素の中身を見て行きましょう．
えっ，class="" lang="ja" の説明がまだだって？
んーとね，その説明は難しいから後にするつもりだったんだ．ゴメンね．
まず，body要素の直下には，header要素，div要素，footer要素があることがわかります．それぞれHTML5タグリファレンスで見て行きましょう．
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。
<div>タグは、ひとかたまりの範囲として定義する際に使用します。 <div>には特別な意味はありませんが、 <div>～</div>で囲まれた範囲を一つのグループとしてまとめることができます。 ページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグです。
<footer>タグは、直近のセクションのフッタであることを示す際に使用します。このとおり，header要素，div要素，footer要素の順に並んでいて，ページを見てみると，それぞれページの見出し，内容，ページのフッターに対応することがわかります．
つまり，ページの見出しを変えるときはheader要素を，中身を変えるときはdiv要素を，フッターを変えるときはfooter要素を変えればいいのです．
0 件のコメント:
コメントを投稿