Note
After garbled, you can right-click the mouse,
after entering the encoding, click the Japanese (Shift JIS). Garbled repaired.



ソフトを使わないで(HTML言語で)ホームページを作ってみよう

「ホームページ作成用ソフト」を使わないで、HTMLプログラムだけでホームページを作ってみましょう!
ホームページ作成ソフトは、HTMLをマスターしてから使用する事をお勧めします。
作業場フォルダーは、Cハードディスクの中に作って下さい。



[カラー見本] [FFFTP の使い方(データをサーバーへ送る方法)]
ホームページとは何?

インターネットは、標準プロコルTCP/IP (通信規約)上で動作し、WWW( World Wide Web の略で、単に Web とも呼ぶ )システムで、 情報(画像、文、サウンド)を検索、閲覧します。
Webブラウザー(IE、ネットスケープ等)のようなWWW用クライアントソフトが対応 しているプロトコル(通信規約)には、HTTP、FTP、WAIS、Gopher、NTTP などがあります。

ホームページは一冊の「本」と同じです。まず目次があり、そして本文があります。 だからコンテンツ(内容)ごとのそれぞれの中身(htm ファイル)を「ページ」と呼びます。

そして「本」の場合はページを「めくる」といいますが、ホームページでは、ページをめくる 事を「リンク」といいます。 そして一ページ、一ページのことを「htmファイル」と呼びます。

ファイルですので必ず、拡張子(基礎用語で説明した)というものがあります。
その拡張子が、.htm です。
htmファイルの中には、画像ファイル(.jpg .gif)や音楽ファイル(.mp3 .mid) を格納する事が出来、それを表現することが出来ます。

そしてhtm ファイルの作成は、HTML(ハイパーテキストマークアップランゲージ)言語を 使用します。
HTMLは、他のコンピューター言語と違い、一つ一つのコマンドの前後にかぎカッコ(<○○○>)を 入れます。
又、HTMLコマンドを他の言語と違い、特に「タグ」と呼びます。
そして、明けタグ< >と閉じタグ</ >で表示内容をはさみます。

それでは、HTML言語を使いhtm ファイルを作成(プログラム)してみましょう。
htm ファイルをつくり、ブラウザで実行確認するまでの流れの説明。

1.メモ帳( Windows に標準搭載のエデイタ(ワープロソフト))を起動。

2.メモ帳でhtml 言語でプログラムを書く。

3.完成したhtmファイルを専用フォルダーに保存します。

[ファイル→名前を付けて保存→保存する場所(専用フォルダー)→ ファイル名をindex.html(スタートページは、必ずindex.htmlにします) とする→ファイルの種類のところはすべてのファイルにする→OKクリック]

4.プログラムを修正した時は、(ファイル→上書き保存)で修正されます。

5.プログラムの実行確認は、まずブラウザ(IE)を起動します。

ファイル→開く→参照→ファイルの場所(専用フォルダー)→ ファイルの種類(index.html)を選択→OK するとブラウザに作成したhtmlファイルが表示されます。

(注)タグ、ファイル名は全て半角英数で書いて下さい。
HTMLのサンプルプログラム(ソース)の書き方
●HTML プログラム(ソース)の基本パターン

(メモ帳(エデイタ)でプログラム(ソース)を書きます。タグは半角英数で書きます。)
コマンド(タグ)は< >ではさみます。
<HTML>
<HEAD>
<TITLE>タイトル名</TITLE>
</HEAD>
<BODY>

内容のプログラムを書き込む

</BODY>
</HTML>
それでは早速、簡単なスタートページを作ってみましょう !

●以下はサンプルプログラム(ソース)です。

メモ帳(エデイタ)で半角英数で以下の様に書きます。
表示内容は、全角ひらがな、全角英数、半角英数 全てOKです。
コマンド(タグ)は< >ではさみます。
<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)
→OKで開きます。

タグ名(コマンド)
実行内容
<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>文字のサイズ、色などをコントロール。
この場合はサイズ4、色は赤。
文字サイズは1〜7まで。カラーは16進法。
カラー見本を参照して下さい。
<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 内で変えて下さい。

・左のプログラムの実行結果
ここに表示文字をいれる

[Home]