【総集編】HTMLで画像を説明するページを作ってみよう

言語 HTML
作成日 : 2023年11月25日
初公開日 : 2023年11月25日
更新日 : 2023年11月25日

こんにちは！ 東武8000系の事が尊敬するほど好きになったHon-Atsugi_expressです。
東武8000系に会いたくて震えてます。
東武8000系の事しか考えられない。
東武8000系の更新顔を見ると癒されます。
東武8000系は神！
国鉄485系も神！
鉄道神！
今回はHTMLで画像説明ページを作る方法をお教えします
目次
まずはファイルを作ろう
HTMLファイルに記述しよう
テキストを変えてみよう
段落を作ろう
目次を作ろう
画像を表示しよう

まずはファイルを作ろう


PCトップ
　　パソコン内ファイル
　　　　サイト

このようなファイル構成となってるとします。
今回はサイトファイル内に作ります。
まずはフォルダを作りましょう、今回は名前を「テストページ」にしましょう。
その中にhtml(.html)ファイルを作りましょう
今回はindex.htmlとします
そうするとこのようなファイル構成になるはずです。
PCトップ
　　パソコン内ファイル
　　　　サイト
　　　　　　テストページ
　　　　　　　　index.html

そしたらindex.htmlをテキストエディターで開きましょう

HTMLファイルをいじろう


index.htmlにこのようなテキストを記述しましょう

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
これはテストです。
</body>
</html>

これをブラウザから開きましょう
そうするとこのように表示されます

表示


これはテストです。

どのようなコードか説明します。
<!DOCTYPE html>

<!DOCTYPE html>は文書がHTML5である事を示すコードです。
間違えやすいですが、これはタグではありません
書かないとバグが発生する恐れがありますので必ず書きましょう
・タグとは
<>の中にコードを入れた物です。
例
pタグであれば
<p>あ</p>
・HTMLとは
HyperText Markup Languageの略です。
ハイパーテキストとはテキストの中にテキストを入れる事です


<html></html>

<html></html>は文書がHTMLである事を示します。
<html></html>内に書いた事はHTMLと認識されます。
書かないとバグが発生する恐れがありますので必ず書きましょう
<head></head>

<head></head>は文書の指定を書きます
書かないとバグが発生する恐れがありますので必ず書きましょう
<meta charset="UTF-8">

<meta charset="UTF-8">は文書の文字コードを指定します
これは書かないと文字化けする恐れがあります
<body></body>

<body></body>の中に書いた事が表示されます。
書かないとバグが発生する恐れがありますので必ず書きましょう

テキストを変えてみよう


テキストを以下に変更してみましょう
赤色の部分が変更した部分です

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
これは

2回目の

テストです。
</body>
</html>

そうするとこのように表示されます

表示


これは2回目のテストです

段落を作ろう


段落を作るにはpタグを使います。
pタグとは段落を作る為のHTMLタグです
pタグはbody内に書きます
またテキストを変えましょう
以下のように変えて下さい

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>以下の画像は東武8000系です</p>

<br>

<p>以下の画像は東武10000系です</p>

<br>
</body>
</html>

表示


以下の画像は東武8000系です


以下の画像は東武10000系です



上下に空白が出来ています。
そしてブロック表示に変わります
それ以外は表示に変わりはありません。

目次を作ろう


次は目次を作りましょう。
コードはこちらです。

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<div style="background: #bababa;width: 300px;height: 200px;">
目次<br>
<a href="#one_1">一枚目</a><br>
<a href="#too_2">ニ枚目</a><br>
</div>
<h2 id="one_1">1枚目</h2>


<p>以下の画像は東武8000系です</p><br>

<h2 id="too_2">2枚目</h2>


<p>以下の画像は東武10000系です</p><br>
</body>
</html>

表示


目次
一枚目
ニ枚目

1枚目

以下の画像は東武8000系です


2枚目

以下の画像は東武10000系です



<div>タグとはコンテンツをまとめる為のタグです
それにスタイルを適用して見た目を作ります
<a>タグとはリンクを作る為のタグです

画像を表示しよう


画像を表示するには<img>タグを使います。

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="background: #bababa;width: 300px;height: 200px;">
目次<br>
<a href="#one_1">一枚目</a><br>
<a href="#too_2">ニ枚目</a><br>
</div>
<h2 id="one_1">1枚目</h2>
<p>以下の画像は東武8000系です</p><br>

<img src="https://sub-hon-atsugi-express.on.drv.tw/公開/画像置き場/DSC03014.jpg" width="403" height="227">


<h2 id="too_2">2枚目</h2>
<p>以下の画像は東武10000系です</p><br>

<img src="https://sub-hon-atsugi-express.on.drv.tw/公開/画像置き場/DSC02502.jpg" width="403" height="227">


</body>
</html>

表示


一枚目
ニ枚目

1枚目

以下の画像は東武8000系です


2枚目

以下の画像は東武10000系です



今回はこれで終わりです。ご視聴ありがとうございました、拡散お願いします。