Table of Contents
前回のおさらい
前回はHTMLタグについて詳しく解説しました。タグには様々な種類があり、役割の違うタグが集まってWebページが作られていることがわかりました。
今回は、さらに多くのタグを使って、ページのコンテンツ（内容）を充実させましょう。
ページのテーマを決める
まず、何のためにページを作るのかを決める必要があります。ここでは例として、自己紹介のページを作るとしましょう。
以前に作った page1.html にタグを追加していきましょう。page1.html の中身は次のようになっているはずです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>私のページのタイトル</title> </head> <body> <h1>はじめてのホームページ</h1> <p>私のホームページへようこそ！<p> </body> </html>
さて、これを編集して自己紹介の内容を作っていきましょう。
自己紹介のページには以下の情報を掲載するとします。
- 題名
- プロフィール画像
- 基本情報（名前、年齢、性別…など）
- 好きなもの・嫌いなもの
- 一言
実際に作っていく前に、ページタイトル（タブに表示される名前）を「自己紹介のページ」に変えておきましょう。ページタイトルを変えるには、titleタグの中身を書き換えればよいので、以下のようになります。
書き換えがあった行に色をつけています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自己紹介のページ</title> </head> <body> <h1>はじめてのホームページ</h1> <p>私のホームページへようこそ！<p> </body> </html>
自己紹介の題名を表示する
題名を「私の自己紹介！」に変更します。このページの題名を表す大見出しはh1タグですので、このタグの中身を書き換えればいいですね。
また「私のホームページへようこそ！」という文章は、今回は必要ないので消してしまいましょう。h1タグのすぐ下にあるpタグを消去してください。
書き換えた後のソースは以下のようになると思います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自己紹介のページ</title> </head> <body> <h1>私の自己紹介！</h1> </body> </html>
プロフィール画像を表示する
次にプロフィール画像を表示したいと思います。画像を表示するタグは img です。imgは閉じタグがなく、src属性によって読み込む画像を指定します。
実際にこのタグを使ったHTMLソースを見てみましょう。画像はとりあえず、以下のものをダウンロードして使ってください。
読み込む画像の保存場所は、HTMLソース（.htmlファイル）が保存されているところと同じ場所（ディレクトリ）です。保存場所が違うと画像が読み込めませんのでご注意ください。
読み込むファイルの名前は拡張子を含めて正確に書かなければいけません。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>自己紹介のページ</title> </head> <body> <h1>私の自己紹介！</h1> <img src="profile.png"> </body> </html>
ちなみに img は image（イメージ: 画像）の略で、src は source（ソース: 源）の略です。
これで「自己紹介の題名」と「プロフィール画像」が表示できました。下の画像のように表示されたでしょうか。
imgタグの使い方がわかったら、好きな画像に変えてみましょう。
基本情報を箇条書きで表示する
箇条書き（リスト）を作るには、ulタグとliタグを使います。ulは Unordered List（アンオーダード リスト: 順番なしリスト）の略です。中の li は List Item（リスト アイテム: リストの要素）の略です。
名前、年齢、性別、出身地を箇条書きで書くと、HTMLソースは次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介のページ</title>
</head>
<body>
<h1>私の自己紹介！</h1>
<img src="profile.png">
<ul>
<li>家野ペイジ</li>
<li>18歳</li>
<li>男性</li>
<li>東京都</li>
</ul>
</body>
</html>
これでページにリストが作られます。
リストを作る際は、<ul> 〜 </ul> の間に、書きたい項目の数だけ <li> 〜 </li> を書きます。項目を追加したいときは、liタグを増やします。
ちなみに、ulタグをolタグに変えると、1, 2, 3, … と順番に番号が付けられたリストになります。olは Ordered List（オーダード リスト: 順番付きリスト）の略です。
残りは「好きなもの・嫌いなもの」と「一言」ですが、説明が長くなりそうなので次のページで解説します。
おさらい
今回は画像を表示する方法と、リストを作る方法を学びました。
- imgタグを使ってページ内に画像を表示できる。読み込む画像はsrc属性で指定する。
- ulタグを使ってリストを作る範囲を決める。リストの要素はliタグで作る。
次回は表の作り方を学びましょう！