ホームページの作成 1

 これから5週にわたってインターネットのホームページ(Webページ)(以下、Webページという)を作成する。
 ・1週目:HTMLタグによるHTMLファイル作成
 ・2週目:サーバとクライアント
 ・3週目:画像の表示とリンク
 ・4週目:テーブルとフレーム
 ・5週目:Webページの作成

 使用するソフトウェアは、Webページを作成する「テキストエディタ」と作成したWebページを閲覧する「ブラウザ」、作成したWebページを公開できるコンピュータ(サーバという)に送る「FTP」の3つである。

作成の準備
 ホームページ作成には、例えばIBM社の「ホームページ・ビルダー」やフリーのホームページ作成支援ソフトが存在するが、基本的にはテキストファイルが作成できてファイルの拡張子に".html"(または".htm")を付けることができるソフトウェアがあればよい。

 ホームページはHTMLという一種のプログラム言語で作成されている。このHTMLファイルを作成するテキストエディタとしては何を使用してもよいが、見やすい色分け表示機能があるフリーの優れたエディタ(例えば「Notepad++」や「サクラエディタ」など)を使うことを勧める。

 始めに、これからWebページに必要なファイルを作成していくが、作成したファイルを保存する作業フォルダを決める。
 「u:ドライブ」の下に"u:\homepage"というフォルダを新規に作成する(作成したファイルはここに保存すること)。

HTMLファイルの作成
 早速HTMLファイルを作成する。テキストエディタを起動し、次の文字列を入力する。
html1
 < >記号で囲まれた範囲をタグといい、タグを使い分けることによって様々な表現のWebページを作ることができる。

 入力したらファイルに"page1.html"と名前を付けて保存する。ファイル名には半角英数字「-(ハイフン)」「_(アンダースコア)」のみ使用し、できるだけ小文字を使用する(ここでは小文字を使うこと)。また、拡張子は ".html" とする。
 テキストエディタによっては、タグが色分けされて表示されて見やすくなっている。

HTMLファイルの閲覧
 作成した "page1.html" ファイルをブラウザ越しに閲覧してみる(u:\homepage フォルダ内に保存したファイルをインターネットエクスプローラで開く)。

 ブラウザのウィンドウに "page1.html" の内容が表示されることを確認する。

こんにちは!
 このとき、ブラウザのアドレス欄は "u:\homepage\page1.html" となっているはずである。これは現在自分が使用しているコンピュータ内にあるファイルを見ているだけであり、このファイルの情報は他のコンピュータから見ることはできない(他のコンピュータからファイルを閲覧できるようにする(公開する)方法は次回説明する)。
ページのタイトル
 このページにタイトルをつける。先のファイル "page1.html" に<title>タグなどを加える。
html2
 上のように page1.html を修正した後、再度ファイル page1.html に保存(上書き保存)してブラウザに表示させる。ブラウザの一番上のタイトルバーの表示が「HomePage 1 自分の名前」に変わることを確認する。

 以上、簡単なHTMLファイルを作成し、ブラウザに表示させた。不等号記号で囲まれたタグ内の文字は大文字でも小文字でもその混合でも構わない。タグはその影響範囲を指定する構造をしている。

 作成したファイルを見ると、<html>はHTMLファイル全体の始まりを意味し、</html>はHTMLファイルの終わりを意味している。
 <html>タグ内は二つの構造に分かれており、一つはヘッダで<head></head>で囲まれ<title>タグを用いてページのタイトルが記述されている。
 もう一つは<body></body>で囲まれる部分でここにページの本文などを入力する。

改行および文字指定
 新しいページのファイルを作成する。新規にファイルを作っても良いが、ここでは "page1.html" を名前をつけて保存する。

ファイル名:page2.html
html3

 ブラウザで "page2.html "を表示させると、本文の表示が適切に改行されないことに注意する。

本校は昭和39年4月に創設された国立の工業高等専門学校である。 創設当初、我が国がおかれていた諸情勢から、「工業立国」の要請に 沿って、優れた技術者を養成しようという意図で発足し、着実に成果 を挙げてきた。39年を経た今日においても、資源に乏しい・・・
 すなわち、ブラウザではファイル上での改行は認識されず、表示したブラウザの大きさに合わせて自動的に文字列の配置がなされている。

 改行したい場所に<br>タグを入れて、再度ブラウザに表示させ、改行がなされたことを確認する。このタグは範囲指定を伴わないこと(終了タグがない)に注意すること。

 <br>タグの代わりに<p>タグを挿入してブラウザに表示させること。改行の後、1行空白行を作ることに注意する。

 次に文字の大きさを変えてみる。ファイル "page2.html" を以下のように修正する。
html4

 ブラウザでファイルを表示させ文字の大きさが変わっていることを確認すること。<h★>〜</h★>に入る★の数値は1〜6までである。<h1>タグによる文字指定が一番大きく<h6>タグによる文字指定が一番小さい。また、<h★>タグで囲んだ場合、必ず改行されることに注意せよ。これらのタグは見出しに用いられる。

本校は昭和39年4月に創設された国立の工業高等専門学校である。

創設当初、我が国がおかれていた諸情勢から、「工業立国」の要請に

沿って、優れた技術者を養成しようという意図で発足し、着実に成果

を挙げてきた。39年を経た今日においても、資源に乏しい・・・


 この他に<pre>タグ(整形済みで表示)がある。<pre>タグも使ってその効果を確認すること。

  書式:<pre> 〜 </pre>
半角の空白やタブ、改行などをそのまま表示させたい場合は<pre> 〜 </pre>タグを用いる。改行するたびに<br>タグを入れる必要が無いなど書くときには簡単であるが、本来HTML文章はブラウザが自動的に整形して表示するという目的からはずれ、文字数が多い行などは自動折り返しされない。このため、ブラウザのウインドウを横幅いっぱいに広げないと一部が隠れてしまう。
テキストや背景に色をつける
 ファイル "page2.html" を使って、色の指定をしてみる。

 <body>タグ内でページの背景色やテキストの色を指定する。色指定の" "の中は「#☆☆☆☆☆☆」に16進数(0から9、a〜f)を指定するか、色の名前を入力する。

 ・書式1:背景色  <body bgcolor="#ffffff"> 〜 </body>
 ・書式2:文字色  <body text="#ffffff"> 〜 </body>
 ・書式3:複数指定(半角空白で区切る)  <body bgcolor="#ffffff" text="#ffffff"> 〜 </body>

色指定の書式(16進数):#RRGGBB  R(赤)、G(緑)、B(青)の3原色を2桁の16進数で表現

 HTML4.01で定義されている基本16色は次の通り。
red #ff0000navy #000080green #008000black #000000
fuchsia #ff00ffblue #0000fflime #00ff00gray #808080
purple #800080aqua #00ffffolive #808000silver #c0c0c0
maroon #800000teal #008080yellow #ffff00white #ffffff

【 例 】
<body bgcolor="#ffff00"> 〜 </body> (これは背景色が黄色になる)
<body bgcolor="yellow"> 〜 </body> (これも背景色が黄色になる)
<body bgcolor="yellow" text="#0000ff"> 〜 </body> (背景が黄色で文字が青色)

【参考】

  1. ページ全部の文字の色以外に、ある特定の範囲の文字色を変えたい場合は<font>を使う。
     <font color="red"> 〜 </font> (タグで挟んだ文字が赤色になる)

  2. 色を指定する場合、適当な16進数を指定するのではなく、この色を使用した方がよいとされる色がある。これはWebセーフカラー(216色)と呼ばれる。Webセーフカラーを選ぶと、コンピュータ環境の違いによる色の見え方の差異が小さい。RGBそれぞれに00、33、66、99、cc、ffを組み合わせた値になっている。
    Webセーフカラーはこちら

[もどる]