[初めてのwebサイト作成レッスン2]
HTML文字と画像表示とリンクについて

🌹レッスン2🌹

HTML文字と画像表示とリンクについて


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

1. 文字と画像を表示してみましょう!

<body>と</body>の間に下記の桃色の文字の部分を入力します。

★画像ファイルの指定を絶対パスで入力する場合

	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8 "/>
	<title>
	</title>
	</head>
	<body>
	
	ハロー
	<img src="img/ringo1.png" alt="りんご"width="200"  />
	
	</body>
	</html>
	

(ringo1.png)をご自分の画像ファイル名に変えて上書き保存します!

【説明】

img要素を使用して、src属性は画像をどこから引用するかの指定をします。alt属性はその画像の説明をする目的の属性です

私はりんごの画像を使っているので、画像のファイル名を{ringo1.png}としました。

気を付けたいのは、</img>で閉じるのではなく、width(横の幅)"200"のあとに半角スペース(空要素)を入れて />で閉じます。

ブラウザに表示して確認してみましょう!

{index.html}というファイルを、ブラウザのアイコンへドラック&ドロップします。

画像は表示されましたか?

りんご

2. 画像をクリックすると、次のページが表示されるようにします。

【説明】

<a>タグを使用すると別の場所へリンクできます。

クリックする画像の情報を挟みます。

最後に</a>で閉じます。

①{index.html}のファイルを編集していきましょう。

次のページにリンクするように指定をします。

★画像ファイルの指定を絶対パスで入力する場合

<img src=”img/ringo1.png” alt=”りんご" width=”200” />の前に

<a href=”ringo.html”>を追加し、

後ろに</a>で閉じます。

エディタ1

★画像ファイルの指定を相対パスで入力する場合

src=”./”が増えているかと思います。”./”は同じ階層”../”は一つ上の階層にいけます。(現在のファイルからみて、目的のファイルがどこにあるかを指定する方法です)

どちらの方法でも、同じ結果が得られます。

私はいつも絶対パスで入力します。

下記の桃色の文字の部分をコピーして、エディタへ貼り付けます。

	ハロー
	
	<a href="ringo.html">
	<img src="./img/ringo1.png" alt="りんご" width="200 /">
	</a>
	
	

上書き保存します。

②もう一つファイルを作ります。

<title>初めてのWebサイトづくり[りんご]</title>に変更します。

先程作った「初めてのwebサイトづくり」フォルダの中に{ringo.html}というファイル名で保存します。(私はりんごの画像を表示させるので{ringo.html}にしましたが、ご自分の覚えやすい名前で結構ですよ!)

<body>ハローの後ろの文字を、[次のページが表示されました]に変更します。

次のページに表示させたい画像を指定をします。

エディタ1

下記の桃色の文字の部分を入力します。

	
	<img src="./img/ringo1.png" alt="りんご" width="200 /">
	<img src="./img/ringo2.png" alt="りんご" width="200 /">
	
	

上書き保存します。

ブラウザに表示して確認してみましょう!

{index.html}というファイルを、ブラウザのアイコンへドラック&ドロップします。

画像をクリックすると

りんご

今表示されているのは、{ringo.html}というファイルです!

だんだん楽しくなってきましたのではないでしょうか?

See you again Take care (^.^/)))~~~bye!!




TOP