未来への広場　生活応援ホームページ

HTMLを使う

ホームページを実際に作ってみよう
ホームページとHTMLの関係
ホームページはHTMLという言語で記述することは先の章で簡単に触れた。HTMLとはHyper Text Markup Languageの略で、ページとページを結ぶ仕組みであるHyper Textと、文章やページの構造化を意味するMarkup Languageを合成したものである。HTMLには文字や画像などの大きさや位置、形、書体などの情報が記述されていて、その情報を受け取ったブラウザは指定通りのレイアウトでページを表示する。HTMLはW3C(WWWコンソーシアム)という国際組織によって決められた、国際的な規格ですので、その企画に沿った手順でHTMLを記述すれば、それを表示するブラウザが同じくW3Cの規格に沿って作られたものであればどのコンピュータでも同じように表示されるのである。
作業するための下準備をする
作業するフォルダを作る
それでは共通作業をするためのフォルダを作成しよう。インターネット上もホームページを作る際にはまず、手元で作業をするフォルダを作成して、そこでHTMLファイルや画像ファイルなどをまとめ、これらのファイルをサーバーのディレクトリにコピー（アップロード）することでホームページ登録が完了するのである。この章ではアップロードをせずにそのまま自分のパソコンの中だけでできあがったホームページを見ながら、少しずつ「味付け」をしていく。早速新しい作業をするための新しいフォルダを作っていこう。
Windowsの場合は、デスクトップ上でクリックして、［新規作成］→［フォルダ］を選択する。Macintoshの場合には、同じくデスクトップ上で［コマンドキー］＋［N］を押すことによって作成される。そのままだと、まだ名前が初期設定のままなので、ここでは［lesson］という名前を付けよう。（できるだけホームページ作成に関するファイル名、フォルダ名は半角アルファベットで行うのがプロのルールである）。
テキストエディタを使う
テキストエディタというのは、名前の通り、テキストファイルを作成するために作られたアプリケーションソフトである。ワープロなどが持っている、文字などの飾り付け（たとえば、文字を太くする、アンダーラインを引く、文字を大きくする、縦書きにするなど）機能がなく、文字を入力して印刷するだけを目的として作られている。そのなかでもHTMLを書くための機能を付加したテキストエディタや、プログラムを書くための機能を付加したエディタ、メールを書くためのエディタなど、さまざまな付加機能を持ったテキストエディタがある。テキストエディタはテキストだけで記述するHTMLファイルを作成するのにうってつけのアプリケーションでもある。
ここでは、OSに付いてくる「メモ帳(Notepad)」と「SimpleText」を使ってHTMLを記述してみよう。Windowsの場合は「メモ帳」がある。また、Macintoshの場合には[Macintosh HD]の中の[アプリケーションフォルダ]に[SimpleText]が入っている。
HTMLを書いてブラウザに表示させてみる
テキストエディタでHTMLを書いてみる
いよいよHTMLを実際に記述することになる。HTMLの命令はすべて半角のアルファベットで書くというのがルールである。ただしホームページの中で表示する文字には漢字やひらがなを使っても大丈夫だ。そこで、以下の例文をためしに入力してみよう。いろいろとわからない命令があると思うが、詳しい仕組み、使い方、文法などは次の章で解説するので、この場ではそのまま入力してみてほしい。
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞
練習のページ
＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
はじめてホームページを作ってみました
どのように見えるか楽しみです。
＜／ＢＯＤＹ＞
＜／ＢＯＤＹ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
入力したHTMLをファイルとして保存する
たったこれだけの作業で、ホームページの基礎となる文章は完成したが、保存方法に注意が必要だ。ファイル名と拡張子である。保存先は先程作成した「lesson」フォルダに、ファイル名は「test1」、拡張子はもちろん「.html」である。
ブラウザで内容を表示してみる
完成したHTMLファイルを早速、ブラウザで表示してみよう。
まずはInternet Explorerを起動してみてほしい。Internet Explorerを起動したら、[ファイル]→[開く]で先程作った「lesson」フォルダ内の「test.html」を指定しよう。
選択すると記述したHTMLファイルをブラウザが解析して、ブラウザによる表示が行われる。
はじめてホームページを作ってみました。
どのように見えるか楽しみです。
↑ブラウザでの表示画面
ブラウザで表示する内容を変更してみる
これだけの作業で、HTMLの作成はできるのである。ここでお気づきになった方もいると思うが、”＜＞”でくくられた部分以外の文字がブラウザの画面上に表示されたのだ。
この”＜＞”でくくられた部分を「タグ」といい、レイアウトなどの命令文等になる。つまりその「タグ」以外の文字を書き換えてHTMLを書けば表示する文字を変えられるのである。
それでは例文をここに示すので、例文を参考にして自己紹介のHTMLを書いてみよう。
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞
練習のページ
＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
こんにちは、鈴木美保です。＜ＢＲ＞
1080年生まれの大学生です。＜ＢＲ＞
東京生まれの東京育ち。江戸っ子です。＜ＢＲ＞
今、ホームページデザインの勉強をしています。＜ＢＲ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
↑内容変更した例文
上記の画面の通りに記述したファイルをブラウザで見てみると次のように表示されるはずだ。
こんにちは、鈴木美保です。
1980年生まれの大学生です。
東京生まれの東京育ち。江戸っ子です。
今、ホームページデザインの勉強をしています。
↑書き換えたHTMLの表示結果
ここで注意しなくてはいけないことは、＜ＢＲ＞というタグである。他のタグには全く手をつけていないが、＜ＢＲ＞だけは追加されている。実はＨＴＭＬの文中で改行してもブラウザの表示の上では改行してくれないのだ。改行するには、改行したい場所に＜ＢＲ＞というタブを入れる必要がある。もし＜ＢＲ＞タグを入れないＨＴＭＬを書いたらどうなるだろうか。次に示してみるので、先の画面と併せて参考にしてみてほしい。
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞
練習ページ
＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
こんにちは。鈴木美保です。
1980年生まれの大学生です。
東京生まれの東京育ち。江戸っ子です。
今、ホームページデザインの勉強をしています。
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
↑＜ＢＲ＞を入れないHTMLファイルを作成する
こんにちは。鈴木美保です、1980年生まれの大学生です。東京生まれの東京育ちです。今、ホームページデザインの勉強をしています。
↑＜ＢＲ＞を入れなかった場合の表示結果
このように文章と文章がくっついてしまう。行の最後ではきちんと改行してあるのだが、＜ＢＲ＞タグがないとくっついてしまうのである。以上をふまえて、簡単な自己紹介のページを作成してみることだ。うまくいかなかった場合には、何度もトライしてみよう。
前回の学習ページへ戻る
最初の学習ページへ戻る

ジャンル別一覧