【HTML&CSS講座】ホームページの仕組みを知ろう!

ホームページは誰にでも見られるものです。
そして、誰にでも作れるものです。

「嘘ばっかりついて・・・」
なんて思っていますか?


そんなことありませんよ!
ちょっとコツをつかめば、誰にでも
簡単に作ることができるのです!

「そんなのわかるようになってもな・・・」


そんなこと言わずにちょっとだけでも
べんきょうしておきましょう!

まずは基本中の基本、
ホームページについてのお話です。


インターネットを使っているのに
ホームページやウェブサイトの仕組みを
知らないなんて危険すぎます。

基礎知識すら知らないと、
ネットでの詐欺に騙されたり、

知らず知らずのうちに
フィッシングサイトを開いたり、

ウイルスにかかってしまい、
犯罪の片棒を担いでしまうかもしれません。

そんなことにならないように
きちんとした知識を入れておきましょう。

今回の記事を最後まで読んでいただければ、
インターネットについての基礎知識が身に付き、

ホームページについても知ることができ、

ウェブページのつながりもわかります。

知っていると知っていないとでは
雲泥の差です。

むしろ知らずに使っているなんて、
戦場に素っ裸で突撃するくらい
危険な行為です!

それでは、さっそく説明していきますね。

そもそもホームページって何?

まず最初に、名前は知っている
「ホームページ」について説明します。

ホームページとは、
「サーバー」と呼ばれるコンピュータに
保存されているデータのことです。

サーバーは世界中にあり、
インターネットに接続されています。

ホームページを見るときは
パソコンをインターネットにつなげて、
ホームページ閲覧用ソフトウェアである
「webブラウザー」を使います。

見たいホームページのURL
(ホームページの住所、アドレス)
を入力すれば、誰でも好きな
ホームページを見ることができます。

誰でも作成して公開できる!

ホームページは見るだけでなく、
自分で作ることもできます!

サーバーに自分のホームページを
保存することで、インターネットに
つながっているすべての人に情報を
公開することができます!


WindowsやMacなどのパソコンの種類や
OSの種類など関係ありません!

ホームページはリンクでつながっている!

ホームページの特徴は、
ネット上に情報を公開できるだけでは
ありません!

「リンク」という仕組みで、
自分のホームページを
ほかのホームページにつなげることが
できるのも大きな特徴です。

互いにつながりあったホームページは全体で
「WWW」(ワールドワイドウェブ)
と呼ばれます。

リンクを設定すれば、自分のホームページを
WWWに参加させることができます。

ホームページを見た人はリンクをたどって、
WWWに参加している様々な人のホームページを
見に行けるようになります。

いろいろな人に情報発信!

ホームページを作って情報を公開すると、
その情報はインターネットを通して
いろいろな人に伝わります。

見る側も、リンクを通してより
深い情報を得ることができます。

ホームページの最大の特徴は
「誰でも見られる」
「ほかのページとつながる」
ことができることです。

その特徴を活かして、
わかりやすいホームページを
つくっていきましょう。

うまく使いこなせれば、
自分の持っている知識や
オリジナルの作品を伝える
最高のツールとなります。

ホームページ作成の方法

ホームページは「HTML」(えいちてぃーえむえる)
というファイルで作られています。

ホームページを見るときには、
Webブラウザがインターネットを通して
サーバー上に保存されたHTMLファイルを読み取り、
ホームページとして表示をします。

HTMLファイルを作り、それをサーバーに保存
(アップロード)するというのがホームページ作成の
方法となります。

ホームページ作成に必要なもの

ホームページを作るには
最低でも次の3つが必要になります。

・HTMLを記述するソフトウェア
・公開するためのサーバー
・サーバーに保存するためのソフトウェア

HTMLを記述するソフトウェア

まずは何よりもHTMLを記述するための
ソフトウェアです。

HTMLの中身はテキストで作られているので、
Windowsの方はメモ帳でも作れます。

ただ、どこにどんなコードを記述したのかが
わかりにくいため、フリーソフトを
利用するといいです。

僕はフリーソフトの「TeraPad」を
利用しています。

コードを記述するのにわかりやすいシステムに
なっているので、とても便利ですよ。

公開するためのサーバー

次にサーバーです。

これは作成したHTMLファイルを公開するために
みんなが見れるようにするための場所です。

現実の世界でいえば「公園」だと思ってもらえると
わかりやすいでしょうか。

サーバーはプロバイダに申し込んで使えるようにしたり、
レンタルサーバーがインターネット上にあるので
そこで借りるとよいです。

サーバーに保存するためのソフトウェア

最後にサーバーにアップロードをするための
ソフトウェアです。

サーバーにデータを保存するといっても、
普通のパソコンのように
コピー&ペーストで簡単に、
というわけにはいきません。

パソコンとサーバー間の通信をするためには
「FTPソフト」が必要になってきます。

ホームページは誰でも作れる!

みなさんがいつも見ているホームページは

「HTMLファイルの作成」
     ↓
「サーバーに保存」

という手順で作られています。

ホームページ作成には準備も必要ですが、
難しいことはありません。

僕のブログで分かりやすく説明していくので
参考にしてくださいね!

ホームページ作成の基本

さて、さっそくですがトライしてみましょう。

難しいことは何もありません。

最初なので、ごくごく簡単に説明していきますね。

ホームページの部品「タグ」

Webブラウザで表示したホームページは
「見出し」や「段落」「画像」などの
部品で作られています。

こうした部品は「タグ」と呼ばれるもので
作られっています。

ちょっと記述してみますね。

〈p〉サンタのサンサンブログ〈/p〉

はい、こんな感じです。

半角の「〈〉」の記号の中に
部品を示す英数字を入れてあげれば
完成です。

ある言葉を〈h1〉〈/h1〉で囲めば
「見出し」という部品になり、
〈p〉〈/p〉で囲めば
「段落」という部品になります。

HTMLでホームページを作成するには、
タグを使って部品を作り、
その部品の組み合わせでホームページの
中身を構成していきます。

タグの基本的な入力方法

タグは、ホームページに表示したい内容を、
〈○○〉という「開始タグ」と
〈/○○〉という「終了タグ」で
囲んで入力していきます。

開始タグと終了タグの中の記号は
一致していなければいけません。

また、次のようにタグの内容に
別のタグを入れることもできます。

〈p〉サンタの〈em〉サンサンブログ〈/em〉〈/p〉

タグの中にタグを入れることで、
複雑な働きをする部品も作れます。

ホームページはタグの組み合わせでできている。

HTMLファイルはタグの組み合わせで
作られています。

このタグの組み合わせ方によって
表示するホームページの内容が
大きく変わってきます。

タグの役割や組み合わせ方を覚えれば
ホームページを自由自在に
作れるようになります。

無料でできるホームページの練習

ホームページを作る際には
市販の作成用ソフトウェアでも
作ることはできます。

しかし、いきなり製品を買って
HTMLもわからずに進めても
自分の思い通りにいかない場合が
あります。

どのようなソフトウェアでも
使い方を覚えるのに時間がかかる上に
タグの知識は必要になってきます。

最初からフリーソフトやメモ帳などで
作成したほうがお金がかからず、
効率よく勉強することができます。

間違いを探すのにも役立つ

ホームページ作成用のソフトウェア
ばかりに頼っていると、
トラブルが起きた時に間違っている場所を
発見しにくくなります。

画像がうまく表示されなかったり、
自分の思い通りにいかなかったりした場合、
タグを覚えてテキストエディタを使えば
すぐに修正箇所がわかり、直せるようになります。

将来のためにも役立つ

テキストエディタを使って
タグの文法を覚えていれば、
ホームページに関連するような
テクニックも覚えやすくなります。

ホームページ作成ソフトウェアに
依存してしまうと、それでしか
作れなくなってしまいます。

応用を利かせるためにも、
覚えておいたほうがお得です。

まとめ

ホームページは、インターネットが使えれば
誰でも作成することができます。

インターネットから無料でダウンロードできる
ソフトウェアだけでも十分です。

インターネットは誰でも見れるし
誰でも作ることができます。

見やすいレイアウトやためになる知識を
共有するためにも一度試してみては
いかがでしょうか。

新たな道が開けるかもしれませんよ!

終わりに

最後までお付き合いいただき
ありがとうございました。

もし、
・何をしたらいいかわからない
・調べてもどれが正しいかわからない

なんて悩みがあるなら
私に相談してみてください。


実践向けのアウトプットの方法や
ブログ・ビジネスの始め方など
いくらでも相談に乗ります。

興味があればぜひどうぞ。

 ↓  ↓  ↓

友だち追加

ブログやSNSの運用方法など
気軽に相談ください。
LINE@登録後トークに
返信ください!!

こちらから個人情報は
一切わかりませんので、
安心して登録してください。

コメント

  1. […] […]

タイトルとURLをコピーしました