ホームページ作り方の説明


ホームページの作り方手順

ホームページの作り方の手順です
まずはじめに自分のパソコンのデスクトップ上のフォルダを作ります。

デスクトップ上とは、パソコンを立ち上げた時に出てくる画面のことです。

デスクトップ上の何もない所(アイコンなどの上にカソールを合わせない所)でマウスを右クリックします。

新規作成から、フォルダを作ります。
作成しましたら、そのフォルダを分かりやすいように名前をつけます。
名前は好きな名前で良いです。
ここでは「ホームページ作り」としておきます。
そのフォルダを開いて今度は「ホームページ作り」の中で右クリックして新規作成から
テキストドキュメントを作成します。
新しいドキュメントができましら、そのテキストドキュメントにも好きな名前をつけます。
ここでは「トップページ」としておきます。
これでホームページ作りのフォルダの中に「トップページ.txt」が出来上がった事になります。
(ウインドウズではテキストドキュメントは.txtは自然についてきます。トップページとだけ入力します)
そのテキストドキュメントを開いて
次のようなタグを入力します。

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

入力しましたら今度はホームページのタイトルになる部分を入れます
<title>~</title>
部分に好きなタイトルを入れます。
ここではホームページ作りに挑戦と入れておきます。

<html>
<head>
<title>ホームページ作りに挑戦</title>
</head>
<body>
</body>
</html>

同じく今度はホームページの内容となる部分に

内容を入れます

内容は

<body>~</body>の間に入れます

とりあえずここでは

内容をこの<body>~</body>の間に書きますと入れておきます

<html>
<head>
<title>ホームページ作りに挑戦</title>
</head>
<body>

内容をこの~の間に書きます

</body>
</html>

保存します。

この時にindex.htmlと入力します。
このindex.htmlの名前は好きな名前ではなく

index.htmlと変えないでください。
これはフォルダの中にindexを置く事になっています

内容のところに
<body>~</body>
の部分は~タグなので消えて表示されます

これでホームページの基礎ができた事になると思います。

もしこったページを作るのであればこのような事を覚えるとよいと思います。


ホームページの作り方の解説

●簡単ホームページ作り

ホームページを作るのはいたって簡単です

何かを買って用意するものはなく

windowsならメモ帳があればできてしまいます

burauza5

私みたいな貧乏人でも作れちゃいます

まずはwindowsで備えられているメモ帳のみでホームページを作ってみます
ホームページを作る流れは
メモ帳というテキストエディターを使いタグを入力していきます

タグは後に説明しますので

先に拡張子の説明をします。
のちに重要になってきますのでここで説明したいと思います

ややこしい話は嫌いと言う人はひとまず飛ばして後で理解しても構いません。


早速、ホームページを作りますに進んでください


道のイラスト


●拡張子

拡張子とはアプリケーションの種類を表しています。
簡単に言うと、ファイルの後にくるものが拡張子になります。

テキストファイルの場合、ファイル名.txtと言った感じです

画像ファイルの場合
ファイル名.jpg
ファイル名.gif
ファイル名.pngなどと言った感じの物があります。

簡単に言うと
jpgは写真向きで
gifはイラスト向きで
pngはネットワーク向きと言った感じです

htmlファイルの場合
ファイル名.htmlになります

なにかメモ帳などので書いたものを保存して右クリックしてプロパティを出すと
ファイルの種類で拡張子(.text)を見ることができます


●早速、ホームページを作りますホームページのアイコン

最初にやることはフォルダを作ります
そのフォルダの中に作ったテキストファイルなどを置いていきます
少し解りやすく、なるべく疑問になりそうな所は
極力説明をいれていきたいと思います

まずは画面の何もない所で右クリックをして新規作成にカソールを合わせてフォルダに進んで行きクリックします。

新規作成

フォルダができたらフォルダを右クリックして名前の変更でフォルダ名を付けます

新規作成1

フォルダ名は好きなもので良いです

ここではmyhpとでもしておきます

新規作成2

なるべくわかりやすく日本語がいいのですが
本格的にするのであればわかりやすい半角英にすることをお勧めします

そのフォルダー名にホームページを作るテキストなどを保存していきます

myhpフォルダができたら

myhpを開いてみます。

setu3

もちろん何もない状態です。そこで右クリックして

新規作成から、今度はフォルダではなく、テキストドキュメント(メモ帳)をクリックします。

この時に、名前を付けておきます。

setu4

フォルダ同様に、右クリックをして名前の変更でテキスト名を付けます

名前は好きな物で構いません。トップページになると思うのでtopとでもしておきましょう

これでmyhpフォルダ内にtop.txtが出来上がりました

setu5

そして、メモ帳をダブルクリックして開きます

まっさらな状態で、その中に次のような<>で囲まれた物(タグ)を入力していきます
練習のために打ち込むのも良いですが、もちろん下の物をコピーしても使えます

お決まりの言葉ですが
自己責任でお願いします

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

と入力します。こんな感じです

setu9


イラストも作ってみました▽

burauza2

入力しましたら早速タイトルを入れてみましょう
タイトルはブラウザの上の部分に表示される物です。言わば本のタイトルと一緒です

<html>
<head>
<title>この部分です</title>
</head>
<body>
</body>
</html>

タイトルはのちに重要になってくるので
特徴のある自分だけの物を入れましょう
例えば【ホームページ作り】となると世間ではこのようなタイトルをつける人が山ほどいます

なにか特徴、個性のあるホームページタイトルにすると良いかもしれません。例えば○○なホームページとか
その方が検索では上位に来ることが多いので
人の目にも止まりやすくなります
これから書く自分のホームページに自信があるのであれば
ホームページ作りなどにしてもよいかもしれませんが
本などと同様に考えてみてください
同じタイトルの本があったらよさそうな本を手に取ると思います
人気がある本はどんどん店頭に人気がないものは隅に追いやられて、人の目にも
止まらぬようになります

<html>
<head>
<title>気ままなホームページ作り</title>
</head>
<body>
</body>
</html>

今の段階では、htmlファイルを作っていないので見る事はできませんが、
htmlファイルに移したらこのように表示されます

burauza3

タイトルが入りましたら
次は<body>~</body>に何か文字でも入れてみましょう

<html>
<head>
<title> 気ままなホームページ作り</title>
</head>
<body>

テスト

</body>
</html>

このbody内はブラウザの見える部分です

ブラウザ?ブラウザとはホームページを見るための閲覧ソフトです
windowsであればInternet Explorerといったものがあらかじめ用意されています
Internet Explorerをクリックするとホームページが見られるわけです

ここに文字を入れたりイメージタグなどを使って画像を表示したりします

このようにホームページは作られています

文字を入れた場合の例


<body>~</body>に何か文字を入れましたら

一度保存して置きます

保存方法は

ファイルから上書き保存をするか

名前を付けて保存します。

先ほど作ったテキストファイル名.txtで保存します

≪例 top.txt≫で保存します。
topはこの文中の例の物なので、自分で作った名前であれば、間違えないようにしてください。

これでテキストファイルに保存したことになります

次にそのテキストファイルからhtmlファイルに反映させます

その方法はtop.txtを開いてファイルから名前を付けて保存をクリックしてindex.htmlと入力して保存します

setu6

setu10

このindex.htmlはトップページを表す事になります

.htmlはブラウザの拡張子です

index.htmlは変えてはダメです。自分の好きな単語を入れたいかもしれませんが

トップページだけはindexと決まっています

index.htmlと入れてください。(拡張子htmも使うことができますがややこしくなりそうなのでhtmlとします)

そして保存します。そうするとフォルダのなかにはテキストファイルと htmlファイルの2個ができたことになります

setu7

そのテキストファイルがhtmlに反映されています

そのhtmlファイルをクリックするとbody内の文章とタイトルが表示されています

burauza4

これでホームページが出来たことになります

しかし、これだけではローカル状態で自分のパソコン内のオフラインでしか見ることができません

レンタルサーバーを借りて、htmlファイル(情報)などをアップロード(転送)して
ネットワークに公開してもらう手続きを行います。もちろん無料の所があります

レンタルサーバーに登録してURL(http//から始まる物)を作ります
自分のホームページの住所的になる物を作ります

レンタルサーバーで有名な所を挙げると

FC2
NINJA
ロリポップなどがあります

検索して使い勝手が良さそうな所を選んでください

レンタルサーバに登録してファイルをアップロードしたら、ここで初めてネットに公開したことになります

のちに検索サイトgoogleなどに登録すると検索にヒットされます
(検索にヒットするまでは何日かかかります。すぐ反映されるわけではありません)

ホームページの公開の流れ


ホームページを作るにはいろいろなタグを使って構成していきます

<body>~</body>内に
色々なタグを使って画像や、文字の色、大きさ、指定場所などを細かく指定していきます。

≪サンプルです≫
このように入力してどのようになるか試してみてください

<html>
<head>
<title>タイトル</title>
</head>
<body>
<font color=”#ff0000″>テスト</font>
<font size=”16″>こんにちは</font>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h2>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
今日は<br>いい天気ですね改行されます
<table border=”1″ width=”200″ height=”80″>
<tr>
<td> テーブル作り </td>
</tr>
</table>
<strong>強調する</strong>
<hr>
<hr>
<p>
<hr>
</body>
</html>

タグの解説;フォントタグ
<font color=”#ff0000″>テスト</font>
<font color=”red”>テスト</font>
とするとテストの色が赤色になります。
<font color=”コード名もしくはカラー名を指定します”>

<h1>見出し1です</h1>大きい見出し
<h2>見出し2です</h2>数字が大きくなるほど見出しサイズが小さくなります
<h2>見出し3です</h3>
<h4>見出し4です</h4>
<h5>見出し5です</h5>
<h6>見出し6です</h6>
<br>は改行です
<table border=”1″ width=”200″ height=”80″>
<tr>
<td> テーブルでサイズや枠線を指定したりします </td>
</tr>
</table>
<strong>強調します</strong>
<hr>は線です
<p>は段落です

記述は自分が見ても誰が見ても解りやすく書くのが基本です


画像を載せる場合は画像を用意して同じフォルダーに入れます

画像を載せたい場合は拡張子がjpgであれば
<img src=”ファイル名.jpg” width=”200″ height=”100″>
とします

例えばペイントを使ってイラストを描いた場合は
windowsでアクセサリ、ペイントと起動して
ペイントソフトが開いたら
何かイラストでも描き保存します。
保存名は半角英数にしてファイルの種類を選択して保存します。

保存したファイルを指定して保存するか保存した物をドラッグして先ほど作ったフォルダに移します

ファイルの種類をPNG(png)にした場合は(大文字、小文字を区別してください)
ファイル名をpicとした場合
≪例≫pic.pngと言った感じです。
<img src=”pic.png” width=”200″ height=”100″>
とこのようにします

widthは幅を指定して heightは高さを指定しています。

このタグを好きな所に入れます

<html>
<head>
<title></title>
</head>
<body>
<hr>
<img src=”pic.png” width=”200″ height=”100″>
<hr>
</body>
</html>


ホームページを作る上で学んだことが良いこと

タグの種類と使い方
外部スタイルシートの使い方
CSS
metaメタタグ
など

cssの使い方

テンプレートを使ってホームページを作る方法


ホームページ作りのアドバイス
ファイルは整理整頓をするように心がけています
フォルダは住所と覚えるようにします。
例えばmyhpというフォルダにtop1.htmlを作ったとします。
これを言葉にすると、myhpという住所のtopの1番地と覚えます。
これは私がやっていることなのですが、top1の次はtop3となるべくとびとびの番号を使っています。
もし同じ内容で近くに起きたければtop2を作ったりしています。
どうしても入れたかったりした場合は、top0、top01、top001などを使ってすりこんでいます。
※ちなみに、googleでは、意味のある物を推奨しているようです。
≪例≫

例えば象の絵だったら

zou-e
とかではなく

elephant-pictureといった感じのように意味合いがある物が良いようです
ファイル数(ページ数)が少なければ、断然に意味合いを持たせた方が良いと思います。

結局は自分で管理しやすく、わかり易いようにすると良いと思います。

フォルダイラスト


少し解りにくい説明だったかもしれませんが、
解らない所はキーワードを検索して
ほかのサイトでも比較してみてください。
インターネットなどでは、たくさん良いサイトがありますので
疑問が解決すると思います。
是非、がんばってみてください。\(^o^)/

ホームページの作り方

このエントリーをはてなブックマークに追加
   


スポンサード リンク

 

↑このページの先頭へ