今までホームページ作成についての学習内容について述べてきました。ここでホームページを作成するために便利なフリーソフトを紹介します。
１．TeraPad
TeraPadはhtmlファイルを作成・編集するのに便利なソフトです。
２．Jtrim
Jtrimはホームページを作成するときに画像処理をするために欠かせない
ソフトです。画像の編集のため、色々な機能がそろっています。
３．FFFTP
作成したhtmlファイルを公開するためのサーバーにアップするツールです。
これらのソフトは、すべてフリーソフトです。ウェブサイトの “窓の杜”のソフトライブラリーから簡単にダウンロードできます。この3つのソフトを使用するだけで、普通のホームページの作成・運用なら対応していくことができます。使い方についてもウェブページ で紹介しています。
これらのソフトをうまく使い、テンプレート で用意されたhtmlファイルと組み合わせてホームページを作成しきたいと思います。ホームページから他のホームページへリンクする方法ならびにホームページに画像を貼り付ける方法を学習しました。
まず、ホームページへのリンクの作成方法ですが、それには、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での文章の装飾については、今後勉強したいと思います。その結果についてはまた報告したいと思います。
