| ＫＩＤ京都インターネット同好会 勉強会資料 H10/5/9 長谷川 |
手書きＨＴＭＬ勉強会第２弾 １．前回のおさらい１ <html> <head> <title>日本一短いホームページ</title> </head> <body> こんにちは。<br> ここは日本一短いホームページです。 </body> </html>
２．前回のおさらい２ <html> <head> <title>てっぽうゆりのページ</title> </head> <body bgcolor="#ffff00"> <center> <h1>てっぽうゆり</h1> <center> <img src="teppou.jpg"><br> てっぽうゆりは九州屋久島、沖縄に自生する多年草です。<p> </center> <hr> <a href="hibis.htm">ハイビスカス</a><br> <a href="mailto:tsukasa_h@mtj.biglobe.ne.jp">メール</a> </body> </html> 参考：メニュー→参考ＨＴＭＬ ３．文字の大きさ 文章中での文字の大きさの変更です。 <font size=7>一番大きな字</font> <font size=1>大変小さな字</font> 表題の文字の大きさの変更です。 <h1>大きな表題</h1> <h6>小さな表題</h6> ４．カラーコード カラーコードはＲＧＢ（赤、緑、青）のそれぞれを０からＦＦ（１６進数で ２５５）の６桁と頭に＃で表します。 赤・・#ff0000 緑・・#00ff00 青・・#0000ff 白・・#ffffff 黒・・#000000 黄色・・#ffff00 水色・・#00ffff 参考：メニュー→カラーコード ５．カラーコードの使い方
| 最初に宣言 | 文章の途中 | |
| ・背景の色を変える | <body bgcolor="#ffff00"> | <font color="#ff0000">この文字は赤</font> |
| ・文字の色を変える | text="#000000" | − |
| ・リンクの色を変える | link="#0000ff" | − |
| ・以前参照したことのある リンクの色を変える | vlink="#00ffff" | − |
| ・リンクをクリックしている 時の色を変える | alink="#ff0000" | − |
・その他、ｔａｂｌｅのセルごとの背景の色、枠の色、罫線の色などが変えられます。詳細は各自勉強
してください。
６．太字
この文字は<b>太く</b>なります
７．イタリック体
この部分が<i>イタリック体</i>
８．下線
<u>下線が引かれます</u>
９．ページの途中へのリンク
<a href="#mannaka">まんなかに飛びます</a>
・
・
・
・
<a name="mannaka"></a>
10．写真の横に文字を表示する
<img src="teppou.jpg" align="right">
てっぽうゆりは九州屋久島、<br>
沖縄に自生する多年草です。
<br clear="right">
11．<table>について
複雑な配置はどうしても<table>タグを使う必要があります。
<table border=3>
<tr>
<td>左上</td>
<td>右上</td>
</tr>
<tr>
<td>左下</td>
<td>右下</td>
</tr>
</table>
１０２４Ｘ７６８のディスプレイで見た場合どうしても横幅か広くなりすぎます。
<table>で読みやすくなるように狭くしましょう。
<center>
<table width=600>
<tr><td>
本文
・・・・
・・・・
</td></tr>
</table>
</center>
<table>の参考例
参考：メニュー→テーブルの例
<table border=3>
<tr>
<th rowspan=2>沖縄の花</td>
<th colspan=2>ハイビスカス</td>
<th colspan=2>ササユリ</td>
</tr>
<tr>
<td><IMG SRC="image16s.jpg"></td>
<td><a href="image16.jpg">JPG 50k</a></td>
<td><IMG SRC="image17s.jpg"></td>
<td><a href="image17.jpg">JPG 53k</a></td>
</tr>
</table>
中級者の話
デザイン上クリディカルマップを良く使う方を見かけますが
画像が大きい場合クリティカルマップはあまり好ましくありません。
ロードに時間がかかり、画像が全部出てくるまで、別なページに
飛べないからです。このようにやってみましょう。
例１：
参考：メニュー→テーブルの例２
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td rowspan=4><img src="1.jpg" width=250 height=314></td>
<td><a href="okinawa.htm"><img src="2.jpg" width=210 height=60 border=0 alt="沖縄"></a></td>
</tr>
<tr>
<td><a href="teppou.htm"><img src="3.jpg" width=210 height=60 border=0 alt="石垣島"></a></td>
</tr>
<tr>
<td><a href="hibis.htm"><img src="4.jpg" width=210 height=55 border=0 alt="波照間島"></a></td>
</tr>
<tr>
<td><img src="5.jpg" width=210 height=139></td>
</tr>
</table>
例２：
参考：メニュー→テーブルの例３
body link="#2843f2" vlink="#2843f2">
<center>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td rowspan=4><img src="1.jpg" width=250 height=314></td>
<td bgcolor="#e3e1ca" width=210 height=60 align=center><font size=6><b><a href="okinawa.htm">沖縄</a></b></font></td>
</tr>
<tr>
<td bgcolor="#e3e1ca" width=210 height=60 align=center><font size=6><b><a href="teppou.htm">石垣島</a></b></font></td>
</tr>
<tr>
<td bgcolor="#e3e1ca" width=210 height=55 align=center><font size=6><b><a href="hibis.htm">波照間島</a></b></font></td>
</tr>
<tr>
<td><img src="5.jpg" width=210 height=139></td>
</tr>
</table>
１２．画像を小さなファイルに
インターネットは、画像が表示されるのに時間がかかります。
・ＪＰＧについて
ＪＰＧは写真など、ピクセル単位で色の変わる画像の圧縮に適しています。
画質を落とさない限り、思い切って圧縮率を上げてみましょう。
参考：メニュー→ＪＰＧの圧縮率
圧縮率を変えた場合の画質の変化です。ファイルは半分の大きさになっているのに画質は
ほとんど変わらないですね。
・ＧＩＦについて
ＧＩＦは、ロゴなどベタの多い画像を奇麗に圧縮します。
色数を減らしてみましょう。
参考：メニュー→ＧＩＦについて
１３．アイコンやカットについて
ホームページで、無料のアイコンやカットを配布しているページが有ります。
ＹＡＨＯＯなどで「アイコン」とかで検索してみましょう。
KID京都インターネット同好会のホームページに戻る