読者です 読者をやめる 読者になる 読者になる

ひとことブログ

短文ブログです。自分のtwitterからの転載もあります。気分で長文になるかもしれません。

HTMLとは (1) まずはタグのお話から

こんばんは。

今日はスカガレの投票チケットダンジョンの結果はお休みです。

最近10周分ずつ載せていたのがなかなか良いペースだったので、また10周分溜まってから書こうと思います。ちなみに今6周くらいなので、明日には載せられますねきっと。

 

そんなわけで今日は、前から書いてみようと思ってた、HTMLのお話です。

 

HTMLってご存知ですか?

ブラウザにWEBページを表示”させる”ための言語ですね。

このはてなブログにもHTMLが使われています。

 

さて、ブラウザにWEBページを表示"させる"と書きました。

実は、HTMLって料理のレシピみたいなものなのです。

(実際にはHTMLだけじゃなくて、他にもいろんな技術が使われています。でもやっぱりHTMLが基本)

 

ブラウザは、HTMLの中身を読んで、HTMLで指定されている通りにWEBページを組み立てます。それが私たちが見るWEBページになるんですね。

 

<html>

<p>例えばこれが文章です</p>

</html>

 

上のはものすごく単純化したHTMLファイル。

<html></html>とか、<p></p>とかのことを「タグ」って呼びます。

HTMLはタグで囲った部分の性質(?)を示します。

<html>と</html>で囲われてる部分は『この中はHTMLファイルの中身です』っていう意味で、

<p>と</p>で囲われてる部分は『この中は一続きの文章です』っていう意味です。

これを見て、ブラウザがルール通りにWEBページを組み立ててくれます。

 

それぞれ左を開始タグ(<html>や<p>)、右のスラッシュがついてる方を終了タグ(</html>や</p>)って呼びます。

ちょうど、「」(かっこ)みたいなものです。開始タグと終了タグでセットです。

上の例で言うと、

 

『例えばこれが文章です』

 

っていうイメージですね。

「」や『』だとタダの区切りにしかなりませんが、タグだとhtmlとかpとかの『意味』を表すことができます。

ちなみに、今みたいに強調したい時は<strong>意味</strong>とか書きます。

 

<html>

<p>例えば<strong>こういう感じ</strong>です</p>

</html>

 

試しに、上の三行をメモ帳に貼り付けて『名前を付けて保存』→ファイル名を『test.html』にしてデスクトップに保存してみてください。

そしてそれをブラウザで開くと、『こういう感じ』が強調して表示されているのがわかるかと思います。

 

構造としては、

『例えば(こういう感じ)です』

って感じですね。

 

タグはかなり種類があります。

でも、めぼしいものだけ覚えておけばHTMLは書けます。

 

巷に溢れているWEBページのような見た目にするには、HTMLに加えて”CSS”という技術が最低限必要になります。CSSはWEBページの見た目を制御する言語です。

また、時にはJavaScriptで動きをつけるようなことも必要になるでしょう。JavaScriptはWEBブラウザの中で動くプログラミング言語です。

 

でも、HTMLがそれらの骨組みを作ります。HTMLが無ければCSSとか全く意味を為しません。JavaScriptも最低限HTMLがわからなければ使えません。

 

わかってくるとHTMLは面白いです。

仕組みは案外単純ですが、奥はどこまでも深いです。

皆さんもぜひ一度書いてみてください^^