68 <td valign="top" class="c8"> 69 <a name="マーク0">⓪</a> 70 </td> 71 </tr> 72 <tr> 73 <td valign="top" class

(1)

ページ内のリンクでページ内に移動の

html のページの追加方法

三宅節雄

Html 文書を TeraPad で開きます。

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html lang="ja">

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 5 <title></title>

6 <meta http-equiv="Content-Style-Type" content="text/css"> 7 <meta http-equiv="Content-Script-Type" content="text/javascript"> 8 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > 9 <script type="text/javascript" src="smartRollover.js"></script> 10 <style type="text/css">

11 <!--

12 body {margin:0px 0px 0px 0px}

13 p {margin:0px; text-align:left; font-size:88%; font-family:"ＭＳ明朝","serif"} 14 div.WordSection1 15 {page:WordSection1} 16 .c1 {layout-grid:24px} 17 .c2 {margin-left:52px; border:none} 18 .c3 {margin-left:356px; border:none} 19 .c4 {width:54px; padding:0px 7px 0px 7px} 20 .c5 {width:47px; padding:0px 7px 0px 7px} 21 .c6 {width:521px; padding:0px 7px 0px 7px} 22 .c7 {width:123px; padding:0px 7px 0px 7px} 23 .c8 {width:38px; padding:0px 7px 0px 7px} 24 .c9 {font-size:114%} 25 .c10 {font-size:114%; text-decoration:none} 26 .c11 {font-size:114%; color:blue} 27 .c12 {font-size:114%} 28 .c13 {text-align:center} 29 .c14 {text-align:center; line-height:16px} 30 .c15 {text-align:right} 31 .c16 {text-align:center; line-height:9px} 32 .c17 {text-align:center; line-height:20px} 33 --> 34 </style> 35 </head> 36 <body lang="ja"> 37 <div align="center"> 38 <div class="WordSection1 c1"> 39 <div align="center">

40 <table border="0" cellspacing="0" cellpadding="0" class="c2" summary=" "> 41 <tr> 42 <td valign="top" class="c4"> 43   44 </td> 45 <td valign="top" class="c5"> 46   47 </td> 48 <td valign="top" class="c6">

49 <img width="344" height="56" src="Image/yama-001.png" alt="茶臼岳の雪景色"></ 50

51 <a href="index.html"><img border="0" width="95" height="20" src="Image/yama-002.png" 52 <table border="0" cellspacing="0" cellpadding="0" class="c3" summary=" ">

53 <tr> 54 <td valign="top" class="c7"> 55 <script type="text/javascript"> 56  62 </script> 63 </td> 64 </tr> 65 </table> 66 67 </td>

(2)

68 <td valign="top" class="c8">

69 <a name="マーク0">⓪</a> 70 </td>

71 </tr> 72 <tr>

74 <a href="#マーク3">前へ</a> 75 </td>

77 <a href="#マーク0">Top</a> 78 </td>

80 2013/05/17 81 </td>

83 <a name="マーク4">④</a> 84 </td> 85 </tr> 86 <tr> 87 <td valign="top" class="c4"> 88   89 </td> 90 <td valign="top" class="c5"> 91   92 </td> 93 <td valign="top" class="c6"> 94   95 久しぶりに山がきれいに見えました 96 大倉山と流石山の雪もずいぶん融けてきましたが、 97 昨年よりは多く残っているようです 98

99 <img border="0" width="479" height="359" src="Image/yama-003.jpg" alt=""> 100   101   102 </td> 103 <td valign="top" class="c8"> 104   105 </td> 106 </tr> 107 <tr> 108 <td valign="top" class="c4">

112 <a href="#マーク4">次へ</a> 113 </td>

118 <a name="マーク3">③</a> 119 </td> 120 </tr> 121 <tr> 122 <td valign="top" class="c4"> 123   124 </td> 125 <td valign="top" class="c5"> 126   127 </td> 128 <td valign="top" class="c6"> 129   130 非常に天気が良いです 131 白さが映えます 132 カーソルを写真に乗せると雲で霞んだ写真になります 133

134 <img border="0" width="480" height="360" src="Image/yama-004_off.jpg" alt=""> 135   136   137 </td> 138 <td valign="top" class="c8"> 139   140 </td> 141 </tr> 142 <tr> 143 <td valign="top" class="c4">

(3)

153 <a name="マーク2">②</a><a href="ターゲット1" target="_self"> 154 </td> 155 </tr> 156 <tr> 157 <td valign="top" class="c4"> 158   159 </td> 160 <td valign="top" class="c5"> 161   162 </td> 163 <td valign="top" class="c6"> 164

165 10月25日に茶臼岳に初冠雪が有りま 166 11月4 日、西那須野からも雪が見えました

167 いよいよ、山ではまた冬の訪れです 168

169 <img border="0" width="480" height="360" src="Image/yama-005.jpg" alt=""> 170   171   172 </td> 173 <td valign="top" class="c8"> 174   175 </td> 176 </tr> 177 <tr> 178 <td valign="top" class="c4"> 179   180 </td> 181 <td valign="top" class="c5">

185 ご参考 186 </td>

188 <a name="マーク1">①</a><a href="ターゲット1" target="_self"> 189 </td> 190 </tr> 191 <tr> 192 <td valign="top" class="c4"> 193   194 </td> 195 <td valign="top" class="c5"> 196   197 </td> 198 <td valign="top" class="c6"> 199

200 カシミール3D により作成した展望図です 201 東北新幹線の那須塩原市内の蛇尾川橋梁付近からの景色です。 202 （自宅から3.2km で、私の散歩コースの、折り返し地点です。） 203

204 <img border="0" width="480" height="360" src="Image/yama-006.png" alt="">  206   207 </td> 208 <td valign="top" class="c8"> 209   210 </td> 211 </tr> 212 </table> 213 </div> 214 </div> 215 </div> 216 </body> 217 </html>

(4)

html 文書を TeraPad で開いてみると、上記の表示の様に行の開始位置がずれていますが、これは命令

文の開始と終了がセットになっており、36 行目の<body･･･>と 216 行目の</body>がセットでその内側の

命令は

4 文字後ろにズレて 37 行目の<div･･･>と 215 行目の</div>がセットになっています。

こんな感じで写真を

1 枚表示するためには 72 行～106 行、107 行～141 行、142 行～176 行、177 行～

221 行になっています。コメント行とか写真の下の改行が異なれば当然行数が変わりますが、html 分を見

ると、お判りのように

<tr････>と</tr>のセットが 2 つで各セットは表の 1 行分になっており、2 行で写真

1 枚分のデータです。

従って写真

1 枚分を追加するには、72 行～106 行をコピーして、71 行目の最後で一度改行して、そこに

張り付けてやればよいという事になります。

以下が張り付けた後にデータを修正した結果です

72 <tr> 73 <td valign="top" class="c4">

77 <a href="#マーク 0">Top</a> 78 </td>

83 <a name="マーク5">⑤</a> 84 </td> 85 </tr> 86 <tr> 87 <td valign="top" class="c4"> 88   89 </td> 90 <td valign="top" class="c5"> 91   92 </td> 93 <td valign="top" class="c6"> 94

95 昨日も今日も最高気温は25℃を超えました 96 5 月としては記録的な暑さだそうです

97 雪はあっという間に溶けてしまいました 98

99 <img border="0" width="479" height="359" src="Image/yama-007.jpg" alt=""> 100   101   102 </td> 103 <td valign="top" class="c8"> 104   105 </td> 106 </tr> 107 108 <tr> 109 <td valign="top" class="c4">

120 <a name="マーク4">④</a> 121 </td>

122 </tr>

(5)

68 <td valign="top" class="c8"> 69 <p class="c13"><a name="マーク0"><span class="c9">⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign="top" class

ページ内のリンクでページ内に移動の

html のページの追加方法

三宅 節雄

Html 文書を TeraPad で開きます。

html 文書を TeraPad で開いてみると、上記の表示の様に行の開始位置がずれていますが、これは命令

文の開始と終了がセットになっており、36 行目の<body･･･>と 216 行目の</body>がセットでその内側の

命令は

4 文字後ろにズレて 37 行目の<div･･･>と 215 行目の</div>がセットになっています。

こんな感じで写真を

1 枚表示するためには 72 行～106 行、107 行～141 行、142 行～176 行、177 行～

221 行になっています。コメント行とか写真の下の改行が異なれば当然行数が変わりますが、html 分を見

ると、お判りのように

<tr････>と</tr>のセットが 2 つで各セットは表の 1 行分になっており、2 行で写真

1 枚分のデータです。

従って写真

1 枚分を追加するには、72 行～106 行をコピーして、71 行目の最後で一度改行して、そこに

張り付けてやればよいという事になります。

以下が張り付けた後にデータを修正した結果です

張り付けた後に、以下の行を下記の様に上記で赤に表示した様に編集します。

74 行目 マーク

3

をマーク

4

に数字を

1 つ大きく

80 行目 次へ、Top と記載した行のコメント

2013/05/17

を新しいコメントに

83 行目 マーク

4

をマーク

5

に、

④

を

⑤

に

95～97 行目 新しい写真のコメントに

99 行目 新しい写真に対して Image/yama-00

3

.jpg を Image/yama-00

7

.jpg に変更し、新しい写真の名前

も

yama-00

7

.jpg にする。次回からは

7

を

8

、

8

を

9

にと

1 大きく

する。

113 行目 マーク

0

をマーク

5

に、

Top

を

次へ

に変更し、上書き保存する。

以上でやっと完成ですが、結構面倒です。

正規の手法としては、

Word 文書そのものを改定し、ぽいっと HTML で変換後 BGM、rollover を毎回、

設定し直します。写真の番号も変わるので

Image フォルダーも古い方は削除します。

１．

Word 文書をダブルクリックで開き

２． 表の

2 行目で、右クリックし、挿入→上に行を挿入を 2 回実施する

３． 新しい

2 行目に、前へ、Top、コメント(日付?)、⑤を記入する。(次回は⑥です･･･。)

４． 新しい

2 行目の｢前へ｣を反転させ挿入→ハイパーリンクでマーク 4 へリンク。続けて｢Top｣を反転

三宅節雄

74 行目マーク

80 行目次へ、Top と記載した行のコメント

83 行目マーク

95～97 行目新しい写真のコメントに

99 行目新しい写真に対して Image/yama-00

113 行目マーク

２．表の

３．新しい

４．新しい

６．新しい

７．新しい

８．ぽいっと