W-SOHO東北支部／バリアフリーなWeb作成講座／初心者編

【初心者編】

【HTMLとは？】（読み：エイチ・ティー・エム・エル）

ホームページを作成する上で、とても重要なものです。
Hyper Text Markup Language の頭文字をとった略称です。

【URLとは？】（読み：ユー・アール・エル）

最近の名刺や雑誌、テレビ、ラジオ等でも見たり聞いたりするようになりました。
インターネット上の住所のようなものです。
Uniform Resourse Locator　の頭文字をとった略称です。

【タグとは？】

百聞は一見にしかず。試しに、このページを見てみましょう。
・インターネットエクスプローラ（IE）の方は、表示　→　ソース
・ネットスケープナビゲーター（NN）の方は、表示　→　ページソース
・その他のブラウザの方も、ソースを確認してみて下さい。

目を覆いたくなるような文字、文字、文字。しかし、よく見ると、＜＞でくくられたものが沢山あるのが分かって頂けますか？これがタグです。
タグには、始めと終りがあり、終了タグはタグの前に／（スラッシュ）をつけます（一部例外あり）

例） <TITLE>W－SOHOトップページ</TITLE>

では、沢山のタグの組み合わせの例を見て下さい。

これさえおさえておけば、あとは応用のみ！そしてどんなタグがあるのかを調べる事！
こればっかりは、覚えるしかないのですが、各書店にて売られているHTMLのタグが記載されている本を見ながら作成すれば大丈夫です。
ちなみに、良く使われるタグを記載しましたので、参考にしてください。

【Web作成に必要なもの】

パソコン

Windows、Mac等、何でもＯＫですが、ネット環境が整った状態のもの

テキストエディタ

HTMLを編集するもの
（Windows…メモ帳　Mac…Simple Text　でＯＫです）

ブラウザ

Webページを閲覧するのに使用
Internet ExplorerやNetscape NavigatorやOpera等。通常はパソコンに入っています。

ウェブサーバ

自分でサーバをたててもＯＫですが、普通は、プロバイダと契約したり、フリーサーバを使用します。
但し、掲示板の無料設置や容量など、サービスが異なるので、よく調べる事をおすすめします。
※試しに自分のページを作ってみたい。という方なら、契約しているプロバイダに無料のホームページを設置できるサービスがあるので、そちらを利用するか、各検索エンジンサイトに無料で設置できるスペースが容易されているので、そちらを利用してみるとよいと思います。

FTPツール

サーバにデータを送るもの。File Transfer Protocolの頭文字の略称です）
FFFTP等のフリーソフトでも十分可能

画像加工ツール

なくてもＯＫですが、アイコンを作成したり、ロゴを作成したり、するのに使用。
PhotoshopやFireworksが有名。ペイント等でも可能。

HTMLエディタ
またはソフト

なくてもＯＫです。タグを意識せずにHTMLを作成できます。
※FrontpageやGoliveが有名

作成ソフトは簡単だが、バージョンアップさせるのに費用がかかったりするので、ソフトに頼りきらない事をおすすめします。
※Dreamweaverやホームページビルダー等

デジカメ

なくてもＯＫだが、ページ作成になれてくるとあると便利だと感じると思います。

その他

Webデザインや制作を仕事にするなら、他にTEL・FAX・圧縮解凍ソフトやADSL等の常時接続回線が必要となる（重いデータ送信にはかかせません！）可能性が高いです。

【Web作成の大まかな手順】

1.場所（サーバ）の確保

自分で設置する以外は手続きの為に時間がかかったりするので、まずは申し込みをしましょう。

2.テーマを決める

自分がどんなページを作りたいのかを考える。
また、仕事の場合は、その会社がどんな情報をどの程度掲載したいのかをしっかりと打合せる。

3.サイトマップを作ってみる

ＴＯＰページからリンクさせるのはどのページか？リンク先からどんなページへ行くのか等を簡単な図にしてみる。　例はこちら！

4.デザインしてみる

これが苦手な方も多いのではないでしょうか？
ここにタイトルを表示させて、ここに画像を入れて、ここは何色！という簡単なものでもＯＫなので頭の中のイメージを外に出してみる事をおすすめします。
※あんまり複雑なデザインをしても、タグ打ちが大変になるので、最初は単純なものから試してみましょう！

5.作成！

ここからは、デザインをもとにひたすらタグを打ち続けます。
慣れていない人にとっては、非常に苦痛な作業でしょう。ソフトを使用しても構いませんが、作成した後に、ここはどんなタグなのかというのを確認してみると良いですね。

6.第１チェック

ローカル環境（自分のパソコンの中）でチェックしてみる。
ここでのチェックは、主に誤字脱字や、レイアウト、リンクなどが間違っていないかどうかです。

7.アップする

FTPツールでデータを送ります。
ここでつまづく人も多いです。

8.最終チェック

アップされたら、もう誰に見られてもおかしくない状態になります。再度確認してみましょう。
尚、ここで間違いを発見した場合、ファイルを修正し、再度アップさせなければならないので注意！

【ファイル名のつけ方の注意】

Windows

大文字と小文字を区別する事！
sample.html　と　SAMPLE.HTML　はWinでは同じファイルとして認識されますが、LinuxやUNIXでは、別のファイルとして認識されてしまいます。

MAC

拡張子をつけること！
もともと拡張子をつけるという概念のないMACでは、注意が必要です。

これを忘れると大変。以外と忘れがちなので、注意しましょう！

ちなみに、sample.html　と　sample.htm　も別ファイルとして認識されます。　最後の「ｌ（エル）」があるかないかだけですが、プロバイダのサービスの無料ホームページなどを使用する場合は、TOPページのファイル名が指定されるかと思います。指定されているファイル名を拡張子まで、ピッタリあわせないと、エラー表示が出てアップできません。
（例）　index.html　と指定されているのに、index.htm　というファイルでアップしようとしても、エラーとなります。

※ファイル名と同時に忘れてはいけないのが、ファイルの保存場所です。
後からページが増えていくと、かなり煩雑になってしまい、更新が大変になります。
・まずサイト用のフォルダを作ったら、その中にもフォルダを作って、後でページが増えても分からなくならないように小分けにする事をおすすめします！
・もちろん画像等の保管場所も忘れずに！