目 次
0) まえおき
1) ホームページ作成手順
2) HTML文
3) ホームページ・ビルダによるホームページの作成
4) ホームページ作成プログラム
0) まえおき
この頁はNMCの インターネット分科会で99.9.10に「ホームページの作成」というタイトルで発表した内容に編集を加えたものである。
1) ホームページ作成手順
0. ホームページの内容を決める。
1. ホームページの構成を決める。
2. ホームページ(トップページ)を作る(エディタを使って)。
2.1 文字データ
2.2 グラフィックデータ
2.3 リンクを張る
2.4 データを保存する
2.5 ブラウザで確認する(ブラウザを使って)
3. 他のページを作る。
4. 動作チェックをする(自分のパソコン内で、リンクを主体に)。
5. アップロードする(作成したデータをサーバー[プロバイダにある]に送る[FTP{File Transfer Protocol}を使って])。
6. 動作チェックをする(通信回線を通して、リンクを主体に)。
7. 資料(データ管理表[ページ、グラフィック・データ])を作成する。
2) HTML(Hyper Text Markup Language)文
2.1.2 本体部
1. HTMLファイルの定型的な書式
<HTML>
<HEAD>
<TITLE>タイトル</TITLE> 見出し部
</HEAD>
HTMLファイル
<BODY>
ここにホームページ本体を記述する。 本体部
</BODY>
</HTML>
2. ページの作成(index.html[ブラウザ画面とソース{テキスト・エディタ(例 マイクロソフト社のメモ帳)}]参照)
2.1 構造タグ
2.1.1タイトル
ブラウザの左上(タイトルバー)に表示されるとともに、ブックマークにこの名前で登録される。ホームページの特徴を示すとともに、外人にもわかりやすいことが望ましい。
例 SUZUKI's Homepage
<BODY atr>･･･</ BODY > ;atrアトリビュート(属性、付き物)
アトリビュート 機 能 BACKGROUND="〜.gif" 背景にするイメージファイルを指定 BGCOLOUR="#col" 背景色を指定 <HTML> <HEAD> <TITLE> <BODY>の四つを構造タグという。
2.3 文の構造タグ
2.2 書体制御
<Hn ALIGN="align">･･･</Hn>
n;1(最大)〜6(最小)
align;"left","center","right" (左、中央、右)
<FONT SIZE="n" COLOR="#col">･･･</ FONT >
テキストのサイズと色を指定する。
n;1(最小)〜7(最大)
"+1","-1"; 相対値指定も可能
<B>･･･</B> 太字(ボールド)
<BR> 改行(このタグだけは対でなく、単独)
<P>
<P ALIGN="align">･･･</P> 段落(パラグラフ)を作る。
align;"left","center","right" (左、中央、右)
<PRE>･･･</PRE> 見たとおりに表示
<BLOCKQUOTE>･･･</BLOCKQUOTE > インデントされて表示。テキストの前後は1行づつ改行。
<CENTER>･･･</CENTER > 画面中央にセンタリングして表示。テキスト、イメージ、テーブルなど。
<DIV ALIGN="align">･･･</DIV> テキストの表示位置。
left… 左寄せ center…中央 right…右寄せ
<!--コメント--!> コメントは画面に表示されない。不要なタグの一時的な消去、注釈文などに使用する。
2.4 イメージ用タグ
<IMG atr> イメージのロード
アトリビュート 機 能 SRC="filename" ロードするファイル名 ALIGN="align" イメージの位置調整
"left" イメージを画面の左に寄せ、右側にテキストを表示
"right" イメージを画面の右に寄せ、左側にテキストを表示ALT="text" 代替テキスト WIDTH="w" イメージの横幅をピクセル値または画面に対するパーセント値で指定
HEIGHT="n" イメージの横幅をピクセル値または画面に対するパーセント値で指定
2.5 リンク
<A HREF="link">…</A> リンクの設定
テキスト、イメージを作りリンク先を設定する。HREFアトリビュートにはリンク先を示すURLまたはE-mailアドレスを指定する。
<A HREF="mailto:s_suzuki@sam.hi-ho.ne.jp">s_suzuki@sam.hi-ho.ne.jp</A> メール送付先の設定
<A NAME="name">…</A> リンク先(アンカー[ラベル])の設定
2.6 テーブル用タグ
<TABLE atr>･･･</TABLE> テーブルの定義
アトリビュート 機 能 BORDER="n" 外枠の厚さをピクセル値で指定。 WIDTH=" n" テーブル全体の横幅をピクセル値または画面に対するパーセント値で指定。
HEIGHT=" n" テーブル全体の高さをピクセル値または画面に対するパーセント値で指定。
CELLSPACING=" n" 外枠以外の罫線の太さをピクセル値指定。
CELLPADDING="n" セル内の罫線との間隔をで指定
<TD atr>･･･</TD> テーブルにセルを作る。
アトリビュート 機 能 ROWSPAN="m" このセルの高さを多のセルのm個分の高さにする。
COLSPAN =" n" このセルの幅を多のセルのm個分の幅にする。
<TR atr>･･･</TR> テーブルに列ブロックを作る。AtrはTDに準じる。
3) ホームページ・ビルダ(IBM)によるホームページの作成
タグの定義を覚えていなくても、HTML文が作れる。
0. 「標準」「HTMLソース」「プレビュー」タグ(「ファイルを開く」とリンク)
1. トップページの作成(文字入力とリンク)
1.1 タイトル
1.2 全体の目次(例 3頁)
1.3 作成年月日
1.4 文字の大きさ、センタリング
1.5 ファイル名(index.html)と保存
2. 各頁の作成(合計 3頁; 元となるページを作っておき、あとはコピーして変わる箇所だけをコピーする)
2.1 タイトル
2.2 ｢ホームページへ戻る｣(右寄せ)
2.3 作成年月日
2.4 文字の大きさ、センタリング
2.5 ページ間リンク
2.6 ファイル名と保存
3. 動作の確認
ブラウザにより動作を確認する。
4. HTMLソース(タグの確認)
5. サイトの登録
6. 文字の編集
6.1 文字の挿入、削除、コピー
6.2 文字の大きさ、位置
6.3 改行、スペースの挿入
7. 画像を入れる
7.1 画像の位置
7.2 画像の大きさ
7.3 代替テキスト
7.4 文字の回り込み
8. 文字と地の色
8.1 地の色(右クリック+属性変更+背景/テキスト色タグ+色指定)
8.2 地の模様(右クリック+属性変更+背景/テキスト色タグ+背景イメージ)
9. リンク
9.1 ページ間リンク
9.2 ページ内リンク(ラベル) → 目次に利用する。
9.3 URLへのリンク
9.4 メールアドレスへのリンク
10. 表の作成
10.1 列数と行数
10.2 表の位置
10.3 表の内容(文字と画像)
10.4 縁の幅をゼロにする(配置決めに利用する)。
11. アップロード(データをサーバーに転送する)
11.1 FTPプログラム(エクスプローラと同じ画面)
11.2 サーバーのファイル(自分のパソコンと同じフォルダ/ファイル[小文字の使用])
11.3 送り方(ドラッグ・アンド・ドロップ 文字データ[A]と画像データ[B])
12. データの管理
12.1 サイト(サイト名とオープン[開く]／クローズ[閉じる])
12.2 ホームページ名(index.htmlまたはindex.htm)
12.3 画像データの保管
12.4 リンクの状態(ページ間、ページと画像データ)
12.5 サイト ウイザード
13. フレーム(応用編)
13.1 フレームとは
13.2 フレームの作成
14. 画像データの作成または加工(応用編)
14.0 ファイル形式(gifまたはjpeg[拡張子])
14.1 ボタン(ウエブアート デザイナ)
14.2 ロゴ(ウエブアート デザイナ → バーナ)
14.3 写真(デジカメまたはスキャナ)
14.4 地図(スキャナ)
14.5 アニメーション(ウエブ アニメータ)
4) ホームページ作成プログラム(メーカ 使用者)
1. ホームページ・ビルダ(IBM 横山、NMC)
2. ページ・ミル(アドビー社 石賀、鈴木)
3. コンポーザー(ネットスケープ社 鈴木)
4. フロントページ(マイクロソフト社 鈴木[予定])
5. HomepagePRO(Filemaker社 石賀)
6. Dreamweavor(MACROMEDIA社 石賀)
インターネットに戻る
トップページに戻る
総目次に戻る
[Last Updated 8/31/2001]