# 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 <ヘッダー> 〇〇のブログ <画像 src="https://sample.png" /> <文章> 今日も一日楽しかった! ``` 実際のタグは英数字で定義されており、上記をコーディングすると以下になります。 ```html
〇〇のブログ

今日も一日楽しかった!

``` ちなみに``が**開始タグ、**``**が終了タグ**になります。 **開始タグと終了タグに囲まれた部分が、その意味合いを持つ内容**になります。 そして、開始タグ、終了タグとその囲まれた部分を含めて**要素**と言います。 また、要素の中に、別の要素を入れることができ、 対象の要素を囲っている要素を**親要素、** 囲われている方を**子要素**と言います。 話を**htmlタグ**に戻します。 **htmlタグ**は意味合いとして、内部に記述するものはHTMLであることを意味し、こちらは**htmlを書く際は、必ず必要です。** また、HTMLを記載する上では以下のタグが必ず必要になります。 * **headタグ** ブラウザにページの情報を渡す役割を持っています。例えば、以下図に示すブラウザのタブに表示されるタイトルは、headタグ内の**titleタグ**の内容が表示されます。
* **bodyタグ** bodyタグ内に記述されるものが、実際にブラウザに表示されるものになります。 上記を踏まえて、以下のように記述してみましょう。 
<!DOCTYPE html>
<html>
    <head>
        <title>初めてのHTML</title>
    </head>
    <body></body>
</html>
上記を記述後、VSCodeにて右クリックをすると、`Open with Live Server`という記述があると思いますので、こちらをクリックしましょう。 ![](https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FkEhSuCx00zatZodV5n9B%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-20%2011.26.33.png?alt=media\&token=1f5d12bf-7891-417e-9425-0c7bd433b790) そうすると、ブラウザで以下のようなページが自動で開くかと思います。
タイトルが`初めてのHTML`で、内容が空のページが表示されるかと思います。 ## imgタグ 次に、bodyタグ内にタグを追加して、webページにに表示してみましょう。 画像を追加するのですが、その際には**imgタグ**を使います。 imgタグは他のタグと違い、**開始タグのみ**となります。 また、imgタグは二つの**属性**を持ちます。 **属性**というのは、**タグ**に細く情報を与えるもので、imgタグで説明すると、 **src（ソース）**と**alt（オルト）**という属性を持ちます。 ``` ``` **src**は表示したい画像のパスを記述します。 画像のパスを記述するために、`part1`ディレクトリ内に`images`ディレクトリを作成しましょう。 ![](https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FzSgEamgaCba3pt0qCo5F%2Fsample.jpg?alt=media\&token=ae2fedd6-91f9-479f-8fa2-41bc3ef241b4) 作成したimagesディレクトリに、以下の画像をダウンロード（画像名はsample.jpg）して、格納しましょう。 以下のような構成になっていればOKです。
上記が完了したら、`src`にパスを以下のように記述しましょう。 `alt`に関しては、何らかのエラーで画像が表示できない場合に、代わりに表示されるテキストになります。こちらは基本的に記述するようにしましょう。 
<!DOCTYPE html>
<html>
    <head>
        <title>初めてのHTML</title>
    </head>
    <body>
        <img src="images/sample.jpg" alt="東茶屋街の街並みの画像" />
    </body>
</html>
## pタグ 次に、**pタグ**を追加します。 **pタグ**は**パラグラフ**の頭文字で、短い文章という意味合いを持ちます。 追加して、先ほどのlive serverにて確認しましょう。 
<!DOCTYPE html>
<html>
    <head>
        <title>初めてのHTML</title>
    </head>
    <body>
        <img src="images/sample.jpg" alt="東茶屋街の街並みの画像" />
        <p>東茶屋街の街並みです！</p>
        <p>とても綺麗でした！</p>
    </body>
</html>
以下のように表示されるかと思います。