ハイパー・テキスト・マークアップ・ランゲージ
HyperText Markup Languageの頭文字を取って『エイチ・ティー・エム・エル』と呼ばれています。
数多くある『マークアップ言語』と言われている中で、もっともポピュラーなものです。
あれれ?
こんどは『マークアップ言語ってなに?』って事になってしまいますよね?
ほんとうに簡単に言ってしまえば、
まだ人間が理解できる形を保っている状態だと思っていただいて良いと思います。
ほぼ『人間語』のままコンピューターに渡しています。
また、ほとんどのコンテンツ(言い換えればwebページ)は、この『マークアップ言語』で表示されていて、
その画面を綺麗に整えて装飾する言語の『CSS』によって文字の大きさ、右画面と左画面の分割、写真の配置、色合いなどをコントロールしています。
この2つの言語がページの表の顔であるならば、その裏で動くのがプログラムで、
裏回し的な存在として様々なプログラムが絶え間なく働き、
『スクロールされたか?』『ボタンは押されたか?』『入力してもらった内容は間違いが無いか?』と、ユーザーの動きにあわせて、正しいものを提供し続けているわけですね。
『CSS』についてはこちら。
もっと知りたい『プログラミング』についてはこちら。
タグによって分類分けをする
まず、『タグ』という言葉が出てきました。
『タグ』という呼ばれ方はずっと出てきますので、いずれ慣れるでしょう。
例えば
<h1></h1>
このようなものがタグと言われるもので、その使い方は
<h1>ここに題名を書く</h1>
のようにして<h1>と</h1>の間に『ここに題名を書く』みたいな文字を挟み込んで完成です。
このようなタグは100種類以上あるのですが、全部覚えている人なんていません(笑)。
いつも使うものを数10種類使いながら、あとは調べながら書いているのが現状でしょう。
代表的なタグ
頻繁に使われる使用頻度の高いタグの紹介
タグ名 | 表記 | どんな感じになるの? |
---|---|---|
Doctype宣言 | <!doctype html> | HTMLで書きますという宣言。まず、これを書くのが決まりになっています。 |
HTMLタグ | <html></html> | Doctype宣言のすぐ下に書き、ここからHTMLで書いていますという開始のタグです。 |
metaタグ | <meta> | 画面に表示されるわけではないが、ページを正しく表示させるために必要な情報を書く。 |
titleタグ | <title></title> | ページを開いたとき、1番上にあるページのタブに表示されるページの題名を決める。 |
hタグ、 Headingタグ | <h></h> | 題名、副題、表題など見出しとして使う事が役目となっています。 |
pタグ、 Paragraphタグ | <p></p> | 通常の文章は、このpタグで挟まれることが主な役割です。 |
aタグ | <a></a> | リンクを張り付ける事ができる特殊なタグです。リンク先の情報も記入します。 |
コメントアウト | <!–○○○–> | ○○○の部分が表示されなくなる便利機能です。 |
headタグ | <head></head> | ページに表示されないが、このページにとって大切な情報を書いておく場所。 |
bodyタグ | <body></body> | いよいよここからがページの内容を書いていくページに表示される部分になります。 |
footerタグ | <footer></footer> |
Unordered Listタグ | <ul></ul> | 番号なしの箇条書き |
Ordered Listタグ | <ol></ol> | 番号順の箇条書き |
List Itemタグ | <li></li> | 箇条書きする内容 |
Tableタグ | <table></table> | 『表を作成』を指示、 <tr>や<th>、<td>を入れ子構造にして完成させる。 |
Table Rowタグ | <tr></tr> | <tr>の中で1行を完結、次の<tr>で2行目完結と必要な縦の項目の数だけ<tr>を作る。 |
Table Headerタグ | <th></th> | 表の1番上に見出し?項目?を必要な数だけ用意して、文字を書くためのタグ。 |
Table Dataタグ | <td></td> |
.htmlの意味が分かったかな?
パソコンの膨大なファイルの中に『~.html』というファイルがあったら、その中身は『HTML』で書かれていますよという事です。
コメント