予備知識ゼロから始めよう! HTML


《HTMLとは・・・炒め物、煮物。ん? ん?? 何の事?》


★head (頭)と body(体)の関係 ★


かの天才彫刻家、ミケランジェロは、代表作『ダビデ象』を足から彫ったと言われていますが……、
我々凡人は
やっぱり頭、そして体の順番ですよね。

HTMLとは・・・(HYPER TEXT MAKEUP LANGUAGE)の略です。ネット上に文章画像を表示するために開発された言語です。しかし、どの言語もそうですが、いきなり取っかかるのはハードルが高い。それぞれ最低限の決まり、ルールがありますからね。それを今から、ザックリと説明してみます。

 HTMLはまず、

<!DOCTYPE html>

と宣言します。

日本語訳……「初めまして!私はHTMLです!」

この『山括弧』に挟まれた文字列をまず初めに書きます。

これは絶対。なぜならばこれは旧約聖書で言うところの

『光あれ!』

のようなモノですから。

ここからすべてが始まった!

イメージしてください。 


そして 

<html>『魂』、

<head>『頭』、

<body>『身体』,

の順で宣言していき

だんだんその正体を明らかにしていきます。

《絶対ルールその1》

タグはすべてこの山括弧 <>で囲みます。そうしないと表示されません。タグを終了する時には、同じ名前のタグの前にスラッシュを入れて</>で挟みます。その際必ず『英語』で。日本語だと無視されます。

じゃあ、とりあえず書いてみましょう。


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


これがHTMLの正体です。

ここでは『初めまして!HTMLでこざいます。』という文字を表示するのに、必要最低限のタグを表示してみました。

<html>タグ『魂』に例えました。頭の先からつま先まで魂は満ちている!というイメージで、閉じタグ</html>は、文章の一番最後に付けて、全体を括ります。

あとは<head>タグと、<body>タグ、ん?

<p>タグというのがあります。これは段落を入れるタグです。このタグで括ると、その括った部分が段落として表示されます。


確かに、これだけでも表示はされますが……、

おや?

よく見ると、<head>タグの中に何もありません。頭が空っぽ……。なんかちょっとカッコ悪い。頭が悪いみたい。

 本当はもっといろいろ<head>タグの中に入れる事が望ましいのです。

例えば、



●headタグの中にtitleタグを入れて サイトのタイトル名を入れたり,

<head>
<title>HTMLのページ</title>
</head

このサイトのタイトルは『HTMLのページ』です。


●同じくheadタグの中に、文字化けを防ぐためのコードを<meta>タグで入れて宣言したり、

<head>

<meta charset=”UTF-8″>

</head>

このテキストはUTF-8属性で記述してます。

<HTML>タグの中に、使用する言語の種類を宣言する lang=”ja”を入れたり、

<html lang=”ja”>・・・このHTMLの言語(lang)は、日本語(ja)です。

などの要素があります。

上のタグを入れるとHTMLはこう進化します。


<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


おお!<head>タグの中の情報が増えて、より知的な生物の姿が浮かび上がってきました。

飽くまで、イメージですけど……。


タグの種類そりゃあもう数限りなくありますから、その種類と働きについては

TAG-index

さんの方でわかりやすく、端的に、且つ詳しく紹介されていましたので是非ご参照ください。


 じゃあ試しに まず、この上のHTML文章ソフトに書き写してみます。


『メモ帳』に記入。

ファイルの拡張子を『html』に変更します。

拡張子をhtmlに変更。

そしてこのファイルをブラウザで読み込んでみましょう!

↓↓↓

HTMLファイルをブラウザソフトで読み込む方法


ブラウザソフトの画面。

はい出来た!!

ちゃんと表示されました。されましたが……。


So what!?

(だから何だというんだい?)

そうなんです。HTMLとは文字や画像を表示するための形式、道具

の事であって、

情報(料理)を乗せるプラットホーム(お皿)でしかありません。

実際のサイトの内容の良し悪しは、

情報そのものである事はいうまでもありません!

切って、煮て、焼いて、盛り付けて……、

so what??

ではなく


何を、どう面白く、見易く、興味深く見せるか。魅せるか。

これを料理に例えると……、


厨房(HTML)、食材(情報)、そして料理人(運営者)。この三つが揃ってはじめて料理(サイト)が出来る。味付けはセンス。料理人の感性、フィーリングに任される。調味料(CSSなど)をうまく使って、美味しい料理(有用なサイト)を完成させよう!!

例えられるかもしれません。


CSSとは?

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です