HTMLの習得1

TOPページ >> HTML①

HTMLの習得①



「ネットワークに関する基礎知識１～３」では、Webページを閲覧する仕組みや

ファイルの構造について説明してきましたがこれからはそのWebページを作る段階に入っていきます。





■HTMLとは   



HTMLとは「Hyper Text Markup Language」の頭文字をとったものです。



ハイパーテキスト（HyperText）：   

ページの一部に、別のページの位置情報を埋め込む（ハイパーリンク）ことで、複数の情報を相互に連結することができる仕組みのことです。要するにクリックすると他のページにジャンプしたりする仕組みのことです。



HTMLという「プログラミング言語で書かれたデータ（ソースコードまたはソースプログラムといいます）」を、ブラウザ（Webページを閲覧するためのソフト）を介して見ることにより、普段見ているようなWebページを見ることができます。



■HTMLを書いてみる  



習うより慣れろということで、実際にHTMLでWebページを作成しながら説明していきます。



１．まず最初に、デスクトップにWebページ用のディレクトリを作成  

デスクトップ画面の、何も無いところで「右クリック→新規作成→フォルダ」で作ります。






フォルダの名前は「homepage」と付けておきます。「フォルダを右クリック → 名前の変更」で変更できます。






２．画像用フォルダの作成  

「homepage」フォルダを開き、その中に「image」という名前のフォルダを作ります。画像は全部このフォルダに入れて、整理しやすいようにします。






３．HTMLのソースプログラムを作成


「homepage」フォルダ内に「右クリック→新規作成→テキストドキュメント」で、新しいファイルを作成します。



その新しく作成したテキストファイルに、以下のソースコードを書き込んでください。

（日本語の部分以外は全部、半角で打ち込んでください。改行や、スペースは反映されないので見やすいように適度に改行やスペースを使ってください。）





<html>

 <head>

 <title>タイトル</title>
	
 </head>

 <body>ようこそ</body>

</html>




書き込んだら、内容を保存して一度ファイルを閉じます。

次に、ファイル名を「index.html」に変更します。



※拡張子も「.txt」から「.html」に変えます。

「拡張子を変えるとファイルが使えなくなる可能性があります。」というようなメッセージが出ますが、OKです。



●ＨＴＭＬタグ   



HTMLは、「タグ」というもので構成されており、決められた要素名を<>で囲んだものです。



タグには開始タグと、「/」を付けた終了タグがあります。



上のようなソースプログラムの場合、<html>や<body>などが開始タグ。</html>や<body>などが終了タグです。



<html>と </html>で囲まれた部分が、htmlという要素の影響を受けます。

（html要素は、これがHTMLであることを宣言する意味を持っています。）






●HTMLタグの種類




<html>～</html>：HTMLで書かれたファイルであることの宣言。



<head>～</head>：Webページ全体に関する情報を書き込むヘッダ。



<title>～</title>：ページのタイトルを指定します。headタグの中に埋め込みます。



<body>～</body>：このタグで囲まれた部分が、実際にブラウザに表示されます。






４．完成   

はい 完成です。「index.html」ファイルをダブルクリックして開いてみましょう。

うまくいっていればこのように表示されるはずです。


上のタイトルバーの部分にtitleタグで囲んだ「タイトル」の文字があり、
Webページ本体の部分にはbodyタグで囲まれた「ようこそ」の文字があります。

実際に表示してみて、先ほどのソースコードの意味が大体理解できたかと思います。




もしうまく表示されなかったとしたら、ソースコードの打ち間違えか、半角で書いていないか、拡張子が間違っているかだと思います。



ネットワークに関する基礎知識 １でWebページを見る仕組みについて説明しましたが、
サーバーから受け取っているデータは、「ソースコード」と「画像ファイル」などのデータです。

HTMLのソースプログラムは、ブラウザを介することで、普段見ているWebサイトのように表示されます。






とりあえずこれでHTMLは完成です。・・・しかし、これだけだと寂しいので、文字や背景に色を付けたり、画像を貼り付けたりハイパーリンクを埋め込んだりするタグを用いて、Webページを飾り立てていきます。




次へ >>