| おたすけＨＴＭＬ入門 |
 |
1999/09/05(日)
第２回「ＨＴＭＬに初挑戦」
今回から、サンプルを入れながら説明を行っていきます。サンプルは、新規
ファイルを作成して、Windowsの「コピー&貼り付け」機能を使い、サンプ
ルファイル名で保存してお使い下さい。尚、機会があれば、知っていると役立
つ Windows 機能を説明しているホームページ等も紹介いたします。
■HTMLファイル作成にはテキストエディターを使う
HTMLを作成するのにエディターを使います。もちろんワープロでもつくれま
すが、何故エディターを使うかといいますと、
エディター：文書編集を目的とする。
ワープロ ：文書編集以外に、図表の作成、文字の装飾など色々な機能がある。
つまり、HTMLソース作成にはワープロよりエディタが適しているからです。
一般的に、プログラムのソースファイル編集に使われています。
さらに、メモ帳より秀丸エディタ(シェアウェア)のほうが機能が豊富で使い
勝手がよくお勧めエディターです。そして、雛形となるHTMLファイルを１つ作
っておけば、複数ファイル編集時のコピー機能で作成も容易になります。これ
を機会に秀丸エディタを使ってみてはいかがでしょうか。
もちろん、私も「秀丸エディタ」で作成しています。
[参考]
秀丸エディタ Ver3.01 (代表的なエディター)
ダウンロード
http://www.forest.impress.co.jp/editor.html#hidemaru
作者のページ
http://hidemaru.xaxon.co.jp/
■作成したHTMLファイルを入れるフォルダとファイル名
エクスプローラでフォルダ構成を見ると、色々なフォルダがあります。何故、
色々なフォルダが沢山あるかといいますと、
色々なプログラムやデータファイルが同一フォルダにあると、探すにも大変で
すし、同一ファイル名をつけてしまう危険性があります。それをフォルダ単位
に分ければ、上記問題がすべて解決するからです。
私たちが各データファイルを整理する場合もこのような考え方で、最初から管
理していくことをお薦めします。
フォルダ構成例
~~~~~~~~~~~~~~
・アプリケーション関連
c:\Program Files\a\ Aプログラム
c:\Program Files\b\ Bプログラム
c:\Program Files\c\ Cプログラム
c:\Temp\ 一時的にファイルを格納
・自分で作ったデータファイル関連
c:\work\photo\ 写真画像ファイル
c:\work\taro\ 一太郎ファイル
c:\work\word\ ワードファイル
c:\work\url\ ホームページ関連ファイル
c:\work\url\a\ Aメニュー関連ホームページファイル
c:\work\url\b\ Bメニュー関連ホームページファイル
c:\work\url\c\ Cメニュー関連ホームページファイル
c:\work\url\d\ Dメニュー関連ホームページファイル
[注意事項]
ホームページ専用フォルダ・メニューごとの階層フォルダは、意味のわかる
フォルダ名にしましょう。
HTML画像ファイルのファイル名も意味のわかるネーミングにしましょう。
ファイル名
~~~~~~~~~~
HTML ファイルの名前は、 ***.htm **.html とします。
htm や html はファイル拡張子と呼ばれ、HTMLのファイルであることを意味
します。
ホームページ関連の、フォルダ・ファイル名は、すべて小文字のアルファベッ
トで統一して下さい。大文字・小文字の違いだけで、せっかくプロバイダーの
Webサーバにアップロードしても表示されない。というトラブルの原因にもな
ります。
■HTMLの基本型
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>
・< > 〜 </ > が基本。これをタグといいます。
・< > だけで意味を成すものもあります。
・<タグA><タグB> 〜 </タグB></タグA> タグA に タグB を入れ
る。このようなタグの組み合わせも可能です。
・タグは、半角の小文字・大文字どちらでもかまいませんが、どちらかに統一
しましょう。
[タグの説明]
・<HTML> 〜 </HTML> HTMLの基本
・<HEAD> 〜 </HEAD> ヘッダ部
・<TITLE>タイトル</TITLE> ブラウザの左上に表示される。ブッ
クマークした時のタイトルとなる。
・<BODY> 〜 </BODY> 本文をこの間に入れる。
BODY 文で、文字の色、バックの色などが指定できる。
色は RGB 赤緑青の３原色の組み合わせになる。
色の使い方だけで、同じページでも見え方が異る。
指定しない場合は、ディフォルトの値(色)となる。
XX XX XX
~~ ~~ ~~
R G B XXは 00 から FF までの16進の値(256通り)を用います。いろん
な色が作れます。
つまり、 256×256×256 色となります。
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" > 〜 </BODY>
~~~~~~ ~~~~~~
バックの色(白) 文字の色(黒)
タグによっては、上記のような属性を持たせられるものもあります。
[参考]
赤 #FF0000 緑 #00FF00 青 #0000FF
紫 #FF00FF 水色 #00FFFF 黄色 #FFFF00
グレー #AAAAAA オレンジ #FF5500
そして、自分でオリジナルの色を決めようとする際、いちいち値を変えて表
示確認してみる、という作業をやっていると大変です。
そんな時は、ホームページ作成支援ツールを使うと便利です。
URL紹介 HTML色設定 v2.1 (フリーソフト)
http://member.nifty.ne.jp/sugit/bg/
HTMLのBODYタグで指定する背景や文字などの色を簡単に設定するソフト。
■サンプル1 第２回 HTML入門 を表示させてみる。
ファイル名:smp1.html
<HTML>
<HEAD>
<TITLE>サンプル１</TITLE>
</HEAD>
<BODY>
第２回 HTML入門
</BODY>
</HTML>
■サンプル2 複数行を画面の中央に出してみる。
ファイル名：smp2.html
<HTML>
<HEAD>
<TITLE>サンプル２</TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF" TEXT="#000000">
<CENTER>
第１回 いかがでしたか。<BR>
<B>今回から、</B><BR>
本格的に勉強していきます。
どうぞ、よろしく。<BR>
</CENTER>
</BODY>
</HTML>
[タグの説明]
・ 改行には<BR>が必要となります。
・<CENTER> 〜 </CENTER> 画面中央に表示されます。
・<B> 〜 </B> 太字
■サンプルを実際に表示させてみよう。
ブラウザの主流は、
インターネットエクスプローラ IE5.0
ネットスケープコミュニケーター NC4.6
があり、無償で提供されています。パソコン雑誌の付録や、ダウンロードサ
イトから取得しましょう。バージョンアップが随時ありますので、必要に応じ、
最新版にしておくことをお勧めします。
ブラウザによって、表示も若干異なります。その違いにも注意しましょう。
smp1.html smp2.html ファイルを作ってみてください。
表示させるには、エクスプローラ上で smp1.html をダブルクリックする。
もしくは、ブラウザを起動し、
「ファイル」->「開く」でsmp1.html を選ぶ。smp2.html も同様です。
サンプル２は下記のように表示されました。
３行目は、ソース上で改行しても、表示は改行されません。
第１回 いかがでしたか。
今回から、
本格的に勉強していきます。どうぞ、よろしく。
１行のサイズが異なると、行揃えができません。
別タグと組み合わせると画面の中央で、さらに行揃えもできます。(別の回で説明)
そして、ブラウザ(IE or NC)のメニューの 表示 -> ソースを選んで下さ
い。ここに表示されているのは、実際に打ち込んだタグそのものです。
このように、HTMLソースを見ることができるので、HTMLをある程度理解できる
ようになり、興味あるテクニックを使っているホームページを見かけた際には、
是非そのソースを覗いて見て下さい。上達の早道かもしれません。
■次回
第３回「デジタルカメラの画像を表示させよう」
画像・文章を入れたものを作り、パソコン上で表示させて見る。
