画像の設定

[作成] imgtest.html

[フォルダ] webpage/ch03 

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>画像の設定</title>
        </head>
        <body>
            <h1>
                <img src="../img/dog.jpg" alt="犬"> 
                HTMLの基礎を勉強しています。
                <img src="../img/dog.jpg" alt="犬">
            </h1>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p>
                HTMLの基礎を勉強しています。
            </p>
        </body>
        </html>

リンクの記述方法

[作成] link1.html

[フォルダ] webpage/ch03 

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>リンクの設定</title>
        </head>
        <body>
            <h1>ここはリンク練習ページです。</h1>
            <img src="../img/cat.jpg" alt="猫">
            <p><a href="imgtest.html">【imgtest.htmlへの相対リンク】</a></p>
        </body>
        </html>

相対リンク

[修正] link1.html

[フォルダ] webpage/ch03 

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>リンクの設定</title>
        </head>
        <body>
            <h1>ここはリンク練習ページです。</h1>
            <img src="../img/cat.jpg" alt="猫">
            <p><a href="link/imgtest.html">【imgtest.htmlへの相対リンク】</a></p>
        </body>
        </html>

[修正] imgtest.html

[フォルダ] webpage/ch03 

    <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>画像の設定</title>
        </head>
        <body>
            <h1>
                <img src="../../img/dog.jpg" alt="犬"> 
                HTMLの基礎を勉強しています。
                <img src="../../img/dog.jpg" alt="犬">
            </h1>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p>
                HTMLの基礎を勉強しています。
            </p>
            <p><a href="../link1.html">【link1.htmlへの相対リンク】</a></p>
        </body>
        </html>

絶対リンク

[作成] link2.html

[フォルダ] webpage/ch03 

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>リンクの設定</title>
        </head>
        <body>
            <h1>ここはリンク練習ページです。</h1>
            <img src="../img/cat.jpg" alt="猫">
            <p><a href="link/imgtest.html">【imgtestへの相対リンク】</a></p>
            <p><a href="http://www.google.co.jp">【Googleへの絶対リンク】</a></p>
        </body>
        </html>

画像にリンク

[作成] link3.html

[フォルダ] webpage/ch03 

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>リンクの設定</title>
        </head>
        <body>
            <h1>ここはリンク練習ページです。</h1>
            <img src="../img/cat.jpg" alt="猫">
            <p><a href="link/imgtest.html">【imgtest.htmlへの相対リンク】</a></p>
            <p><a href="http://www.google.co.jp"><img src="../img/cat.jpg" alt="猫"></a></p>
            <p><a href="http://www.google.co.jp">【Googleへの絶対リンク】</a></p>
        </body>
        </html>

コメント文

[作成] comment.html

[フォルダ] webpage/ch03 

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>コメントの記述</title>
        </head>
        <body>
            <div class="contaner">
                <!-- ヘッダーここから -->
                <div id="header">
                    <h1 id="logo">コメントの記述</h1>
                    <ul>
                        <li>メニュー1</li>
                        <li>メニュー2</li>
                        <li>メニュー3</li>
                    </ul>
                </div>
                <!-- ヘッダーここまで -->
                <!-- メインここから -->
                <div id="main">
                    <p>メインの内容</p>
                </div>
                <!-- メインここまで -->
                <!-- フッターここから -->
                <div id="footer">
                    <p>&copy; Copyright Comment.co All rights reserved.</p>
                </div>
                <!-- フッターここまで -->
            </div>
        </body>
        </html>