ホームページ作り入門<9>

「リスト」と「役立つリンク」(1999/02/05)
今日は「リスト」と言われている方法です。 先回見えない額縁に入れた部分の各項目の先頭に連番を付けて表示してみよう。 工事中<hr> </font> <table border=0> <tr><td> <ol> <!--今回追加 <OL>です--> <li> <!--今回追加加 <L I>です--> 私への <a href="mailto:qpon@mxc.mesh.ne.jp"><!--自分のアドレスに書き換えのこと--> Eメールはここをクリック </a> して送ってください。<br> <li> <!--今回追加--> QPONの <a href="http://www2a.biglobe.ne.jp/~qpon/cgi-bin/qpon_bbs.htm"> 掲示板はここをクリックする </a> とつながります。<br> <li> <!--今回追加--> ホームページ用素材が <a href="http://prcm.jp/list/背景"> プリ画像さん </a> で無料で貰える。<br> </ol> <!--今回追加--> </td></tr> </table> <OL></OL>の間にある<L I>の位置に一連番号をつけろ というタグです。 <OL></OL>を <UL></UL>に変えてみよう 番号が「・」のようなマークになったことでしょう。 これで初級〜中級程度のホームページに使われるほとんどのタグは解説しました。 ついでに役立つ リンク先を紹介するのでリストに追加してみよう。 <!--ここから追加--> <li> <a href="http://www.forest.impress.co.jp/lib/"> いろんなプログラムがダウンロードできる「窓の杜」</a> <li> <a href="http://www.mapion.co.jp/"> 全国各地の地図がみられる「マピオン」</a> <li> <a href="http://www.kouno.jp/sekainomado/"> 世界各地の「生の影像」が見られる「世界の窓」</a> <li> <a href="http://www.toyota.co.jp/">トヨタのHP</a>と <a href="http://www.toyota.co.jp/News/">トヨタニュース</a> <li> <a href="http://www.chunichi.co.jp/"> 中日新聞もインターネットで無料購読</a> <li> <a href="http://www.yubitoma.or.jp/"> 全国各学校の同窓会名簿「この指とまれ!」 </a> <!--ここまで追加--> どうですかかなり役立つホームぺージになってきましたね
変更後のソース

<html> <head> <title> 私のホームページ </title> </head> <body background="003.gif"> <center> <font size=7 color=#00ff00> 私のホームページ<br> </font> <font size=6 color=#ff0000> 工事中<hr> </font> <table border=0> <tr><td> <ol> <!--今回追加 <OL>です--> <li> <!--今回追加加 <L I>です--> 私への <a href="mailto:qpon@mxc.mesh.ne.jp"><!--自分のアドレスに書き換えのこと--> Eメールはここをクリック </a> して送ってください。<br> <li> <!--今回追加--> QPONの <a href="http://www2a.biglobe.ne.jp/~qpon/cgi-bin/qpon_bbs.htm"> 掲示板はここをクリックする </a> とつながります。<br> <li> <!--今回追加--> ホームページ用素材が <a href="http://prcm.jp/list/背景"> プリ画像さん </a> で無料で貰える。<br> <!--ここから追加--> <li> <a href="http://www.forest.impress.co.jp/lib/"> いろんなプログラムがダウンロードできる「窓の杜」</a> <li> <a href="http://www.mapion.co.jp/"> 全国各地の地図がみられる「マピオン」</a> <li> <a href="http://www.kouno.jp/sekainomado/"> 世界各地の「生の影像」が見られる「世界の窓」</a> <li> <a href="http://www.toyota.co.jp/">トヨタのHP</a>と <a href="http://www.toyota.co.jp/News/">トヨタニュース</a> <li> <a href="http://www.chunichi.co.jp/"> 中日新聞もインターネットで無料購読</a> <li> <a href="http://www.yubitoma.or.jp/"> 全国各学校の同窓会名簿「この指とまれ!」 </a> <!--ここまで追加--> </ol> <!--今回追加--> </td></tr> </table> <table border=10 bordercolor=#cc0000 bgcolor=#ffffff width="90%"> <tr><td> <a href="5701.jpg"> <img src="57.jpg" width="100%"> </a> </td></tr> </table> <hr> <b>会員のEメールアドレス</b> <table border=10 bordercolor=#ff44aa bgcolor=#ffffaa> <tr><th>会員名</th><th>区分</th><th>メールアドレス</th></tr> <tr><td>宮本幸雄</td><td>個人</td><td>qpon@mxc.mesh.ne.jp</a></tr> <tr><td>xxxx</td><td>個人</td><td>xxxx@mb.infoweb.or.jp</td></tr> <tr><td>oooo</td><td>個人</td><td>oooo@mx01.tns.or.jp</td></tr> <tr><td>−−−−</td><td>個人</td><td>----o@sc4.so-net.ne.jp</td></tr> </table> </center> </body> </html>

表示見本
私のホームページ
工事中


会員のEメールアドレス
会員名区分メールアドレス
宮本幸雄個人qpon@mxc.mesh.ne.jp
xxxx個人xxxx@mb.infoweb.or.jp
oooo個人oooo@mx01.tns.or.jp
−−−−個人----o@sc4.so-net.ne.jp
.
.
ホームページ作り入門<10>へ