＜TOP PAGE＞
TORAPE ホームページ作成講座
この講座の内容の無断転記を禁止します
何を用意するのか？
コンピュータとエディタがあれば、あとは、プロバイダに契約するだけです。
エディタとは、文書を記述するためのものですが、ワープロなどのように飾り付けを目的とした物ではなく、 ただ単に文字を入力するためにあるものです。Windowsなどでは、「メモ帳」がそれにあたります。

このメモ帳を用いてホームページを作成する方法と、ホームページ・ワープロを用いて行う方法とがありますが、 ホームページ・ワープロでは、見たままの姿で記述でき、時間も早く仕上がります。
ただ、購入資金が必要であること、受け手側の環境しだいでは見え方に違いがでる可能性があること、など欠点もあります。

この講座では、メモ帳などを用いて作成していく方法で行います。
すなわち、プロバイダとの契約さえできていれば、材料は何もいりません。
パソコンに作業場所を作ろう
パソコンの最初の画面である、デスクトップが見えている状態にします。
このデスクトップのないもない部分で、右クリックをして、「新規作成」から「フォルダ」を選びます。
これで、デスクトップに「新しいフォルダ」が誕生します。

この「新しいフォルダ」を右クリックして、「名前の変更」を行い、分かりやすい名前にします。
講座内でこのフォルダの名称を「ホームページフォルダ」として、話を進めていきます。
ホームページ作成前にやっておきたいこと
まず、「ホームページフォルダ」をダブルクリックして開きます。
メニューの「表示」をクリックして、「フォルダオプション」を選択します。

フォルダオプションの詳細な設定画面が出てきます。ここで、第２番目のパネル（表示）を選択します。
色々な設定が出てきますが、「登録されているファイルの拡張子は表示しない」と言う項目を探します。
この項目に、印がついていれば、はずしておいて下さい。
あとは、ＯＫボタンをクリックして、元に戻しておきます。
この作業は、１回だけ行えばコンピュータが記憶してくれます。何度も確認をする必要はありません。
いよいよ作成計画
重要なのは、ホームページを作成する技術ではなく、的を絞ったり、バランスのよい話題を提供できるか！です。
とりあえず、「つりファン」と言うことでつりの話題を中心としたホームページを考えてみましょう。

氏名：山田 太郎
趣味：つり
住所：愛媛

構成は、「最初のページ」、「つり自慢」、「作者の履歴書」の３ページとします。
これらの内容はだいたい以下のようにしたいと計画しました。
ページ名称 ファイル名 構成内容・特徴
太郎のホームページ index.html 最初のページで、ウェルカムページとも言います（作者のかってな呼び名かも）
このページの印象次第で、あとの情報を見てくれるかどうかが決定します。
とりあえず、つり関連と言うことで、ブルーとグリーンを中心とした色構成にします。
つり自慢 turiji.html このページがメインページとなるはずです。
ページの内容は、つりの地図や絵などのイメージを多めにして、人々の注目を集めてみたいとおもいます。
作者の履歴書 rireki.html 多くのホームページでは、作者のことが書かれていることもあります。
正確な誕生日や住所、電話番号などはさけて、話題がもてる内容がいいと思われます。
このほかに、ちょっとした決まり事があります。（必須条件や約束事など拘束レベルは色々ありますがとりあえず、決まり事としておきます）
（１）最初のウエルカムページの名前は、ｉｎｄｅｘ.ｈｔｍｌであること。
（２）ファイル名は、英語の半角小文字スタイルで記述すること。
（３）ファイル名の最後は、「.html」または、「.htm」にすること。
（４）ファイル名は、８文字以内＋「.html」であること。（全部で１３文字以内）
初めてホームページを作るとき
初めてホームページを作る時はメモ帳を使います。
メモ帳を起動して、内容を記述していきます。

このように作成したあと、保存します。そのときの注意事項は、
(1) ファイルの種類を「すべて」にする。
(2) 名前を　index.html　にします。


この内容を確認したいときは、作成した[index.html」をダブルクリックすれば見ることができます。

【解説】
htmlやbodyなど「＜」と「＞」ではさまれたものを「タグ」と読んでいます。
このタグは、通常ペアで記述をします。「＜／」で記述しているのは「終了タグ」と言われます。
ほとんどのタグはペアで記述を行いますが、終了タグの存在しない単独のタグもあります。
単独のタグについてはのちほど
html文書全体を表すタグで、必ず先頭と最後に記述します。
headブラウザの動きに関することを記述するための領域です。
body画面に表示する内容を記述する領域です。
titleブラウザのタイトルバーに表示する内容です。
ホームページの修正
修正の方法は何通りかあるのですが、簡単な方法を１つ。
まず、修正したいファイルをダブルクリックします。
そうすると、ホームページが出てきます。このホームページで右クリックから、ソースの表示を選ぶと、編集できるようになります。
修正が終わると、上書き保存をして、ホームページ（ブラウザ）で、更新(F5キー)を行います。
これらの繰り返しです。
いよいよ編集です。
まず最初に作成した「index.html」を修正してみましょう。
この中に「あああああ」の部分があります。この場所では、自分のプロフィール（自己紹介）のタイトルを付けていきましょう。
「あああああ」を「太郎の履歴」として
(1)文字を大きくする。大きさは５とします。（1〜7の７段階あります)
(2)画面の中央(センタリング)します。
(3)下線を引きます。
(4)文字の色を赤にします。
文字の大きさ<font size=?>
?のところには1〜7の数字が入ります
【例】<font size=5>ああああ</font>
中央<center>
【例】<center>ああああ</center>
下線<u>
【例】<u>ああああ</u>
文字色<font color=????>
????のところにはredなど英字で名前を記述します
【例】<font color="green">ああああ</font>
【例】<font color="#548722">ああああ</font>
#をつけたときは、２桁ずつ16進数で、赤・緑・青の強さを記述します。
この例では、赤を54、緑を87、青を22にしています

これらをあわせて記述すると

文字の大きさと文字の色は同じ「font」になっているので、合体します。
また、指定の順番はどの順でも同じですが、ペアになるようにします。
さらに編集です。
タイトルが出来上がると、次はテーブル（表）の勉強ですね。
テーブルは、HTMLの中でも複雑なものですが、必ずといっていいほど使用されています。
HTMLでは、左寄せ、中央、右寄せの３通りしか配置の手段がありません。そこで、画面を方眼紙のように格子状に分けてから、絵や文字の配置を決める場合がほとんどです。
この格子状に分ける作業が、テーブルの作成なのです。
横に２つ、縦に３つのテーブルを作成してみましょう。

この記述では、以下のようなテーブルが作成されます。
あい
うえ
おか
EXCEL風に言うと、<td>と</td>で囲まれた範囲が１つのセルです。
<tr>と</tr>で囲まれた範囲が行を表します。
ここでは、自己紹介をするページの作成なので、次のような表を作ってみましょう。
氏名山田太郎
誕生日１０月３日
血液型Ａ型
テーブルの応用例
ああいいうう
ええおお
rowspanを使って、縦に長い領域を作った例（2個ぶちぬき）
ああ
いいううええ
colspanを使って、横に長い領域を作った例（3個ぶちぬき）
ああいい
ううええ
枠線をやめて、色を設定した例。borderをやめbgcolorを設定

もっと編集です。
ここでは、更に詳細なテクニックを行います。
<body> text標準の文字色を指定
linkまだクリックしていないリンク先
vlink見に行ったことのあるリンク先
bgcolor全体の背景色
例背景を青で、テキストを白、リンクを黄色で設定すると。
<body bgcolor="blue" text="white" link="yellow" vlink="yellow">
<font> color文字の色を変更します。
size文字の大きさを１〜７で指定します。
例文字を赤で、サイズを６にする
<font color="red" size=6>ああああ</font>
<br>改行です。画面上で次の行に送るときに使用します。
絵を入れるとき
絵などを入れるときはペイントなどで書いたものを使いますが、注意点があります。
絵を保存するときは次のことを守ってください。
(1) ファイル名は、英数字で８文字以内にしてください。
(2) ファイルの種類は「GIF」か「JPEG」を選んでください。
　　Windows MeのペイントはGIFで保存できると思います。
　　ファイルの種類がGIFもJPEGもないパソコンの場合は、BMP(24ビット)で保存後、
　　他のソフトを使用してGIFかJPEGで保存をして下さい。(画像変換と言います)
GIFかJPEGで保存できるソフトは、PhotoshopやMicrosoft Photo Editorなどがあります。
(3) 保存先は、ホームページと同じ場所にすると使いやすくなります。
また、デジカメで撮った写真をホームページに載せるには、縮小をする必要があります。
縮小の方法などは、各デジカメに付属しているソフトのマニュアルを見てください。


絵を保存するときに「abcd」、種類を「GIF」で行った場合の例です。
これで、絵が画面に保存されます。
絵の大きさやさまざまな調整ができます。

ここでは、横幅を80ドット、高さを120ドットにしています。
多くのパソコンでは、横幅が約1000ドット、高さが700ドットにしているのでこれらの大きさを考えながら数字を入れてください。
他のページへ飛ぶとき
他のページへジャンプしたいときは、２つの方法があります。
１．自分が作成したページへジャンプする。
２．他人のページへジャンプする。


ここで、「あああ」や「いいい」は、画面に表示してある言葉です。
この言葉をクリックすると、hrefで書かれたページへジャンプします。
自分のページに飛ぶときですが、hrefの書き方があります。
以下の例を参考にしてください。
ホームページが保存されているフォルダが「abc」で、
そのabcフォルダの中にある「abcd.html」へジャンプするとき。

フレーム分割
フレームとは、左右や上下に分かれた画面のことです。
よくあるパターンとして、左側にメニューを表示して、そのメニューを選択すると、右側に内容が表示されるものです。
...
...
...
...
xxx

cccc
このようなものを作るときは、３つのHTMLファイルを作成しなければなりません。
作る前に左側の細い部分と右側の表示部分の名前を決めておかなければなりません。とりあえず、左側をmenu、右側をmainとしましょう。名前は通常アルファベットで記述します。
３つのHTMLはどんなものになるんでしょう。
１．フレーム（枠の土台）を記述したもの
２．左側のページ
３．右側のページ
これらの３つが合体してフレームができあがります。
【フレーム】のHTML

【左側】のHTML。名前は、xxxxxx.htmlです。

右側のページは、複数のページ（左側のメニューの数だけ）を作成していきます。
やりたいこと別一覧
背景の色を変えたいxxxxに色を指定する
背景に画像を使いたいxxxxに画像ファイル名を記述
文字を太字にしたいxxxxは、太字にする文字
文字に下線を引きたいxxxxは、下線をつける文字
文字の大きさを変えたいxxxxに文字の大きさ1から7
yyyyは、変更したい文字
文字の色を変えたいxxxxは色
yyyyは変更したい文字
画像を表示したいxxxxは、画像ファイル名
画像の大きさを変更したいxxxxは、画像ファイル名
aaaaは幅、bbbbは高さ
できれば元の画像で変更した方がよい
リンクをしたいxxxxは、リンク先のファイル名
yyyyは画面に表示するもの
リンクの色を変更したいxxxxは、訪れたことがあるときの色
yyyyは、行ったことがないときの色
文字や画像を右寄にしたいxxxxは、右に寄せたい画像や文字など
区切り用の水平線を引きたいこのタグの前後は改行します
改行したい
段組みがしたい表を作成してそのなかに文字や画像を入れます
この例では、左右の２段組み
高度な段組がしたい左側が200ピクセル、右側が500ピクセルの計700ピクセルで段組をしています