このテキストは、「HTML Project2 を使う」を一応終了した人が、更にWebページを自分の感性で自由に作られるように作るつもりです。そのためにこのテキストでは、詳細な操作手順をなるべく書かないようにいたします。
手順に行き詰まったら前回の「HTML Project2 を使う」を読み返してください。きっと解決のヒントがあると思います。
もし、書かれていないような新しいタグや機能のことでしたら、一先ず自分が出来るやり方で作っておいて、更に詳しい情報を入手して解決してください。Web上には沢山の有益な情報があります。また、既に公開されているWebページのソースを見て理解できる場合もあります。
ページを作る内容により準備するものは違いますが、ここでは一例として地域の文化財の資料と写真を用意します。
写真は公開されているものでしたら、自分で撮影して来ます。公開されていないものでしたら管理者に事情を話して（Webに公開することも話す）撮影の許可を得てから撮影します。既に撮影済みの写真の提供してもらえる場合もあります。写真を画像処理してWebページに掲載できるような画像ファイル(jpg、gif、pngなど)にしておきます。
資料は自治体などで発行している印刷物などで調べます。専門的な知識があればなお良いのですが、その文化財を自分が納得できる程度の内容に編集します。ページを作る人がその内容に関心を持って調査してページを作れば、出来上がったページは見る人に感動を与えることが出来ると思います。
資料
市指定・史跡
閻魔堂（えんまどう）
東本町２丁目７−４０
閻魔市(エンマ市)のお堂。
戦国の頃まで半田村にあったと伝えられる。
現在地は町の東の「木戸」の門外で、旅人や浮浪者の宿に利用されていたという。
江戸中期には下町にあった馬市がこの周辺に移っていたが、天保頃から馬市にかわって旅商人、見せ物、博徒の集う季節市となった。
縁日は6月14日〜16日、現在のお堂は土蔵造で明治29年4代目篠田宗吉によって建てられた。
以上 柏崎市教育委員会 編集・発行 「柏崎市の文化財」1982/2/15 より
写真
1枚
enmadou.jpg 53,124b 450X338ピクセル
ここでは既にWeb上に公開されているページの資料を使って説明します。
実際に公開されてあるものは内容は教育委員会主管課のチェックを受けてありますが、HTML Project2 を使って作成されていませんし、あまり良い出来ではありませんのでソースは参考にしないでください。
HTML4.01 Transitional としてAnother HTML-lint (HTML Project2 のツールにあるフリーのサイト)で文法をチェックすると43個のエラーがありました。
作業の最初は、HTMLファイルと関連するファイルを入れるフォルダを作ります。
［bunkazai］というフォルダを作り、更にその中に［enmadou］というフォルダを作ります。HTML Project2 のファイルリストの上部に［エクスプローラーの起動］のアイコンがあり新しいフォルダを作ることが出来ます。
次に、編集画面の[新規]を［enmadou.html］というファイル名をつけて［enmadou］フォルダに保存します。
画像ファイルを［enmadou］フォルダに保存します。
用意した資料をenmadou.htmlの編集画面に入力します。キーボードから一字ずつ入力してもよいし、ファイルになっていれば開いて文章を選択してコピー&貼り付けても出来ます。この画面からドラッグしてもコピー&貼り付けが出来ます。
入力した文章の中にカーソルを置いて、マクロツールバーの[html]をクリックするか、メニューの［ページ設定］［HTMLファイルの初期設定］をクリックするとページの基本的なタグが文章全体の前後に入力されます。ここではマクロを使った説明をします。
省略できないタイトルを◆の替わりに「閻魔堂（えんまどう）」と入力します。これがブラウザのタイトルバーに表示され、お気に入りに登録されたときに表示されます。
今回は外部のCSSファイルを呼び出す方法ではなく、このページだけに適用されるHTML文書内に埋め込む方法を使ってみます。
<head>
<style type="text/css">
<!--
-->
</style>
既に<head>要素に入力されている外部のCSSファイルを呼び出すリンク<link rel="stylesheet" type="text/css" href="style.css">を削除します。
削除したところにカーソルを置いたままにして、メニューバーの［スタイル］［スタイル情報<style>］をクリックすると［スタイル情報<style></style>： （ヘッダ情報）］が開きます。ここでこのページに適用するスタイルを入力するのですが後で説明することとし、一先ずそのまま[OK]ボタンをクリックすると右のように入力されます。
<head>
<style type="text/css">
<!--
body {background-color:#ccffcc;}
h1 {color:red;text-align:center;}
h2 {color:#0033ff;text-align:center;}
p {line-height:150%;}
-->
</style>
試しに<!--と-->の間に空白行を作って、語り継ごう柏崎の知恵袋で使った[style.css]を開いて、その内容をコピーしてこの空白行に貼り付けます。
<!--と-->の間に書かれた文字はブラウザで表示されないコメントとして使われます。ここではスタイルシートに対応していないブラウザでも表示されないように使っています。
左のように入力されて、このページで使われるタグにスタイルシートが適用されます。
ページの背景色はbody {background-color:#ccffcc;}で決まります。この#ccffccを変更すると背景色を変えることが出来ます。見出しの文字の色や説明文の色を自分好みの色に設定してみてください。
ここではページの両端に余白を設定してみます。[body]の値の[{]と[}]の間にカーソルを置いて、スタイルの再編集のダイアログボックスを開きます。ボックスの[margin]のテキストボックスに［0 10%］と入力します。これでmargin:0 10%;と入り上下の余白はなく両端の10%が余白になります。
このように編集画面で直接スタイルシートを設定することが出来ますが、メニューバーの［スタイル］［スタイル情報<style>］をクリックして［スタイル情報<style></style>： （ヘッダ情報）］ダイアログボックスで、タグを入力してから右クリックして表示される［登録されたスタイル］のなかから選択して、タグごとに設定することが出来ます。
［登録されたスタイル］は、［スタイル編集］ボタンをクリックして出る［スタイルの編集&登録］ダイアログボックスで登録出来ます。
「閻魔堂（えんまどう）」がこのページの主題ですから一番目立つ見出し<h1>を使います。画像処理ソフトでロゴを作る方法がありますが、ファイルサイズを少しでも小さくするためや、デスプレイの解像度の変化に対応しやすくするために、フォントで表示しますが、スタイルシートで枠線や背景色に変化をつけて少し目立たせてみます。
<head>要素の<style>要素の中でh1のスタイルを書いてある［{］と［}］中にカーソルを置いて、メニューバーの[スタイル][スタイルの再編集]をクリックすると、［スタイルの再編集］ダイアログボックスが開きます。colorがredにtext-alignがcenterに設定されています。
［スタイルの再編集］ダイアログボックスの下の［新規］ボタンをクリックして設定してあるものを取り消てから、次のスタイルの設定をします。
| 項目 | 属性 | 値 | 説明 |
|---|---|---|---|
| 色と背景 | color | #009900 | 見出しの文字の色 |
| 色と背景 | background-color | #33ff00 | 見出しの背景色 |
| テキスト | text-align | center | h1のボックス内の文字の横位置 |
| テキスト | vertical-align | middle | h1のボックス内の文字の縦位置 |
| ボックス | margin | 2px 20% | h1のボックスの上下2px左右20%の余白 |
| ボックス | border-style | outset | 枠線を浮き上がったように表示 |
| ボックス | border-width | thick | 枠線の幅を太くする |
| ボックス | height | 1em | h1のボックスの高さを1文字分にする |
以上の設定が終わると「閻魔堂（えんまどう）」の見出しが浮き上がったように見えます。ここの文字はフォントですから選択して貼り付けることが出来ます。ウインドウの幅との関係は相対的になっていますから、ウインドウを狭くしたりディスプレイの解像度を低くしたりすると文字を2段に表示します。色の値を変えると自分の好みの色合いに出来ます。 ルビをつけるには？質疑応答へ移動
見出し以外の文章全部に段落のタグ<p>を入れてみます。
段落ごとに空白行が出来て間延びした感じになります。ブロックレベルのタグの殆どは前後に改行が入ります。「江戸中期には・・・」の折り返した段落の中には空白行はありません。<p>のスタイルに［line-height:150%］と設定してあるので少し行間が空いています。150%を200%に変更すると1行分の行間が空きます。
左右に余白を設けるのは、文章が横長一杯に広がって読みにくいからです。写真は余白の部分にかかっても読み難くはなりませんので、先ほどスタイルシートの設定で設定した<body>の余白margin:0 10%;を選択して切り取り、次に、段落<p>のスタイルシートにmargin:0 10%;を貼り付けます（[;]セミコロンで区切られていることを確認してください）。これで上下の余白が［0］になったので、段落間の空白行がなくなり、左右の余白は10%ずつ取ってあります。
画像を入れる所（例えば「<p> 戦国の頃まで・・・」の前）にカーソルを置いて、ファイルリストから画像ファイルenmadou.jpgをドラッグ&ドロップします。メニューで［imgタグを挿入-SP対応］をクリックすると<img src="enmadou.jpg" alt="" height="338" width="450">が入力されます。(Susiのプラグインが入っている場合これが出来ます)
<img>タグの属性の[alt=""]は、ブラウザで画像を表示しない設定をしているときに、画像の代わりに表示する代替文字を指定するところで、HTML4.01 では必須の属性です。ダブルコーティションの中に「閻魔堂」と入力します。
<img>要素はインライン要素ですからこのまま<body>要素の中に入れることはできませんので、スタイルコンテナ<div>要素の中に入れます。<img src="enmadou.jpg" alt="閻魔堂" height="338" width="450">が一行の改行間になっていることを確認して（<img>要素と同じ行に次の<p>要素があるときは、<img>要素の後で改行します）、この中にカーソルを置いて、マクロバーの［div］をクリックします。
<div>タグの中にカーソルを置いてタグの再編集・スタイルの編集で、
［style="padding-right:10px;float:left"］を設定します。
style="padding-right:10px は、画像の右側に10ピクセルの余白を設けます。
padding はボーダーの内側の余白。
magin はボーダーの外側の余白。
float:left は画像を左側に置き、下の説明文を右側に回り込ませます。
以上で大体の構造が出来上がりました。次の4つの文字列の修飾を適当にします。
次に「語り継ごう柏崎のちえぶくろ」のときに設定したように、リンクと水平線・<address>を設定して完成です。
<address>を写真より下に表示させたい。？質疑応答へ移動
別の写真を1枚用意してenmadouフォルダに保存します。
この例では［enmadou1.jpg 450X337ピクセル 36,836b］です。
ファイルリストにある［enmadou1.jpg］をドラッグして<div style="padding-right:10px;float:left"><img src="enmadou.jpg" alt="閻魔堂" height="338" width="450">の後ろ（</div>の前）にドロップします。
メニューで［imgタグを挿入-SP対応］をクリックすると<img src="enmadou1.jpg" alt="" height="337" width="450">が入力されます。
前回と同じくalt=""の［""］の中に「十王仏」と入力します。
ブラウザで確認すると、写真が横に2枚並んで説明文は右に回りこめなくて下に表示されています。
<img src="enmadou.jpg" alt="閻魔堂" height="338" width="450">の後ろ（<img src="enmadou1.jpg" alt="十王仏" height="337" width="450">の前）に<br>と改行を入れると、写真が縦に並び説明文が右に回りこみます。
しかし、写真がつながった写真に見えますので、間隔をあけます。
<img src="enmadou1.jpg" alt="十王仏" height="337" width="450">の中にカーソルを置いて[タグの再編集]から[スタイルシートの編集]ダイアログボックスで［style="padding-top:10px"］と入力します。これで上下の写真の間に10ピクセルの間隔が空きます。
このHTML Project2 にはHTMLファイルの文法をチェックするサイトへのリンクがあります。
ここで作った「閻魔堂」をチェックしてみます。
インターネットに接続できる状態で、メニューバーの［ツール］［Another HTML-lint］をクリックすると、［Another HTML-lint gateway］のサイトが開きます。ページの中の［File］ラジオボタンを選択して、参照ボタンでenmadou.htmlをテキストボックスに表示させて、上の[チェック]ボタンをクリックします。（ウイルスセキュリティ2005を使っている環境では、ファイアウォールを外さないと通信が出来ないようです。）
しばらくしてチェック結果が表示されます。12個のエラーがあり-15点で「がんばりましょう」のハナマルでした。どこにどんなエラーがあるかを表示し、解説へのリンクもあります。
検討すると2つの問題に絞られます。
１については<head>要素に<meta http-equiv="Content-Style-Type" content="text/css">を<head>要素の中で<style type="text/css">の前に入力すればよいのですが、スタイルシートは常に使うのでマクロの[html]で使っている登録タグの中に記述しておきます。
メニューの［登録タグ］［タグの登録］をクリックして、[登録名称]の[html]の[前方タグ]をクリックし、下部に表示された<head>要素の中に上記の<meta>要素を入力します。
２についてはサブ見出しの意味もあるので<h2>に変更します。
以上の修正をして再び文法チェックすると2個の減点されないエラーがありますが、「よくできました」のハナマルで、採点は100点になります。減点されないエラーはリンクとメールに関するものです。
100点のソースです。参考にしてください。
数枚の写真を表示する場合は上記の「文化財」の例を応用しても良いのですが、多数の写真を表示するときはレイアウトが崩れないように表に入れるため、テーブル<table>要素を使います。
注記：ここで使っている table 要素は本来「表」に使用されるもので、この例のようにレイアウトのために使うのは間違っています。table要素を使わないで同じ様に表示させる方法を別途[table 要素を使わない方法]を用意します。
ページ全体の説明
柏崎市街地の桜は数日前から満開で、赤坂山公園には夜雪洞が灯されている。
かつての観桜会の名所で賑わった水源地はどんな具合か行って見た。
suigenti1.jpg（浄水場）の説明
昭和１２年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、市街地より少し遅く４月２０日ころが見ごろになりそう。
くぼ地にある浄水場には桜が咲いていた。
このあたりは５月初旬に八重桜がきれいだったと記憶している。
suigenti2.jpg（貯水池）の説明
２級河川「前川」を川内ダムにより堰き止め蓄えられた貯水池。
265,000立方メートル貯水して、１日6,000立方メートル取水するという。
現在は使用量が多くなり、主役は赤岩ダム・谷根ダムで蓄えられ赤坂山浄水場で処理される上水道になっている。
水面に伸びる桜がやがて咲くはず。
suigenti3.jpg（花見会場）の説明
かつての花見会場。
現在は市街地に近い赤坂山公園に移りここを訪れる人は少なくなった。
でも桜の花は毎年咲いている。
suigenti4.jpg（咲き始め）の説明
日当たりの良い枝に桜の花が咲き始めていた。
suigenti5.jpg（枝垂れ桜）の説明
貯水池東側の滝の上広場に平成７年に植えられた枝垂桜がある。
今年の重い雪のためか１本が傾斜していた。
池の周囲にも太い枝が折れていた木があった。
suigenti6.jpg（枝垂れ桜の蕾）の説明
枝垂桜に赤い蕾がついていた。
この木が大きく育った見事な光景を想像する。
suigenti7.jpg（水面の水鳥）の説明
貯水池の水面に水鳥が泳ぐ。
水際の枝に極彩色のカワセミがとまっていた。
カメラを用意する間に水面近くをなぜるようにして飛んでいった。
わずかな間だったが、初めて実物のカワセミを見た。
例としてここでは、suigenti1.jpg 〜 suigenti7.jpg の7枚の写真を準備しました。いずれも大きさは320X240ピクセルとしました。
画像を縦に並べて表示するには横幅を揃えると見やすくなります。また横に並べるときは高さを揃えます。1ページに多数の写真を並べると回線の種類によっては全部の画像を表示するのに時間がかかります。ファイルサイズに注意します。
ページ全体の説明とそれぞれの写真について文章で説明します。写真で表現できない情報を補足します。
ファイルを保存するフォルダを用意します。例えば［photo］フォルダを作りその中に［20040415］と日付をフォルダ名にしたフォルダを作ります。
用意した7個の画像ファイルを［20040415］フォルダに保存します。
HTML Project2 のツールバー１の[新規作成]で、マクロバーの[html]をクリックしてHTML文書の初期設定をしてファイル名[suigenti.html]で［20040415］フォルダの中に保存します。
<head>要素の中に <title>水源地</title> とタイトルを入れ、<body>要素の中に <h1>水源地 2003/4/15</h1> と見出しを入れます。
見出しの次に全体の説明を入力して、段落<p>とします。
写真7枚を縦に並べて、それぞれ右横にその写真の説明文を入れるのですから、2列7行の表を作ります。
<table>
<tr>
<td></td><td></td>
</tr>
.....
</table>
<table>要素の中の<tr>要素が、［行］を表わします。
<tr>要素の中の<td>要素が行の中の［列］を表わします。
2列の表ですから、それぞれの行の中に<td>要素が2個あります。
7行の表ですから、<tr>要素が7個あります。
次に画像ファイルを入れます。
各画像の説明をそれぞれの<tr>要素の中の右側の<td>要素の前方タグと後方タグの間に入力します。
<hr>要素と<address>要素とリンクを設定してページの構造が出来ます。
<address>要素のなかに連絡先として、陽だまりコーナーへメールを送られるようリンクを次のように設定します。
<a href="mailto:hidamari@city.kashiwazaki.niigata.jp">連絡はここをクリック</a>
mailto:以下はキーボードから入力します。
今回はスタイルシートを別ファイル（.css）で作ってみます。
body {background-color:#ffffcc}
h1 {color:#ff6600;background-color:#ffcc99;
text-align:center;vertical-align:middle;
margin:2px 25%;border-style:outset;
border-width:thick;height:1em}
p {line-height:150%;text-indent:1em;}
p.inset {background-color:#ccffcc;margin:10px 17%;
border-style:inset}
table {line-height:150%;margin:0 10%;}
同じように［photo.css］に、h1 p table についても入力・設定します。
全体の説明文は HTML Project2を使うーWebページ作成ーで作った［語り継ごう柏崎の知恵ぶくろ］のように border-style:inset; と凹んだ感じに段落を設定します。
以上の［class］を使った方法は、同じタグ（この場合<p>）を識別子（この場合inset）で違うスタイルシートに使い分けることが出来ます。
説明文と写真との間が狭いので少し間隔を空けたいと思います。方法は色々あると思いますが、ここではインラインのスタイルシートを使ってみます。
写真の説明文の<td>タグの中にカーソルを置いて、［タグの再編集］の［スタイル−style］で style="padding-left:1em" を設定します。説明文の左側に1文字分の余白を設けます。7枚の写真の説明文の<td>タグの中にコピー&貼り付けをすれば簡単に入力出来ます。
この「HTML Project2」ではテンプレートで保存する事が出来ます。
次回ページを作るときに差し替える部分に「◆」などの記号を入れてテンプレートを作っておくと便利です。例えば「HTML Project2」の編集画面で次のようなページにして、メニューの［ファイル］［テンプレートとして保存］で「HTML Project2」フォルダの中の［Template］フォルダ（フォルダがない場合は作る）に適当な名前をつけて「.htt」という拡張子で保存します。ファイルはテキストファイルですからメモ帳などのエディタで見ることも出来ます。
このテンプレートを利用するときは、［ファイル］［テンプレートを開く］で編集画面へ呼び出して◆のところへ入力して編集します。写真のスタイルの height="240" width="320" はデジタルカメラで撮った写真の縦横比になっています。トリミングなどして縦横比が変わったときは修正しないと歪んで表示されます。
photo.css は次のようになります。
body{
background-color:#ffffcc;}
h1{
color:#ff6600;
background-color:#ffcc99;
text-align:center;
vertical-align:middle;
margin:2px 25%;
border-style:outset;
border-width:thick;
height:1em;}
p{
line-height:150%;
text-indent:1em;
margin-top:0;
margin-bottom:0;}
p.inset{
background-color:#ccffcc;
margin:10px 17%;
border-style:inset;}
div.center{
margin:5px 10%;
clear:both}
div.img{
margin-right:10px;
float:left;}
hr{
clear:both;}
この文書は、冒頭に<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">と宣言していて、［strict.dtd］で書かれています。推奨されないタグではなくても、table 要素は本来「表」に使用されるもので、この例のようにレイアウトのために使うのは好ましくありません。table要素を使わないで同じ様に表示させる方法を検討します。
写真とその説明を一組としてdiv要素で囲み、スタイルシートでレイアウトします。
<img src="suigenti1.jpg" alt="浄水場" height="240" width="320">と文章（テキスト）「昭和１２年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、市街地より少し遅く４月２０日ころが見ごろになりそう。」をそれぞれdiv要素で囲み、2つのdivを更にdivで囲みます。
この2つのスタイルコンテナ(div要素)を入れ子にしたスタイルコンテナを写真の数だけ作り、div要素のスタイルシートを工夫してレイアウトを整えます。次はHTML Project2による手順の例です。いろいろ試してみてください。
<table>〜</table>は次のように変更されます。
<div class="center">
<div class="img">
<img src="suigenti1.jpg" alt="浄水場" height="240" width="320">
</div>
<div>
<p>昭和１２年に完成して初めて柏崎市民に上水道を供給した、柏崎市内川内の水源地の桜は、
市街地より少し遅く４月２０日ころが見ごろになりそう。</p>
<p>くぼ地にある浄水場には桜が咲いていた。</p>
<p>このあたりは５月初旬に八重桜がきれいだったと記憶している。</p>
</div>
</div>
<div class="center">
<div class="img">
<img src="suigenti2.jpg" alt="貯水池" height="240" width="320">
</div>
<div>
<p>２級河川「前川」を川内ダムにより堰き止め蓄えられた貯水池。</p>
<p>265,000立方メートル貯水して、１日6,000立方メートル取水するという。</p>
<p>現在は使用量が多くなり、主役は赤岩ダム・谷根ダムで蓄えられ赤坂山浄水場で処理される
上水道になっている。</p>
<p>水面に伸びる桜がやがて咲くはず。</p>
</div>
</div>
<div class="center">
<div class="img">
<img src="suigenti3.jpg" alt="花見会場" height="240" width="320">
</div>
<div>
<p>かつての花見会場。</p>
<p>現在は市街地に近い赤坂山公園に移りここを訪れる人は少なくなった。</p>
<p>でも桜の花は毎年咲いている。</p>
</div>
</div>
<div class="center">
<div class="img">
<img src="suigenti4.jpg" alt="咲き始め" height="240" width="320">
</div>
<div>
<p>日当たりの良い枝に桜の花が咲き始めていた。</p>
</div>
</div>
<div class="center">
<div class="img">
<img src="suigenti5.jpg" alt="枝垂れ桜" height="240" width="320">
</div>
<div>
<p>貯水池東側の滝の上広場に平成７年に植えられた枝垂桜がある。</p>
<p>今年の重い雪のためか１本が傾斜していた。</p>
<p>池の周囲にも太い枝が折れていた木があった。</p>
</div>
</div>
<div class="center">
<div class="img">
<img src="suigenti6.jpg" alt="枝垂れ桜の蕾" height="240" width="320">
</div>
<div>
<p>枝垂桜に赤い蕾がついていた。</p>
<p>この木が大きく育った見事な光景を想像する。</p>
</div>
</div>
<div class="center">
<div class="img">
<img src="suigenti7.jpg" alt="水面の水鳥" height="240" width="320">
</div>
<div>
<p>貯水池の水面に水鳥が泳ぐ。</p>
<p>水際の枝に極彩色のカワセミがとまっていた。</p>
<p>カメラを用意する間に水面近くをなぜるようにして飛んでいった。</p>
<p>わずかな間だったが、初めて実物のカワセミを見た。</p>
</div>
</div>
この場合画像の大きさが決まっているから簡素に作ってありますが、一般にはスタイルシートでdiv要素の大きさを指定する必要があります。また「clear:both」「float:left」などをうまく利用してください。（この項2007/1/11 追加UP）
以上で「写真を入れたWebページを作る」のテキストは一先ず終了します。
説明文が少ない場合は、写真を横に２〜3枚並べて、その下の行に説明文を入れる等、変更することが出来ます。
また、写真情報だけでなく、写真と説明文を組み合わせたページに利用出来ます。
タグやスタイルシートは沢山ありますので、すべてを覚えることは出来ません。新しいタグやスタイルを多用するよりも、先ず自分の知っている（使ったことのある）タグやスタイルで出来ないか検討してみて、思うように出来なかったときに新しいものを試してみると良いと思います。
<a>でリンクを設定すると別のページにジャンプしますが、元のページを表示したままにして別のウインドウを開いて、地図を表示します。別のウインドウには大きさを指定して必要ないツールバーは表示させないようにします。
地図を表示させるHTMLファイルを作って、「××.html」というファイル名（××は地図を表わす適当な名前）で保存します。
Java Script を使いますので次の<meta>情報を<head>の中に書きます。
<meta http-equiv="Content-Script-Type" content="text/javascript">
コピーして貼り付けても良いのですが、HTML Project2 の機能で入力する場合は次のようにします。
次に入力したメタ情報以降の<head>の中に次のように入力します。
<SCRIPT type="text/javascript">
<!--
function wopen1(){
window.open("○○/××.html","WindowOpen1","status=yes,
menubar=yes,scrollbars=yes,resizable=yes Width=880 Height=630") }
function wopen2(){
window.open("○○/△△.html","WindowOpen2","status=yes,
menubar=yes,scrollbars=yes,resizable=yes Width=880 Height=630") }
//-->
</SCRIPT>
ここでは○○フォルダの××.htmlというファイルと△△.htmlを開くことにしています。今作業している呼び出すファイルと同じフォルダにあるときはフォルダ名は不要です。
function wopen1() と WindowOpen1の数字は、後でボタンで操作する動作を区別しています。
ダブルコーティション[ " " ]で囲んだり、コンマ[ , ]で区切ったり、半角スペースで区切ったりしています。
次は、ボタンの設定です。（画像にも設定できますが、）ボタンを表示するところに
<INPUT onclick=wopen1() type=button value="所在地地図の表示">
と入力します。
ボタンの色とか形は変えることが出来ません。
小さい画像(サムネール)をクリックする場合は、パソコンお助け情報で紹介しています。
http://www.city.kashiwazaki.niigata.jp/hidamari/help/hp/hp0002.html
今まではページの背景色は<body>要素のスタイルシートで色を指定していました。この方法はサーバーにHTMLファイルを要求するだけでページの背景をブラウザの機能で表示出来ますので、一番負荷の少ない方法です。
でも背景色はページのイメージに大きく影響を及ぼしますから、拘ってみたいと思う人が多いと思います。単色ではなく画像を背景に使うことが出来ます。
背景に使う画像に大きい画像を使うとダウンロードに負荷が大きくなりますから、なるべく小さい画像をページ全体に敷き詰める方がよいと思います。素材集などで適当な画像を探すのが簡単ですが、とことん拘るのなら自分で背景画像を作ることも出来ます。
例えばフリーソフトのPixiaで花の写真の花弁の色で背景画像を作ります。
背景画像は小さい画像を敷き詰めますので、画像の周辺の色に差があるとつなぎめが目立ちますので、いろいろ試してください。
また、文字や写真が明瞭に見えるような背景画像を作るようにしてください。
<body>要素のスタイルシートで、background-image属性の値に背景画像を指定すれば、ページ全体に背景画像が敷き詰められます。
具体的使用例、body {background-image:url(yyyy/xxxx.jpg);}
HTML Project2 では、メニューバーの[ページ設定][style-スタイル] で、[background-image]で画像ファイルを指定します。
小さい画像を敷き詰めるだけでなく、大きい画像を縦（横）に並べたり、中央に置いたり出来ますが、一般的ではありません。
Maicrosoft Internet Explorer では、起動して最初に開くページを「ホームページ」と言います。ブラウザを使う人の元になるページだからでしょう。普通はサイトの最初のページをホームページと言います。しかし、日本ではWebページのことをホームページと言います。
まぎらわしいのでここでは、ブラウザを開いたときに最初に現れるページを、「ポータルページ」と言います。ポータル（portal）は入り口という意味です。
パソコンを買って来たばかりのときは、ブラウザを起動するとパソコンメーカーのサイトか、マイクロソフトの MSN Japan のサイトが最初に現れると思いますが、それを自分だけのポータルページに変更するのがこの付録の目的です。
ここで作る My Portal Page は、お気に入りに登録してあるような時々開くWebページのリンク集のようなものです。
人に見せるためのページではなく、自分だけが使うページですから、使いやすければよいのですが、ブラウザを起動したときに何時も表示させるのですから、自分好みのデザインにしてください。
My Portal Page のHTMLファイルは、ローカルのパソコンの中（ハードディスク）から呼び出すのですから、多少重くなっても早く表示しますし、HTMLの文法が少しぐらいいい加減でも問題ありません。また、コンテンツの知的所有権も普通の扱い（Webに載せない）なら問題にならないでしょう。
前置きが長くなりましたが、作り方は簡単です。自分が利用するサイトのトップページや特定のページのタイトルを入力して、ハイパーリンクを設定すれば終わりです。
ハイパーリンクは、インターネットに接続して目的のWebページを表示させて、そのページのURLをクリップボードにコピーしておいて、HTML Project2 の編集画面でそのWebページのタイトルのテキスト（文字）を選択して、ツールバー３のハイパーリンクをクリックすると、<a href= と入力されてショートカットメニューが出ます。そのままクリップボードから貼り付けて、Enterキーを押すと、
<a href="URL">タイトルのテキスト</a>
とハイパーリンクが設定されます。
ページのレイアウトは、普通のHTMLファイルと同様に作りますが、ＵＲＬのグループごとに整理してグループの名前を表示し、HTMLファイルの中で何処に何があるか判り易くしておくと、追加・削除のときに楽になります。
グループ分けのときに必要なら<table>を使うのも一つの方法です。
サイトの中にはリンクのためにバナーの画像を用意しているところがあります。ダウンロードしてタイトルのテキストの代わりに使うことが出来ます。
Java Sprict を使ってプルダウンメニューを表示させURLのグループを整理しやすくしたり、検索機能を使う方法がありますが、Windows XP のSP2の場合ファイルを開くたびに情報バーが現れて面倒になりますから、<h3>・<h4>などの見出しでグループ分けする方が無難です。
ブラウザのツールバーに検索サイトの検索機能を表示で来ますが、ツールバーが広くなりページを表示する部分が狭くなります。
My Portal Page にYahoo! JAPAN の検索窓を自分のサイトに入れることが出来ますから、My Portal Page にも入れられます。次のページからソースをコピーしてMy Portal Page に貼り付ければ、機能します。
http://help.yahoo.co.jp/guide/jp/ysearch/searchbox/instructions.html
Google の検索窓は次のページです。
http://www.google.co.jp/intl/ja/searchcode.html
陽だまり関係
柏崎関係
Pixia関係
HTML 関係
Webページには、誰が作ったページか閲覧した人にわかるようにメールアドレスを書かなければならないという決まりはありませんが、書いてあった方がその情報に対する責任のようなものを明らかに出来ますし、必要があるときに連絡してもらうことが出来ます。
Webページは提供されている（書かれている）情報を受け取るもので、それ以上の情報を得たいときには別のページを探すべきで、質問・調査依頼ができるのは情報提供者がそれを認めている場合やそのサイトが求めている場合だと思います。
でも、「情報を共有したい」「新しい情報がある」「感想・意見」など、ページの作者に伝いたいときにメールアドレスがあると手軽に交流が出来ます。
<address> <a href="mailto:♥♥♥@xxx.yyyy.ne.jp">♥♥♥@xxx.yyyy.ne.jp</a> </address>
普通ページの最後に上のようにメールアドレスを入れますが、最近の迷惑メールはこのメールアドレスを収集して使用しているそうで、Webページにメールアドレスを書かないで交流が出来る方法がいろいろ考えられています。
私のこのページでは「御連絡はメールでお願いします。」として、postmail.htmlというページへ行き、そこでフォームの中に入力してもらって、メールで受け取る仕組みになっています。メールのアドレスはHTML文書の中には書いてなく、CGIファイルに書いてあります。CGIファイルは自分で作ったのではなく、フリーソフトで提供されているものを使わせていただいています。
CGIが使えない場合は、HTML で使える文字実体参照を使う方法でメールアドレスを書き換えることが出来ます。上記の♥♥♥は、「&」「#」「9」「8」「2」「9」「;」で♥を表しています。
こういう対策をしても私の場合はすでにアドレスが迷惑メール業者の間で流通しているようで、効果がありません。
メールアドレスを文字参照で書くことが多い場合、HTML Project2 では、[お気に入り語句]に登録しておいて、呼び出すことが出来ます。
（この項 2006/5/7 UP）
クリッカブルマップともいわれていますが、画像の複数の場所にリンクを埋め込むことが出来ます。HTML Project2 にはリンクエリアの座標を簡単に設定できる機能があります。
見映えの良いリンクが出来ますが、「画像が重くなる」「画像が表示されない場合はリンクが使えない」「リンク出来るエリアがわかりにくい」など欠点もあります。
作業手順は
具体的には、次のようになります。
イメージマップの画像の名前 [usemap="#yyyy"] には［#］をつけて、［<map name="yyyy">］にはつけません。名前は半角英数文字。［name］属性はXHTML1.1では［id］属性を使います。
［shape="rect"］は矩形の場合で、［coords="aa,bbb,ccc,ddd"］で左上の座標をaa（x軸、画像の左辺からの距離）bbb（y軸、画像の上辺からの距離）、右下の座標をccc,dddで決めます。
［shape="rect"］矩形の他に、［circle］円、［polygon］多角形があります。［circle］では、［coords="aa,bbb,ccc"］で中心の座標をaa,bbb、半径をcccで決めます。［polygon］ではそれぞれの頂点の座標を順に決めます。
area要素は複数設定できます。
リンク元のページを作る際に HTML Project2 の機能を使うと、座標の入力などを簡単に出来ます。
リンク出来るエリアを複数設定するには、area要素を追加します。
追加箇所にカーソルを置いて、上記手順の［8. ［<img>も同時に挿入］［<map>も同時に挿入］のチェックボックス・・・］のチェックを入れないで、［OK］ボタンをクリックします。（2007/3/3 追加）