HTMLの基本
ドキュメントタイプ宣言
まずデスクトップにhtml_and_cssというディレクトリ内に、part1ディレクトリを作り、その中にHTMLファイルを作ります。PCがそのファイルをHTMLファイルだと認識するためには、
拡張子（ファイル名の末尾のピリオドに区切られた文字列）をhtmlとします。
今回はindex.htmlというファイルを作成しましょう。
作成したら、以下を記述します。
<!DOCTYPE html>htmlファイルはユーザーのブラウザがファイルを読み取って表示するものですが、
その際に、htmlがどのバージョンで書かれたものかを知る必要があります。
上記の記載は、ドキュメントタイプ宣言と呼ばれ、
どのバージョンで記載されているのかを宣言するものになります。
(特にversionの記載がない場合は、最新のversionで書かれたものということになります。）
タグ
次に、以下の記載を追加します。
<!DOCTYPE html>
<html></html>
こちらはhtmlタグと呼ばれます。
htmlは基本的にタグで構成していきます。
例えば以下のようなページを作るとします。
ただ単に文字を羅列するだけだと、そのhtmlファイルを管理する上で、
この部分はどういう意味合いなのか、分かりずらくなります。
特に内容が多くなればなるほど、大変かと思います。
上記の問題を解決するため、タグを使い、各パーツに意味付けをします。また、タグを使うことで、ブラウザが読み取る際に、ちょっとした恩恵もあるのですが、ここでは説明は省略します。
タグを使った意味づけは以下のようなイメージです。
実際のタグは英数字で定義されており、上記をコーディングすると以下になります。
ちなみに<html>が開始タグ、</html>が終了タグになります。
開始タグと終了タグに囲まれた部分が、その意味合いを持つ内容になります。
そして、開始タグ、終了タグとその囲まれた部分を含めて要素と言います。
また、要素の中に、別の要素を入れることができ、
対象の要素を囲っている要素を親要素、
囲われている方を子要素と言います。
話をhtmlタグに戻します。
htmlタグは意味合いとして、内部に記述するものはHTMLであることを意味し、こちらはhtmlを書く際は、必ず必要です。
また、HTMLを記載する上では以下のタグが必ず必要になります。
headタグ
ブラウザにページの情報を渡す役割を持っています。例えば、以下図に示すブラウザのタブに表示されるタイトルは、headタグ内のtitleタグの内容が表示されます。
bodyタグ
bodyタグ内に記述されるものが、実際にブラウザに表示されるものになります。
上記を踏まえて、以下のように記述してみましょう。
上記を記述後、VSCodeにて右クリックをすると、Open with Live Serverという記述があると思いますので、こちらをクリックしましょう。
そうすると、ブラウザで以下のようなページが自動で開くかと思います。
タイトルが初めてのHTMLで、内容が空のページが表示されるかと思います。
imgタグ
次に、bodyタグ内にタグを追加して、webページにに表示してみましょう。
画像を追加するのですが、その際にはimgタグを使います。
imgタグは他のタグと違い、開始タグのみとなります。
また、imgタグは二つの属性を持ちます。
属性というのは、タグに細く情報を与えるもので、imgタグで説明すると、
src（ソース）とalt（オルト）という属性を持ちます。
srcは表示したい画像のパスを記述します。
画像のパスを記述するために、part1ディレクトリ内にimagesディレクトリを作成しましょう。
作成したimagesディレクトリに、以下の画像をダウンロード（画像名はsample.jpg）して、格納しましょう。
以下のような構成になっていればOKです。
上記が完了したら、srcにパスを以下のように記述しましょう。
altに関しては、何らかのエラーで画像が表示できない場合に、代わりに表示されるテキストになります。こちらは基本的に記述するようにしましょう。
pタグ
次に、pタグを追加します。
pタグはパラグラフの頭文字で、短い文章という意味合いを持ちます。
追加して、先ほどのlive serverにて確認しましょう。
以下のように表示されるかと思います。
Last updated