平成16年度　神戸高専情報教育センター公開講座
平成16年度募集要項　　一般コース　　中高生コース　　募集ポスター

HTMLによるWebページ作成法
1.準備
1-1　推奨FTPクライアント（作成したhtmlファイルをサーバーへアップロード）　FFFTPのページでダウンロード
1-2　推奨テキストエディター（メモ帳、notepadより便利）　TaraPadのページのダウンロード先
1-3　推奨LHAとzipファイルの解凍ソフト　Lhasa32のページでダウンロード
1-4　ホームページ作成ソフト（フリーの作成ソフト）　Homepage Manager のページでフルパックを選択
1-5　ペイントツール（フリーのツール）　Pixia HomePage のzip版
1-6　無料ホームページスペース一覧表　http://isson.fc2web.com/kouza101.html
1-7　推奨タブ式ブラウザ　Sleipnirホームページのダウンロード（インストラー版）
2.参考ページ
2-1　誰でも解る無料ホームページ作成講座　の超初心者、初心者コースは必読。
拡張子を表示させるは必須設定。
2-2　簡単！HP作成講座　自習方式でのページ、直線的な説明。
2-3　ホームページ作成NAVI　わからなくなったら他のページの説明文を読む。
2-4　とほほのWWW入門　古くから開設されている老舗の解説ページです。
2-5　みんなのタグ辞書/HTMLタグ辞書　中級レベル以上になれば、このページがお奨め。
2-6　超初心者のホームページ作成学校　Homepage　Manager　の利用を前提とした入門ページ。
2-7　イヌでもわかるJavaScript講座　非常に良くまとめられたページです。
2-8　JavaScript小技集　イヌでも。。。と同様に良くまとめられたページです。
3.HTMLの基本
head部分とbody部分の２つの構造から出来ていて，
最初と最後に<html>,</html>のタグを入れる。

HTMLの基本構造
<html>
<head>
<title>ここにページのタイトルを入れる（ブラウザのタイトルバーに表示されます）</title>
</head>
<body>
HTML文書は、以下のような基本構造になっています。<br>
ここに本文を書いていきます。
</body>
</html>
4.道具のダウンロード

１．準備のページにある
ｆｆｆｔｐ，
TaraPad，
Lhasa32をダウンロードする。

本公開講座では，各ホストにダウンロードと設定済みです。
 ・ブラウザでの確認

次にブラウザでファイルメニューでファイルを開く・・
＞参照ボタンを押して・・
＞index.htmlファイルをクリックしますと、
下のように表示されます。

　　　　↑右ボタン画像を表示で拡大されます。
・ffftpのダウンロード時の説明画面の例

　　　　↑右ボタン画像を表示で拡大されます。
5.作業準備

ここから実際の作業をしましょう！

5-1　作業ディレクトリ（フォルダ）の作成

5-2　拡張子を表示させる

5-3　コピーペーストでとにかく表示してみる
ファイル名：reidai01.html
5-1　作業ディレクトリの作成手順

マイドキュメント・・＞
マウス右クリック・・＞
新規作成でフォルダを選び・・＞
「新しいフォルダ」の部分をマウスで押さえて・・＞
名前の変更で「04work」のような名前を付ける。
5-2　拡張子を表示させる場合の設定手順

マイコンピュータ・・＞
コントロールパネル・・＞
フォルダオプション・・＞
表示タブを選択・・＞
登録されているファイルの拡張子は「表示しない」の
チェックをはずす。
5-3　とにかく表示する場合の手順

TeraPadでファイル名（index.html）を作り，
左ののテキストボックスの内容をコピーし，
index.htmlにペーストして ，
04worディレクトリにセーブ
ブラウザの開くでindex.htmlを選択する
6.作業開始

6-1　タイトルと本文の内容を修正
ファイル名：reidai02.html

6-2　改行，文字の色，大きさを変えてみよう

ついでに，文字の書体タグも加えてみました。
下のテキストボックスの内容をコピーペーストして確認してみましょう！
ファイル名：reidai03.html

書体タグ( <B>, <I>, <S>, <U>, <SUP>, <SUB> )など

<B>〜〜</B>太字指定
<I>〜〜</I>斜体指定
<S>〜〜</S>取消線指定
<U>〜〜</U>下線を引く
<SUP>〜〜</SUP>上付添字
<SUB>〜〜</SUB>下付添字

のように
〜〜 の部分の文字が、それぞれ指定できる。

 6-1　文字の修正方法

タイトルの部分をマウスで選択し，
そのまま「自分の名前＋のホームページ」で上書きし，
本文の内容同様に修正します。
マウスで元の本文内容を選択して，例えば，
「私のホームページ」と上書きしましょう
TeraPadを上書き保存して，
ブラウザの更新ボタンを押す

変わりましたか？
6-2　改行，文字の色，大きさを変えてみよう

・改行するには，＝＞　<br>　タグを使う

・文字の色を変えるには＝＞
変更した文字に対して，
<font color=red>赤色の文字</font>
のように <font>フォント開始タグと</font>フォント終了タグではさみこみます

・文字の大きさを変えるには＝＞
変更したい文字に対して，
<font size=5>大きな文字サイズ</font>
のように，文字色変更と同じく，フォントタグではさみこみます

文字の色は，カラーチャートの番号か英語の名前で指定

文字のサイズは，1〜7まであり，7が一番大きな文字です。

タグの使い方わかりましたか？
7.文字だけのWEBページ

見出しタグ、水平ラインタグも加えて
文字だけのWEBページを作ろう！

7-1　見出しタグとは

書き方、
<H2>
第 2 章 静電気
</H2>

<H1> から <H6>の６種類の文字の大きさがあり，
<H1> が一番大きい。
注意点は、すべて太字となること、
強制改行（前後の行が１行空く）となること。
さらに，検索エンジンなどでは，タイトル名と見出しタグの内容が参照されるキーワードとなる。
文字および文章は，この見出しタグを使うことが望ましい。
7-2　水平ラインタグとは

書き方、
<HR size=5 nosade>

<HR SIZE=n>のことを水平ラインタグといい，SIZE
オプションで線太さを指定できる。
デフォルト(size 指定無し)ではsize=2 (約0.68mm ) になっている。
さらに、オプション設定を追加(空白文字を1ついれて)をすると線の長さや位置の指定（中央，左寄せ，右寄せ）などもできます。
noshade オプションは、罫線の色が黒色になります。
また、color オプションはブラウザによって指定できない場合がありますの使わない方が良いでしょう。
通常は、 size オプション以外は指定しないようです。
また、水平ラインタグの終了タグはいりません。
ファイル名：reidai05.html

7-3　文字だけのWEBページ
ファイル名：reidai06.html
７-1　見出しタグの表示例

H1からH6までの見出しタグの表示例です。
ファイル名：reidai04.html



7-2　水平ラインタグの表示例

ファイル名：reidai05.html

7-3　文字だけのWEBページの表示例

 ファイル名：reidai06.html
8.画像や表を加えたWEBページ

9.リンクの指定方法を理解しよう

は　color　chart　の下に書いています。
color chart
White, #ffffff
Snow, #fffafa
GhostWhite, #f8f8ff
FloralWhite, #fffaf0
Linen, #faf0e6
AntiqueWhite, #faebd7
PapayaWhip, #ffefd5
BlanchedAlmond, #ffebcd
Bisque, #ffe4c4
Moccasin, #ffe4b5
NavajoWhite, #ffdead
PeachPuff, #ffdab9
MistyRose, #ffe4e1
LavenderBlush, #fff0f5
Seashell, #fff5ee
OldLace, #fdf5e6
Ivory, #fffff0
Honeydew, #f0fff0
MintCream, #f5fffa
Azure, #f0ffff
AliceBlue, #f0f8ff
lavender, #e6e6fa
Black,#000000
DarkSlateGray,#2f4f4f
DimGray,#696969
Gray,#808080
DarkGray,#a9a9a9
Silver,#c0c0c0
LightGrey,#d3d3d3
Gainsboro,#dcdcdc
LightSlateGray,#778899
SlateGray,#708090
LightSteelBlue,#b0c4de
SteelBlue,#4682b4
RoyalBlue,#4169e1
MidnightBlue,#191970
Navy,#0000cd
DarkBlue,#00008b
MediumBlue,#0000cd
Blue,#0000ff
DodgerBlue,#1e90ff
CornflowerBlue,#6495ed
DeepSkyBlue,#00bfff
LightSkyBlue,#87cefa
SkyBlue,#87ceeb
LightBlue,#add8e6
PowderBlue,#b0e0e6
PalaTurquoise,#afeeee
LightCyan,#e0ffff
Cyan,#00ffff
Aqua,#00ffff
Turquoise,#40e0d0
MediumTurquoise,#48d1cc
DarkTurquoise,#00cdd1
LightSeaGreen,#20b2aa
CadetBlue,#5f9ea0
DarkCyan,#008b8b
Teal,#008080
SeaGreen,#2e8b57
DarkOliveGreen,#556b2f
DarkGreen,#006400
Green,#008000
ForestGreen,#228b22
MediumSeaGreen,#3cb371
DarkSeaGreen,#8fbc8f
MediumAquamarine,#66cdaa
Aquamarine,#7fffd4
PaleGreen,#98fb98
LightGreen,#90ee90
SpringGreen,#00ff7f
MediumSpringGreen,#00fa9a
LawnGreen,#7cfc00
Chartreuse,#7fff00
GreenYellow,#adff2f
Lime,#00ff00
LimeGreen,#32cd32
YellowGreen,#9acd32
OliveDrab,#6b8e23
Olive,#808000
Darkkhaki,#bdb76b
PaleGoldenrod,#eee8aa
CornSilk,#fff8dc
Beige,#f5f5dc
LightYellow,#ffffe0
Lightgoldenrodyellow,#fafad2
LemonChiffon,#fffacd
Wheat,#f5deb3
Burlywood,#deb887
Tan,#d2b48c
Khaki,#f0e68c
Yellow,#ffff00
Gold,#ffd700
Orange,#ffa500
SandyBrown,#f4a460
DarkOrange,#ff8c00
Goldenrod,#daa520
Peru,#cd853f
DarkGoldenrod,#b8860b
Chocolate,#d2691e
Sienna,#a0522d
SaddleBrown,#8b4513
Maroon,#800000
DarkRed,#8b0000
Brown,#a52a2a
Firebrick,#b22222
IndianRed,#cd5c5c
RosyBrown,#bc8f8f
DarkSalmon,#e9967a
LightCoral,#f08080
Salmon,#fa8072
LightSalmon,#ffa07a
Coral,#ff7f50
Tomato,#ff6347
OrangeRed,#ff4500
Red,#ff0000
Crimson,#dc143c
MediumVioletRed,#c71585
DeepPink,#ff1493
HotPink,#ff69b4
PaleVioletRed,#db7093
Pink,#ffc0cb
LightPink,#ffb6c1
Thistle,#d8bfd8
Magenta,#ff00ff
Fuchsia,#ff00ff
Violet,#ee82ee
Plum,#dda0dd
Orchid,#da70d6
MediumOrchid,#ba55d3
DarkOrchid,#9932cc
DarkViolet,#9400d3
DarkMagenta,#8b008b
Purple,#800080
Indigo,#4b0082
DarkSlateBlue,#483d8b
BlueViolet,#8a2be2
MediumPurple,#9370db
SlateBlue,#6a5acd
MediumSlateBlue,#7b68ee
Black,#000000
8.画像や表を加えたWEBページ
画像や表を加えると、文字だけのページよりも群と見やすくなります。

8-1　画像の表示
画像を表示するには、 GIF ファイルや JPEG ファイルの画像圧縮ファイルを扱うことが多い。

書き方は、
<IMG SRC="draw015.gif" ALT="draw015.gif">

のように、画像のあるディレクトリ(パス指定という)とファイル名を先に書き、続けて ALT オプションで画像の説明文(通常はファイル名を使う)を入れる。

また、この <IMG SRC="****.***" ALT="******"> の終了タグはありません。

ファイル名：reidai07.html


8-2　表（テーブル）の表示
テーブルタグの基本形
<TABLE BORDER="4" CELLSPACING="3">, <TR>, <TD>

HTML において表を作るには、面倒ですが、テーブルタグ(<TABLE>)と行、列の指定タグ(<TR>, <TD>)を使います。
書き方は、
<TABLE BORDER="4" CELLSPACING="3">
<TR><TD>機械工学科１年</TD>
<TD>電気工学科１年</TD>
<TD>電子工学科１年</TD>
<TD>応用科学科１年</TD>
<TD>都市工学科１年</TD>
</TR>
<TR><TD>機械工学科２年</TD>
<TD>電気工学科２年</TD>
<TD>電子工学科２年</TD>
<TD>応用科学科２年</TD>
<TD>都市工学科２年</TD>
</TR>
</TABLE>

説明：
<TR>〜〜</TR> で囲まれた範囲が、横一行分を表し、
<TD>〜〜</TD> で囲まれた範囲に 1 つのセルの中身を書き込みます。
また、テーブルタグ(<TABLE>) の中の BORDER オプションはテーブルの外枠の太さを示し、BORDER オプションを書かない場合は、外枠無しのテーブルになります。
デフォルト(BORDER だけの記述)では、BORDER="2" になっています。
CELLSPACING オプションは各セル枠線の太さを示し、デフォルト(記述無し)では、cellspacing=2となります。
さらに、細かいオプションとして、枠線の色指定 ( BORDERCOLOR オプション)
やテーブル全体に色を付ける色指定( BGCOLOR オプション)などがあります。
 8.1　画像の表示

ファイル名：reidai07.html
9.リンクの指定方法を理解しよう