KID京都インターネット同好会 勉強会資料 H10/5/9 長谷川 |
手書きHTML勉強会第2弾 1.前回のおさらい1 <html> <head> <title>日本一短いホームページ</title> </head> <body> こんにちは。<br> ここは日本一短いホームページです。 </body> </html>
2.前回のおさらい2 <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> 参考:メニュー→参考HTML 3.文字の大きさ 文章中での文字の大きさの変更です。 <font size=7>一番大きな字</font> <font size=1>大変小さな字</font> 表題の文字の大きさの変更です。 <h1>大きな表題</h1> <h6>小さな表題</h6> 4.カラーコード カラーコードはRGB(赤、緑、青)のそれぞれを0からFF(16進数で 255)の6桁と頭に#で表します。 赤・・#ff0000 緑・・#00ff00 青・・#0000ff 白・・#ffffff 黒・・#000000 黄色・・#ffff00 水色・・#00ffff 参考:メニュー→カラーコード 5.カラーコードの使い方
最初に宣言 | 文章の途中 | |
・背景の色を変える | <body bgcolor="#ffff00"> | <font color="#ff0000">この文字は赤</font> |
・文字の色を変える | text="#000000" | − |
・リンクの色を変える | link="#0000ff" | − |
・以前参照したことのある リンクの色を変える | vlink="#00ffff" | − |
・リンクをクリックしている 時の色を変える | alink="#ff0000" | − |
・その他、tableのセルごとの背景の色、枠の色、罫線の色などが変えられます。詳細は各自勉強 してください。 6.太字 この文字は<b>太く</b>なります 7.イタリック体 この部分が<i>イタリック体</i> 8.下線 <u>下線が引かれます</u> 9.ページの途中へのリンク <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> 1024X768のディスプレイで見た場合どうしても横幅か広くなりすぎます。 <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> 中級者の話 デザイン上クリディカルマップを良く使う方を見かけますが 画像が大きい場合クリティカルマップはあまり好ましくありません。 ロードに時間がかかり、画像が全部出てくるまで、別なページに 飛べないからです。このようにやってみましょう。 例1: 参考:メニュー→テーブルの例2 <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> 例2: 参考:メニュー→テーブルの例3 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> 12.画像を小さなファイルに インターネットは、画像が表示されるのに時間がかかります。 ・JPGについて JPGは写真など、ピクセル単位で色の変わる画像の圧縮に適しています。 画質を落とさない限り、思い切って圧縮率を上げてみましょう。 参考:メニュー→JPGの圧縮率 圧縮率を変えた場合の画質の変化です。ファイルは半分の大きさになっているのに画質は ほとんど変わらないですね。 ・GIFについて GIFは、ロゴなどベタの多い画像を奇麗に圧縮します。 色数を減らしてみましょう。 参考:メニュー→GIFについて 13.アイコンやカットについて ホームページで、無料のアイコンやカットを配布しているページが有ります。 YAHOOなどで「アイコン」とかで検索してみましょう。 KID京都インターネット同好会のホームページに戻る