EasyHP.org │タグ HTML 簡単ホームページ作成、リンク集、HTMLテンプレート

ホームページは簡単に作れる！

スタイリッシュでシンプルなホームページをあっという間に作ってみましょう！

簡単スタイリッシュホームページ作成キットのマニュアル

こんな感じ（→サンプル）のホームページを30分で作る手順をこれからご紹介します。

普通の情報発信ページではシンプルなほど検索エンジンにもやさしく、誰もが見やすいホームページになります。

１．必要なモノ

・メモ帳（もしくはその他テキストエディタ、HPビルダーなどはもっと便利）
・ホームページデータアップロードソフト（FTPソフト）
・ホームページ公開サーバー（無料サーバー、プロバイダのサーバーでもOK）
そして、このページの基礎となるホームページテンプレート。

テンプレートは下記リンクよりダウンロードしてください。

ホームページテンプレートキット　←クリックでキットをダウンロード
　　　　　　　　　　　※テンプレートキットの著作権表示削除や再配布はご遠慮ください。

ダウンロードしたテンプレートは圧縮されているので、解凍ソフトを使って解凍してください。

以下の4つのファイルが出てきました。
■index.html
トップページのホームページファイル
■css.css
スタイルシートファイル、特にさわらないので置いておくだけ。
■bg.jpg
メニュー下部のひよこさんの画像です。
■head.jpg
タイトルの背景画像です。

ここでは、「index.html」のみを変えてホームページを作ります。

作業１～ページをメモ帳で開いてタイトルを編集する～
まずは「index.html」をメモ帳などのテキストエディタで開いてください。Windowsの場合は、ファイルの上で右クリック、プログラムから開くでNotepadを選択してください。

初心者の方にはわけがわからない、アルファベットの文が表示されました。
これがホームページを構成するHTMLというものです。

ここでは特に理解しようとせずに、とりあえず上から順に変えて行きます。

まずは、上から5行目の<title>ホームページのタイトル</title>を見つけて、< >の部分を消さないように、「ホームページのタイトル」の部分を好きなタイトルに変更してください。このタイトルはお気に入りに登録したときや検索エンジンの検索結果に表示される重要な部分です。しっかりと考えてタイトルをつけてください。

次に上から10行目に、
<td bgcolor="white" height="80" background="head.jpg">　ホームページのタイトル</td>
こんなのがありますので、ここも同じように「　ホームページのタイトル」の部分のみ変えてください。最初に全角のスペースが一つ入っています。お好みで増減してください。

作業２～左のメニューリンクを編集する～
16行目から28行目までが左のメニュー部分です。
このキットは初期状態では5ページを想定しています。ただし、ホームページファイルは１つしか含まれていないので、適宜、「index.html」を複製して増やしてください。
→メモ帳で「名前をつけて保存」、各「1.html」、「2.html」…というように「5.html」まで増やしてください。

20行目から25行目までがリンク部分です。
<li><a href="1.html">ページ１タイトル</a>
「ページ1タイトル」の部分を次のページの名前に変えてください。
同様に残りの4ページも名前を変えてください。
25行目のみ、メール送信リンクになっています。<li><a href="mailto:mail@mailaddress.com">メール</a>
青字の部分に自分のメールアドレスを挿入してください。mailto:は残して、半各英数文字でメールアドレスを入力します。

これでメニュー部分は完了です。

作業３～コンテンツを入れる～
30行目からが右のコンテンツ部分の記述です。
<br>というのは改行のマークです。単純に<br>を入れると改行されます。
まずは「ここにコンテンツを入力します。」を変えてみましょう。
保存して、ダブルクリックすると変更されたページが表示されるはずです。

これで文章主体のホームページは作れるようになりました。

画像の挿入は<img src="画像ファイル名">を記述すると画像が表示されますが、ここまで作っただけでもホームページを作るHTMLに対して親近感ができたと思うのであとは詳しく説明されているほかのサイトで調べてみてください。

【PR】
専門学校|矯正歯科｜リサイクルショップ・京都|eラーニング|高校留学|ワイヤーカット|印鑑の作成|大阪の貸事務所｜焼肉・京都｜仏壇は京都市｜京都・グルメ・美容室｜京都市矯正歯科|横浜市・矯正歯科｜水素水｜販促・企画