Web入門 ~ HTML 編 ~
こんにちは、本間です。selfree ブログでは、これまで以下のようなWeb技術における必要最低限の技術やツールについてご紹介してきました。
これからはより具体的・実践的に、各技術についてできる限りご紹介してまいります。
本日のテーマはHTML。Webサイトを公開する上で最も基本となる”文書”です。今回はまだプログラミングではありません。HTMLは Word や Excel のように、何か情報を書く上でのフォーマットというようなイメージです。
全てのWebサイトはHTMLで表現されています。試しに、お好きなページに行き、chromeであればそのページの何もない領域を右クリック -> ページのソースを表示 を選択してみてください。そのWebサイトのHTMLを見ることができます。
サンプルのダウンロード
それでは早速、サンプルを見てみましょう！
上のリンクを右クリック -> リンク先を別名で保存 でHTMLファイルを保存します。そのファイルをまずはダブルクリックしてください。ブラウザが勝手に立ち上がり、文書が表示されたはずです。
今度は対象のファイルを右クリック -> このアプリケーションで開く でメモ帳などを選択して開いてみてください。
ここで先ほどのHTMLのソースを編集できます。試しに文字などを変えてから、ブラウザーを更新してみてください。色々と内容を修正できることがわかったかと思います。
今回のサンプルさえ理解すれば、とりあえずHTMLに関してはクリアだと思いますので、これだけは覚えておきましょう。では各項目を解説します。
タグについて
HTMLは”タグ”で構成されます。<html></html>が全てを囲います。
imgタグのように、中身がない場合は <img /> のように<img></img>を省略することもできます。
html, head, body要素
全てのhtml文書は、 要素で囲まれます。一番外枠に<html></html>, その中に <head></head>, <body></body> といった具合にです。
<head>の中にはこのサイトの情報を記述します。Googleの検索ボットや、ブラウザーなどに知ってほしい情報を書きます。ブラウザ上に表示される内容以外、といってもいいかもしれません。
<body>の中に実際にブラウザ上で表示される内容を記述します。
meta要素
これは最初はおまじないだと思ってください。細かな意味はまだ気にしなくて大丈夫です。meta要素はブラウザに”この文書はこういう形式だよ”と教えてあげるのがメインの役割となります。
h1, h2 タグ
これは見出しです。h3, h4 のようにサブタイトルをどんどん細かく指定することもできます。ほとんどのWebサイトではh1タグはサイト上に一つ、h2でサブ見出し、のような形式になります。
p タグ
html内に直接改行してもブラウザ上では改行してくれないのでご注意ください！ pタグでくくられると、改行も行ってくれます。そのため文章を書くときにはpタグを必ず利用してください。
a, img タグ
リンクや画像を作ります。その表示先を href や src で指定します。頻繁に使います。
span, divタグ
これはデザインやJavaScriptを実行する上で重要になります。基本的な文書としてはあまり役には立ちません。
spanはインライン要素として文書を囲みます。これはその囲まれた中だけの範囲、というイメージです。
divはブロック要素として囲みます。これはできる限り横幅一杯というイメージです。
イメージとしてこんな感じというのを覚えておいてください。
ul, ol, table
リストや表形式で文書を表現します。書き方を覚えるだけです。
終わりに
今回はHTMLの基礎の基礎を解説しました。まだ他にもHTMLの要素はありますが、必要最低限知っておかなければならないところだけを挙げています。
それ以外は調べる中で新しく出会った際にその意味を理解していけば良いのではないかと思います。
次回は 文書を整形するCSSについて解説します。