■ Webページを簡単に作ろう!!
このページは、インターネットのWebページを簡単に作成する方法を考察します。
- このページの内容:
- lesson 4 の画像を使って、Webページを作ります。
- c:\abc\index.html ファイルを少し修正します。
- これは、lesson 2 の「完成した index.html ファイル」そのものです。
- 修正後、完成を確認します。不都合箇所が生じたら手直しを繰返します。
- 資料
-
完成した index.html ファイル
右クリック:対象をファイルに保存
- 左をクリックすると、このページ後半の「完成したWebページ」と同じものが表示されます
c:\abc\index.html を TeraPad で開く
次の行を、変更または修正します。
- 7行目変更:<TITLE>Webページの考察です</TITLE>
- 9行目変更:<LINK REL="stylesheet" HREF="./hoto/abc.css" TYPE="text/css">
- 20行目変更:<h1>
- 21行目変更:Webページを考えます</h1>
- 24行目削除:
- 25行目削除:
- 26行目削除:
- 27行目追加:<h4>
- 28行目変更:<img src="./hoto/a_01.jpg" class="box_right">
- 33行目追加:</h4>
- 35行目変更:<h2>画像を並べてみました</h2>
- 38行目変更:<img src="./hoto/a_02.jpg">
- 39行目変更:<img src="./hoto/a_03.jpg"><br>
- 44行目変更:<img src="./hoto/a_04.jpg"><br>
- 45行目削除:
- 54行目変更:<h2>感想、総括</h2>
- 57行目変更:<img src="./hoto/a_05.jpg"><br>
- 58行目追加:<h4>
- 59行目変更:なんだか最初のものと大幅に変更になって、表示も短くなったが、
最初からこのページを参考にしたほうがわかりやすかったような気がする。
- 60行目追加:</h4>
- 61行目削除:
- 63行目削除:
- 69行目変更:<h4>
<a href="#top" class="box_right">ページの冒頭へ<a>
5-2/4
修正して、完成した index.html リスト
5-3/4
完成したWebページ
5-4/4
その後の変更
原本が完成したので、これを元に、画像、内容などを書き換えてお使いください。
注意する箇所は、パソコンの中のどこにファイルがあるのかと、それを構成するために必要とするファイルがどのような名前のフォルダーにあるのかという点です。
- 7行目変更:<TITLE>Webページの考察です</TITLE>
- 9行目変更:<LINK REL="stylesheet" HREF="./hoto/abc.css" TYPE="text/css">
- 20行目変更:<h1>
- 21行目変更:Webページを考えます</h1>
- 24行目削除:
- 25行目削除:
- 26行目削除:
- 27行目追加:<h4>
- 28行目変更:<img src="./hoto/a_01.jpg" class="box_right">
- 33行目追加:</h4>
- 35行目変更:<h2>画像を並べてみました</h2>
- 38行目変更:<img src="./hoto/a_02.jpg">
- 39行目変更:<img src="./hoto/a_03.jpg"><br>
- 44行目変更:<img src="./hoto/a_04.jpg"><br>
- 45行目削除:
- 54行目変更:<h2>感想、総括</h2>
- 57行目変更:<img src="./hoto/a_05.jpg"><br>
- 58行目追加:<h4>
- 59行目変更:なんだか最初のものと大幅に変更になって、表示も短くなったが、 最初からこのページを参考にしたほうがわかりやすかったような気がする。
- 60行目追加:</h4>
- 61行目削除:
- 63行目削除:
- 69行目変更:<h4> <a href="#top" class="box_right">ページの冒頭へ<a>
注意する箇所は、パソコンの中のどこにファイルがあるのかと、それを構成するために必要とするファイルがどのような名前のフォルダーにあるのかという点です。