hello.htmlには登場しないタグについて説明します。
img
タグHTMLのimg
タグは、画像を表示するためのタグです。src="..."
の「...
」の部分にファイル名を指定します(src
はsourceを省略したものです。画像のソース(源)のファイルを指定することになります)。
たとえば<img src="pictures/picture000.jpg">
と書くと、HTMLファイルがあるフォルダ(ディレクトリ)内のpictures
フォルダにあるpicture000.jpg
というファイルの画像がブラウザのドキュメント領域に表示されます。
<img>
タグのscr="..."
の部分のことを属性と呼びます。タグについての付加的な情報を指定するために用います。
img
タグのsrc
属性は表示する画像の場所を指定するものです。場所としてはこの例のようにHTML文書が置かれているファイルからの相対的な位置を示す場合もありますし、URLを指定することもできます。URLを指定すると、ネット上で公開されている画像を表示することができます(ただし、他人の画像等を利用する場合は、承諾を得る必要があります)。
img
タグのsrc
属性は「必須の属性」です。どの画像を表示するか指定がないとimg
タグの存在意義がありません。
これに対して必須ではない属性(オプションの属性)も存在します。たとえば画像の大きさを指定するためにstyle
属性を指定できますが、それは省略することができます。
br
タグドキュメント領域の文章に「改行」を入れるにはHTMLのbr
タグを使う必要があります。次のようにすることで、「おはようございます」「こんにちは」「こんばんは」がそれぞれ別の行に表示されます。
おはようございます<br> こんにちは<br> こんばんは
一方、次のようにbr
タグを書かないと、改行はされず1行に表示されてしまいます。
おはようございます こんにちは こんばんは
結果は次のようになってしまいます。
おはようございます こんにちは こんばんは
次のようにol
タグを使うことで「順序付きリスト(Ordered List)」を出力できます。li
はlist item(リストの要素)の意味です。
<ol> <li> 私はプログラミングが好きになる〜〜 </li> <li> 私はプログラミングが好きになる〜〜 </li> ... 【中略】 ... <li> 私はプログラミングが好きになる〜〜 </li> </ol>
出力は次のようになります。
1. 私はプログラミングが好きになる〜〜 2. 私はプログラミングが好きになる〜〜 3. 私はプログラミングが好きになる〜〜 ... 【中略】 ... 15. 私はプログラミングが好きになる〜〜 16. 私はプログラミングが好きになる〜〜
同様に、ul
タグを使うことで「順序なしリスト(Unordered List)」を出力できます。
<ul> <li> 私はプログラミングが好きになる〜〜 </li> <li> 私はプログラミングが好きになる〜〜 </li> ... 【中略】 ... <li> 私はプログラミングが好きになる〜〜 </li> </ul>
出力は次のようになります。
・私はプログラミングが好きになる〜〜 ・私はプログラミングが好きになる〜〜 ... 【中略】 ... ・私はプログラミングが好きになる〜〜
次のようなHTMLコードを書くことで表(table)を作ることができます(このほかにも表関連のタグがありますが、ここでは省略します。ここで用いられているタグだけで表を作ることができます)。
<table> <tr> <!-- 1行目の始まり。 trは Table Row の略 --> <td>1-1</td> <!-- 1行目の1列目の要素。 td は Table Dataの略 --> <td>1-2</td> <!-- 1行目の2列の要素 --> <td>1-3</td> <td>1-4</td> </tr> <!-- 1行目の終わり --> <tr> <!-- 2行目 --> <td>2-1</td> <!-- 2行目の1列目の要素 --> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <!-- 2行目の終わり --> <tr> <!-- 3行目 --> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> <!-- 3行目の終わり --> </table>
上のコードを表示すると次のように表示されます。
1-1 1-2 1-3 1-4 2-1 2-2 2-3 2-4 3-1 3-2 3-3 3-4
1-1、1-2、...に画像(img
)タグを書けば、画像が表のように並ぶことになります。
たとえば、画像を1行4列に並べるには、次のようなHTMLコードを出せばよいことになります。
<table> <tr> <td><img src="pictures/picture000.jpg" style="..."></td> <td><img src="pictures/picture001.jpg" style="..."></td> <td><img src="pictures/picture002.jpg" style="..."></td> <td><img src="pictures/picture003.jpg" style="..."></td> </tr> </table>
HTMLの「リンク」を書くにはa
タグを使います(a
は錨などの意味をもつanchorのaで、href
はHypertext REFerence)。形式は次のとおりです。
<a href="【URL】">【リンク対象】</a>
【URL】
── 外部ページのアドレス(https://...
)を指定することも、自分のサイトのほかのファイル(ページ)を指定することもできます【リンク対象】
── この部分がリンクになり、選択(クリックあるいはタップ)すると【URL】
に移動します。テキストだけでなく画像なども指定できますspan
タグとスタイル指定span
タグを使うことで<span>
...</span>
で囲んだ部分の文字などにstyle(スタイル)を指定できます。
あなたの今日の運勢は<span style="color: red;">中吉</span>です。
たとえば上のコードでは"color: red;"
と指定されているので、中吉が赤い字で表示されることになります。
div
タグdiv
タグ(<div>
...</div>
)は、「領域(division)」を作るためのタグです。
このタグを使うことで、領域全体に関係するスタイルを指定したり、領域内の各要素に適用されるスタイルを指定したりできます。
たとえば、次のようにすると、文字列と画像が、幅320ピクセルの領域に(width: 320px;
、センタリングされて(text-align: center;
)、文字は36ポイントの大きさ(font-size: 36pt;
)で表示されることになります。
<div style="width: 320px; text-align: center; font-size: 36pt;"> ロケット発射<br> <img src="pictures/rocket2.png" style="width: 200px;"><br> 発射! </div>