■ WSJ21[GHP] - XHTMLタグ講座で覚えよう

■Section 2-5■良いホームページ作成講座■

▼GHP講座2.5　－　XHTMLタグを覚える

◎ 基本的なホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するタグ一覧◇◆◇

img a

※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。

★画像表示 - <img /> - Image

　画像を貼り付けるために使います。
　タグの属性には以下のものなどがあります。
　　・「src属性(Source)」･･･表示する画像を「URL(絶対パス)」「URI(相対パス)」で指定
　　・「width属性」･･･画像の横サイズをピクセル単位で指定
　　・「height属性」･･･画像の縦サイズをピクセル単位で指定
　　・「alt属性」･･･画像が表示されない場合の代替文章を記述･･･(写真、イラストなど)
　　・「title属性」･･･画像の「詳細補足」文章を記述

当サイト「ＷＳＪ」のシンボルマーク。「お気に入り登録」で表示されるようになってます。
 　　<img width='32' height='32' alt='ロゴ' src='./ghp02_logo.png' />
 　　<img width='32' height='32' alt='ロゴ' src='./ghp02_logo.png' title='WSJロゴ' />

↓　マウスを画像にのせて下さいね　↓

当サイト「ＷＳＪ」のシンボルマーク。「お気に入り登録」で表示されるようになってます。
　　

　上記の画像には透過PNGを使用しています。
　練習には、右クリックで「使用中のhtmlファイルと同フォルダ」に保存してお使い下さい。
　デザイン的にも「width属性」「height属性」は必ず指定するようにしましょう。
　→ 読込が延滞しても指定スペースを空けて表示していってくれます。
　→ 指定値は、実寸の他、任意拡大縮小値でも構いません。
　「alt属性」は画像が表示されない場合の代替テキスト文章ので、必ず指定して下さい。
　「src属性」に指定できる画像形式は「xxx.jpg」「xxx.gif」「xxx.png」です。

★ハイパーリンク - <a> - Anchor

　他のページへリンクを張るためなどに使います。
　HTML(HyperText Markup Language)の「HyperText」にあたるタグです。
　タグの属性には以下のものなどがあります。
　　・「href属性」･･･リンク先を「URL(絶対パス)」「URI(相対パス)」で指定
　　・「target属性」･･･リンク先のフレームを指定
　　・「id属性」･･･ページ内にリンク先の名前をつける(同ＩＤはページ内に１つのみ)
　　・「title属性」･･･「詳細補足」文章を記述

<a id="img1">「img1」というリンク先の名前を付ける</a>
 <a href="http://www8.ocn.ne.jp/~wallshop/wsj/ghp02_04.html">「URL(絶対パス)」でリンク</a>
 <a href="./ghp02_04.html">「URI(相対パス)」でリンク</a>
 <a href="mailto:wsj21ponta@hotmail.com">管理人へメール</a>
 <a href="./ghp02_04.html"><img width="32" height="32" alt="リンク画像" src="./ghp02_logo.png" /></a>
 <a href="#img">「img」という名前のついた場所にリンク</a>
 <a href="./ghp02_04.html#img">別ページの「img」という名前のついた場所にリンク</a>
 <a target="_blank" href="./ghp02_04.html">target属性で「_blank」を指定したリンク</a>
 <a title="2003/01/05:更新" href="./ghp02_04.html">マウスをのせるとコメントリンク</a>

↓　見比べて、クリックしてみてね　↓

「img1」というリンク先の名前を付ける
「URL(絶対パス)」でリンク
「URI(相対パス)」でリンク
管理人へメール

「img」という名前のついた場所にリンク
別ページの「img」という名前のついた場所にリンク
target属性で「_blank」を指定したリンク
マウスをのせるとコメントリンク

↓　見栄えが悪いのでCSSを使ってみると･･･　↓

「img2」というリンク先の名前を付ける
「URL(絶対パス)」でリンク
「URI(相対パス)」でリンク
管理人へメール

☆　CSSについては次章で学んでいきます　☆

　「target属性」には次のような値が指定できます。
　　・「_blank」「_self」「_parent」「_top」「(任意)」
　　※詳しくは、後の方でタグを解説します。