アジェンダ
- HTMLのタグ
- img
- link
- script
- iframe
- HTMLの属性
- alt
- rel
- src
- type
- widht
- height
- HTMLのコメント
- 実践
- 外部ファイルに関するタグと属性のまとめ
HTMLのタグ
img
画像であることを示すタグ。
</img>は使用しない。
imageのimg。
link
外部ファイルに記載されている内容を自身のHTMLファイルに適応させる、ことを示すタグ。
スタイルシートやFaviconを指定する際に用いる。
</link>は使用しない。
※Faviconとは
お気に入りやタブに表示させる、そのWebページを表すアイコン。
Favorite iconを略したもの。
script
JavaScriptであることを示すタグ。
外部ファイルに記載されているJavaScriptを引用することも、HTMLファイル内に記載することもできる。
iframe
外部ファイルを自身のWebページの一部として表示させていることを示すタグ。
iframeに対応していないブラウザに表示させる代替テキストも指定することができる。
HTMLの属性
alt
文書以外のデータに対し、音声読み上げの内容を指定するのに用いる属性。
alternativeのalt。
rel
自身のHTMLファイルに対し、引用する外部ファイルの関係を指定するのに用いる属性。
relationのrel。
src
引用するファイルのパスを指定するのに用いる属性。
sourceのsrc。
type
引用するファイルの種類を指定するのに用いる属性。
width
Webブラウザに表示させる幅を指定するのに用いる属性。
height
Webブラウザに表示させる高さを指定するのに用いる属性。
HTMLのコメント
HTMLのコメントは、<!-- コメント本文 -->と記述する。
実践
上記の内容を用いて、以下のindex.htmlを作成した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
<!-- アイコンの画像をFaviconに設定. -->
<link rel="shortcut icon" type="image/jpg" href="./makoto.jpg">
</head>
<body>
<h1>☆自己紹介☆</h1>
<!-- アイコンの画像. -->
<img src="./makoto.jpg" alt="上目遣いの天使" title="マコト">
<!-- 自己紹介文. -->
<p>
私の名前はマコトです。天界出身です。<br>
私の信条は以下の通りです。<br>
</p>
<!-- インラインフレーム挿入. -->
<p>
<iframe src="./lorem_ipsum.html" width="400" height="200">
iframe対応のブラウザでご覧ください。
</iframe>
</p>
</body>
</html>
これをWebブラウザに表示させるとこんな感じ。
インラインフレームも出来ており、タブに表示されているアイコンも指定した画像となっている。
また、スタイルシートとJavaScriptを引用する際は以下のように記述する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./example.css">
<!-- src属性で外部ファイルを指定する場合. -->
<script type="text/javascript" src="./example.js"></script>
<!-- HTMLファイル内に直接記述する場合. -->
<script type="text/javascript">
タグの内側にJavaScriptを記述する
</script>
<title>CSSとJavaScript</title>
</head>
<body>
未学習故、参照の仕方のみ記述。
</body>
</html>
外部ファイルに関するタグと属性のまとめ
今後HTMLを書いていく際、どのタグにどの属性を書くのかわからなくなる予感がしたため、表でまとめた。
| img | link | script | iframe | |
|---|---|---|---|---|
| type | ○ | ○ | ||
| title | ○ | |||
| rel | ○ | |||
| href | ○ | |||
| src | ○ | △ | ○ | |
| alt | ○ |
なんとなく、以下のような規則があるように見える。
- タグ名で、引用するファイルの種類がわからない場合、rel属性を使用する。
- Webブラウザに直接表示されるような内容、HTMLファイルに影響を及ぼすような場合、srcを使用する。
- 引用するのみで、HTMLファイルに影響を及ぼさないような場合、hrefを使用する。
おわりに
今回は、外部ファイルに関する内容だった。
インラインフレームという概念は初めて知ったので、興味深かった。ブログにTwitterを貼り付けているのもインラインフレームという技術なんだろうな。
気になったことをひとつ記す。
タグの中に複数の属性を記述する際、順不同らしい。
どのような順が好ましいか、規約で決まっているか、など、十分に注意しなければならない。
次回 >> ここ
参考
5-1 画像（HTMLのオブジェクト）
5-2 ファイルの読み込み（HTMLのオブジェクト）
5-3 iframe（HTMLのオブジェクト）
5-4 コメント（HTMLのオブジェクト）