初めてのHTML - HTML基礎 | Yoku Webデザインブログ

初めてのHTML：ウェブ開発の第一歩

こんにちは。この記事では、ウェブページを作るための基本的な言葉「HTML」についてお話しします。

1. HTMLとは？

HTMLは、ウェブページを作るための「言葉（コード）」です。ウェブページに「文字」「画像」「リンク」などを追加するために使います。すべてのウェブサイトの基本はHTMLです。

2. HTMLの基本ルール

HTMLを書くときには、以下のような基本のルールがあります：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
    <h1>初めてのHTML</h1>
    <p>これはHTMLの基本ルールを示す例です。</p>
</body>
</html>

<!DOCTYPE html>: HTMLを使っていることをウェブブラウザに伝える言葉。
<html>: HTMLの始まりと終わり。
<head>: ページに関する情報を書く場所。
<meta charset="UTF-8">: 文字の種類を指定します。
<title>: ウェブページのタイトルを書く場所。
<body>: ページの内容を書く場所。

HTMLを使ってコードを書くときに必ず初めに書く項目です。詳しい内容は実際にWebページを作りながら一緒に勉強していきましょう。とりあえず最初に書くやつだと覚えておいてください。

3. よく使うHTMLの言葉

見出し
<h1></h1>
<h2></h2>
<h3></h3>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
   <h1>大きな見出し</h1>
   <h2>中くらいの見出し</h2>
   <h3>小さな見出し</h3>
</body>
</html>

段落
<p></p>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
  <h1>大きな見出し</h1>
  <h2>中くらいの見出し</h2>
  <h3>小さな見出し</h3>
  <p>これは段落です。</p>
</body>
</html>

リンク
<a></a>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
  <h1>大きな見出し</h1>
  <h2>中くらいの見出し</h2>
  <h3>小さな見出し</h3>
  <p>これは段落です。</p>
  <a href="https://yoku49.jp">リンク</a>
</body>
</html>

href: リンク先のURLを指定します。

リスト
<li></li>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
  <h1>大きな見出し</h1>
  <h2>中くらいの見出し</h2>
  <h3>小さな見出し</h3>
  <p>これは段落です。</p>
  <a href="https://yoku49.jp">リンク</a>
  <ul>
     <li>項目1</li>
     <li>項目2</li>
  </ul>
</body>
</html>

画像
<img></img>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
  <h1>大きな見出し</h1>
  <h2>中くらいの見出し</h2>
  <h3>小さな見出し</h3>
  <p>これは段落です。</p>
  <a href="https://yoku49.jp">リンク</a>
  <ul>
     <li>項目1</li>
     <li>項目2</li>
  </ul>
  <img src="image.jpg" alt="説明">
</body>
</html>

画像を表示するためには、<img>タグを使って、正しい場所にある画像ファイルのパスを指定することが大切です。また、alt属性を使って、画像が表示されない場合でも内容がわかるように説明を書きます。

画像ファイルの場所

画像を表示するには、画像ファイルが正しい場所に保存されている必要があります。以下のような場所に画像を保存しておくといいでしょう：

ウェブページと同じフォルダー:
- 例えば、image.jpgが同じフォルダーにある場合、src="image.jpg"と書くだけで表示されます。
サブフォルダー:
- 例えば、画像が「images」というフォルダーにある場合、src="images/image.jpg"と書きます。
別のウェブサイト:
- 例えば、画像が他のウェブサイトにある場合、src="https://example.com/image.jpg"と書きます。

画像を表示する方法

`<img src="image.jpg" alt="説明">`の説明

<img>タグ: これは「イメージ」タグと読みます。このタグを使ってウェブページに画像を表示します。
src="image.jpg": srcは「ソース」の略で、どの画像ファイルを表示するかを指定します。image.jpgは、表示したい画像ファイルの名前です。この画像ファイルが正しい場所に保存されていることが重要です。
alt="説明": altは「代替テキスト」の略です。画像が表示されないときや、視覚障害のある人がスクリーンリーダーを使うときに、この説明が使われます。画像が何を示しているかを簡単に説明します。

画像パスに関しては私は頭が悪いので文章で説明するのはこれが限界です。わかりづらいと思いますので、時間があればそのうち動画で説明したいと思います。

5. ウェブページを作ってみよう

これまで学んだ内容を使って、簡単なウェブページを作ってみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の初めてのウェブページ</title>
</head>
<body>
    <h1>私の初めてのウェブページ</h1>
    <p>これは、私が初めて作ったウェブページです。HTMLの基本を学びました。</p>
    <h2>私の趣味</h2>
    <ul>
        <li>読書</li>
        <li>プログラミング</li>
        <li>旅行</li>
    </ul>
    <p>もっと知りたい方は、<a href="https://yoku49.jp/contact/">こちら</a>をご覧ください。</p>
</body>
</html>

表示されたページがショボすぎてがっかりしたと思いますが、これからです。