画像の設定
[作成] 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>© Copyright Comment.co All rights reserved.</p> </div> <!-- フッターここまで --> </div> </body> </html>