2021.08.08
テーマ： HTMLタグのお勉強(104)
カテゴリ： HTMLを知る
今度は、画像を入れてみたいと思います。
適当に写真を用意します。
今回は、画像のファイルを「景色１」と名前を付けてデスクトップに保存しておきました。
このような画像です。
↓
デスクトップに保存して、
これだけでは、何も反映されません。
htmlに反映させるために、画像を入れるタグを入力していきます。
今までのhtmlに、適当な場所に入れていきます。
<!DOCTYPE html>
ピンク色の部分を追加しました。
本文の真ん中に入れてみました。
画像を反映させるタグは<img>
を使います。
srcは、これが画像の素材です。というような意味です。
このhtmlを保存して表示させてみましょう。
↓
↑
うまくいきました。
今度は、画像を入れてみたいと思います。
適当に写真を用意します。
今回は、画像のファイルを「景色１」と名前を付けてデスクトップに保存しておきました。
このような画像です。
↓
デスクトップに保存して、
これだけでは、何も反映されません。
htmlに反映させるために、画像を入れるタグを入力していきます。
今までのhtmlに、適当な場所に入れていきます。
<!DOCTYPE html>
<html>
<head>
<title>タイトルを入れる</title>
<link href="stylesheet/test.css"rel="stylesheet">
</head>
<body>
<h1>第１章</h1>
<p>早速作ってみよう。</p>
<h2>その１</h2>
<p>パソコンの電源を入れてみよう。</p>
<img src="景色１.png">
<h3>その２</h3>
<p>メモ機能を使って作ろう。</p>
</body>
</html>
ピンク色の部分を追加しました。
本文の真ん中に入れてみました。
画像を反映させるタグは<img>
を使います。
srcは、これが画像の素材です。というような意味です。
このhtmlを保存して表示させてみましょう。
↓
↑
うまくいきました。
お気に入りの記事を「いいね！」で応援しよう
[HTMLを知る] カテゴリの最新記事
-
cssに追加してみよう3 2021.08.15
-
cssに追加してみよう2 2021.08.12
-
cssに追加してみよう１ 2021.08.11
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
