ＨＴＭＬ入門

1996/4/8から

番目に訪れた人です。

簡単なＨＴＭＬ文書の例とその表示例を書きましたので、参考にしてください。
このページの最後に簡単なアンケートがあるので、協力をお願いします。
また、質問がありましたら、メールを送って下さい。

表題（Headings）

段落の見出しを強調するために用います。H1が最も大きくて、
数字が大きくなるほど小さくなります。でも、H3～H6は標準の
文字より小さくなるのであまり使わないと思います。
【HTML】
<h1>ＨＴＭＬ入門</h1> <h2>ＨＴＭＬ入門</h2> <h3>ＨＴＭＬ入門</h3> <h4>ＨＴＭＬ入門</h4> <h5>ＨＴＭＬ入門</h5> <h6>ＨＴＭＬ入門</h6>

【表示例】

ＨＴＭＬ入門

段落（Paragraph）
【HTML】第１段落目の文章です。<p>第２段落目の文章です。</p>第３段落目の文章です。

【表示例】
第１段落目の文章です。

第２段落目の文章です。

第３段落目の文章です。

原文のまま（PREformatted text）


【HTML】

<pre>
第１行目の文章があります。
       第２行目の文章は、第１行目の文章の少し右側から始まります。
       第３行目の文章は、第２行目の文章に揃えます。
</pre>

【表示例】

第１行目の文章があります。
       第２行目の文章は、第１行目の文章の少し右側から始まります。
       第３行目の文章は、第２行目の文章に揃えます。

丸点が付いたリスト（Unordered List）
【HTML】 <ul><li>この項目が１番目のリストです。<li>この項目が２番目のリストです。</ul>

【表示例】

この項目が１番目のリストです。
この項目が２番目のリストです。

番号が付いたリスト（Ordered List）
【HTML】 <ol><li>この項目が１番目のリストです。<li>この項目が２番目のリストです。</ol>

【表示例】

この項目が１番目のリストです。
この項目が２番目のリストです。

定義されたリスト（Definition List）
【HTML】 <dl> <dt>丸点リスト<dd>丸点の付いた箇条書きのリストになる。 <dt>番号リスト<dd>自動的に番号がついたリストになる。 <dt>定義リスト<dd>定義した項目とその説明を行を変えて説明できる。 </dl>

【表示例】

丸点リスト: 丸点の付いた箇条書きのリストになる。
番号リスト: 自動的に番号がついたリストになる。
定義リスト: 定義した項目とその説明を行を変えて説明できる。

文字の書式
【HTML】 <b>ボールド</b><br> <i>イタリック</i><br> <tt>TYPEWRITER</tt><br>

【表示例】

ボールド

イタリック

TYPEWRITER

改行（line BReak）
【HTML】第１行目の文章です。<br>第２行目の文章です。第２行目の文章の続きです。<br>第３行目の文章です。

【表示例】
第１行目の文章です。
第２行目の文章です。第２行目の文章の続きです。
第３行目の文章です。

横罫線（Horizontal Rule）
【HTML】これ（↓）が横罫線です。<hr> これ（↑）が横罫線です。

【表示例】
これ（↓）が横罫線です。

これ（↑）が横罫線です。

リンク
【HTML】 <a href="http://www.asahi-net.or.jp/">アサヒネットのホームページへ</a>←リンク先は、違うＵＲＬです。<br> <a href="#questionnaire">ＨＴＭＬ入門のアンケートへ</a> ↓ <a name="questionnaire">アンケートに御協力をお願いします</a>

【表示例】
アサヒネットのホームページへ←リンク先は、違うＵＲＬです。
ＨＴＭＬ入門のアンケートへ←リンク先は、このページの中です。

画像の表示（IMAGE）
【HTML】下の標識は学校または幼稚園が近くにあることを示すものです。<br> <IMG SRC="school.gif"><br>

【表示例】
下の標識は学校または幼稚園が近くにあることを示すものです。

入力フォーマット（ＦＯＲＭ）

<form method="post" action="mailto:gf9t-inue@asahi-net.or.jp"> と </form> で囲んだ領域の内容が、ACTION＝”送り先”に書いたところへ送られます。

`文字入力領域（INPUT TYPE=TEXT）`

【HTML】住所：<input type=text name=street size=30 maxlength=16><br> 名前：<input name=city size=16 maxlength=16><br> 電話番号：<input name=tel size=16 maxlength=10 value="03-"><br> 【表示例】住所：名前：電話番号：

`パスワード入力領域（INPUT TYPE=PASSWORD）`

【HTML】ログイン　：<input name=login> <br> パスワード：<input type=password name=passwd> 【表示例】ログイン　：パスワード：

`チェックボックス（INPUT TYPE=CHECKBOX）`

【HTML】あなたの好きな色は？（複数回答可）<br> <input type=checkbox name=color value=blue>青色<br> <input type=checkbox name=color value=green checked>緑色<br> <input type=checkbox name=color value=yellowe>黄色<br> 【表示例】あなたの好きな色は？（複数回答可）青色緑色黄色

`ラジオボタン（INPUT TYPE=RADIO）`

【HTML】あなたの好きな花は？<br> <input type=radio name=flower value=rose>バラ<br> <input type=radio name=flower value=tulip checked>チューリップ<br> <input type=radio name=flower value=sunflower>ひまわり<br> 【表示例】あなたの好きな花は？バラチューリップひまわり

`提出ボタン（INPUT TYPE=SUBMIT）`

`リセットボタン（INPUT TYPE=RESET）`

【HTML】今までに記入した内容を <input type=submit name=recipient value=送信する> <input type=reset value=書き直す><br> 【表示例】今までに記入した内容を

`画像を送信ボタンにする（INPUT TYPE=IMAGE）`

【HTML】記入した内容を登録するときは、右の絵をクリックしてね！（→） <input type=image name=point src="sakura.gif" ALIGN=middle> 【表示例】記入した内容を登録するときは、右の絵をクリックしてね！（→）

`選択（SELECTion）`

【HTML】使用されているパソコンは？<br> <select name="comp"> <option value="mac" selected>マッキントッシュ <option value="dos">ＤＯＳ／Ｖ <option value="sun">ＳＵＮ <option value="other">その他 </select> 【表示例】使用されているパソコンは？

`コメントの入力領域（TEXTAREA）`

【HTML】コメントを記入して下さい。<br> <textarea name="comment" rows=6 cols=64> </textarea> 【表示例】コメントを記入して下さい。表（table） Table Header(TH)（表題） Table Data(TD)（データ） TR（データの区切り） Caption（脚注）【HTML】 <TABLE BORDER> <CAPTION>枠線付きの表の例</CAPTION><TR> <TH><TH colspan=2>平均<TR> <TH><TH>身長(cm)<TH>体重(kg)<TR> <TH>男子<TD>170<TD>75<TR> <TH>女子<TD>160<TD>50 </TABLE> 【表示例】表1.1　高校生の身体検査平均身長(cm) 体重(kg) 男子 170 75 女子 160 50 <<<<<<<<<<<<アンケートに御協力をお願いします>>>>>>>>>>>> 初心者でも分かるように作りましたが、ＨＴＭＬ入門は如何でしたでしょうか？参考のために、簡単なアンケートに協力をお願いします。内容は？よかったまあまあ全然、参考にならないレベルは？難しい適当易しい何かコメントやアドバイスがあればご記入をお願いします。アンケートに記入した内容をＨＴＭＬ入門の一番上に戻るホームページに戻る