HTMLリファレンス＋

画像を表示させる

※新規ウインドウで開きます 印刷Eメール

画像の表示を指定するタグ

文章だけでなくもちろん画像も好きなように配置出来ます。自由に並べてサイトに彩りを加えましょう。
必須入力
使用タグ 意味合い 変化例 書き方の例
<img src＝""> 画像ファイルの指定

「あおもり」
●画像にカーソルを合わせると代替テキストが表示されます。

「あおもり（ダミー）」
●画像が見つからなかったり表示出来ない時には代替テキストが表示されます。

<img src＝"images/stories/aomori_img.gif" alt="「あおもり」">

<img src＝"images/stories/no_img.gif" alt="「あおもり（ダミー）」">
<img alt=""> 代替テキスト
※　src＝""内には、画像のURLを記入します。http://〜から初めても良いですが、文章ファイルの位置から辿って省略して記入する事も出来ます。
例えば、上の画像のURLは正しくはhttp://www.aomori-it.com/images/stories/aomori_img.gifですが、
この文章ファイルもhttp://www.aomori-it.com/の中にあるファイルなのでその分を省略出来ます。
任意入力
使用タグ 意味合い 変化例 書き方の例
align="" 文字揃え

「あおもり」上揃え

「あおもり」中央揃え

「あおもり」下揃え（標準）

「あおもり」左寄せ


「あおもり」右寄せ

<img alt="「あおもり」" src＝"images/stories/aomori_img.gif" align="top">上揃え


<img alt="「あおもり」" src＝"images/stories/aomori_img.gif" align="middle">中央揃え


<img alt="「あおもり」" src＝"images/stories/aomori_img.gif" align="bottom">下揃え（標準）


<img alt="「あおもり」" src＝"images/stories/aomori_img.gif" align="left">左寄せ


<img alt="「あおもり」" src＝"images/stories/aomori_img.gif" align="right">右寄せ
border="" 枠の太さ 「あおもり」 <img alt="「あおもり」" src＝"images/stories/aomori_img.gif" border="1">
width="" 画像の幅 「あおもり」 <img alt="「あおもり」" src＝"images/stories/aomori_img.gif" height="39" width="78">
height="" 画像の高さ
※　width="" height=""は、画像の見た目の大きさのみ変化させます。
元の画像が大き過ぎると表示に時間がかかりますので、ご注意ください。
使用タグ 意味合い 書き方の例
<body(table,th,td,etc...) background=""> 背景画像の指定 <td background="images/stories/aomori_img.gif" bgcolor="#ffffff"></td>
変化例

背景画像は
繰り返して
表示されます。
 

リンクを繋げたい

※新規ウインドウで開きます 印刷Eメール

リンクを指定するタグ

いくつかページを作ったらそれぞれのページを繋いで、行き来できるようにしましょう。
使用タグ 意味合い 変化例 書き方の例
<a href="/"> リンク先URLの指定

同じサイト内へのリンクは省略出来ます。

他のサイトへのリンクは省略出来ません。

同じページ内にリンク先をつくり、ジャンプする事も出来ます。

「あおもり」
画像にもリンクを設定出来ます。

<a href＝"index.php">同じサイト内へのリンクは省略出来ます。</a>

<a href="http://www.aomori-it.com/">他のサイトへのリンクは省略出来ません。</a>

<a href="#jump">同じページ内にリンク先をつくり、ジャンプする事も出来ます。</a>

<a href＝"index.php"><img（略）/></a>
<a name=""> リンク先として名前を指定
別ページの特定の位置にジャンプしたい時は、href＝"URL#name"です。

<a name="jump">別ページの特定の位置にジャンプしたい時は、href＝"URL#name"です。</a>
target="_blank" リンクを新しいウィンドウで開く 他のサイトへのリンクは新しいウィンドウで開くと便利です。 <a href="http://www.aomori-it.com/" target="_blank">他のサイトへのリンクは新しいウィンドウで開くと便利です。</a>

<body
link=""
vlink=""
alink="">

 リンク文字の色を指定する

link 未訪問

vlink 訪問済み

alink 選択中

<body link="#ff0000" vlink="#666666" alink="#00ff00">

※例では色の変化は左例のみですが、実際はページ全体に反映されます。
 

文章作りにちょっと凝ってみる

※新規ウインドウで開きます 印刷Eメール

文章構造に一工夫加えるタグ

タグ次第で文章構造は多様に変化します。ちょっと凝ってみたい時に試してみましょう。
使用タグ 意味合い 変化例 書き方の例
<p align=""> 文字揃え

左揃え

右揃え

中央揃え

両端揃え

 <p align="left">左揃え</p>
<p align="right">右揃え</p>
<p align="center">中央揃え</p>
<p align="justify">両端揃え</p>
使用タグ 意味合い 変化例 書き方の例
<table border=""> テーブル（表）
枠線の太さ
見出し１ データ１ データ２
<table border="4">
<tr>
<th>見出し１</th>
<td>データ１</td>
<td>データ２</td>
</tr>
</table>
<table bordercolor=""> テーブル（表）
枠線の色
見出し１ データ１ データ２
<table border="1" bordercolor="#ff0000">
<tr>
<th>見出し１</th>
<td>データ１</td>
<td>データ２</td>
</tr>
</table>
<table(th,td) bgcolor=""> テーブル（表）、
セルの背景色
見出し１ データ１ データ２
<table bgcolor="#00ff00">
<tr>
<th bgcolor="#ffffff">見出し１</th>
<td bgcolor="#0000ff">データ１</td>
<td>データ２</td>
</tr>
</table>
<table cellspacing=""> セル同士の間隔指定
データ1 データ2 データ3
<table border="1" cellspacing="5">
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>
<table cellpadding=""> セル内の余白指定
データ1 データ2 データ3
<table border="1" cellpadding="5">
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>
<th(td) colspan=""> 横方向の
セル結合
セル横結合
見出し１ データ１ データ２
<table>
<tr>
<th colspan="3">
セル横結合</th>
</tr>
<tr>
<th>見出し１</th>
<td>データ１</td>
<td>データ２</td>
</tr>
</table>
<th(td) rowspan=""> 縦方向の
セル結合
見出し１ セル縦結合 データ１
見出し２ データ２
<table>
<tr>
<th>見出し１</th>
<td rowspan="2">
セル縦結合</td>
<td>データ１</td>
</tr>
<tr>
<th>見出し２</th>
<td>データ２</td>
</tr>
</table>
使用タグ 意味合い 変化例 書き方の例
<ul(li) type=""> 番号無しリストの
マーク指定
  • 黒丸１
  • 黒丸２
  • 黒丸３
  • 白丸
  • 四角

<ul type="disc">
<li>黒丸１</li>
<li>黒丸２</li>
<li>黒丸３</li>
</ul>

<ul>
<li type="circle">白丸</li>
<li type="square">四角</li>
</ul>
<ol(li) type=""> 番号有りリストの
マーク指定
  1. 算用数字１
  2. 算用数字２
  3. 算用数字３
  1. アルファベット小文字
  2. アルファベット大文字
  3. ローマ数字小文字
  4. ローマ数字大文字

<ol type="1">
<li>算用数字１</li>
<li>算用数字２</li>
<li>算用数字３</li>
</ol>

<ol>
<li type="a">アルファベット小文字</li>
<li type="A">アルファベット大文字</li>
<li type="i">ローマ数字小文字</li>
<li type="I">ローマ数字大文字</li>
</ol>