タグは、htmlのバージョンアップによって、新しいものは増えたり、廃止されるものがあったりします。進歩に統一規格が追い付かず、書式やレイアウトのデザイン関係を記述するスタイルシート・CSSのコマンドや、機能を追加するためのプログラムJAVAスクリプトが追加され、それらがタグの一部になるように記述される(インラインタグ)こともあります。従って、これらを含めたすべてが、タグの勉強ということになっています。タグとして記述されたものは、ブラウザで表示したときには見えません。見えないようにするために、ここからここまでという鍵かっこ< >の中にあるものを、ここではすべてタグということにします。
●開始タグと、終了タグ
メモ帳を開き、書式タグの練習 と書きます。これを、拡張子htmlで保存します。
メモ帳に、文字コードの表示が無い場合は、表示メニューのステータスバーをチェックします。これは一度やれば、以後はステータスバーが表示され、テクストの文字コードが見えます。
名前を付けて保存で、半角で lesson1.html と拡張子まで書き込んで保存します。ファイルの種類にはhtmlはありません。保存した後の、メモ帳は閉じずにそのままにしておけば、また開いて編集が楽です。
名前を付けて保存で、半角で lesson1.html と拡張子まで書き込んで保存します。ファイルの種類にはhtmlはありません。保存した後の、メモ帳は閉じずにそのままにしておけば、また開いて編集が楽です。
Wクリックで開くと、ブラウザで開かれます。タグが無いので、メモ帳と同じ表示です。
今度は、これにタグを追加していきます。ブラウザで開いたものは編集できないので、メモ帳で開き直します。閉じてしまった場合は、右クリック・プログラムから開く・メモ帳と指定します。面倒なので、メモ帳は閉じずに置きます。
<I><U>書式タグ</U>の<B>練習</B></I>
のように、赤い部分を半角で追加します。上書き保存し、htmlファイルをWクリックで開きます。
のように、赤い部分を半角で追加します。上書き保存し、htmlファイルをWクリックで開きます。
<U>と</U>に挟まれた文字は、<U>というアンダーラインタグで、アンダーラインが引かれます。終了タグは/が追加されたものです。練習の2文字は、<B>というボールド(太字)という書式を設定するタグです。これも</B>という終了タグで閉じています。複数のタグが入るときに、注意するのは、入れ子構造という、終了タグが交差しないことです。もう一つ<I>というタグは、全体にかかっています。これは、斜体(イタリック)文字の設定ですが、このようにedgeでは無視されています。このタグは、廃止が宣言されて、10年たって廃止されたものです。参考のために、インターネットエクスプローラーの最終版11で開いた様子を載せています。
右のように、utf-8に自動対応できず文字化けしていますが、廃止された<I>タグは有効になっています。日本式のシフトJISに変更したファイルで文字は正しく表示されています。
この3つのタグは、タグの元祖で、コマンド文字も節約のため1文字です。長い名前のタグは、基本英語なので、スペルを間違えるとエラーになります。また、ブラウザのタグ辞典に無いものを使ったり、全角文字を使うと、動きません。エラーになると、基本的には白紙状態になります。
●リンクタグ
タグの中で、最も重要なのは、リンクタグです。htmlの中身はテキストなので、他のファイルを表示するには、ファイルのアドレスをタグの中に書いて、そのファイルを表示させます。リンクで表示できるファイルは、画像ファイルが中心でしたが、html5になってmp4の動画も表示できるようになりました。それまでは、動画を表示させるには、アドビ社のflashというシステムが必要でしたが、html5で動画が可能になると、flash動画は危険ということで、すべてのブラウザで使えなくなりました。flashを使ったスライドショー動画は、もう動きません。
画像リンク <IMG SRC="画像ファイルのアドレス">
先ほどのファイルに、以下の一行を追加します。
<IMG
SRC="http://www.winboys.net/week/10/22d.jpg">
http://www.winboys.net/week/10/22d.jpg のように、http://で始まるアドレスは、絶対アドレスと言って、webサーバー上のwinboys.netのweek/10/フォルダの、22d.jpgという名前のjpeg画像ファイルを表示せよというタグです。イメージタグと言って<IMG に、スペースで切って、SRC=という式でアドレスを指定しますが、アドレスの文字列は”ダブルクォーテーションで挟みます。タグに、スペースで仕切って入れるものを、オプションタグと言います。IMGタグに、終了タグはありません。IMGタグで指定できる画像ファイルは、拡張子gifやpngなどもありますが、bmpはwindows専用の非圧縮ファイルなので指定できません。
●改行タグ
ソースは、文字と画像タグは、改行されていますが、ブラウザの表示は改行がありません。ソースの改行や、半角スペース・タブなどは、ソースを見やすくするもので、実際のブラウザ表示では無視されます。
文字列を改行するには、改行タグ<BR>を使うか、段落タグ<P></P>を使います。
<U>書式タグ</U>の<B>練習</B><BR>
<IMG
SRC="http://www.winboys.net/week/10/22d.jpg">
または、
<P><U>書式タグ</U>の<B>練習</B></P>
<IMG
SRC="http://www.winboys.net/week/10/22d.jpg">
を、試して見て下さい。いずれも、<I>斜体タグは取ってあります。
左は<br>の折り返し改行、右は<P></P>の段落改行です。段落は、改行の後、大きめの改行をします。
●htmlの書式設定
ワード文書など、印刷するドキュメントは、規格の用紙サイズがあります。そこに綺麗に収めるための、様々な書式が設定できますが、htmlは表示対象は画面で、その大きさも様々です。見る人の画面に合わせて表示させるために、html側でサイズなどを指定しないのが基本です。中央配置という<CENTER></CENTER>が廃止されたのもそのためです。しかし、タグで出来なかった書式の設定を、スタイルシートコマンドでできるようになり、今はCSSも理解しないと、綺麗なページが作れなくなりました。CSSは、スタイルシートと呼ばれ、ページデザインを決めるものです。プロが作った既製服のようなもので、blogは様々なCSSが選べるようになっています。廃止された<CENTER>タグも<P
arign="center"> のように、CSSをオプションで組み込んで、タグのように使えます。CSSは、タグと区別がつかないようになっています。
■ポイント htmlは、様々な環境で見られる共有ドキュメントの書式です。自分の環境で良く見えるように書式を設定しても意味ありません。文字の大きさ、画面の大きさなど、見る側で設定されるもの。