Private Fantasticのホームページへ

[初めてのｗｅｂサイト作成レッスン２]
ＨＴＭＬ文字と画像表示とリンクについて

メニュー項目

🌹レッスン２🌹

ＨＴＭＬ文字と画像表示とリンクについて

目次

1.　文字と画像を表示
2.　ページのリンク

　🌻パソコンのブラウザは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.　画像をクリックすると、次のページが表示されるようにします。

【説明】

＜ａ＞タグを使用すると別の場所へリンクできます。

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

最後に＜/ａ＞で閉じます。

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

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

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

＜ｉｍｇ　ｓｒｃ＝”ｉｍｇ/ｒｉｎｇｏ1.ｐｎｇ”　ａｌｔ＝”りんご" ｗｉｄｔｈ＝”200”　/＞の前に

＜ａ　ｈｒｅｆ＝”ｒｉｎｇｏ．ｈｔｍｌ”＞を追加し、

後ろに＜/ａ＞で閉じます。

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

ｓｒｃ＝”．／”が増えているかと思います。”．／”は同じ階層”．．／”は一つ上の階層にいけます。（現在のファイルからみて、目的のファイルがどこにあるかを指定する方法です）

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

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

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

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

上書き保存します。

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

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

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

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

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

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

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

上書き保存します。

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

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

画像をクリックすると

今表示されているのは、｛ｒｉｎｇｏ．ｈｔｍｌ｝というファイルです！

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

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

TOP