はじめに
「HTML」は、ウェブページを作成するために開発された言語です。
現在、インターネット上で公開されているウェブページのほとんどはHTML で作成されています。
「HTML」とは、「Hyper Text Markup Language (ハイパーテキスト・マークアップ・ランゲージ)」の略の事で、情報同士を結びつけて、 情報を整理するという特徴があります。
Step1 : タグの意味を知ろう
さっそくHTMLを書いてみましょう。
例題を記述し、ブラウザでどのように表示されるのかを必ず確認するようにして下さい。
HTMLには基本となる形が存在しているので、それを雛形として覚えてしまいましょう。
準備
以下のようなフォルダ構造を、 デスクトップに作成してください。
手順
1. デスクトップに STUDY フォルダを作成してください。
2.STUDY フォルダの中に css フォルダを作成してください。
3. VSCode を起動して、 index.html と index.css を作成し、 画像のように配置。
準備が整ったら課題を進めて行きましょう!
例題
index.html を開いて、下記のコードを記述しましょう。
それでは順番にこれらのコードの意味を見ていきましょう。
DOCTYPE
これは「Document Type宣言」「DOCTYPE宣言」と呼ばれ、ブラウザに「どのようなドキュメント (文書) であるかを知らせる」 役割があります。
ここでは 「このドキュメントは 【HTML】 である」事を示しているのです。
htmlタグ
このように<> で囲まれたものをタグと呼びます。
この場合は<> で囲まれているのが html であるため、 html タグと呼ばれます。
後ろの</>は閉じタグと呼ばれ、多くのタグは、このようにタグと閉じタグで囲みます。
HTMLの文書は、 「DOCTYPE」 を除き全ての要素がこの <html>….</html> の中に配置されます。
「htmlタグ」に囲まれている要素が 「HTML文書である」 事を示しています。
また、先頭のhtmlタグにはlang="ja"という表記が併記されていますね。
こちらは日本語のページであるというのを示しています。
「lang」とはすなわち Language(言語)であり「ja」とは Japanese (日本語) という意味です。
これで、 日本語のHTMLであるというのが示されました。
headタグ
headタグの行頭が一段下がっているのは分かるでしょうか?
このようにインデント(字下げ)する事で、「『headタグ』は 『htmlタグ』 の中に配置されている」というのをわかりやすく表記しています。
そして「headタグ」の中には文書のタイトル等のヘッダ情報を記述します。
html文書のヘッダにはその文書の作者情報、 サーチエンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート等、その文書に関する情報を記載します。
metaタグ
「metaタグ」は上記のように 「閉じタグ」 がないタグです。
そしてこのmetaタグには、charset="UTF-8"と書かれていますね。
charset とは文字セットという意味です。 そして UTF-8 とは文字コードです。
つまりは、文字コードをUTF-8にセットする (指定する)といった意味になります。
文字コード
文字コードとは、コンピューター上で文字を扱うために個々の文字、記号に割り振られた固有の番号の事を指します。
コンピューターはデータを数値でしか扱うことが出来ません。 文字列も数値で扱う必要があります。
文字を表示させるためには文字コードが必要になるのです。
そんな文字コードの中でも 「UTF-8」は世界的に最もポピュラーな文字コードとなっています。
titleタグ
次に titleタグです。 このタグは 「閉じタグ」 が存在しています。
この 「titleタグ」の役割はその名前の通り、文章のタイトルを指定するものです。
所謂、サイトの名前になります。
ブラウザのツールバーに表示されるサイト名は、この 「titleタグ」 で指定されたものが表示されます。
上記の例だと「Title」 がツールバーに表示されているはずです。
好きな文字列に変えて、ツールバーに反映されるかを確かめてみてください。
このように 「head タグ」 内で指定された情報は 「titleタグ」 を除き、ブラウザ上には表示されません。
しかし、これらはちゃんと役割を持ち、 機能を果たしています。
bodyタグ
それでは、次に「bodyタグ」を見ていきましょう。
「bodyタグ」と「headタグ」 は同じ階層 (インデントの数が同じ)です。
「bodyタグ」は、文書の本体を表すものです。
実際に「ブラウザに表示される文書の本体」 を記述します。
HTMLのマークアップは、主にこの 「bodyタグ」 内の情報を記述していく事になります。
ｐタグ
このタグの細かい説明は後ほど改めてしますが、先述の通り、
「bodyタグ」内に記述されているので、この「Hello World!」という文章がブラウザに表示されているかと思います。
Hello World!
上記の画像のように、表示されていれば大丈夫です!
この「pタグ」を始めとしたタグの組み合わせで、 HTMLの文章は構成されています。
いきなりは難しいかもしれませんが、 少しずつこれらの 「タグ」 とその 「役割」を覚えて行きましょう。