何をする書き方？
aはリンク、imgは画像です。hrefには移動先、srcには画像ファイルの場所を書きます。altには、画像が伝える内容を文章で書きます。画像が見えないときや読み上げでも、内容が伝わります。
基本の形
<a href="移動先">リンク名</a>
<img src="画像の場所" alt="説明">hrefリンク先のURLやファイル名。src表示したい画像の場所。alt画像の代わりになる説明。短い例で確かめる
index.html
<a href="https://developer.mozilla.org/ja/">MDNを開く</a>結果
MDNへのリンク
準備・実行方法を確認する
テキストエディターで index.html を作り、UTF-8で保存します。ファイルをブラウザーで開くと表示を確認できます。変更したら保存して再読み込みしてください。
もう少し詳しいコードを見る
index.html
<a href="https://developer.mozilla.org/ja/">
MDNでHTMLを調べる
</a>
<img src="cat.jpg" alt="窓辺で眠る猫">結果
「MDNでHTMLを調べる」というリンクと、cat.jpgの画像が表示されます。画像は同じフォルダーに置いてください。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「リンクと画像」の書き方はどれ？
少し変えてみよう
同じフォルダーに about.html を作り、href="about.html" のリンクで移動してみましょう。
つまずいたら、ここを確認
画像が出ない場合は、ファイル名・拡張子・大文字小文字を確認します。飾りだけの画像はalt=""にします。
自分の言葉でメモ
記録はこのブラウザーに保存されます。