|
ホームページの作り方教室
|
| ソースプログラム | 画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>ホームページ</title> </head> <!-- ここまでがヘッダーです --> <!-- これ以下がボディ(本文) --> <body> タイトル(章，節の見出し)や<br> 本文を書きます。 </body> </html> |
|
| ソースプログラム | 画面表示 |
|---|---|
|
<body> この様に 書いても， １行に表示します。 </body> |
この様に 書いても，
１行に表示します。 |
| ソースプログラム | 画面表示 |
|---|---|
| <h1>レベル１</h1> | レベル１ |
| <h2>レベル２</h2> | レベル２ |
| <h3>レベル３</h3> | レベル３ |
| <h4>レベル４</h4> | レベル４ |
| <h5>レベル５</h5> | レベル５ |
| <h6>レベル６</h6> | レベル６ |
| <h3 align=left>left</h3> | left |
| <h3 align=center>center</h3> | center |
| <h3 align=right>right</h3> | right |
| ソースプログラム | 画面表示 |
|---|---|
|
段落の例 <p align=left> 左配置<br> ひだり</p> <p align=center> 中央配置<br> まんなか</p> <p align=right> 右配置<br> みぎ</p> |
段落の例
左配置
中央配置
右配置 |
| ソースプログラム | 画面表示 |
|---|---|
|
<hr> <hr size=5> <hr size=5 noshade> <hr size=10 color=blue> <hr width=30% align=left> <hr width=90 align=center> <hr width=30% align=right> |
|
| ソースプログラム | 画面表示 |
|---|---|
|
<center> センタリング<br> (中央配置) </center> |
(中央配置) |
|
--------------<br> |表です。 |<br> --------------<br> <pre> -------------- |表です。 | -------------- </pre> |
-------------- |表です。 | --------------
--------------
|表です。 |
--------------
|
|
<address> kibochan </address> <blockquote> 広島県立 ？？高等学校<br> 定時制 </blockquote> |
kibochan
広島県立 ？？高等学校 |
| ソースプログラム | 画面表示 |
|---|---|
|
<div align=right> 右に配置します。</div> <div align=center> 中心に配置します。 <div align=left> 左に配置します。</div> 元(中心)に戻ります。</div> |
右に配置します。
中心に配置します。
左に配置します。
元(中心)に戻ります。
|
| ソースプログラム | 画面表示 |
|---|---|
|
<ol> <li>国語 <li>数学 <li>理科 <ul> <li>物理 <li>化学 </ul> <li>英語 </ol> |
|
| ソースプログラム | 画面表示 |
|---|---|
|
<ol start=3> <li type=I>I,II,III <li type=i>i,ii,iii <li type=1 value=9>1,2,3 <li type=A>A,B,C <li type=a>a,b,c </ol> <ul> <li type=disc>disc <li type=circle>circle <li type=square>square </ul> |
|
| ソースプログラム |
|---|
|
きぼちゃん作のソフト <dl> <dt>passwd.exe <dd>DOS汎用のパスワードプログラム<br> EXE型のデバイスドライバ<br> 月刊「アスキー」93/12月号に掲載 <dt>rank.exe <dd>パソコン通信ホストMASHの順位表示プログラム </dl> |
| 画面表示 |
きぼちゃん作のソフト
|
| ソースプログラム | 画面表示 |
|---|---|
|
通常の配置です。 <ul> 少し右に配置します。<br> (1段目) <ul> 更に右に配置します。<br> (2段目) </ul> 元に戻ります。<br> (1段目) </ul> 通常に戻りました。 |
通常の配置です。
(1段目)
(2段目) (1段目) |
| 特殊文字 | & | < | > | " | @ | © | ♥ |
|---|---|---|---|---|---|---|---|
| 文字実体参照 | & | < | > | " | © | ♥ | |
| 数値実体参照 | & | < | > | " | @ | © | ♥ |
| ソースプログラム(物理的な指定) | 画面表示 |
|---|---|
|
<b>太文字(Bold)</b><br> <i>斜体(Italic)</i><br> <u>下線(Underline)</u><br> <tt>等幅(Typewriter)</tt><br> <s>取消(Strike)</s><br> 肩<sup>付き(sup)</sup><br> 下<sub>付き(sub)</sub><br> <blink>点滅(BLINK)</blink><br> <b><i>太い斜体</i></b><br> |
太文字(Bold) 斜体(Italic) 下線(Underline) 等幅(TypewriTer) 肩付き(sup) 下付き(sub) 太い斜体 |
| ソースプログラム(論理的な指定) | 画面表示 |
|
<em>強調(EMphasis)</em><br> <strong>強い強調(STRONG)</strong><br> <cite>引用(CITAtion)</cite><br> <kbd>キー入力(Keybord)</kbd><br> <var>変数(VARiable)</var><br> <dfn>定義(DeFiNed)</dfn><br> <code>プログラム(CODE)</code><br> <samp>メッセージ(SAMPle)</samp><br> |
強調(EMphasis) 強い強調(STRONG) 引用(CITAtion) キー入力(Keybord) 変数(VARiable) 定義(DeFiNed) プログラム(CODE)メッセージ(SAMPle) |
| ソースプログラム |
|---|
|
<font size=1 color=#ff0000>Size=1 Red</font><br> <font size=2 color=#00ff00>Size=2 Green</font><br> <font size=3 color=#ffff00>Size=3 Yellow</font><br> <font size=4 color=#0000ff>Size=4 Blue</font><br> <font size=5 color=#ff00ff>Size=5 Purple</font><br> <font size=6 color=#00ffff>Size=6 Cyan</font><br> <font size=7 color=#000000>Size=7 Black</font><br> <small>Small</small>Normal<big>Big</big> Normal<font size=-1>Small</font> |
| 画面表示 |
|
Size=1 Red Size=2 Green Size=3 Yellow Size=4 Blue Size=5 Purple Size=6 Cyan Size=7 Black SmallNormalBig NormalSmall |
| ■ | beige | ■ | bisque | ■ | black | ■ | blue | ■ | brown |
| ■ | coral | ■ | cyan | ■ | gold | ■ | gray | ■ | green |
| ■ | hotpink | ■ | indigo | ■ | khaki | ■ | lime | ■ | linen |
| ■ | orange | ■ | peru | ■ | pink | ■ | plum | ■ | purple |
| ■ | red | ■ | salmon | ■ | silver | ■ | skyblue | ■ | tan |
| ■ | teal | ■ | tomato | ■ | wheat | ■ | white | ■ | yellow |
| behavior=alternate | 左右を行き来します。 |
| behavior=scroll | 画面外まで流れます。(規定値) |
| behavior=slide | 画面の端で停止します。 |
| direction=left | 左へ流れます。 |
| direction=right | 右へ流れます。 |
| scrollamount=移動数 | 一回の移動するドット数を指定します。 |
| scrolldelay=速度 | 移動速度をmsで指定します。 |
| loop=回数 | 流れる回数を指定します。 |
| width=幅 | 幅を指定します。 |
| height=高さ | 高さを指定します。 |
| hspace=横 | 左右の空白を指定します。 |
| vspace=高さ | 上下の空白を指定します。 |
| bgcolor=背景色 | 背景の色を指定します。 |
| ソースプログラム |
|---|
|
<marquee> <font face="ＤＦPOP体,ＤＦ特太ゴシック体,ＭＳ ゴシック" size=+1> Netscape6では文字が流れません。</font></marquee><br> <center><font color=red size=4 face="ＭＳ 明朝"> <marquee behavior="alternate">お嫁に来てね！</marquee> </font></center> |
| 画面表示 |
|
|
| 設定 | 画像 |
|---|---|
|
HEADER GIF89a Screen(32 x 32) LOOP CONTROL IMAGE 32x32,256 colors CONTROL IMAGE 32x32,256 colors CONTROL IMAGE 32x32,256 colors CONTROL IMAGE 32x32,256 colors |
 動 画 １枚目 ２枚目 ３枚目 ４枚目 |
| 透過gif | インターレスgif ロード中の画面 |
プログレッシブjpeg ロード中の画面 |
jpeg ロード中の画面 |
|---|---|---|---|
|
|
 |
 |  |
| ソースプログラム |
|---|
| ？？高等学校の校章は <img src="kousyou.gif">です。 |
| 画面表示 |
？？高等学校の校章は です。 |
| ブラウザ | 壊れている | 存在しない |
| Nestcape Navigator 3.01 |  |
 |
| Internet Explorer 3.02 |  |
|
| ソースプログラム | 画面表示 |
|---|---|
| <img src="kousyou.gif" align=top>校章 | 校章 |
| <img src="kousyou.gif" align=middle>校章 | 校章 |
| <img src="kousyou.gif" align=bottom>校章 | 校章 |
| ソースプログラム | 画面表示 |
|---|---|
| <img src="kousyou.gif" align=left> 広島県立<br> ？？高等学校<br clear=all> 数学科 |
広島県立 ？？高等学校 数学科 |
| <img src="kousyou.gif" align=right> 広島県立<br> ？？高等学校<br clear=all> 数学科 |
広島県立 ？？高等学校 数学科 |
|
<img src="kousyou.gif" align=left> <img src="kousyou.gif" align=right> <center> <br><br>校章 </center> |
校章 |
| <center> 校<img src="kousyou.gif">章 </center> |
章 |
| ソースプログラム | 画面表示 |
|---|---|
|
<img src="r1.gif"><img src="r2.gif"><br> <img src="r3.gif"><img src="r4.gif"><br> |
    |
|
<img src="r1.gif"> <img src="r2.gif"><br> <img src="r3.gif"> <img src="r4.gif"><br> |
|
|
<img src="r1.gif" vspace=0> <img src="r2.gif" vspace=17><br> <img src="r3.gif" hspace=8> <img src="r4.gif" hspace=0><br> |
|
|
<img src="r0.gif" width=10 height=10> <img src="r0.gif" width=17 height=17> <img src="r0.gif" width=34 height=34><br> |
|
|
<img src="r5.gif" align=left> 文字が画像の真横に回り込みます。<br> <img src="r5.gif" align=left hspace=15 vspace=15> 画像の周りに余白を付けます。<br> |
文字が画像の真横に回り込みます。
画像の周りに余白を付けます。 |
| auファイル | UNIXで使われます。 |
| wavファイル | Windowsで使われます。 |
| aiffファイル | Macintoshで使われます。 |
| ra,ramファイル | RealAudio形式のファイルです。大きさ小さく音質が良い。 pluginでは拡張子をrpmとする。 |
| midファイル | MIDIデータです。 |
| ソースプログラム |
|---|
|
<embed src="snd/kouka.mid" width=145 height=60> <embed src="snd/kouka.rpm" width=250 height=160> <embed src="img/kouka.avi" width=250 height=160> |
| ソースプログラム | 画面表示 | ||||||
|---|---|---|---|---|---|---|---|
|
<table> <tr><th>項目１</th><th>項目２</th></tr> <tr><td>Data11</td><td>Data12</td></tr> <tr><td>Data21</td><td>Data22</td></tr> </table> |
| ||||||
|
<table border=5> <tr><th>項目１</th><th>項目２</th></tr> <tr><td>Data11</td><td>Data12</td></tr> <tr><td>Data21</td><td>Data22</td></tr> </table> |
|
| ソースプログラム | 画面表示 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
<table border=5> <caption>表題の例</caption> <tr><th colspan=3>列見出し</th></tr> <tr><th rowspan=2>行見出し</th> <td>あり</td><td>なし</td></tr> <tr><td><br></td><td></td></tr> </table> |
| ||||||||
| ソースプログラム | 画面表示 | ||||
|---|---|---|---|---|---|
|
<table border=1 width=90 height=90> <tr><th>情</th><td></td></tr> <tr><td></td><th>報</th></tr> </table> |
| ||||
|
<table border=1> <tr><th width=80 height=80> 数学</th></tr> </table> |
| ||||
|
<table border=5 cellspacing=10> <tr><td>？？高等学校</td></tr> <tr><td>数学科</td></tr> </table> |
| ||||
|
<table border=5 cellpadding=10> <tr><td>？？高等学校</td></tr> <tr><td>数学科</td></tr> </table> |
| ||||
|
字下げの例 <table><tr> <td nowrap width=30></td><td> 30ドット右へ表示しました。<br> (１段目) </td></tr></table> 終わり |
字下げの例
|
| ソースプログラム | 画面表示 | ||||||
|---|---|---|---|---|---|---|---|
|
<table border=5> <tr><td>広</td><td></td><td>島</td></tr> <tr></tr><tr></tr> <tr><td>宮</td><td></td><td>島</td></tr> </table> |
|
| align= left | align= center | align= right | |
|---|---|---|---|
| valign= top | ★ | ★ | ★ |
| valign= middle | ★ | ★ | ★ |
| valign= bottom | ★ | ★ | ★ |
| ソースプログラム | 画面表示 | |||
|---|---|---|---|---|
|
<table align=left border=3> <tr><td>left(左)</td></tr> </table> align=leftを指定すると，右側 に文字が回り込みます。<p> <table align=right border=3> <tr><td>right(右)</td></tr> </table> align=rightを指定すると，左側 に文字が回り込みます。<p> <center>中心です。 <table border=7> <tr><td>center(中心)</td></tr> <table> 回り込みません。 </center> |
|
| ソースプログラム | 画面表示 | ||
|---|---|---|---|
|
<table border=5><tr> <td><img src="img/dome1s.jpg"></td> </tr><tr> <th>原爆ドーム</th> </tr></table> |
|
| ソースプログラム | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table border=0 cellspacing=0 cellpadding=0> <tr><td rowspan=2 colspan=2> <img src="dome1s.jpg" width=150 height=100></td> <td><img src="shadow1.gif" width=8 height=8></td></tr> <tr><td><img src="shadow2.gif" width=8 height=92></td></tr> <tr><td><img src="shadow3.gif" width=8 height=8 ></td> <td><img src="shadow4.gif" width=142 height=8></td> <td><img src="shadow5.gif" width=8 height=8></td></tr> </table> | |||||||||||||||
| 画面表示 | 概 念 | ||||||||||||||
|
| ||||||||||||||
| ソースプログラム | 画面表示 | 概 念 | ||||
|---|---|---|---|---|---|---|
|
<table> <tr><td> ？<br>？<br> 高<br>等<br>学<br>校 </td><td> 数<br>学<br>科 </td></tr> </table> |
|
|
| ソースプログラム | |||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table> <tr><th colspan=5>問題行動の推移<br> <small>平成12年を基準とする</small></th></tr> <tr valign=bottom align=middle> <td><img src="img/graph1.gif" width=10 height=83></td> <td><img src="img/graph1.gif" width=10 height=87></td> <td><img src="img/graph2.gif" width=10 height=100></td> <td><img src="img/graph3.gif" width=10 height=84></td> <td><img src="img/graph3.gif" width=10 height=54></td> </tr><tr> <td>10年</td> <td>11年</td> <td>12年</td> <td>13年</td> <td>14年</td> </tr> </table> | |||||||||||||||||||||||||||||||
| 画面表示 | 概念 | ||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||
| ソースプログラム | 画面表示 |
|---|---|
| <a name="link">文書内のリンク先</a> | 文書内のリンク先 |
|
<a href="http://www.nitsushokan-h.hiroshima-c.ed.jp/"> ★日彰館高校</a> | ★日彰館高校 |
|
<a href="http://www.kyutech.ac.jp/"> ※九工大</a> |
※九工大 |
|
<!-- 新しく窓を開く --> <img src="m0.gif"> <a href="knowhow.htm" target=_blank> 講習会資料</a> |
 講習会資料
|
|
<a href="#link"> <img src="m1.gif"> 文書内へリンク</a> |
 文書内へリンク
|
|
<a href="kibochan.htm#love"> <img src="m2.gif" border=5> お嫁さん募集中</a> |
 お嫁さん募集中
|
|
<!-- バーナー --> <img src="barner.gif"></a> |
|
|
<a href="JavaScript:history.back()"> 戻る</a> | 戻る |
|
<a href="JavaScript:close()"> 窓を閉じる</a> | 窓を閉じる |
| ソースプログラム | 画面表示 |
|---|---|
|
<a href="snd/kimigayo.mid"> <img src="m3.gif" border=0> 応援歌</a> |
 応援歌
|
|
<a href="snd/kimigayo.ra"> <img src="m4.gif" border=0> 応援歌</a> |
 応援歌
|
|
<a href="img/computer.jpg"> <img src="m5.gif" border=0> パノラマ</a> |
 パノラマ
|
|
<a href="cg/dome.wrl"> <img src="m7.gif"> 産業奨励館</a> |
 産業奨励館
|
|
<!-- WWW上でのプログラムの配布 --> <!-- DOS用パスワードプログラム --> <a href="img/passwd4a.lzh"> <img src="r7.gif">プログラム</a> |
 プログラム
|
| ソースプログラム | 画面表示 |
|---|---|
|
<a href="mailto:kibochan@urban.ne.jp"> <img src="m1.gif"> 恋人募集</a> |
恋人募集 |
|
<a href="mailto:kibochan@urban.ne.jp"> <img src="m1.gif" border=0> お嫁さん募集</a> |
お嫁さん募集 |
|
<a href="mailto:kibochan@urban.ne.jp?subject=Drink"> <img src="maru.gif" border=0> コンパ</a> |
 コンパ
|
| ソースプログラム | 画面表示 |
|---|---|
|
<a href="cg/dome1.jpg"> <img src="cg/dome1s.jpg" border=0></a> |  |
| ソースプログラム(全体で非表示) |
|---|
|
<html> <head> <title>下線を無くしたい場合</title> <style type="text/css"> <!-- A:link { text-decoration: none; } --> </style> </head> |
| ソースプログラム(部分的に非表示) |
|
<a href="cg.htm" style="text-decoration: none;"> CGギャラリー</a> |
 目次へ
|
応用編へ 
|
ホームページ - Netscape
