HTMLでホームページのタブの名前設定

この記事では、下記2点の確認を行う。

　・HTMLでホームページを作成し、タイトル(タブの名前)を設定

　・pタグを使用して、段落を作成する。

1. 目的

　・HTMLでホームページの下記部分の設定を行う。

HTMLでホームページのタブの名前設定

2. プログラムの作成(タイトルの設定)

　2.1 タブをHellow worldという名前のページを作成する。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hellow world</title>
</head>

<body>
</body>

</html>

　※htmlで最低限必要な設定

　※拡張機能により、VSCodeで自動生成出来る。　

　2.2実行結果

　2.3 プログラムの確認方法

　これをメモ帳などで書き、xxxx.html で保存する。 ( xxxxは適当な名前)

　それをブラウザ(googlechormなど)で開く。

　そうすると、上記の画面のようなページになる。

　2.4 プログラム説明

　(a) <head> </head>など、<></>のことをタグと呼ぶ。

　(b) このタグで囲んだものを要素という。

　(b) タグには、それぞれ機能があり、これを使用してページを作成する。

　例：　(今回のプログラムの場合)

　(a) タグ：　<title> </title>

　(b) コンテンツ：Hellow world

　(d) <title> </title>は、ページのタイトル(タブ部分)を指定する機能がある。

　(e) 今回の場合は、<title>Hellow world</title>の為、

　　ホームページのタブがHellow worldとなっている。　

　HTMLの基本の参考：

　・HTML の基本 - ウェブ開発を学ぶ | MDN

2.5 ここで使用されているタグの説明

タグ名	タグの説明
<!DOCTYPE html>	HTML文書のバージョンと構文規則を指定する宣言。この宣言はHTML5を指定。
<html lang="ja"> </html>	言語属性（lang）を設定。ここから先のコンテンツは日本語ということを示す。
<head> </head>	文書のメタデータやリンク、スクリプトなどの情報を含む。
<meta charset="UTF-8">	文書の文字エンコーディングをUTF-8に設定するメタ要素。
<meta name="viewport" content="width=device-width, initial-scale=1.0">	モバイルデバイスのビューポート設定を指定するメタ要素。デバイスの幅に合わせて表示し、初期ズームを1.0に設定。
<title>Hello World</title>	ページのタイトルを指定するための要素。ブラウザのタブに表示されるタイトル。
<body> </body>	HTML文書内で実際のコンテンツを含むメインのコンテンツ領域を定義。

参考：

・HTMLタグ一覧

3. プログラムの作成(段落の作成)

　3.1 pタグで段落を作成する。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hellow world</title>
</head>

<body>
    <p>通常pタグ1</p><p>通常pタグ2</p>
    <p>通常pタグ3</p>
</body>

</html>