HTML入門：bodyタグの中身の書き方
平成最後の6月、まずはマリオテニス体験会をしてました。
テニスゲームの基礎が分かっていなかったり操作ミスが多かったりでなかなか気持ちよく楽しめないなぁというのが本音。製品版どうすっかな…。
今夜もドットインストール、HTML入門の続き。
#8
bodyタグの中身を触っていく。
あらかじめ用意していたヘッダー画像をimgタグで貼り付け。
見出しには<h1>や<h2>タグを使うが、重要度に応じて数字を変えていく。
#9
フッターに用意していた画像(メール、ブログ、写真へのリンク用)とコピーライトを作成。
#10
メモ書き(コメントタグ)には<!-- -->を使い、<!-- メモ書き -->という風に使う。
chromeの右クリック>ページのソースを表示で普通に見えてしまうので、個人情報などなどはやめておくこと。
#11
<body>タグ内でヘッダー要素として扱うには、<header></header>タグを使う。
headタグは文書全体に対する情報を入れるタグ、headerタグは文書内でヘッダー要素として扱うためのタグなので混同しないこと。
同じくフッター要素として扱うには<footer></footer>タグを使う。
本文(body)に対するタグはないが、汎用的に<section></section>タグを使う。
sectionの中にsectionタグを書くという使い方も可能。
<h1>や<h2>という見出しタグだが、セクション内での相対的な順位でOK。
(別のセクションであれば、同じ文書でh1が複数存在する場合もある)
また、文書のナビゲーションには<nav></nav>タグを使う。
#12
htmlではリストを表現するためのタグが2種類ある。
<ol>(Orderd List、連番付きリスト)と<ul>(Unorderd List、箇条書きリスト)である。
今回のレッスンではulを使用。
リストに入る要素には<li>(List Item)タグをつける。
今回はヘッダーとフッターにそれぞれリストとなる要素があるので、それぞれにolタグをつけていく。
#13
外部サイトへのリンクをつけていく。
<a></a>タグを使い、属性を下記のようにつけていく。
<a href="(外部URL)"> </a>
しかし、これだと今のタブで指定したURLを表示する。
別タブで開く場合は、<a href="(外部URL)" target="_blank"> </a>とする。
クリックしてメールを送るようにする場合は以下のようにする。
<a href="mailto:(送り先アドレス)"> </a>
ターゲット属性の付加も可能。
#14
<a>タグにhtmlのファイル名を書けばそこへのリンクも可能。
#15
HTMLの仕様は下記のサイトで詳しく学べる。
HTML要素リファレンスというページには、これまで学んだものやその他のタグが一覧で載っている。
各タグの説明ページにある「許可された内容」について、これに入っているタグを入れ込みで書くことができる。
例：<head>タグの「許可された内容」には<meta>や<title>がある。
今回作成したページは完成版として例で示されたものには見た目の面でまだまだ程遠い。
見た目を整えるにはCSSのファイルを作成する必要がある。
これでHTML入門は終了！
2日に分けてHTMLについて勉強しました。
多岐にわたるタグで少し混乱しそうなところもありますが、今回作成したhtmlファイルを見直したりhtmlのリファレンスを読んだりすれば大丈夫かと思います。
※山田太郎さんではありませんが、レッスンの例に従ってこのようにしました。
明日からはCSSの勉強でこのページをもっと見やすくしていきます！
