ホームページの作成 1
使用するソフトウェアは、Webページを作成する「テキストエディタ」と作成したWebページを閲覧する「ブラウザ」、作成したWebページを公開できるコンピュータ(サーバという)に送る「FTP」の3つである。
ホームページはHTMLという一種のプログラム言語で作成されている。このHTMLファイルを作成するテキストエディタとしては何を使用してもよいが、見やすい色分け表示機能があるフリーの優れたエディタ(例えば「Notepad++」や「サクラエディタ」など)を使うことを勧める。
始めに、これからWebページに必要なファイルを作成していくが、作成したファイルを保存する作業フォルダを決める。
「u:ドライブ」の下に"u:\homepage"というフォルダを新規に作成する(作成したファイルはここに保存すること)。
入力したらファイルに"page1.html"と名前を付けて保存する。ファイル名には半角英数字や 「-(ハイフン)」、「_(アンダースコア)」のみ使用し、できるだけ小文字を使用する(ここでは小文字を使うこと)。また、拡張子は ".html" とする。
テキストエディタによっては、タグが色分けされて表示されて見やすくなっている。
ブラウザのウィンドウに "page1.html" の内容が表示されることを確認する。
以上、簡単なHTMLファイルを作成し、ブラウザに表示させた。不等号記号で囲まれたタグ内の文字は大文字でも小文字でもその混合でも構わない。タグはその影響範囲を指定する構造をしている。
作成したファイルを見ると、<html>はHTMLファイル全体の始まりを意味し、</html>はHTMLファイルの終わりを意味している。
<html>タグ内は二つの構造に分かれており、一つはヘッダで<head>〜</head>で囲まれ<title>タグを用いてページのタイトルが記述されている。
もう一つは<body>〜</body>で囲まれる部分でここにページの本文などを入力する。
ファイル名:page2.html
ブラウザで "page2.html "を表示させると、本文の表示が適切に改行されないことに注意する。
改行したい場所に<br>タグを入れて、再度ブラウザに表示させ、改行がなされたことを確認する。このタグは範囲指定を伴わないこと(終了タグがない)に注意すること。
<br>タグの代わりに<p>タグを挿入してブラウザに表示させること。改行の後、1行空白行を作ることに注意する。
次に文字の大きさを変えてみる。ファイル "page2.html" を以下のように修正する。
ブラウザでファイルを表示させ文字の大きさが変わっていることを確認すること。<h★>〜</h★>に入る★の数値は1〜6までである。<h1>タグによる文字指定が一番大きく<h6>タグによる文字指定が一番小さい。また、<h★>タグで囲んだ場合、必ず改行されることに注意せよ。これらのタグは見出しに用いられる。
半角の空白やタブ、改行などをそのまま表示させたい場合は<pre> 〜 </pre>タグを用いる。改行するたびに<br>タグを入れる必要が無いなど書くときには簡単であるが、本来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 #ff0000 | navy #000080 | green #008000 | black #000000 | fuchsia #ff00ff | blue #0000ff | lime #00ff00 | gray #808080 | purple #800080 | aqua #00ffff | olive #808000 | silver #c0c0c0 | maroon #800000 | teal #008080 | yellow #ffff00 | white #ffffff |
【 例 】
<body bgcolor="#ffff00"> 〜 </body> (これは背景色が黄色になる)
<body bgcolor="yellow"> 〜 </body> (これも背景色が黄色になる)
<body bgcolor="yellow" text="#0000ff"> 〜 </body> (背景が黄色で文字が青色)
【参考】