【基本】HTMLとは【サクッと理解】

 

 

みなさん既に何となく分かっていると思うのですが、

最初なので、一応。

HTMLとは一体何者なのか、簡単に説明します。

分かっている人も、そうでない人も、

ここはさらっと読み流していただいて結構でございます。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、
私たちが、普段見ているようなWebページを構成している言語のことです。

タグとは

HTMLを書く上でで欠かせないのがタグ。
タグとは < > の記号で囲まれた半角の英数字のことで、
これを使ってHTML文章(HTMLソース)を書いていきます。
文字の大きさや、色などを指定することが出来ます。

タグの基本構成

タグは< >で囲まれた開始タグと、</ >で囲まれた終了タグ合わせて1セットです。
こんな感じ。

<開始タグ> ここに内容が入ります </終了タグ>

 

最低限必要な基本の4つのタグ

Webページを作る際、この4つのタグがあれば

とりあえずWebページができます。

 

・htmlタグ

<html> ここに内容を書きます </html>

HTMLを使って書いている文章であることをと宣言するタグです。

・headタグ

<head> ここに内容を書きます </head>

<html>~</html>間に書くタグです。
ここに基本的なページの情報を書きます。
次に説明するtitleタグなどはここへ記述します。

・titleタグ

<title> ここにタイトルを書きます </title>

ページのタイトルを指定するタグです。
<head>~</head>間に記述します。

・bodyタグ

<body> ここに内容を書きます </body>

実際にブラウザに表示させる内容をここへ記述。
<html>~</html>間の、<head>~</head>の後に書きます。

さっそく書いてみよう

これらのタグを使って実際にHTMLを書いてみましょう。

テキストエディタはとりあえずメモ張で良いでしょう。

メモ帳を開き、さっそく書いてみましょう!

これら4つのタグは、以下のように書きます。

<html>

<head>
<title>このページのタイトル</title>
</head>

<body>
ここに内容を書きます
</body>

</html>

これだけでページは出来ます。

ちなみに、HTML文書で、スペース、改行を入れても

実際にブラウザで開くときは、表示されないので

見やすくなるように好きなだけスペースや改行を

入れることができます。

ブラウザに表示させてみよう!

では、このメモ帳を

≫[名前を付けて保存]

≫ファイル名を付ける

 ※使えるのは半角英数字、- 、_ 、. のみ※

≫ファイルの種類を[すべてのファイル(*.*)]に変更


≫[保存]

の手順で、デスクトップにでも保存してみましょう。

それをダブルクリックで開いてみてください。

※自動的にブラウザで開かれない場合は、手動で
[開く]≫IEやChromeを選択し、開いてみてください。

実際にブラウザで表示してみると、

真っ白なページに「ここに内容を書きます」

という一文だけ書かれたページになるはずです。

ブラウザのタブのところは「このページのタイトル」

と表示されているはずです。

これでWebページの土台は完成です!

まとめ

覚えておきたい基本は、

<html>~</html>の間に、

<head>~</head>、

次いで<body></body>タグが入った形が

HTMLの基本構造ということ。

あとは、さらに<head>~</head>にtitleタグを入れたり、

<body>~</body>に実際に表示させたい内容を書いていくことになります。

※ちなみに、HTMLで大文字小文字は区別されないので
<HTML>と書いても<html>と書いても構いません。お好みで。

なんとなくイメージできたかな?

いや、難しいですよね。

説明が上手く出来ていないので、仕方ありませんね。

ページのソースを見てみよう

それでは、

百聞は一見に如かず。

Webページ上で(このブログの画面上で構いません)、
右クリック≫[ページのソースを表示]をクリック
してみてください。

< >で囲まれた、たくさんの半角英数字が出てきましたね。
これが、Webページを構成しているHTMLソースです。

<head>や<body>タグは見つけられましたか?

<head>~</head>、<body>~</body>には

目がチカチカするほど、たくさんのタグが組み込まれていますね。

これらのタグを色々と組み込むことによって

Webページはどんどん豪華になっていくんですね。

とても複雑な構成をしているのですが、

どんなページも基本は

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

で構成されています。

基本はとっても簡単ですね。

この基本が把握できれば、
HTML文章も怖くありません。

大分、取っ付きやすくなるはずです。

さあ、基本が分かったら

いよいよ、様々なタグを使ってみよう!

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