HTML・初歩の初歩 SVCの広場へ


HTML・初歩の初歩 (基礎編)


 
はじめに
 
HTMLは本来ホームページ(HP)を作るためのプログラム言語です。
でもHPを 作ろうという人は本を読むとか学校へ行くとかちゃんと勉強してる
でしょうから、ここでは
写真などを整理して、インタラクティブなアルバムを作る
…という 用途に限定して、HTMLの話を進めたいと思います。
 
で、まずはそこに行く前に基礎編です。
では具体的な話に移りましょう。あ、えっと~ここに書いてることは IE5でしか
確認してません。 また、使用しているPCはWindowsです。よろしく。

HTMLの仕組みは簡単
 
HTMLは Hyper Text Markup Language の略で、 「<>」で挟んだ記号で
記述します。HTMLを記述するには 「メモ帳」(Windowsのアクセサリーの中にある)
などのテキスト・ エディターを使います。
「<>」で挟んだ記号はタグと呼ばれます。タグはすべて 半角英数字で書きます。(←重要!)
 
あ、ここでは便宜上、タグを赤で表示しますが、 赤で記述せよ、っていう意味じゃないからね!
 
タグは普通、<○○></○○>の2つ1組で使用し、この 2つのタグの間に
挟まれた文字(テキスト)に対して働きます。例えば <u></u>を使用すると、
間に挟まれた文字に アンダーラインが引かれます。
 
練習してみませう
 
では、チョット練習してみましょう。まずは上記の「メモ帳」を 「プログラム」の
中から探し出しましょう。これは今後しょっちゅう使う ものだから、デスクトップ
にショートカットを作成しちゃいましょう。 「メモ帳」のアイコンを右ドラッグして
デスクトップ上でドロップ。 メニューの中から「ここにコピー」を選択します。
 
で、作成されたショートカットアイコンをダブルクリックして「メモ帳」 を
立ち上げたら、次のように書いてください。
 
<u>アンダーライン</u>
 
次に「ファイル」-「名前 を付けて保存」と開き、.htmという拡張子を付けて
保存して下さい。 ここでは kasen.htm と言う名前で保存することにします。
 
つぎにブラウザ(IE4)を立ち上げ「ファイル」-「開く」-「参照」 と
開いて「kasen.htm」を読み込みます。
(ブラウザを立ち上げないで、 保存したフォルダを開き「kasen.htm」の
アイコンをダブルクリックしても良い)。
すると、ブラウザ上では アンダーライン と表示されているハズです。
 
 
 タグによる指定           ブラウザの表示
 
 <u>アンダーライン</u>       アンダーライン
 
文字修飾をする
 
文字修飾のタグはたくさんありますが、あまり使いそうにないものは
省略して次の4種類だけ書いておきます。
 
<b></b>で文字をはさむ……太字
<i></i>で文字をはさむ……斜体
<u></u>文字をはさむ……アンダーライン
<s></s>で文字をはさむ……抹消ライン(単線)

らくがき帳を読みやすく…改行

長い文章を書くと読みにくいことが多いですね。
これは、行間が詰 まっているためです。行間を自由に調整することは
出来ないので、読みやすくするためには3~4行ごとに改行して
1行アキにしましょう。
 
この時に使うタグが<p>。また、1行アキではなく単なる改行なら <br>。

タグによる指定              ブラウザの表示
 
1行アキにしたい時<p>はこのタグを使う。   1行アキにしたい時
 
                       はこのタグを使う。
 
1行アキにしない時<br>はこのタグを使う。   1行アキにしない時
                        はこのタグを使う。
 
上にタグは2つ1組で使うと書きましたが、このように例外もあって、
後ろの</○○>が不要なものが いくつかあります。
 

文字に色をつける

文字に着色 したいときは、
その文字を<font color= "**"></font>で挟んで指定します。
 
色の指定は、red, blue, green, pink 等のカラーネームで指定するか、
又は、RRGGBB値を16進数で示したものを使います。
16進コードとの 対応表はHTML関係の本には大抵載ってますが、
わざわざ本を買うのも なんですから、カラーネームで指定しましょう。
 
タグによる指定                 ブラウザの表示
<font color="purple"> 色は匂えど散りぬるを </font>    色は匂えど散りぬるを
<font color="#a020f0"> 色は匂えど散りぬるを </font>    色は匂えど散りぬるを
<font color="blue"> 色は匂えど散りぬるを </font>      色は匂えど散りぬるを
<font color="lime"> 色は匂えど散りぬるを </font>      色は匂えど散りぬるを
<font color="red"> 色は匂えど散りぬるを </font>       色は匂えど散りぬるを
 
darkblueとかgreenyellowとか、思い付いた色を試しに打ち込んで見ると
なかなか楽しいですよ。
 
文字の大きさを変える

文字の大きさを変えたい時はその文字を<font size="○"></font>挟んで指定します。
○は1~7。(整数のみ。3.5とか7/3とかはダメよ!)サイズを指定しなければ
自動的に「サイズ=3」となります。
 
タグによる指定                ブラウザの表示
<font size="6"> 大きさ </font>           大きさ
<font size="2"> 大きさ </font>           大きさ
 
文字の色と大きさを同時に変える
 
文字の色と大きさを同時に変えたい時の指定は
<font color="*"size="○"></font>で挟んで指定します。 (colorとsizeの順番は逆でも良い)。
 
タグによる指定                ブラウザの表示
<font color="orange"size="7"> 色・大 </font>   色・大
<font size="1"color="black"> 大・色 </font>    大・色

 
画像を貼り付ける
 
画像を貼り付けるには<img src="XXX"> を使います。imgとsrcの間は
半角アキです。 XXXは画像のファイル名。
 

タグによる指定     ブラウザの表示

<img src="svc.gif">          

 
ご注意!
 
さて、タグを付けて文字を加工するのが面白いからって、やりすぎは禁物です。
メッセージを読みやすく、分かりやすくするためのものですから、
ゴチャゴチャして見にくくなったのではイミがありません。
 
ビデオ撮影でも、初心者ほど、やたらズームやパンを使いがち。
ベテランは ここぞ、というところでしか使いません。

……え~、「インタラク ティブなアルバムを作る」というのは
おあとのお楽しみ、ということで。

 
次回につづく!