平成14年度・高等学校・新教科「情報」現職教員等講習会
「Photo Shop LE」または「Microsoft Photo Editor」を開き、保存したBMPファイルを開きます。
「アクセサリ」の中にある「メモ帳」を開き、下の図のような記号を打ち込んで下さい。これが基本型です。<title>と</title>の間にそのページのタイトルを書き、<body>と</body>の間に本文を書いてみましょう。 そのとき、本文には半角カタカナや特殊な記号は使わないで下さい。
「メモ帳」の「ファイル」−「名前をつけて保存」をします。このとき、「ファイルの種類」を「すべてのファイル」にし、ファイル名を半角英字（大文字、小文字は区別されます。）、「design.htm」にをして、「メモ帳」を閉じて下さい。
「Internet Explorer」の「ファイル」−「ファイルを開く」で保存したファイルを選択すると、「タイトルバー」にタイトルが、ウィンドウには 本文が表示されます。これで、とりあえずはホームページの出来上がりです。このようにして、「メモ帳」でソースを書き換え、「上書き保存」し、「ブラウザ」で「更新」 をして少しづつページを作っていきます。
（４）ファイル転送
「FFFTP」などのファイル転送ソフトでサーバに接続し、「public_html」フォルダに「design.htm」と「sakuhin.gif」の２つのファイルをアップロードして完成です。リンク切れの場合はファイル名の大文字・小文字の区別、拡張子、保存場所などを確認してください。
| 機能 | タグ | 例 | 見え方 | ||||
|---|---|---|---|---|---|---|---|
| 改行（小） | <br> | こうしないと<br>改行しない | こうしないと 改行しない |
||||
| 段 落 | <p>〜<p> | <p>こうすると</p>段落が変わる | こうすると
段落が変わる |
||||
| 罫線＋改行 | <hr> | こうすると<hr>線を引いて改行 | こうすると
線を引いて改行 |
||||
| 見出し文字 | <h1>〜</h1>
（１が大、６が小。 |
<h1>見出し１</h1> <h3>見出し３</h3> <h6>見出し６</h6> |
見出し１見出し３見出し６ |
||||
| 文字サイズ | <font size=3>〜</font>
（１が小、７が大） |
<font size=1>サイズ１です</font> <font size=3>３です</font> <font size=6>６です</font> |
サイズ１です ３です ６です |
||||
| 文字色 | <font color="色">〜</font> （red/blue/yellow/greenなど） |
<font color=blue>これは青</font> <font color=red>これは赤</font> <font color=green>これは緑</font> |
これは青 これは赤 これは緑 |
||||
| 太字 | <b>〜</b> | <b>これは太字です</b> | これは太字です | ||||
| 斜体 | <i>〜</i> | <i>これは斜体です</i> | これは斜体です | ||||
| センタリング | <center>〜</center> | <center>こうすると中央に</center> |
|
||||
| 背景色 | <body bgcolor="色">本文</body> | <body bgcolor="pink">ピンク</body> | ピンク | ||||
| 背景パターン | <body background="ファイル名"> 本文</body> |
<body background="ファイル名"> 本文</body> |
※ここでは
表示不可 |
||||
| 画像貼付け | <img src="画像ファイル名"> | <img src="star.gif"> |  |
||||
| <img src="star.gif" align="left"> こうすると、画像の 右に回り込めます |
こうすると、 画像の右に 回り込めます |
||||||
| リンク貼付け | <a href="ファイル名"> ここがボタンになる。</a> |
<a href="index.htm"> indexに戻る</a> |
indexに戻る | ||||
| 表組 （データセル） | <table border=10> <tr> <td>ここが表の中身</td> </tr> </table> |
<table border=10> <tr> <td>大</td><td>和</td></tr> <tr> <td>市</td><td>立</td> </tr> </table> |
|
||||
| 表組 （見出しセル） |
<table border=10> <tr> <tｈ>ここが表の中身</tｈ> </tr> </table> |
<table border=10> <tr> <th>川崎</th><th>横浜</th> </tr> <tr> <th>相模原</th><th>他</th> </tr> </table> |
|
||||
| 箇条書き | <ul> <li>１番目の内容 <li>２番目の内容 </ul> |
<ul> <li>大和市 <ol> <li>小学校 <li>中学校 </ol> <li>川崎市 <li>横浜市 </ul> |
|