3.1.2 画像の設定

[作成] 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>

3.2.2 リンクの記述方法

[作成] 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

<!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

<!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>

3.3 画像にリンクを指定

[作成] 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>

3.5 コメント文

[作成] comment.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>コメントの記述</title>
    </head>
    <body>
        <div class="container">
            <!-- ヘッダーここから -->
            <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>