実際にHTMLファイルを作成していく中で、最低限知っておかなければならない基本的な用語や特徴、使用方法について説明を行っています。Languageの略で、末尾にLanguage(日本語で言語)とあるようにプログラム言語のひとつでWEBページを作成するために利用される言語です。現在見ているこのページもすべてHTMLで記述されています。HTMLプログラム言語というと少し敷居が高いように感じるかもしれませんが、HTMLは非常にシンプルなものなのでどのようなものか理解するためにファイルを作成し下記の一行を記述してみましょう。ファイル名には、index.htmlなど適当な名前をつけても大丈夫ですが、拡張子を”.html”にするのを忘れないでください。Worldを<h1></h1>で囲んでいるだけです。“/”はキーボードの右下にあり、半角ですべて入力してください。エディターのBracketsを使用している場合は、下記のように記述します。Worldが表示されます。Worldを囲んでいるh1がタグと呼ばれ、このタグを構造的に記述(マークアップ)していくことでHTMLを作成していきます。作成したファイルをダブルクリックしても他のアプリケーションが起動して、ブラウザが起動しない場合は、ファイルを直接ブラウザに向かってドラッグ&ドロップしてください。タグの書式についてHTMLでは、開始タグと終了タブで表示させたい内容を取り囲むのが最もシンプルなタグの書式です。World)、終了タグを合わせて要素と呼びます。次にWebページで頻繁にみられるリンクタグは先ほどよりも少し複雑な書式で、開始タグの中に属性を含めることができます。属性は、タグに付加的な情報を加えるために使用します。開始タグから半角スペース(全角はX)を空けて記述する必要があります。属性は必ず、属性値とペアになり、“”(ダブルクォーテーション)で囲む必要があります。上記の例では属性値は1つしか設定していませんが、複数の属性値を設定することが可能です。タグaはリンクタグを表していますが、開始タグ<a>、終了タグ</a>で文字列を取り囲むだけでは、どのサイトにリンクを行うかわかりません。属性のhrefにURL(https://www.google.co.jp)を属性値として設定することで初めてリンク先を指定することができます。これまでの説明では、すべて開始タグと終了タグが必要なタグを説明してきましたが、終了タグが必要ないタグもいくつか存在しています。その中でも最も使用頻度が高いimgタグです。HTMLの基本構造HTMLにはすべての文書のもとになるテンプレートがあります。先ほど作成した新規ファイルには、h1タグのみ記述しましたが、実際は下記のテンプレートを元にHTMLを作成して行きます。DoctypeDoctype宣言と言われ、どのバージョンのHTMLで記述されているのかを宣言する箇所です。html>と記述すれば問題はありません。htmlタグDoctypeを除いて、すべてのタグはこのhtml内に記述する必要があります。htmlタグには、属性値のlangを設定することができ、日本語を表すjaを設定します。jaを設定することでこのHTMLファイルが日本語で書かれていることを宣言しています。htmlタグは、headタグとbodyタグの2つで構成されます。headタグheadタグには、直接ブラウザには表示されないページに関する付属情報を記述します。metaタグでは、HTMLファイルの文字コードの設定を行い、titleタグでは、HTMLファイルの名前を記述していきます。現在は2つのタグのみを記載していきますが、WEBを制作していく中で、headタグに記載する内容は増えていきます。titleタグについては、下記のようにブラウザのタブ部分に表示されます。本番環境では、重要なmeta情報の一つであるdescriptionを記述する必要があります。descriptionには、ページに記載された内容の概要を記述します。</head><body>Googleなどの検索エンジンで、そのページが検索結果として一覧に表示されるときは、記述したtitleとdescriptionが表示されます。bodyタグbodyタグの中にブラウザに表示させる内容を記述します。Worldと表示されます。要素のツリー構造(階層構造)HTMLはHTMLタグを頂点に階層構造をとります。htmlタグの中にheadタグとbodyタグがありますが、headから見るとhtmlタグは階層でいえば上になり、親要素となります。htmlから見るとheadタグは下の階層になるため子要素になります。bodyタグも同様にhtmlタグから見ると子要素になります。どこの視点から見るかによって親子関係が変わるのでこの概念を理解しておくことは非常に大事です。基本タグHTMLには、数百個のタグがあると言われていますが、すべて実際にHTMLのページで使われているわけではありません。ここでは、使われているタグの中でも使用頻度の高いタグのみ説明を行っていきます。見出しタグ文章の見出しを表すときに使用するタグです。h1〜h6まで計6個のタグがあり、h1のhはHeader(ヘッダー)の略です。一度ヘッダータグすべて記述して確認してみましょう。<h1>H1ヘッダー</h1><h2>H2ヘッダー</h2><h3>H3ヘッダー</h3><h4>H4ヘッダー</h4><h5>H5ヘッダー</h5><h6>H6ヘッダー</h6>ブラウザで確認するとh1から順番に文字の太さ、大きさが小さくなっているのがわかると思います。ヘッダーの数字”1〜6′′は、文書におけるヘッダーの重要度を表しており、h1からh6と数字が大きくなるごとに重要度が低くなっていきます。重要度の高いh1タグは1つのHTMLファイルで一つのみ設定できるという決まりがあります。実際にWEBページを作成する際は、h1タグに設定された見出しを見て、文章を読みか読まないか決定する場合が多いので、適切な名前をつける必要があります。段落タグ段落はpタブを用いて作ります。pはparagraph(パラグラフ)の略で、日本語では、段落を意味し、文章を一つにまとめる時に使います。文章を作る際は、<p>記述したい内容をここに書く</p>で囲む必要あります。pタグを閉じた後は、自動で改行を行ってくれます。<p>pはparagraphの意味を持ち、段落を意味します</p><p>pはpタグで閉じると自動で改行を行ってくれます。</p>ブラウザで見ると自動で改行されていることがわかります。改行タグpタグを閉じれば、自動で改行を行ってくれますが、文章の途中で改行を行いたい時は、<br>を使用します。<br>を入力して確認してみましょう。<p>pはparagraphの意味を持ち、<br>段落を意味します</p><p>pはpタグで閉じると自動で改行を行ってくれます。</p>ブラウザで確認すると<br>を入れた箇所で改行されていることを確認することができますリストタグ(箇条書きタグ)箇条書きを行いたい時に使用するのがリストタグです。list)タグ等があり、ulが順序なしリスト、olが順序ありリストと呼ばれます。レストランのメニューを表示させたい時は順序の関係ないulタグを活用することができます。箇条書きの部分を<li></li>タグで囲み、<li></li>タグを<ul></ul>タグで囲みます。<li>シザーサラダ</li></ul>ブラウザで表示すると<li>タグごとに改行が行われ、先頭には、自動的に「・」が表示されます。olタグは、順序をつけることができるので、レストランの人気メニューを表示させたい時に活用することができます。<li>シザーサラダ</li></ol>ulリストでは、先頭に自動的に「・」が表示されていましたが、olリストでは、数字が順番に付与されることを確認することができます。リンクタグ(ページの移動)リンクを作成したい場合は、aタグを使用します。hrefの属性にリンクで移動させたいサイトのURLを入力します。href="https://www.google.co.jp">Google</a>ブラウザで表示すると下記のようになり、クリックして、指定したサイトに正しく移動できるか確認を行ってください。target属性を使用するとクリックした際に別のタグを開いて別のサイトのWEBサイトを表示させることができます。属性はtargetで属性値は_blankを指定します。リンクタグ(ページの移動)。