![見出し画像](https://assets.st-note.com/production/uploads/images/100234014/rectangle_large_type_2_3d8149060379c46e59f796464bc2ec99.jpeg?width=800)
ホームページ作成入門②HTMLとは
続いてはホームページを作成するために使用されるHTMLについて解説していきます。
HTMLの基本
前回の続きでは CodeSandbox の画面は以下のようになっていると思います。
![](https://assets.st-note.com/img/1678755727815-1uWVdR0eLL.png?width=800)
まずは "Test" と表示されている箇所について見てみましょう。
<h1>Test</h1>
Testが <h1> で囲まれています。よく見ると後ろ側はスラッシュ=/がついています。 </h1>
<キーワード>◯◯◯</キーワード>
HTMLは上記のルールで作成されています。
h1 は大きい文字とでも憶えておいてください。
h1は、見出し(heading)要素の一つで、最も大きな見出しレベルを表します。h2, h3, h4, h5, h6といったサブタイトルのレベルを示す見出し要素と組み合わせて、Webページの構造や階層を定義することができます。
この<h1>など囲む要素の事をHTMLタグと呼びます
HTMLを修正して h2、h3タグを追加してみます
<h1>Test1</h1>
<h2>Test2</h2>
<h3>Test3</h3>
![](https://assets.st-note.com/img/1678756493480-lxmjwLyb5y.png)
画像を表示してみよう
画像を表示するには <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 はタグで囲まずに利用するので最後にスラッシュ=/を追加します
![](https://assets.st-note.com/img/1678757099828-hTLG5l3bgc.png)
リンクを追加してみよう
リンクを追加するには<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というパラメータを使います
![](https://assets.st-note.com/img/1678757332676-2HT3HUJ3E9.png)
改行を追加してみましょう
改行を追加するには<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タグではないので最後にスラッシュ=/をつけています。
![](https://assets.st-note.com/img/1678757827176-taRsQDu81w.png)
以上がHTMLの基本、見出し、画像、リンクでした。
やってみよう
画像にリンクを貼ってみよう!
まずは答えを見ないでやってみましょう
。
。
。
<h1>私のTwitterの紹介</h1>
<a href="https://twitter.com/DaigoNet" />
<img src="https://pbs.twimg.com/profile_images/1617336266424733696/XpsnWWly_bigger.jpg" />
<br />
👆クリック
</a>
![](https://assets.st-note.com/img/1678758817856-59CjlK9IgM.png)
<a>で <img> を囲む事で 画像にリンクを付けることができます。
自分でもいろいろ試してみましょう。
この記事が気に入ったらサポートをしてみませんか?