HPの内容を考える


まずは、どの様なHPを作成するのか考えましょう。皆に知って欲しい事、伝えたい事、やりたいことなど考えましょう。
内容が余りに無いHPは誰の目にも留めてもらえませんし、ある程度のジャンルがあれば、それに興味のある方々に見てもらえます。

例)友達に公開する事を目的とした、自己紹介や趣味の創作料理の紹介、キッチンに関連したオススメ商品の紹介。


具体的な内容をコンテンツに置き換え、どの様なコンテンツを設置するのかを考えましょう。
また、その際にコンテンツにはそれぞれに合った名前を付けますが、誰が見ても何が書いてあるページなのか分かるような名前にする事が大切です。

例)自己紹介のコンテンツ名
自己紹介◎ プロフィール◎ ○○ちゃん× とりあえず×


次に、HPのデザインを考えましょう。あまりにも画像ばかりを使って表示されるまでに時間のかかるサイトは好まれませんし
その他、フレームを用いたHPもありますので、デザインをイメージしておきましょうね

例)
  

▲TOPに戻る



必要なソフトをDL


今回はテキストエディタを使ってHPを作成するので、必要なソフトは"テキストエディタ"と"転送ソフト"です。
転送ソフトは「FFFTP」をDLしてきてください。DLしたら、ディスクトップにでも保存して実行してください。
テキストエディタは「メモ帳」など最初から入っているものを使うので、DLの必要はありませんが、最初から入っていなかった場合は「EmEditor Free」というテキストエディタをDLして代用して下さい。

では、この2つのソフトが今後どのように使用されるのか、図で見てみましょう。
なんとなくでいいので、覚えておいて下さい。


▲TOPに戻る



HPスペースを確保する


メモ帳で作ったHPのファイルをアップロードする場所を確保します。ここで、「2.必要なソフトをDLする」で見た図をもう一度見て下さい。
今から右側の家の部分のHPスペースを確保します。
皆様がインターネット登録した時に、大体のプロバイダでは、スペースを提供してくれています。
しかし持っていなくても、世の中無料でHPスペースを貸してくれているところは多くありますから、検索などをして探して見ましょう!
いろいろなスペースを貸してくれる場所はありますが、 自分自身で、規約・容量・その他を確認して、登録してください。
しっかり、規約を読んで、しっかり内容を見れば、人に聞かなくても分かります。
登録が完了してURLが発行されたら、これでスペースの確保終了。

▲TOPに戻る



HPを作る


基本偏

それでは、実際にHPを作ってみる訳ですが、基本の話だけしておきましょう。ここから実際にHTMLをメモ帳に打ち込むわけですが、

<HTML></HTML>
これを一番最初に打ち込みます。

HTMLを打ち込みます。っといった宣言です。この宣言は省くことはできますが、打ち込んだほうが確実です。

<HTML>これは、ここからはじめます。そして</HTML>ここで終わります。っという意味です。

次に、ブラウザに情報を与えたり、スタイルシートやJavaScriptなどを打ち込みます。また、この部分には、ヘッダ部と呼ばれ、製作者の情報などを入れたりもします。
そのHTMLがこれ
<HEAD></HEAD>
この中に<TITLE>ここにタイトル</TITLE>これを入れると、ブラウザの左上にあるタイトルバーにタイトルを付けることができます。

そして、ページに表示させられる部分を打ち込む場所、それがBODY〜/BODY
ここに、いろいろな文章、画像などを書き込んで行きます。こに書き込んだものは、ブラウザで表示できます。

以上3つのHTMLをまとめたものがこれ↓



また、<body></body>の部分を↓こっちに変更すれば、文字の色・背景色・リンク色などの変更をすることもできます。


これが、一番基本のHTMLです。


とりあえず1ページ作ってみよう!
何事も実践ですよね。とりあえず1ページ作ってみましょう。

では、まずめもちょうテキストエディタを開いて、基本となっているHTMLを打ち込みます。図のようにHTMLを書き込みましょう。



では、次にこのように書き換えてみましょう!全てスペースは半角ですよ!変な場所に半角スペースを入れると表示されないので気をつけて下さい。




では、ここで保存しましょう。
ここで注意するのは、今作っているページは、一番最初に表示されるページであるということです。一番最初のページのファイルには「index.html」という名前を付けましょう。

※「index」この名前を付けることで、HPスペースから提供されたHPアドレスを入力するだけで今作ったファイルが一番初めに表示されます。
※「html」又は「htm」このファイル名を付けることで、このファイルの種類がHTMLファイルだと決めるわけです。


では、先ほど作った「index.html」をブラウザで開きます。
ブラウザで開くっていうのは、インターネット・エクスプローラ(IE)を使って、実際HPを開くと どの様に表示されているのかを確かめます。インターネット・エクスプローラ(IE)を開きます。「メニュー」→「ファイルを開く」で 先ほど作ったファイルを開いてみましょう。


この様な画面が出てきたでしょうか?この様に表示されれば完璧です。では、"mail"の部分をクリックして下さい。パソコンの「out look」が起動して、送信先メールアドレスは表示されたでしょうか?


では、ここからは自分で自分の作りたかったサイトを作ってみましょう!!

▲TOPに戻る



アップロードする


初期設定 それでは、「FFFTP」を使ってサーバーへアップロードします。FFFTPを開き、「新規ホスト」を選択してください。すると↓こんな画面が出てきます。



@ホストの設定名:指定が無い場合、自由に決めてください。
Aホスト名(アドレス):FTPサーバ名等と書いてある部分。
Bユーザ名:アカウント名・ID等と書いてある部分。
Cパスワード:パスワードです。
D最後にアクセスしたフォルダを次回の初期フォルダとする:ここは、チェックを入れると便利です。

※分からない場合は、各スペース提供者へ問い合わせをするか、各提供者ヘルプを参照 接続 初期設定が終わったら、設定したホストを選び、接続をクリックしましょう。

正常に接続ができたら↓こんなかんじになります。



赤い部分に「ファイル一覧の取得は正常終了しました」と出てきます。緑が自分のPCのファイル一覧です。青はサーバーにアップロードされたファイルの一覧です。

※正常に終了しない場合は、だいたいが打ち間違えなどによる入力ミスです。
それでは、左の部分で、先ほど作ったファイルを検索し、右クリックでアップロードしてください。すると、アップロードできます。
※「puclic_html」 「htdocs」 「www」 といったフォルダ(ディレクトリ)がある場合は、その中にアップロードしてください。そうしないと正常にアップロードされても確認することができません。 これで完成です。


これからHPサイトを運営していく皆様へ

HPとは特定の個人だけが見る物ではなく、不特定多数の人から見られている事の実感を持って下さい。自分が何処の誰かわからないからといって、非常識な行動には出ないで下さいね。ネットにはネチケットという物がありますので、検索して是非一度目を通してみて下さい。
また、HP支援系サイト(HTMLサイト・HP素材DLサイト)などに利用規約がある場合は、必ず目を通し、了承されましたら活用するようにしましょう。

▲TOPに戻る