インターネットを見た時に普通に表示されてるサイトを Web サイト(ウェブサイト)と言います。 日本ではホームページと言う言葉も同じ意味で使ってます。 また、インターネットエクスプローラーなどの Web サイトを表示するためのソフトウェアを Web ブラウザと言います。
適当なサイトを開いてブラウザのメニューから ([表示]→[ソース]) とクリックしてみると < > の括弧にはさまれた英語の文字がたくさんあるのが分かると思います。 このような文を HTML (HyperText Markup Language) と言います。
Web サイトを作るにはこのような HTML で書かれたファイルを作る必要があるのですが、最近では主に次の4つくらいの方法で作られてます。
ブラウザソフトとテキストエディタソフトを準備して下さい。
HTML では文章のいろいろな位置にマーク(標識、印)をつけることによって文章の構造や文字飾りなどを表現しています。< > の中にマークを書いたものをタグと言います。
<abc>ほげほげ</abc>
<cba>
<xyz xxx="…">げほげほ</xyz>次の2つはよく失敗する原因になるのでしっかり押さえておいて下さい。
ある部分に2種類のマークを適用させたいときはタグを入れ子 (nest) にします。
次の例では「ふむふむ」の部分に xyz と abc が適用されます。 「ほげほげ」の部分と「なになに」の部分には abc だけが適用されます。 同じマークのタグで囲まれた部分を一つの塊のように見れば間違わないと思います。
<abc>ほげほげ<xyz>ふむふむ</xyz>なになに</abc>次の例は間違った例です。 「ふむふむ」の部分の前タグが <xyz> に、後タグが </abc> になっちゃってます。 前後のタグは同じマークのタグでなくてはなりません。 何種類も入れ子にすると間違えやすいので注意してください。
<abc>ほげほげ<xyz>ふむふむ</abc>なになに</xyz>最も単純な HTML ファイルは次のようになってます。
<html>
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>重要なのは前後のタグが何を挟んでるかなどのマークの構造です。上の例では見やすくなるように適当に改行を入れていますが改行には意味がありません、マークの位置がどこにあるのかが重要です。見ただけでは構造が分かりにくくなるのでお勧めは出来ませんが次のように書いても問題ありません。
<html><head><title>タイトル</title></head><body>本文</body></html>タグの例をいくつか挙げます。良く使うものは自然と覚えていくので、無理に全部覚える必要はありません。とりあえずは一通り目を通してください。その後実際にサイトを作りながらここにある例を見直しましょう。
例を見れば分かると思いますがよく使われるものは元の単語から大きく省略されてます。 そのまま覚えるよりも元の単語と一緒に覚えた方が頭に入りやすいと思います。
ここに上げた以外にも様々なタグがあります。興味のある人は(HTML タグ 入門 リファレンス)などの単語を上手く組み合わせて検索してみて下さい。
余談ですが最近は文章構造は HTML で、文字の飾りやデザインは CSS(Cascading Style Sheets) で行うというやり方が主流になってきています。そのため <b> タグや <i> タグなど文字の装飾タグをそのまま使うよりも、自分で属性をいろいろ定義してもっと柔軟な表示が出来るようになってます。この授業ではやりませんがデザイン方面に興味のある人はその辺も勉強してみて下さい。
<body> タグに bgcolor(バックグラウンドカラー) 属性を与えることでサイト全体の背景色を設定できます。
<body bgcolor="#xxxxxx">
本文
</body>名前がついている色の場合は例えば赤色の場合は <body bgcolor="red"> と色の名前で指定できますがそれ以外の色を使うときは上の例のように書きます。
上の例の "#xxxxxx" の部分はRGBカラーコードの指定です。カラーコードは
いくつか例を示します。
| 白 | #ffffff | |
| 黒 | #000000 | |
| 赤(Red) | #ff0000 | |
| 緑(Green) | #00ff00 | |
| 青(Blue) | #0000ff | |
| 黄 | #ffff00 | |
| 紫 | #ff00ff | |
| 水色 | #00ffff | |
| グレー | #aaaaaa | |
| オレンジ | #ff5500 | |
| 青灰色 | #7777aa | |
| 蛍光黄緑 | #00ff11 |
赤(R)緑(G)青(B)に注目すると左から2文字づつがそれぞれの色に対応してることが分かります。 例えば左の2文字を 00 にすると赤色を全く発色させてない状況になり、 ff にすると赤色を目いっぱい発色させてる状況になります。 他の色も適当に発色させて光の3原色の原理で混ぜ合わせれば様々な色を作ることができます。
ちなみに16進数の 00 は10進数の 0 に、16進数の ff は10進数の 255 に対応するので全部で 256×256×256=16,777,216 色指定できます。
他の色や色の組み合わせをまとめたサイトもあるので検索してみて下さい。 (色見本 カラーチャート RGB 配色サンプル) などのキーワードを組み合わせれば良いと思います。
WEB サイトに画像を使うことによってさらに表現が豊かになります。 発信したい情報を伝えるために上手く活用しましょう。
画像には圧縮方式の違いによって様々な形式のファイルがあります。
良く使われるのは
ファイルの形式は拡張子を見れば分かります。（たまに間違った拡張子をつけている場合があるので注意してください。）
写真などはカメラの設定で JPEG 形式で保存してるものがほとんどです。 また、アクセサリにあるペイントソフトなどを使えば自作の絵を作ることが出来ます。 作成した画像を保存するときにオリジナルのファイルを保存する以外にも、ファイルの形式を自分で選んでサイズが小さく元の画像が崩れないよう圧縮形式をいろいろ試して下さい。
また、他人が作成した素材集などから画像を拝借することもあると思いますが著作権などに気をつけて、素材サイトに書いてある規約などあれば一通り目を通しておいて下さい。
(フリー 無料) などのキーワードを使って著作権フリーな画像を探しているとたまにウィルスなどを仕掛けてあるサイトがあるので、この手のものを探すときは信頼できるサイトからのリンクをたどっていった方が無難です。ポータルサイトのカテゴリなどからたどっていきましょう。
画像は上の(タグの例)で説明したように <img> タグで貼り付けることが出来ます。 他にも background(バックグラウンド) 属性を使って背景にすることも出来ます。 サイト全体の背景に画像を設定するときは次のように <body> タグの backbround 属性で背景画像のファイルを指定します。
<body background="画像ファイル名">
本文
<body>さらに勉強するには本屋さんで入門書を購入するか WEB 上にある入門サイトを参考にするのが良いと思います。 Web作成に関しては入門サイトが沢山あるので (ホームページ 入門 講座 html タグ リファレンス) などの言葉を組み合わせて検索すればよいサイトがすぐに見つかります。 自分のレベルに合ったサイトを見つけて一度じっくり取り組んでみてください。
また他人が作ったサイトも参考になります。 気に入ったページがどのように書かれてるか調べたいときはブラウザメニューの([表示]→[ソース]) で確認してみてください。 ある程度の知識があれば読めるようになって新たなテクニックを吸収することができます。