hello - study for html

1. HTMLとは？

HTML（HyperText Markup Language）は、Webページの構造を定義するためのマークアップ言語です。
見出し、段落、画像、リンクなど、Webページに表示される要素の意味や役割を指定します。

WebブラウザはHTMLファイルを読み込み、その指示に従ってページを整形し、ユーザーに表示します。

2. 基本的なHTMLタグの構造

HTMLの要素は、多くの場合「開始タグ」と「終了タグ」で囲まれます。その中にコンテンツ（内容）を記述します。
例: <p>これは段落です</p>

終了タグがない「単独タグ（空要素タグ）」もあります。
例: <img> (画像), <br> (改行)

HTMLファイルの基本構造


<!DOCTYPE html>  <!-- これはHTML5の文書であることを宣言します -->
<html lang="ja"> <!-- ページの言語が日本語であることを示します -->
<head>           <!-- ページの情報（見えない部分） -->
    <meta charset="UTF-8"> <!-- 文字コードを指定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブ対応 -->
    <title>ページのタイトル</title> <!-- ブラウザのタブに表示されるタイトル -->
</head>
<body>           <!-- ページに表示される内容（見える部分） -->
    <h1>メインタイトル</h1>
    <p>ここにコンテンツが入ります。</p>
</body>
</html>

3. よく使うHTMLタグ

見出しタグ (<h1>〜<h6>)

ページの階層的な構造を表す見出しです。<h1>が最も大きく、<h6>が最も小さいです。


<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

段落タグ (<p>)

文章の段落を表します。


<p>これは最初の段落です。</p>
<p>これは次の段落です。</p>

リストタグ (<ul>, <ol>, <li>)

項目を並べる際に使用します。
<ul> は順序なしリスト（・で表示）、<ol> は順序付きリスト（1. 2. 3. で表示）です。
各項目は <li> で囲みます。

順序なしリストの例:


<ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>みかん</li>
</ul>

順序付きリストの例:


<ol>
    <li>ご飯を食べる</li>
    <li>歯を磨く</li>
    <li>寝る</li>
</ol>

リンクタグ (<a>)

他のページへ移動するためのリンクを作成します。href属性でリンク先のURLを指定します。


<a href="https://www.google.com">Googleへ</a>
<a href="next-page.html">次のページへ</a>

画像タグ (<img>)

画像をWebページに表示します。src属性で画像ファイルのパス、alt属性で代替テキストを指定します。


<img src="image.jpg" alt="これは写真の説明です" width="300">

4. HTMLファイルの作成と表示

メモ帳などのテキストエディタを開きます。
上記のHTMLコードを貼り付けます。
ファイルを「`index.html`」や「`html_intro.html`」のような名前で保存します。この際、ファイルの種類を「すべてのファイル」にして、文字コードを「UTF-8」に設定してください。
保存したファイルをWebブラウザ（Chrome, Firefoxなど）で開くと、Webページとして表示されます。

これでHTMLの基本的な部分を理解できたかと思います。
次は、CSS（Webページの装飾）やJavaScript（Webページに動きをつける）について学んでいくと、さらに表現の幅が広がります。