※この記事は、京都市のパソコン家庭教師「Flutter」が、パソコン初心者の方にお送りする豆知識コーナーです。
「こういった感じで授業を行います」という紹介も兼ねています。
お気に召しましたら、どうぞパソコン家庭教師のFlutterを宜しくお願いします。
ご意見・間違いのご指摘、不明な点などございましたら、コメント、もしくは
こちらのページ(「パソコン家庭教師のFlutter」のページです)
の、「お問い合わせ」よりお知らせください。
ここでは、主にパソコン初心者の方に向けて、
「ホームページの作り方」
の導入部を説明しています。
●そもそもホームページって何！？ ～HTMLファイルって～
皆様が「インターネット」に接続することで、
見ている「ホームページ」。
どうやってつくるの？
という話の前に、
そもそもホームページってなんなんでしょう。
実は、ホームページとは
「ホームページ ＝ HTML」
という「ファイル」なのです。
画像ファイル、文書ファイル、映像ファイルなどと同じ、
HTMLという名前のファイルです。
HTMLファイルというものを、
「Internet Explorer」であるとか、
「Firefox」であるとか、
「Safari」などのソフトを通して見ることで、
いわゆる「ホームページ」の形になるのです。
●HTMLファイルを作るには？～実際にホームページを作ってみましょう！～
じゃあ、
「ホームページを作る」＝「HTMLファイルをつくる」
ということなわけですね！
HTMLって名前からして複雑そう…
と思われがちですが、
実は実に単純。
本当に単純。
どうやって作るのか！
お教えしましょう。
①デスクトップ(パソコンの最初の画面)で右クリックをしてください。
↓
②「新規作成」というところにマウスを合わせます。
↓
③いくつか項目が出てくると思うので、「テキストドキュメント」をクリック。
↑①～③の作業時の画面はこんな感じです！
細部の表示はお客さまのパソコンと異なる場合もございます。
↓
④デスクトップに新しく「新しいテキストドキュメント」が出現したと思います。
↓
⑤ダブルクリックします。
↓
⑥「新しいテキストドキュメント」というウィンドウが開くと思いますので、
そのウインドウに何でも構いません、文章を打ち込んでみてください。
↓
⑦ウィンドウ上部の「ファイル」→「名前を付けて保存」をクリックしてください。
↓
⑧「ファイル名」というところに、「sample.html」と入力して、
「保存」をクリックしてください。
↓
⑨デスクトップにあたらしく、「sample」というファイルが出現したと思います！
これでHTMLファイルの完成です。
どうでしょう、細かく説明したので長くなってしまいましたが、
作業自体は簡単だったのではないでしょうか？
さっそく、HTMLファイルを開いてみましょう。
デスクトップの「sample」をクリックしてください！
Internet Explorerが開いて、先ほど入力した文章が表示されるはずです。
されましたか？
これがホームページの第一歩です！！
●ホームページ作りの第２歩！～タグとは！～
HTMLファイルは出来てしまいましたが、
もちろん今のままでは、ただ文章が表示されるだけのページです。
これはホームページとは…
言いにくいですね。
複雑なホームページをつくろうとすると、どんどん複雑な話になってしまいますが、
とりあえずここでは、文章ともう一つ。
「画像」を表示してみましょう！
上の続きとして書かせて頂きますね。
”「sample.html」あるいは「sample」というHTMLファイルが
デスクトップにある”
というところから始めます！
①表示させたい画像を用意！
写真やイラストなど、ホームページに表示させたい画像を用意します。
↓
②画像を右クリックして、「コピー」をクリックします。
↓
③デスクトップを右クリックして、「貼付け」をクリックします。
すると、デスクトップに今の画像ファイルが現れるはずです。
このように、
先程の「HTMLファイル」と、今の「画像ファイル」が並んでいる状態が大事です！
↓
④「sample」あるいは「sample.html」を右クリックします。
『プログラムから開く』→「メモ帳」をクリックします。
↓
⑤「sample.html」というウィンドウが開きます。
先程、HTMLファイルを作るときに、書いた文章が残っているはずです。
ここに表示されているものが、
「HTMLファイルの中身」ということになります。
ここに書いた文章については、書いたまま表示されますが、
決まった文法で言葉を書くと、
HTMLファイルに対していろいろな指示を出すことができます。
『映像を表示して』
『画像を表示して』
『ここで文字のサイズを変えて』
などなど、この「指示」をいろいろ書くことによって、
ホームページのような多彩な表示が可能になります。
では、「画像を表示して！」
と、HTMLファイルさんにお願いしてみましょう。
↓
⑥HTMLファイルの中に、画像を表示して！という指示を書く。
いきなりでびっくりするかもしれませんが、
画像を表示して！という指示はこちら。
<img src = "画像ファイルの名前.jpg">
このように書いてください。
↓
⑦「ファイル」→「上書き保存」をクリック。
↓
⑧デスクトップに戻って、「sample」あるいは「sample.html」をクリック！
どうですか？
うまくいけば、先ほどと同じようにInternet Explorerが起動し、
文章と画像が表示されるはずです！
もしうまくいかなかった場合は、
・画像ファイルがちゃんとHTMLファイルと同じところにあるか
・画像ファイルの名前は間違っていないか。
・img src = " "というところ、書き間違っていないか
などを確認してみてください。
このように、
ホームページ作りは
「HTMLファイルの中に、文章と、HTMLへの指示を書く」
という形で進んでいきます。
この「HTMLへの指示」のことを、「タグ」と呼びます。
ホームページを作るためにはこの「タグ」を大量に使いこなさなければなりません。
とは言っても、僕も全部覚えているわけではもちろんなく。
その都度、本やHTML解説のホームページなどを見て、探り探り作っていくものです。
根気よくここまでお付き合いいただけた方なら、
必ず良いホームページを作ることができます。
ぜひこの機会に、「HTML」の本や、解説ホームページなどを見て、
ちょっとずつHTMLを学んでいってみてください。
私がお世話になっているHTMLの解説ページを紹介させて頂きますね。
本など買われる前に、無料のホームページで学んでみるのが良いかと思います。
「HTML手打ちで作るホームページ講座」
http://homepage2.nifty.com/tomoarai/
より深く、細かく知りたい方はこちらまで。
メールでのお問い合わせは無料で行っています。
京都・大阪・滋賀・奈良を中心に、近畿圏内には出張致します。
只今オープン記念、業界最安級の未熟価格にてサービス提供中！
