HTML リンク・画像の追加

リンク・画像の追加

パスの理解が苦手なのでまとめます。
フォルダ構造

以下は、記載のあるのも除きindex.htmlからのパス指定とします。

サイト内リンク

同一ファルダ内の別のファイルを開くとき

<li><a href="access.html">アクセス</a></li>

一階層下のファイルにアクセス
（list.htmlからindex.htmlへ）

<li><a href="cafe/index.html">アクセス</a></li>

一階層上のファイルにアクセス

<li><a href="../list.html">アクセス</a></li>

外部リンク

文字に外部リンク埋め込み
target="blank"で別タブを開くことを指定

<a href="URL" target="blank">表示文字</a>

<a href="https://qiita.com/" target="blank">Qiita</a>

ページ内リンク

ページのファイル#idを指定
divタグにid属性を指定することで、#newsでそこに移動できる

<li><a href="index.html#news">お知らせ</a></li>

        <div id="news">        
            <h2>お知らせ</h2>
            ・
            ・
        </div>

同一ページの場合ファイル名は省略できる

<li><a href="#news">お知らせ</a></li>

IDの指定方法

・IDはすべてのタグに指定できる（重複不可）
・JavaScript、CSSとの連携にも使用できる
・半角英数字、日本語、アンダーバー、ハイフンのみ使用可

<div id="ID名">       

画像の挿入

・img src=""：現在のファイルからの画像のパス
・ait=""：画像の表示ができないときに表示するテキスト
　視覚障がいのかたの読み上げ機能としても使用
　装飾イラストなど特に意味を持たないものは""で空白にする

<img src="images/logo.svg" alt="KUMA CAFE">

サイズ属性の指定（指定しない場合は実サイズで表示される）

<img src="images/logo.svg" alt="KUMA CAFE" width="300" height="300">

画像にリンクを埋め込むこともできる

        <div>
            <a href="index.html"><img src="images/logo.svg" alt="KUMA CAFE"></a>
        </div>

参考書籍

こちらを参考に自分用にまとめさせていただきました。
画像が多くとても分かりやすいのでおすすめです。