3.タグを書いてみる

 タグは、htmlのバージョンアップによって、新しいものは増えたり、廃止されるものがあったりします。進歩に統一規格が追い付かず、書式やレイアウトのデザイン関係を記述するスタイルシート・CSSのコマンドや、機能を追加するためのプログラムJAVAスクリプトが追加され、それらがタグの一部になるように記述される(インラインタグ)こともあります。従って、これらを含めたすべてが、タグの勉強ということになっています。タグとして記述されたものは、ブラウザで表示したときには見えません。見えないようにするために、ここからここまでという鍵かっこ< >の中にあるものを、ここではすべてタグということにします。

●開始タグと、終了タグ
メモ帳を開き、書式タグの練習 と書きます。これを、拡張子htmlで保存します。

題 - メ モ 
フ ァ イ ル 旧 を ま 旧 を 0 ) 表 丁 ヘ ル ア 印 
ロ 
X 
1 名 前 を 付 け て 保 存 
↑ ・ 、 pc 、 デ ス ク ト ッ プ , 
新 し い フ ォ ル ダ 
第 物 件 管 理 
・ デ ス ク ト ッ プ 
ド キ ] メ ン ト 
新 ビ ク チ ャ 
上 三 ュ ー ジ ッ ク 
フ ァ イ ル 名 ( N) : 5 。 n' 物 司 
フ ァ イ ル の ま テ キ ス ト 文 に 叡 0 
フ ォ ル ダ - の 非 表 示 
X 
書 式 タ グ の 練 習 
0 
ズ - ム 罔 
・ ス テ ー タ ス パ ー に 
18 % 
UTE-8 
テ ス ク ト ッ プ の 移 章 
保 存 偽 ) 
キ ャ ン セ ル 
Wi 0 に R 田
メモ帳に、文字コードの表示が無い場合は、表示メニューのステータスバーをチェックします。これは一度やれば、以後はステータスバーが表示され、テクストの文字コードが見えます。
名前を付けて保存で、半角で lesson1.html と拡張子まで書き込んで保存します。ファイルの種類にはhtmlはありません。保存した後の、メモ帳は閉じずにそのままにしておけば、また開いて編集が楽です。
Wクリックで開くと、ブラウザで開かれます。タグが無いので、メモ帳と同じ表示です。

lesson 1. html 
CD 
C:/Users/winboys/Desktop/lesson1. 
lesson I html
今度は、これにタグを追加していきます。ブラウザで開いたものは編集できないので、メモ帳で開き直します。閉じてしまった場合は、右クリック・プログラムから開く・メモ帳と指定します。面倒なので、メモ帳は閉じずに置きます。
<I><U>書式タグ</U><B>練習</B></I>
のように、赤い部分を半角で追加します。上書き保存し、htmlファイルを
Wクリックで開きます。

lessonl .html 
CD 
C./Users/winboys/Desktop/lesson 1

<U></U>に挟まれた文字は、<U>というアンダーラインタグで、アンダーラインが引かれます。終了タグは/が追加されたものです。練習の2文字は、<B>というボールド(太字)という書式を設定するタグです。これも</B>という終了タグで閉じています。複数のタグが入るときに、注意するのは、入れ子構造という、終了タグが交差しないことです。もう一つ<I>というタグは、全体にかかっています。これは、斜体(イタリック)文字の設定ですが、このようにedgeでは無視されています。このタグは、廃止が宣言されて、10年たって廃止されたものです。参考のために、インターネットエクスプローラーの最終版11で開いた様子を載せています。

u 乛 nbo top , x 一 0 & 0 一 , Des p 一
右のように、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">
に 550n1 。 htm い メ モ 第 
フ ァ イ ル 旧 を 旧 を 式 ( 0 ) 表 示 ( Ⅵ ヘ ル ア 印 
く じ く の 書 タ グ く / U 〉 の く 8 〉 練 習 く / 8 > く / し 
く IMG SRC= http:/./wwt.y.winboys.netん”k/10/22d.jpg > 
ロ 
X 
鬥 厄 550n1 上 い 
0 
書 式 を 2 の 練 習 
〇 フ ァ イ ル ー CJUsers/winboys... ☆ 
臨 
0 
査 
朝
http://www.winboys.net/week/10/22d.jpg のように、http://で始まるアドレスは、絶対アドレスと言って、webサーバー上のwinboys.netweek/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>斜体タグは取ってあります。
「 物 に 001. 01 丨 
0 
書 式 タ ク の 練 習 
0 〇 フ ァ イ ル | C:/Users/winboys.. 
〇 フ ァ イ ル ー C:/Users/winboys.. 
第 10 山 - 法 寺 ( 岩 殿 観 音 ) 東 山 市 
書 式 タ ク の 練 習 
第 10 ~ 山 
法 寺 ( 岩 搬 観 音 ) 東 山 市

左は<br>の折り返し改行、右は<P></P>の段落改行です。段落は、改行の後、大きめの改行をします。

●htmlの書式設定
ワード文書など、印刷するドキュメントは、規格の用紙サイズがあります。そこに綺麗に収めるための、様々な書式が設定できますが、htmlは表示対象は画面で、その大きさも様々です。見る人の画面に合わせて表示させるために、html側でサイズなどを指定しないのが基本です。中央配置という<CENTER></CENTER>が廃止されたのもそのためです。しかし、タグで出来なかった書式の設定を、スタイルシートコマンドでできるようになり、今はCSSも理解しないと、綺麗なページが作れなくなりました。CSSは、スタイルシートと呼ばれ、ページデザインを決めるものです。プロが作った既製服のようなもので、blogは様々なCSSが選べるようになっています。廃止された<CENTER>タグも<P arign="center"> のように、CSSをオプションで組み込んで、タグのように使えます。CSSは、タグと区別がつかないようになっています。

■ポイント htmlは、様々な環境で見られる共有ドキュメントの書式です。自分の環境で良く見えるように書式を設定しても意味ありません。文字の大きさ、画面の大きさなど、見る側で設定されるもの。