|
| |||
| ホームページ作成の部屋−簡単なWebページを作ってみる | |||
| |||
| 1． すごく簡単なWebページを作る | |||
| Webページは HTML で記述します。最初に HTML や，その中で使われるタグについて学ぶというのも一つの道ですが，ここでは実際に Webページ を作りながら解説していくことにします。 それではまず非常に簡単な Webページ を作ってみましょう。 | |||
| (1) | いつも使用しているテキストエディタを起動します。 | ||
| |||
| (2) | 次の「練習−1」の内容を入力してください。 ・日本語以外の部分は必ず半角文字にしてください。 ・もちろん内容をコピペしてもよいです。 | ||
| |||
| 練習−1 | |||
| |||
| (2) | 入力し終わったら次のようにしてセーブ（保存）します。 ・エディタのツールバーから「保存」を選択してください。 ・適当なフォルダ（ディレクトリ）を作ってください。たとえば c:\data\html ・ファイルの種類は 「HTML形式」 「すべてのファイル」 「テキストファイル」 「テキストドキュメント」 「テキストドキュメント MS-DOS形式」 から選んでください。 ・ファイル名は半角英数字＆記号を使用して，たとえば web-001.htm というよう付けます。 ・拡張子は .html または .htm とします。 ・ファイル名の大文字と小文字は別の文字となります。小文字にするのが一般的です。 ・［保存］ボタンを押してください。 | ||
| |||
| (3) | 作ったファイルをファイラに表示させ，ダブルクリックしてください。 ・インターネット・ブラウザが起動して，画面上に | ||
| |||
|
と表示されるはずです。またタイトルバーには 「ホームページ作成練習１」 が表示されていることを確認してください。 | |||
| 解説 | |||
| 「練習−1」のソースを見てください。そこには < と > に囲まれた文字と，囲まれていない文字があることに気が付くと思います。< から >までをタグと言って，これが HTML文書を特徴づけています。タグはWebページをコントロールする働きを持っているのです。 「練習−1」に登場するタグは，開始タグと終了タグ（閉じタグ）が一対一に対応しています。たとえば <html> は開始タグで，</html> は終了タグで，終了タグ内の文字の先頭には / （スラッシュ）が付いています。開始タグから終了タグまでは，ひとつのブロックを形成していて，これを要素（element）と言います。（参考⇒タグの構造と名称） それでは，ここで用いられている 4 種類のタグについて説明しましょう。 | |||
| (1) | <html> <html> と </html> に囲まれた部分がHTML文書であることをブラウザに知らせる働きをします。 | ||
| (2) | <head> <head> と </headl> に囲まれた部分がヘッダであることを表します。ヘッダにはWebページ全体に関する情報を書きます。 | ||
| (3) | <title> <title> と </title> に囲まれた部分がWebページのタイトルであることを表します。タイトルはブラウザのタイトルバーに表示されるとともに，お気に入り や ブックマークに登録したときのWebページのタイトルにもなります。 | ||
| (4) | <body> <body> と </body> に囲まれた範囲が，実際にブラウザに表示されるところです。 | ||
| 以上 4 種類のタグは，どんなWebページを作るときにも必ず用いられます。 | |||
| 2． 少し実用的なWebページを作る | |||
| テキストエディタを起動して，次の「練習−2」を入力してください。入力したら適当な名前を付けて（たとえば web-002.htm とします。日本字は使用しないようにしてください。拡張子は .html または .htm とします）セーブし，ブラウザで見てください。 dscn2881.jpg と dscn3629.jpgという画像ファイルは，次のようにして取得できます。 | |||
| 上の「画像ファイル名をクリック」→「ブラウザ上に表示された画像の上でマウスの右ボタンをクリック」→「画像を名前を付けて保存」→「練習−2」の文書と同じフォルダに保存する。 | |||
| 練習−2 | |||
| |||
| 「練習−2」をブラウザの新しいウィンドウに表示させる | |||
| 解説 | |||
| 新しく登場したタグや，練習−1 にはなかった機能について説明します。 | |||
| (1) | <body bgcolor="#ffffcc"> bgcolorは背景の色を指定する属性です。bodyは要素名といいます。 "#ffffcc" は色を表す属性の値です。このように色は，#に続いて赤・緑・青の順に2桁の16進数で指定します。最大は FF で最小は 00 です。ここで使用している ffffcc は赤と緑が強く，青が少し弱いので，淡い黄色になります。 参考⇒♪色見本（カラーチャート） 値は "1234" または '1234' というように引用符で囲ってください。 （ただし値にアルファベット・数字・ハイフン・ピリオド以外が含まれていないときは，囲わなくてもエラーにはなりません。） 要素名や属性や値は大文字でも小文字でもかまいません。 （「ホームページ作成の部屋」では要素名，属性，値を小文字で表記するようにしました。） | ||
| (2) | <center> 文章や画像を画面左右の中央に表示させるためのタグです。 デフォルトでは画面左側から詰めて表示します。ですからこのタグが終了した後にある文章は画面の左側から始まっています。 | ||
| (3) | <h1>と<h3> このタグは見出しを書くときに使用します。文字は太字で表示されます。<H1>から<H6>までの6種類があって，数字が小さいほど大きな文字になります。 | ||
| (4) | <font> 文字の大きさや色などを指定します。color は色を指定する属性です。 | ||
| (5) | <img> 画像を表示させるタグです。このタグには終了タグがありません。ほとんどの場合 <img src=> というように src を伴います。src の値は画像のファイル名とします。とりあえず画像ファイルは HTML ファイルと同じフォルダに入れておいてください。 width と height は，それぞれ画像の幅と高さで，値はピクセルまたはウィンドウの大きさに対する割合で示します。割合のときは 50% というようにパーセント記号を付けます。 alt は画像の代わりになる言葉を指定する属性です。画像が表示できないWebブラウザや画像の表示を OFF にしているブラウザのために，言葉を書いておくことになっています。画像をロードしている間や，画像をロードできなかったときにも，指定した言葉が表示されます。 画像にマウスカーソルを乗せると，altで指定した言葉がツールチップに現れます。 | ||
| (6) | <p> 段落を設定します。具体的には，前の段落との間に 1 行分の空白ができます。 | ||
| (7) | <b> 太字（ボールド）で表示させるタグです。 | ||
| (8) | <br> 改行させるタグです。HTML文書で文章を改行させても，ブラウザ上では改行しないので，このタグが必要になります。このタグにも終了タグがありません HTML文書では，「…初咲きが，」のところで改行し，さらに2行分の空白がありますが，ブラウザ上では「…初咲きが，」と「今年は…」が続いていることがわかります。 | ||
| (9) | <i> 斜体（イタリック）で表示させるタグです。 | ||
| (10) | <a name="xrose"> リンク関係のタグです。説明は次の「3． リンクについて学ぶためのページを作る」という節にあります。 | ||
| 半角スペースについて | |||
| HTML文書を見ると，「<p>一昨年は…」から「…です。</i></p>」の段落の部分は，だいぶ右に寄っています。前の方に 6 つも半角スペースが入っているためです。ところがブラウザ上の画面を見ると，半角スペースの影響がほとんどないこと分かります。 HTML文書の「今月は4月14日でした。」のところを見てください。「は」と「4」の間に半角スペースが入っていますが，ブラウザ上の画面でもスペースが入っていることがわかります。しかし「月」と「1」の間には半角スペースが 8 個も入れてあるにもかかわらず，ブラウザ上では 1 つ分のスペースが入っているだけです。 HTML文書における半角スペースの扱われ方は次のようになっています。 | |||
| (1) | 行の先頭からタグまでにある半角スペースは無視されます。 | ||
| (2) | 半角スペースは，何個続いていても 1 つとして扱われます。 | ||
| 複雑な構造のHTML文書を作るときに，このことを利用してインデントを付けると，見やすくなります。 | |||
| 3． リンクについて学ぶためのページを作る | |||
| テキストエディタを起動して，次の「練習−3」を入力してください。入力したら適当な名前を付けて（たとえば web-003.htm）セーブし，ブラウザで見てください。 次の3つの画像ファイル
| |||
| 練習−3 | |||
| |||
| 次の「練習−3」をブラウザに表示させるをクリックすると，できあがったWebページが表示されます。 | |||
| 「練習−3」をブラウザに表示させる | |||
| 裏技 | |||
| Webページ「練習−2」と「練習−3」のソースファイルは，コピペなどよりもずっと簡単に得られます。ここでその方法をお教えします。 たとえば「練習−3」のソースファイルは，次のようにして得られます。 | |||
| (1) | すぐ上の「練習−3」をブラウザに表示させるをクリックします。ブラウザに「リンクの練習」のページが表示されます。 | ||
| (2) | ブラウザのメニューバーから［表示］を選んで［ソース］をクリックします。そうするとブラウザに登録されているテキストエディタが起動して，ソースが表示されます。 （NN の場合はソース表示専用のウィンドウが開きます） | ||
| (3) | エディタのメニューバーから［ファイル］を選んで［名前を付けて保存］をクリックします。 | ||
| (4) | 保存するフォルダを選択します。たとえば c:\data\html を選びます。 | ||
| (5) | ファイル名は web-003.htm とし，「ファイルの種類」を「すべてのファイル」としてから［保存］ボタンを押します。 | ||
| (6) | 正しく保存できているかどうかをファイラで調べます。 | ||
| (2)〜(3) は別の方法もあります。メニューバーから［ファイル］→［名前を付けて保存］とします。ソースの内容は後で見ることになりますが，この方法の方が簡単ですし，全ての文字コードに対して有効です。IE で (2)〜(3) のようにソースを表示させて取得しますと，Shift JIS という文字コードで書かれたWebページ以外は文字化けしてしまいます。 | |||
| |||
| 解説 | |||
| (1) | <a href="★">■</a> リンクアンカーの設定をします。★はジャンプ先のURL，■はテキストや画像です。 ジャンプ先の URL が HTMLファイルと同じフォルダにある場合はファイル名だけにします。 | ||
注意
| |||
| (2) | target ジャンプ先のURLを表示するためのウィンドウを指定するための属性です。_blankは新しいウィンドウを開いて，そこに表示させるための変数です。tergetが省略されている場合は，今まで表示されていたWebページに代わって，ジャンプ先 URL のWebページが表示されます。 | ||
| (3) | <a href="★#☆"> Webページの特定の場所にジャンプさせるときは，#に続いて場所の名前☆を記入します。場所の名前の付け方は，(5)で説明します。 | ||
| (4) | <a href="#☆"> 同じWebページ内の特定の場所にジャンプさせる場合には#に続いて場所の名前☆だけを記入します。場所の名前の付け方は，(5)で説明します。 | ||
| (5) | <a name="☆"> Webページの特定の位置に場所の名前を付けます。 | ||
| (6) | <blockquote> 引用文を書くときに使います。<blockquote>と</blockquote>に挟まれた文書等はインデントされ，上下にも1行分の空間が空きます。 メモ ： 「練習−3」では<blockquote>タグを，タグ本来の使用目的では使っていません。 | ||
|
「ホームページ作成の部屋」メニュー | |||
