6-1:HTMLとタグについて

Webページは、この講習で利用したコンポーザのような専用のツールを使って 作成するのが普通です。 しかし、より詳しい取り扱いをするためには HTMLとその「タグ」についての 知識も必要となります。


・ 皆さんが作成したWebページは、 どのような形式でファイルに保存されているのでしょうか? Webページの元となるファイルは、 HTML(Hyper Text Markup Langage)と呼ばれる形式で保存されます。 HTMLは通常のテキスト形式です。したがって、「メモ帳」などの普通のテキスト エディタを用いて中を見ることが可能です。 ただし、もちろん画像の中身やレイアウトがそのまま見えるわけではありません。
HTMLでは本文のテキスト以外の部分は「タグ」と呼ばれる特別な約束に従った 記述を行います。 テキストのレイアウト、改行、段落、箇条書、文字のサイズや色、画像、表、 そしてハイパーリンクなど、 これまで紹介してきたさまざまな機能は、すべて「タグ」の指定によって実現 されます。

6-1:基本的なタグの例とその機能
タグ名意味
<hr>水平線
<h1>見出し(レベル1)
<h2>見出し(レベル2)
<h3>見出し(レベル3)
<br>改行
<p>段落
<img>画像
<a>リンク
<ul>箇条書(番号なし)
<ol>箇条書(番号付き)
<table>

・ HTMLでは、記号 < , > ではさまれた部分がタグとなります。 <br> や <hr> は単独で利用される最も単純なタグです。 タグの多くはテキストの特定の範囲を操作対象とします。 たとえばある1つの段落であれば、<p> テキストの内容・・・ </p> のように開始タグと終了タグで範囲を囲います。 タグ名の前に記号 / を付けると終了タグとなります。
複雑な操作を実現するためにはタグの内部で、さらに必要な情報を与える 必要があります。 典型的なのが画像を表示するための <img> タグです。


<img src="image.gif" alt="an image" width="400" height="100">

<img>タグの場合には、その元になるファイル名(URL)が必須です。 ファイル名の指定には src="ファイルのURL" という形式で指定します。 その他に alt には画像が表示できない(見ることができない)場合の 代替の情報を、width, height に画像の表示サイズを指定できます。 src,alt,width,height などは「属性(attribute)」と呼ばれます。
どんな名前の属性がどんな働きをするかは、それぞれのタグごとに決まりがあります。 たとえばハイパーリンクを表す <a> タグの場合には、リンク先の URLを指定するためには、href という名前の属性を用います。 属性の情報が必ずしも必要でない場合は省略することも許されます。 しかし、<img> の場合でも alt, width, heightの属性は常に指定するのが 望ましいでしょう。

・ 自分の作ったページ以外の場合でも、HTMLの内容を見ることが可能です。 ブラウザは必ずHTMLの内容を読み込んでいるからです。 現在表示されているページの内容は、「表示(V)」メニューの「ページソース(O)」 を選択することで可能になります。

・
・
・