平成14年度・高等学校・新教科「情報」現職教員等講習会

「コンピュータデザインの基礎」

作品紹介Webページの作り方

平成14年8月20日(火)神奈川県立神奈川総合高等学校
(1)画像の変換(bmpからgifへ変換する)
「Photo Shop LE」または「Microsoft Photo Editor」を開き、保存したBMPファイルを開きます。
ファイル名(半角英字)を決めて、GIF形式のファイルとして保存します。ファイル名の拡張子が.bmpから.gifに変わったことを確認して下さい。
(2)htmlファイルを作る
「アクセサリ」の中にある「メモ帳」を開き、下の図のような記号を打ち込んで下さい。これが基本型です。<title>と</title>の間にそのページのタイトルを書き、<body>と</body>の間に本文を書いてみましょう。 そのとき、本文には半角カタカナや特殊な記号は使わないで下さい。
「メモ帳」の「ファイル」−「名前をつけて保存」をします。このとき、「ファイルの種類」を「すべてのファイル」にし、ファイル名を半角英字(大文字、小文字は区別されます。)、「design.htm」にをして、「メモ帳」を閉じて下さい。

(3)確認する
「Internet Explorer」の「ファイル」−「ファイルを開く」で保存したファイルを選択すると、「タイトルバー」にタイトルが、ウィンドウには 本文が表示されます。これで、とりあえずはホームページの出来上がりです。このようにして、「メモ帳」でソースを書き換え、「上書き保存」し、「ブラウザ」で「更新」 をして少しづつページを作っていきます。
(4)ファイル転送
「FFFTP」などのファイル転送ソフトでサーバに接続し、「public_html」フォルダに「design.htm」と「sakuhin.gif」の2つのファイルをアップロードして完成です。リンク切れの場合はファイル名の大文字・小文字の区別、拡張子、保存場所などを確認してください。
(5)参考 HTML基本タグ
機能 タグ 見え方
改行(小) <br> こうしないと<br>改行しない こうしないと
改行しない
段 落 <p>〜<p> <p>こうすると</p>段落が変わる こうすると

段落が変わる

罫線+改行 <hr> こうすると<hr>線を引いて改行 こうすると
線を引いて改行
見出し文字 <h1>〜</h1>

(1が大、6が小。
自動的に改行される)

<h1>見出し1</h1>
<h3>見出し3</h3>
<h6>見出し6</h6>

見出し1

見出し3

見出し6
文字サイズ <font size=3>〜</font>

(1が小、7が大)

<font size=1>サイズ1です</font>
<font size=3>3です</font>
<font size=6>6です</font>
サイズ1です
3です
6です
文字色 <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>
  <th>ここが表の中身</th>
 </tr>
</table>
<table border=10>
<tr>
 <th>川崎</th><th>横浜</th>
</tr>
<tr>
 <th>相模原</th><th>他</th>
</tr>
</table>
川崎 横浜
相模原
箇条書き <ul>
 <li>1番目の内容
 <li>2番目の内容
</ul>
<ul>
 <li>大和市
  <ol>
  <li>小学校
  <li>中学校
  </ol>
 <li>川崎市
 <li>横浜市
</ul>
  • 大和市
    1. 小学校
    2. 中学校
  • 川崎市
  • 横浜市

index