ホームページ作成入門②HTMLとは

続いてはホームページを作成するために使用されるHTMLについて解説していきます。

HTMLの基本

前回の続きでは CodeSandbox の画面は以下のようになっていると思います。

まずは "Test" と表示されている箇所について見てみましょう。

<h1>Test</h1>

Testが <h1> で囲まれています。よく見ると後ろ側はスラッシュ＝／がついています。 </h1>

<キーワード>◯◯◯</キーワード> 

HTMLは上記のルールで作成されています。
h1 は大きい文字とでも憶えておいてください。

h1は、見出し（heading）要素の一つで、最も大きな見出しレベルを表します。h2, h3, h4, h5, h6といったサブタイトルのレベルを示す見出し要素と組み合わせて、Webページの構造や階層を定義することができます。

H1について

この<h1>など囲む要素の事をHTMLタグと呼びます

HTMLを修正して h2、h3タグを追加してみます

<h1>Test1</h1>
<h2>Test2</h2>
<h3>Test3</h3>

結果

画像を表示してみよう

画像を表示するには <img> タグを使います
適当にググった画像のURLをコピーします。

https://picsum.photos/200/300

img タグを追加して画像のURLを指定します

<h1>Test1</h1>
<h2>Test2</h2>
<h3>Test3</h3>
<img src="https://picsum.photos/200/300" />

画像 のURLを指定するには srcというパラメータを使います
img はタグで囲まずに利用するので最後にスラッシュ＝／を追加します

リンクを追加してみよう

リンクを追加するには<a>タグを使います。

a タグを追加してリンクのURLを指定します

<h1>Test1</h1>
<h2>Test2</h2>
<h3>Test3</h3>
<img src="https://picsum.photos/200/300" />
<a href="https://twitter.com/DaigoNet" />私のTwitter</a>

リンクのURLを指定するには hrefというパラメータを使います

改行を追加してみましょう

改行を追加するには<br>タグを使います。

<h1>Test1</h1>
<h2>Test2</h2>
<h3>Test3</h3>
<img src="https://picsum.photos/200/300" />
<br />
<a href="https://twitter.com/DaigoNet" />私のTwitter</a>

<br>も<img>同様に囲むHTMLタグではないので最後にスラッシュ＝／をつけています。

リンクが改行されて写真の下に移動しました

以上がHTMLの基本、見出し、画像、リンクでした。

やってみよう

画像にリンクを貼ってみよう！
まずは答えを見ないでやってみましょう

。
。
。

<h1>私のTwitterの紹介</h1>
    
<a href="https://twitter.com/DaigoNet" />
  <img src="https://pbs.twimg.com/profile_images/1617336266424733696/XpsnWWly_bigger.jpg" />
  <br />
  👆クリック
</a>

<a>で <img> を囲む事で 画像にリンクを付けることができます。
自分でもいろいろ試してみましょう。