１ 最終ページの作成
1-1 入力の準備
連続してソースを入力するのでこのページをブラウザに表示させておきます。では、マイドキュメントから「homepage」フォルダーを開きます。
index.html ホームページ（表紙）です
10.html 初戀のページです
20.html 千曲川旅情の歌のページになります
style.css レイアウトをつくりました
shasin ５枚の写真が保管されています
「20.html」のファイルをダブルクリックで開きます。ブラウザ画面にスタイルシートでレイアウトされた画像が表示され、ブラウザ上段余白に「はげちゃんの世界」と並んで「島崎藤村の魅力」という「タブ」が表示されています。
1-2 見出しの入力
ショートカットキーを使って必要な操作をすばやく行いましょう。次の太文字を選択して「Ctrl」+「C」キーでコピーします。
落梅集より 千曲川旅情の歌
エディタの「<div class="main">」で「<h1 id="site01">◆</h1>」の「◆」を選択し､「Ctrl」+「V」でコピーした範囲を貼り付け、「Ctrl」+「S」で「上書き保存」します。これを忘れると入力内容は消えてしまうので注意しましょう。｢before」と「after」は次のようになります。
<div class="main">
<h1 id="site01">◆</h1>
<p>◆</p>
<div class="main">
<h1 id="site01">落梅集より 千曲川旅情の歌</h1>
<p>◆</p>
「島崎藤村の魅力」に切り替えて「最新の情報に更新」で入力結果を確認します。
1-3 詩文の入力
「はげちゃんの世界」へ切り替え、島崎藤村の「落梅集より 千曲川旅情の歌」の詩文でソース本文の入力方法を練習します。つぎの詩の「小諸なる古城のほとり」から「草枕しばし慰む」までを選択して、「Ctrl」+「C」でコピーします。
小諸なる古城のほとり
雲白く遊子（いうし）悲しむ
緑りなすはこべは萌えず
若草も藉（し）くによしなし
しろがねの衾（ふすま）の岡邊（おかべ）
日に溶けて淡雪流る
あたゝかき光はあれど
野に滿つる香（かをり）も知らず
淺くのみ春は霞みて
麥（むぎ）の色わづかに靑し
旅人の群はいくつか
畠中の道を急ぎぬ
暮れ行けば淺間も見えず
歌哀し佐久の草笛
千曲川いざよふ波の
岸近き宿にのぼりつ
濁り酒濁れる飲みて
草枕しばし慰む
エディタの見出し「落梅集より 千曲川旅情の歌」の次にある「<p>◆</p>」の ◆を選択して「Ctrl」+「V」で貼り付け、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。エディタのソースは、「はげちゃんの世界」と同様に３グループ18行で表示されています。
「島崎藤村の魅力」へ切り替えて「最新の情報に更新」すると、ブラウザの画面ではすべてが連続して表示されます。
小諸なる古城のほとり 雲白く遊子（いうし）悲しむ 緑なすはこべは萌えずり 若草も藉（し）くによしなし しろがねの衾（ふすま）の岡邊（おかべ） 日に溶けて淡雪流る あたゝかき光はあれど 野に滿つる香（かをり）も知らず 淺くのみ春は霞みて 麥（むぎ）の色わづかに靑し 畠中の道を急ぎぬ 暮れ行けば淺間も見えず 歌哀し佐久の草笛 千曲川いざよふ波の 岸近き宿にのぼりつ 濁り酒濁れる飲みて 草枕しばし慰む
1-4 詩文の調整
1-4-1 終了タグの入力
エディタを選択して、キーボードを英数半角入力モードにします。エディタのソースを注意深く見ると､詩文の開始部分は半角のスペースに続いて開始タグの「<p>」があり詩文の最終部分には終了タグ「</p>」があります。
終了タグの「</p>」を選択して「Ctrl」+「C」でコピーします。詩文は３グループあり、第１グループの最終文字「淡雪流る」の右にカーソルを表示して「Ctrl」+「V」で貼り付けます。
第２グループも最終文字の右にカーソルを表示して「Ctrl」+「V」で貼り付けます。作業が完了したら「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。
エディタの画面下部に､「◆ 62行目： /pに対応する開始タグが見つかりません｡」など３行の注意事項と「文法チェック結果」が表示されますが無視してください。
1-4-2 開始タグの入力
詩の先頭にある開始タグの「<p>」の「<p」と「>」の間をクリックしてカーソルを表示させます。スペースキーをポンと押すとダイアログが表示されます｡「class」の文字を選択して「Enter」キーをポンと押すと「<p class="">」になります。
「<p class="">」の「"」と「"」の中央にカーソルを表示して、「nasi」と入力すると「<p class="nasi">」となります。「<p class="nasi">」を選択して「Ctrl」+「C」でコピーします。
第２と第３グループの開始文字の左にカーソルを表示して「Ctrl」+「V」で貼り付けます。作業が終了したら「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。
開始タグが正しい位置に入力されると、エディタ画面下部の注意事項が消えました。これでエラーはなくなったことが分かります。
1-4-3 改行タグの入力
では、詩の姿を整えるために改行タグ「<br>」を入力します。
<br>
上記の「<br>」を選択し「Ctrl」+「C」でコピーします。第１グループの１行目から５行目まで、１行ずつ最終文字の右にカーソルを表示して「Ctrl」+「V」で貼り付けます。第２グループと第４グループも同様にして貼り付けます。
詩文の最終部分「草枕しばし慰む</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを１行入れ、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。「島崎藤村の魅力」へ切り替え、「最新の情報に更新」して表示内容を確認します。
