ホームページ作成講座

最近では、Facebook(フェイスブック)やTwitter(ツイッター)、mixi(ミクシィ)、
blog(ブログ)などが流行っていますが、ここではHP作成について書きます。


だいたいこんな感じです。
  1、書く〜アップロードまで
  2、書き方
いろいろ
  1、HP作成で覚えておくと楽なこと
  2、ホームページとブログの違い
  3、携帯(モバイル)用HPの注意点
  4、絶対パス(フルパス)と相対パスの違い
HTMLタグ講座
  リンク
  文字・色・線
  画像
  音楽
  テーブル
HPにCGIを設置する
  携帯やパソコンから名簿検索できるCGI

[メニューへ]  [トップへ]


だいたいこんな感じです。


1、書く〜アップロードまで

(WindowsのPCの場合)
1、右クリック→「新規作成」→「テキストドキュメント」で出来た「新規テキスト ドキュメント.txt」を
  クリックして書き込みます。
2、書き終えたら、「ファイル」→「上書き保存」をして、ファイルを閉じます。
3、2の「新規テキスト ドキュメント.txt」のファイルを右クリック→「名前の変更」で、
  ファイル名を適当な半角英数字にして、拡張子を「.txt」から「.html」に変えます。
  この作業で、テキストファイルからhtmlファイルになります(※「半角英数字.html」とします。[例] index.html)。
4、3をサーバーにアップロードして完了です。あなたの作成したページがWEB上に公開されます。
  (※FTPサーバーにアップロードするには FFFTP(無料ソフト) が使いやすいです。)

[一番上へ]

2、書き方

すてきなホームページ

こんにちは。
ホームページ作成講座の時間です。

管理人が弾きました。
E.ピアノ.mid

HPもよろしくね!
星のおじさまHP


例えば上記のように書くには、↓のように書きます。
HTMLタグは大文字 小文字どちらでも良いですが、必ず半角英数字で記述します。
本文は <body>〜</body> の間に書きます。 <br>は改行です。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> は、
文字化け防止のための記述で、「このページの文字コードは日本語(シフトJIS)だよ」っていう意味です。
※上記の場合、あらかじめ「E.ピアノ.mid」をe_piano.midとして同じディレクトリ(フォルダ)内に
アップロードしておきます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>すてきなホームページ(←ここにタイトルを記入)</title>
</head>
<body>

<h1>すてきなホームページ</h1>

こんにちは。<br>
ホームページ作成講座の時間です。<br><br>

管理人が弾きました。<br>
<a href="e_piano.mid">E.ピアノ.mid</a><br><br>
HPもよろしくね!<br>
<a href="http://(ここにHPのURLを記入)">星のおじさまHP</a>

</body>
</html>

[一番上へ]


いろいろ


1、HP作成で覚えておくと楽なこと

それは、コピー&ペースト(貼り付け)です。コピペとも言われ、これを知っておくとHP作成が楽です。
Windowsでの方法は、コピーをしたい文字列をマウスでドラッグして反転させて右クリックで「コピー」、
貼り付けたい場所にマウスを持っていき、右クリックをして「貼り付け」を選択します。

[一番上へ]

2、ホームページとブログの違い

ブログはHTMLタグを知らなくても簡単に作れます。
素敵なテンプレートが豊富なので、初心者の方でもカッコイイページがすぐに作れます。
ただ、HPに比べると編集がやや面倒かもしれません。
FTPによるファイルアップロードが可能な無料ブログはなかなかないので、
一つ一つ手動でやらなければなりません。
HPは、ブログと違ってFTPで一気にアップロードできます。
またHPは使用できるファイルの種類が多く、自分好みに自由に作成できます。
HTMLタグとか覚えることは多いですが慣れますし、特別なHP作成ソフトがなくても作れます。
いろんなHP作成ソフトがあるので、それらを使用するのも良いと思います。

[一番上へ]

3、携帯(モバイル)用HPの注意点

携帯サイトは画面を小さめにして、画像を少なくして、1ページのサイズを軽くしないといけません。
カラフルなページにしたい場合は、画像を使用せずに文字の色を変えるなどしてみましょう。
最新のスマートフォンはJavaScript(ジャバスクリプト)に対応しているようですが、
多くの携帯ではJavaScriptやJavaアプレットやFlash(携帯用Flashを除く)に対応していません。
CGIやPHPは携帯でも使用可能なものがあります。

[一番上へ]

4、絶対パス(フルパス)と相対パスの違い

絶対パス(フルパス) とは、「http://から始まるアドレス」でファイルの場所を指定することです。
人間界に例えると、「東京都○○一丁目のA子さんの家」のように住所を示す感じです。
絶対パスは確実ですが、HPを引っ越した際に書き換える必要があります。

相対パス とは、もとのファイルから見てファイルの場所を指定します。
「私の家から角を3つ曲がったところがA子さんの家」みたいな感じ。
例えば、もとのファイルと同じフォルダ(ディレクトリ)の中にある「index.html」を指定したいのなら
「index.html」と記述します。<a href="index.html">のように書きます。
もとのファイルから「二階層上のindex.html」を指定したい時には「../../index.html」で、
<a href="../../index.html">となります。
階層が一つ下のaaaというフォルダの中のindex.htmlを指定したい場合は、
<a href="aaa/index.html">となります。

[一番上へ]



HTMLタグ講座


■リンク■


* リンク
<a href="(ここにHPのURLを記入)">星のおじさまHP</a>
   ↓
星のおじさまHP


* 別窓リンク
<a href="http://(ここにHPのURLを記入)" target="_blank" >星のおじさまHP</a>
   ↓
星のおじさまHP

[一番上へ]



■文字・色・線■


* <center>文字を真ん中にする</center>
   ↓
文字を真ん中にする


* <b>文字を太字にする</b> → 文字を太字にする


* <i>文字を斜めにする</i> → 文字を斜めにする


* <font color="#4b87eb">文字の色指定="水色"</font>
#の後ろで色指定します。 色指定をする際には「カラーコード表(色見本)」を見ましょう。
   ↓
文字の色指定="水色"


* <font size="5">文字の大きさ="5"</font>
   ↓
文字の大きさ="5"


* <font color="#ff0000" size="7">色指定="赤" 文字の大きさ="7"</font>
(※)"#ff0000"を"red"にしてもOKです。
   ↓
色指定="赤" 文字の大きさ="7"


* 線は <hr>
   ↓



* 線の色を変えるには <hr color="#0000ff"> #の後ろで色指定します。この場合は青です。
(※)"#0000ff"を"blue"にしてもOKです。
   ↓



* 黄色い線 <hr color="#ffff00"> (※)"#ffff00"を"yellow"にしてもOKです。




* ホームページの背景色を指定
例えば 赤 <body bgcolor="#ff0000">

[一番上へ]



■画像■


* ホームページに画像を貼る
<img src="画像のURL">

例: <img src="back.gif"> または
   <img src="http://(アドレス)/back.gif">
   ↓


* 「width="横幅の数字" height="縦幅の数字"」で画像の大きさを指定
例: <img src="back.gif" width="100" height="100">


* <img src="画像のURL" border="数字">で画像の周囲の線の太さを指定(0だと無し)
例: <img src="back.gif" border="15">



* 画像を真ん中にする
<center><img src="画像のURL"></center>

例: <center><img src="back.gif"></center> または
   <center><img src="http://(アドレス)/back.gif"></center>
   ↓


* 画像でリンクする(画像をクリックするとリンク先へ飛ぶ)
<a href="リンク先のURL"><img src="画像のURL"></a>


* ホームページに背景画像をつける
<body background="画像のURL">

[一番上へ]



■音楽■


* ホームページに音楽をつける

ホームページに流す音楽は、サイズの軽いMIDIファイルが最適です。
MP3やWAVEでも可能ですが、これらのファイルはサイズが大きいため、
ページが重くなってしまいます。

・ 1回だけ音楽を流す場合 例:e_piano.mid
<embed src="e_piano.mid" autostart="true" hidden="true" loop="false"> または
<embed src="http://(URLを記入)/e_piano.mid" autostart="true" hidden="true" loop="false">

・ 繰り返し音楽を流す場合(ループ) 例:e_piano.mid
<embed src="e_piano.mid" autostart="true" hidden="true" loop="true"> または
<embed src="http://(URLを記入)/e_piano.mid" autostart="true" hidden="true" loop="true">

※プレーヤーの表示は、「hidden="false"」、非表示は、「hidden="true"」と指定する
「width="横幅の数字" height="縦幅の数字"」の記述で、プレーヤーの大きさを指定することができます。

※同じディレクトリ内なら「e_piano.mid」の記述で良いのですが、階層が違う場合、
例えば2つ上の階層にe_piano.midファイルがある場合は、「../../e_piano.mid」と相対パスで指定するか、
「http://〜」で始まる絶対パスでmidファイルを指定しなければなりません。
絶対パスは確実ですが、相対パスにするとHPを引っ越す時にいちいちURLを変更する必要がないため楽です。

[一番上へ]



■テーブル■


* テーブルを使う

<table border="テーブルの外枠の太さの数字"> ←"0"にすると外枠なし

あああ


<table border="1">
<tr>
<td>あああ</td>
</tr>
</table>


あああ いいい


<table border="5">
<tr>
<td>あああ</td>
<td>いいい</td>
</tr>
</table>


あああ
ううう


<table border="11">
<tr>
<td>あああ</td>
</tr>
<tr>
<td>ううう</td>
</tr>
</table>


あああ いいい
ううう えええ



<table border="5" bordercolor="#0000ff" bgcolor="#ffff00">
<tr>
<td>あああ</td>
<td>いいい</td>
</tr>
<tr>
<td>ううう</td>
<td>えええ</td>
</tr>
</table>

<table border="テーブルの外枠の太さの数字" bordercolor="テーブルの枠の色"
bgcolor="テーブルの中の背景色">
上記の例では、外枠の太さは"5"、テーブル枠の色は青("#0000ff"または"blue")、
テーブル内の背景色は黄色("#ffff00"または"yellow")となっています。

他にもいろいろ指定ができます。

<table width="横幅の数字" height="縦幅の数字">

<table cellpadding="数字" cellspacing="数字">
↑外枠はborderで、cell(セル)と border の間が cellspacing(セルスペーシング)、
cell 内から内容の間が cellpadding(セルパディング)となります。



あああ いいい
ううう えええ

<table border="5" bordercolor="#0000ff" bgcolor="#ffff00" cellpadding="15" cellspacing="0" align="center">
<tr>
<td bgcolor="#ff0000">あああ</td>
<td>いいい</td>
</tr>
<tr>
<td>ううう</td>
<td>えええ</td>
</tr>
</table>


↑ <table align="center"> ←テーブルを真ん中にします。
<td bgcolor="色">○○○</td> でセル内の背景色を指定することが可能です。



通常 真ん中



<table border="1" bordercolor="#000000" bgcolor="#ffffff" width="200" height="100">
<tr>
<td>通常</td>
<td align="center">真ん中</td>
</tr>
<tr>
<td align="right">右</td>
<td valign="top">上</td>
</tr>
</table>


↑ <td align="center"> でセル内の文字が真ん中になります。
<td align="right"> でセル内の文字が右になります。
<td valign="top"> でセル内の文字が上になります。



右上
ううう えええ



<table border="5" bordercolor="#0000ff" bgcolor="#ffff00" width="200" height="100">
<tr>
<td align="right" valign="top">右上</td>
<td><br></td>
</tr>
<tr>
<td>ううう</td>
<td>えええ</td>
</tr>
</table>


↑ <td align="right" valign="top">右上</td> で
「右上」の文字列がセル内で右上に表示されます。
<td><br></td> で空白のセルが作れます。

[一番上へ]



[メニューへ]  [トップへ]