|
ソフトを使わないで（ＨＴＭＬ言語で）ホームページを作ってみよう 「ホームページ作成用ソフト」を使わないで、HTMLプログラムだけでホームページを作ってみましょう！ ホームページ作成ソフトは、ＨＴＭＬをマスターしてから使用する事をお勧めします。 作業場フォルダーは、Ｃハードディスクの中に作って下さい。 |
|
●ホームページとは何？ インターネットは、標準プロコルTCP/IP （通信規約）上で動作し、WWW（ World Wide Web の略で、単に Web とも呼ぶ ）システムで、 情報（画像、文、サウンド）を検索、閲覧します。 Webブラウザー（IE、ネットスケープ等）のようなWWW用クライアントソフトが対応 しているプロトコル（通信規約）には、HTTP、FTP、WAIS、Gopher、NTTP などがあります。 ホームページは一冊の「本」と同じです。まず目次があり、そして本文があります。 だからコンテンツ（内容）ごとのそれぞれの中身（htm ファイル）を「ページ」と呼びます。 そして「本」の場合はページを「めくる」といいますが、ホームページでは、ページをめくる 事を「リンク」といいます。 そして一ページ、一ページのことを「htmファイル」と呼びます。 ファイルですので必ず、拡張子（基礎用語で説明した）というものがあります。 その拡張子が、.htm です。 htmファイルの中には、画像ファイル（.jpg .gif)や音楽ファイル（.mp3 .mid) を格納する事が出来、それを表現することが出来ます。 そしてhtm ファイルの作成は、ＨＴＭＬ（ハイパーテキストマークアップランゲージ）言語を 使用します。 ＨＴＭＬは、他のコンピューター言語と違い、一つ一つのコマンドの前後にかぎカッコ（＜○○○＞）を 入れます。 又、ＨＴＭＬコマンドを他の言語と違い、特に「タグ」と呼びます。 そして、明けタグ＜ ＞と閉じタグ＜/ ＞で表示内容をはさみます。 それでは、ＨＴＭＬ言語を使いhtm ファイルを作成（プログラム）してみましょう。 | |
|
●htm ファイルをつくり、ブラウザで実行確認するまでの流れの説明。 １．メモ帳（ Windows に標準搭載のエデｲタ（ワープロソフト）)を起動。 ２．メモ帳でhtml 言語でプログラムを書く。 ３．完成したhtmファイルを専用フォルダーに保存します。 [ファイル→名前を付けて保存→保存する場所（専用フォルダー）→ ファイル名をindex.html（スタートページは、必ずindex.htmlにします） とする→ファイルの種類のところはすべてのファイルにする→OKクリック] ４．プログラムを修正した時は、（ファイル→上書き保存）で修正されます。 ５．プログラムの実行確認は、まずブラウザ（ＩＥ）を起動します。 ファイル→開く→参照→ファイルの場所（専用フォルダー）→ ファイルの種類（index.html）を選択→ＯＫ するとブラウザに作成したhtmlファイルが表示されます。 （注）タグ、ファイル名は全て半角英数で書いて下さい。 | |
|
●HTML プログラム（ソース）の基本パターン （メモ帳（エデｲタ）でプログラム（ソース）を書きます。タグは半角英数で書きます。） コマンド（タグ）は＜ ＞ではさみます。 | |
|
＜HTML＞ ＜HEAD＞ ＜TITLE＞タイトル名＜/TITLE＞ ＜/HEAD＞ ＜BODY＞ 内容のプログラムを書き込む ＜/BODY＞ ＜/HTML＞ | |
|
それでは早速、簡単なスタートページを作ってみましょう ! ●以下はサンプルプログラム（ソース）です。 メモ帳（エデｲタ）で半角英数で以下の様に書きます。 表示内容は、全角ひらがな、全角英数、半角英数 全てＯＫです。 コマンド（タグ）は＜ ＞ではさみます。 | |
|
＜HTML＞ ＜HEAD＞ ＜TITLE＞HTML練習＜/TITLE＞ ＜/HEAD＞ ＜BODY BACKGROUND="bg2.gif" LINK="#0000ff" VLINK="#bb0000"＞ ＜CENTER＞ ＜BR＞ ＜FONT SIZE=6 COLOR=0000bb＞＜B＞ Welcome to My Home Page＜/B＞＜/FONT＞ ＜BR＞＜BR＞ ＜IMG SRC="tengu.jpg"＞ ＜BR＞ 只今試験送信中です、暫くお待ち下さい。 ＜BR＞＜BR＞＜BR＞＜BR＞ ＜A HREF="html.htm"＞＜FONT SIZE=4＞＜B＞Back＜/FONT＞＜/B＞＜/A＞ ＜A HREF="test2.htm" TARGET="frame2"＞＜FONT SIZE=4＞＜B＞私の趣味＜/B＞＜/FONT＞＜/A＞ ＜A HREF="mailto:"ammonite@avis.ne.jp"＞＜FONT SIZE=4＞＜B＞E-mail＜/B＞＜/FONT＞＜/A＞ ＜/CENTER＞ ＜/BODY＞ ＜/HTML＞ | |
|
バックグランド画像：bg2.gif 写真：tengu.jpg リンクページのGIF：kouzi.gif の専用フォルダーに保存して下さい。 上のプログラム（ソース）の実行結果 タグは半角英数で入力し、＜＞ではさみます。 又、開けタグ、閉じタグといい、＜FONT＞内容＜/FONT＞の様に書きます。 書きこみは、メモ帳（エデｲタ）で書きます。 作業は全て専用フォルダー内でおこなって下さい。 ファイル保存は、この場合は、index.html で保存して下さい。 保存の仕方： 以下の手順でクリックしていって下さい。 ファイル→名前を付けて保存→専用フォルダー →ファイル名：index.html→ファイルの種類：HTML→保存ボタンクリック 以上で専用フォルダーに保存されます。 ネット接続をかけないで、ブラウザーを起動して、 ファイル→開く→参照→ファイルの場所（専用フォルダー)→ファイルの名(index.html) →ＯＫで開きます。 | |
| ＜HTML＞ | htmlプログラムの宣言 |
| ＜HEAD＞ | htmlプログラムの最初にいれるタグ |
| ＜TITLE＞ | ページのタイトル名を表示 |
| ＜BODY＞ | body以下が本文となる |
| ＜TEXT="#0000ff"＞ | bodyの中に書く。body内の文字の色を指定。 |
| ＜BGCOLOR="#ffffff"＞ | 背景色の指定。 |
| ＜BACKGROUND＞ | 背景に画像を表示。 |
| ＜LINK="0000ff"＞ | リンク前の色指定。 |
| ＜VLINK="#00ff00"＞ | リンク後の色指定。 |
| ＜CENTER＞ | 中央よせ。 |
| ＜BLOCKQUOTE＞ | 画面の両サイドを空ける。 |
| ＜DIV="right"＞ | 右よせ。 |
| ＜DIV="left"＞ | 左よせ。 |
| ＜FONT SIZE=4 COLOR=ff0000＞ | 文字のサイズ、色などをコントロール。 この場合はサイズ４、色は赤。 文字サイズは１〜７まで。カラーは１６進法。 カラー見本を参照して下さい。 |
| ＜B＞ | 太字指定。 |
| ＜I＞ | 斜体字。 |
| ＜BR＞ | 改行、行間スペース。 |
| ＜HR＞ | 水平線。 |
| ＜IMG SRC="test.jpg" BORDER=0 ALIGN=middle＞ | 画像の張り付け。 リンク先になる場合に、BORDER=0で枠が削除出来ます。 |
| ＜TABLE＞ ＜TR＞ ＜TD＞ | テーブル組の宣言。段落。セル。 |
| ＜TABLE BORDER=5 CELLPADDING=8＞ | テーブル枠と空白の調整。 |
| ＜A HREF="index.html"＞ | ページのリンク。” ”にリンク先を書く。 |
| ＜A HREF="mailto:アドレスを書く"＞ | メーラーを起動します。 |
|
＜HTML＞ ＜HEAD＞ ＜TITLE＞＜/TITLE＞ ＜/HEAD＞ ＜FRAMESET COLS="20%,80%" BORDER=0＞ ＜FRAME SRC="frame1.htm" NAME="frame1" SCROLLING="yes"＞ ＜FRAME SRC="frame2.htm" NAME="frame2" SCROLLING="yes"＞ ＜/FRAMESET＞ ＜/HTML＞ | ●フレームの組み方 例えば左右の二つのフレームを組むには、HTMLファイル は三つ必要です。 例：frame.htm frame1.htm frame2.htm ←ファイル名は何でも結構です。 ●frame1からframe2へリンクさせるには、 ＜A HREF="○○○.htm" TARGET="frame2"＞リンク先＜/A＞として下さい。 ●frame1から、Homeへリンクさせるには、 ＜A HREF="index.html" TARGET="_top"＞Home＜/A＞として下さい。 |
|
＜HTML＞ ＜HEAD＞ ＜TITLE＞＜/TITLE＞ ＜STYLE type="text/css"＞ ＜!-- #a{line-height:150%} --＞ ＜/STYLE＞ ＜/HEAD＞ |
●＜BR＞以外の行間の空け方 表示文の行間のコントロールに使われる、プログラムですが、 スタイルシートタグと呼ばれています。 line-height:150% が行間の間隙になります。 数値をあげると行間距離が大きくなります。 タグの書きこみは、 ＜/TITLE＞と＜/HEAD＞の間に入れます。 行間を空けたい表示文の文頭に ＜P ID="a"＞といれ、文末に＜/P＞と入れます。 |
|
＜DIV ID="ShadowTest" style="width:100%;height:50px; font-size:20pt;color:green; filter:shadow(color=gray,direction=150)"＞ ＜B＞ここに表示文字をいれる＜/B＞ ＜/DIV＞ |
●影つき文字のプログラム
表示文字に影をつけ、装飾するプログラム。 文字色、サイズ、影色、はstyle 内で変えて下さい。 ・左のプログラムの実行結果
ここに表示文字をいれる
|
