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は面白いです。
仕組みは案外単純ですが、奥はどこまでも深いです。
皆さんもぜひ一度書いてみてください^^