今回の勉強会では、いつものＨＰビルダーを使用しないで、支部だより形式のhtmlファイルを作って見ます。
事前準備：
①440✕330pxの写真を10枚と、②横幅900✕縦幅(自由)の写真1枚と、③横幅900✕縦幅(自由)の説明文の背景用イラストを1枚準備願います。例題2で使用します。
htmlの必要最低限の基本形は下記ですから、これに表の行や列lを追加し、文字列や写真を表示します
<html>
<head>
<title></title>
</head>
<body>
</body>
</html> |
表は<body></body>内にこのように記載します
<table> ：表の開始
<tr> ：行の開始 ：<tr>～</tr>を行数回繰返し記載する
<td>AAA</td> ：1列目の開始／終了 ：<td>～</td>を列数回繰返し記載する
<td>BBB</td> ：2列目の開始／終了
</tr> ：行を閉じる
</table> ：表を閉じる
|
<table>､<tr>や<td>はオプションとして配置(左､右､中央)や幅(px数)等を指定できます
文字列を表示させたい場合には、<td></td>間にフォント､サイズ､色等を指定して、文字列を記入します。
<td align="left" width="350"><font face="メイリオ" size="+1" color="#0000ff">文字列記入例です！</font></td>
画像を表示させたい場合には、<td></td>間に
<img src="img/01.jpg" width="440" height="330" border="1">の様に記載します。
ここでimgはイメージ、srcはソースを表しています。width="440"は幅、 height="330"は高さ、border="1"は区切り線を表示することを表していますが、画像ファイルの前のimgはフォルダー名です。
リンクを実施するには、
<a href="source1.html" target="_blank">例題1の作成結果はここから</a>
<a href="../index.html"><img src="data/back.gif" width="60" height="20"></a>
｢a｣とは、｢Anchor(アンカー)｣の略で、リンクの出発点や到達点を指定するタグで、hrefとは｢hypertext reference｣の略で、｢ハイパーテキストの参照｣ですが「a href｣とセットで使用した場合には、リンク先の場所を表示します。その後に記載された文字列或いは画像は、ここをクリックする事でリンク先に飛びます。
<a href>のオプションのtargetは、どの画面で表示させるかを指定します。
target="_blank" ：新しいウィンドウ(別窓ウィンドウを開いてリンク先を表示する)
target="_parent" ：親ウィンドウ
target="_self" ：同一ウィンドウ(現在いるウィンドウに表示)
target="_top" ：全画面(フレーム分割を解除し、ウィンドウ全体で)
|
| 背面にイラストなどを配置して、その上に文字列を表示する |
Wordの背面の様にイラストなどを配置して、前面に文字列を記入する場合には、
<td style="background-image:url(img/illust1.png);" height="626" align="center" valign="middle">AAA</td>
背景画像をstyle="background-image:url(img/illust1.png);" height="626"の様に指定し、その前面に表示させたい文字列をAAAの場所に記載します。
align="center" valign="middle"は文字列をイラスト表示領域での中央に表示させます。
BGMの場合も、ここから表示タイプを選んで<td>と</td>の間に入れます。
メモ帳やサクラエディターを使っての、html文書の作成例は、例題1と、例題2をご覧下さい。
保存する場合は保存形式(保存コード)は、UTF-8ではなくSJISまたはANSIで保存願います。
UTF-8で保存し、HPビルダーで編集すると文字化けします。
勉強会当日は例題1は講師からの説明だけを実施し、例題2に沿って皆さんにhtmlファイルを作成して頂きます。作成済みであれば当日は例題2に別途表を追加して頂きます。
|
