１．TeraPad

TeraPadはhtmlファイルを作成・編集するのに便利なソフトです。

２．Jtrim

Jtrimはホームページを作成するときに画像処理をするために欠かせない

ソフトです。画像の編集のため、色々な機能がそろっています。

３．FFFTP

作成したhtmlファイルを公開するためのサーバーにアップするツールです。

これらのソフトは、すべてフリーソフトです。ウェブサイトの “窓の杜”のソフトライブラリーから簡単にダウンロードできます。この3つのソフトを使用するだけで、普通のホームページの作成・運用なら対応していくことができます。使い方についてもウェブページで紹介しています。

まず、ホームページへのリンクの作成方法ですが、それには、a要素を使用します。リンク先はhref属性で指定します。書き方としては、

　　<a href=”URL”> ～</a>

で表します。～の部分が画面に表示されその言葉をクリックするとURLで指定したリンク先に移動することになります。例えば、<a href=” http://www.ameba.jp/”>アメーバ・プログ</a>のように表し画面上に表示された“アメーバ・プログ”をクリックするとアメーバのホームページが開きます。

この場合、リンクをクリックすると前のホームページに代わり新しいリンク先のホームページが立ち上がります。前のホームページを表示したままで、新たなホームページを立ち上げて表示させることもできます。それはtarget属性を指定しtarget=”_blank”と指定します。前の例で、<a href=” http://www.ameba.jp/” target=”_blank”>アメーバプログ</a>となります。ただし、この機能ブラウザによってうまくいかない場合がありました。ＩＥだとうまくいきMozillaFirefoだとうまく機能しませんでした。

次に、画像をホームページに貼り込む方法ですがimg要素を使用します。画像ファイルは、src属性で指定します。書き方としては、

<img src=”URL”>

で表します。このimg要素は</ >で囲まれていないので注意が必要です。URL部分に画像ファイルの場所と名前を指定します。また、alt属性で画像の名前を指定できます。画像の名前は検索エンジンでの検索対象となるので必ず入れた方が良いということです。例えば、htmlファイルにameba.jpegという画像ファイルあったとすると<img src= ”ameba.jpeg”>となります。また、画像をリンク対象とすることもできます。すなわち、a要素の～部分にimg要素を指定します。

<a href=” http://www.ameba.jp/” ><img src= ”ameba.jpeg”></a>

とすることで画像をクリックするとリンク先が立ち上がります。画像をリンク対象とすると画像が紫の線で囲まれまが、それを解消するには、img要素にborder属性を指定し枠線の太さを0とすればよいです。すなわち上の例は、

<a href=” http://www.ameba.jp/” ><img src= ”ameba.jpeg” border=”0”></a>

で表示が変更できます。

文字の色や大きさを変更するタグとしてfont要素があります。指定の仕方は

<font　color=”色”>　　 　～　</font>

<font　size=”大きさ”>　 ～　</font>

（大きさは１から７の数字か±数字で指定）

で表現できます。

　しかし、現在のバージョンのhtmlファイルではこの要素は「推奨されない要素」として位置づけられているとのことです。というのは、文字の色をかえるとか大きさをかえるとかという装飾はCSS(Cascading Style Sheetsの略でホームページのデザインを記述する言語)で指定するということが現在の主流ということです(htmlはウェブページの組み立てを、CSSはウェブページのデザインをという基本的考えがあります)。そのためか、font属性は、ブラウザのIE8ではうまく機能しなかったです。このようなhtmlのバージョンの違いりにより動かないタグがあるので使うとき注意が必要であるということが分かりました。

文字の色や大きさを変更するためにspan要素を使用するというやり方も学びました。span要素のstyle属性を使用して文字の色や大きさを指定することができます。

例えば

<span style=”font-size:20pt; color:red;”>AMEBA</span> AMEBA

と指定すると以下のように表示されspan要素で囲まれていない文字と大きさ等の違いが分かります。

この形式だとIE8でも表示されます。

文字の太さで語句を強調するのにstrong要素を用いることができます。他にも文字を強調する方法としてem要素を用いて文字を斜体にして表示することもできます。例えば

<em><strong><span style="font-size:20pt; color:red;">AMEBA</span> </strong></em> AMEBA

と記入すると以下のように表示されます。上との違いがわかります。

　また、文字を大きくする表示方法に、h1,h2,h3,･･･,h6という要素があります。これらは、さまざまなレベルの見出しを作るための要素となります。例えば、ホームページの構成が章と節に分かれている場合<h1></h1>で囲まれ語句はホームページ全体の見出しとなり<h2></h2>で囲まれた語句は章の見出しに<h3></h3>で囲まれた語句は節の見出しというようになります。このように見出しを強調して表示するときにこれらの要素を用います。

ここで知っておかなければならない大切なこととして、strong要素、em要素や見出しのh1、h2要素等で表示された語句が、重要語句として検索エンジンで検索されやすいキーワードとなるということです。ホームページが検索エンジンに引っ掛かりやすくなるためにも重要語句の扱いの工夫が必要である事がわかりました。

　文章の段落は、p要素で作ることができます。ブラウザで文章を表示させるときp要素の中に文章を記述することが分かり易い表示の仕方であることが分かりました。すなわち

段落を<p>文章１</p><p>文章２</p>と表現すると文章１の初めと文章1と文章２の間に段落が出来て文章が読みやすくなります。

このように文字の表現にも色々な記述方法で表すことができることが分かりました。これらの表現方法をあらかじめテンプレートとして用意し必要に応じてそれを部品として使用することも上手にホームページを作成する方法であると思います。

CSSでの文章の装飾については、今後勉強したいと思います。その結果についてはまた報告したいと思います。

　まず背景の色ですがtable要素にbgcolorの属性で指定します。すなわち、<table bgcolor=”色”> ～</table>で表します。例えば青い背景にしたければ、bgcolor＝”blue”と表現すればよいわけです。

　次に、背景画像ですが、table要素にbackground属性で指定できます。しかしtable要素のbackground属性はブラウザーの独自の属性で、HTMLの正式な仕様でないため背景画像をつけるには、table要素のstyle属性を使用してスタイルシートのプロパティとして画像情報を定義します。例えば、画像がgazou.figというファイルに格納されているとすると<table style=”background:　URL(gazou.fig)”> ～</table>という表現で画像をテーブルの背景に表示できます。ただしこの場合gazou.figとhtmlファイルとは同じフォルダー内に存在する必要があります。また、この指定だとセルの大きさが大きく画像の大きさと一致してないと同じ画像が繰り返し表示されセルを埋めます。この繰り返しをさせないためには、background-repeatというプロパティを用いてno-repeatを指定します。すなわち<table style = ”background: URL (gazou.fig);　background-repeat:no-repeat” > ～</table>とすることで表現できます。

　このようにテーブルの中身を色々の形で表現できることが分かりました。

テーブルの位置(画面上の横方向での位置)を決めるのには、table要素にalign属性を指定します。指定の仕方は簡単で画面の真ん中に表示する場合は、align＝“center”、右側に表示する場合はalign＝“right”、左側に表示する場合はalign＝“left”とすればよいということになります。align属性を指定しないと画面の左側にテーブルは表示されます。

例えば、テーブルを中央にしたい場合は

　　<table align=”center”>　～　</table>

とすることで画面上の中央に表示されます。

　テーブルの中の文字を中央、左右に表示する方法は、表の中の行を作るtr要素にalign属性を与えることで指定できます。すなわちalign属性に「left」(左揃え)、「right」(右揃え)、「center」(中央揃え)、「justify」（両端揃え）を指定することによりテーブル内の文字を色々配置できます。

また、テーブル内の文字を上中下に配置するには、tr要素にvalign属性を与えて指定できます。すなわち、valign属性に「top」（上揃え）、「middle」(中央揃え)、「bottom」（下揃え）を指定して表現できます。

しかしこのタグでテーブル作るとセルの境界線が消えてしまうことが分かりました。

例えば、以下のようなhtmlファイルを作ります。

今回はテーブルの枠の大きさ、枠内の文字の枠との間隔の指定法について報告します。

これらのことを指定するのには、<table>要素の属性を知る必要があります。指定する属性を以下に示します。なお、いずれも長さを””で囲って表示し、特に単位を指定していない限り、ピクセル(PX)となります。

　　テーブルの横幅を指定　　　width=”長さ”

　　テーブルの縦幅を指定　　　height=”長さ”

　　セル(テーブルを構成するマス目(「セル」という))を囲む枠と文章の間の幅を指定

　　　　　　　　　　　　　　　cellpadding=”長さ”　　

　　セルどうしの間隔を指定　　cellspacing=”長さ”

簡単なテーブルを表示するhtmlファイルの例を以下に示します。

<table border="1">

<tr>

<td>

テーブルテスト１

</td>

<td>

テーブルテスト２

</td>

</tr>

　　</table>　

このhtmlファイルは、次ような枠で表示されます。

このhtmlファイルのtable要素にwidth, cellpadding, cellspacingの各属性を加えた例を次に示します。

<table border="1"　width=”500” cellpadding=”10” cellspacing=”20” >

<tr>

<td>

テーブルテスト１

</td>

<td>

テーブルテスト２

</td>

</tr>

　　</table>　

このhtmlファイルは、次ような枠で表示されます。

今回、テーブルの枠を表す線の太さや色を変更するにはどうしたらいいかについて学びました。

簡単なテーブルを表示するhtmlファイルを以下に示します。

<table border="1">

<tr>

<td>

テーブルテスト

</td>

<td>

</tr>

　　</table>　

そうすると、このような枠が表示されます。

この例で、線の太さや色を変えるにはborderの属性の変わりにstyleの属性を用います。具体的には、border="1"の代わりに例えばstyle=”border:1px solid black;”とします。これは、線の太さを、1px(pxはピクセルと呼び長さの単位を表します)で表し、線の種類をsolidということで実線を表し、線の色をblackすなわち黒で表すことを示します。そうすると次ぎのようなテーブルが表示されます。

ここで、このpxの単位ですが、定義が中々難しく大まかに言うと画像を表現するための画素、ドットを表しているということです。

線の太さは1pxの数字の部分を増やすと太くなります。線の種類を2重線にしたければsolidの代わりにdoubleとすることで表示できます。また、線の色を変えたければblackの代わりに例えばredとすると赤くなります。以下はstyle=”border:5px solid black;”と代えた場合の例を表示します。

このようにstyle属性で枠の線の太さや色を簡単に変えることができデザイン性のあるホームページを作成することができることが分かりました。Html言語では枠の表示の仕方でも様々な形で表現できます。それを予めテンプレートとして作成しておきそれを活用することは、早く綺麗なホームページを作成する秘訣であると感じました。

　ホームページを作成する為にはテーブルを旨く活用することが重要であることが分かりました。テーブルを使いこなせれば、ホームページ作成の技術が高まります。そのやり方をマスターすることが初心者として大切であることを知りました。

　枠を作るときは <table> タグと</table> タグの間に作成します。この<>で囲まれたtableはhtml言語で要素と呼ばれています。さてテーブルを構成するマス目(「セル」という)を作るにはどうすればよいでしょうか。縦の枠を重ねるためには(行を増やす)<tr>のタグを使用し、横に枠を重ねる(列を増やす)には<td>のタグを使用します。このタグの組み合わせでテーブルを作成することができます。テーブルを作るとき<table>の要素に対しborder="1"を使って枠を表示させながら作るとわかり易いことも知りました。この指定を行はないと枠が表示されないということです。border="1"は要素に対する属性と呼ばれそれ以外にも色々の属性があります。属性は要素の機能を補足したり追加したりする機能があります。どんな属性を指定できるかはタグごとに決まっており<table>、<tr>、<td>の各タグにおいても属性を旨く指定することで、様々な形式のテーブルを作成できるということになります。

次のようなhtmlファイルは、

<table border="1">

<tr>

<td>

テーブルテスト1

</td>

<td>

テーブルテスト2

</td>

</tr>

<tr>

<td>

テーブルテスト3　　　　
　　　 </td>

<td>

テーブルテスト4

</td>

<td>

テーブルテスト5

</td>

</tr>

</table>

下図のようになります。

このように、<tr>～</tr>の一つの縦枠に対して横枠に<td>～</td>のタグを用いてセルを重ねることで表が作られるということを知りました。

作られたセル（枠）に、パーツを組み合わせることでホームページを簡単に作れるようになることをこれから学習していきます 。

さて、今回まず理解したことはホームページを表現するページのhtmlファイルの構成が以下の内容であるということです。

　　ヘッダー部分＋本文の部分

ヘッダー部分は<header>と</header>というタグ(htmlファイルを作る為の文法で要素を示します)に囲まれています。ヘッダー部分の中身は、基本的わからなくても良い部分が多いのですがアクセスを取るためには知らなければいけないこともあります。また、本文の部分は<body>と< /body >というタグに囲まれています。本文がホームページのページの中身を表現する場所になります。この本文の部分をどのように表現するかということが重要なポイントになります。

表現方法のポイントは、基本的にテーブルを使うということです。そうすることで、ページの中身を、わかりやすく表現できるということがわかりました。本文をテーブルに分割し、その中にどのような情報を埋め込むかを考えていきます。

例えば以下のようなホームページ(無料ホームページ制作講座 から転用)を作りたいとします。

　次のようにページを分割して、テーブルとしてまず捉えます。そしてテーブルの各要素に情報を埋め込んでいきます。少し見にくいですが、上の例だ次のようにテーブルを分けます。

　htmlファイルのなかでテーブルを表現するには<table>と</table>に囲まれたタグで表現します。このタグの利用方法は容易で色々のテーブルの形を自由に表現できます。ただし外枠の表から中の表へと階層構造的に表現しなければいけないので記述する場所を間違えるとページがおかしくなるので注意が必要です。また、テーブルの各要素を表現したい内容で記述するのですがあらかじめ作られたテンプレートを使用すると間違いなく効率的にホームページを作成していくことが出来ます 。