HTML学習帳(2004年1月5日開始)

初めに・・・ HTML学習帳、このページを作る思いを書いてます。結構長いので、
別ページに移しました。クリックしてみて下さい。

このページ縦長でーす!!m(__)m

青い文字は宮城のコメントです。間違ってるかも知れませんが、ヒントにもなると思います。

1.ホームページというもの

1. ホームページの正体は?
 テキストと呼ばれる文字で出来たデータ。HTMLと呼ばれる命令語を使って作られている。

 フム、中に画像やら音やら入っているわけではないんだ。(知ってたけどー(^_^))

2. HTML(エイチ・ティー・エムエル)は何の略?
 Hyper Text Markup Languageの略。通信用語辞典では「テキストにタグを挿入(マークアップ)することにより, 文章の構造を定義したりハイパーリンクを実現するマークアップ言語」とのこと。

 アハハ、分かりにくい。

3. 文字だけなのに写真とか音とかをのせれるのは何故?
 <  >でくくられたタグと呼ばれる命令語にもとづいて、Internet Explorer などのブラウザが、その命令通りに文字の色やデザインや、別に用意された画像ファイルや音のファイルを表示したり鳴らしたりしている。

 ということは、工場などに例えると製品をいちいち送るんじゃなくて軽くてコンパクトな設計書を送って、それを受け取ったところがそれぞれの場所で製品を組み立てるって感じかな?

4. HTMLの使い方はどこかで誰かが管理している?
 WWWコンソーシアムという団体が世界的にHTMLの管理をしている。

 黒幕はいた・・・。

1月6日、今日はここまで

ホームページを手作りするメリット

1. ホームページ作成ソフトがあるのに何で今さら・・・
 1.ホームページ作成ソフトがいらないので、その分のお金がいらない

 ウーン・・・。「FrontPage Express」 なんてタダだし、これは却下だな!

 2.余計な命令を含まないので、ホームページの容量を小さく、表示を早くできる。

 これも却下!!今までの経験で、ソフトで作っても問題はなし。

 3.HTML作成ソフトに用意されてない機能でも、使うことができる。

 ウンッ!!これは魅力だ。

 4.HTMLの仕組みを理解することで、HTML作成ソフトをさらに使いこなせる。

 これが一番!!プラス3番目を活かせば、楽しめそう(^_^) 

2. HTMLは難しそう。
 HTMLには基本的なルールが3つある。それを押さえれば簡単。その3つとは。

◎テキスト形式でファイルを保存する。
◎タグは半角の英数字で入力する。
◎HTMLのファイルには「.htm」 「.html」の拡張子を付ける。

 それを押さえれば簡単だなんて、チョット?。でも、素直にハーイッ!!(^_^)

3. ソフトに用意されてない高度な技ってどんなのがある?
 文字を波のように動かしたり、光る文字やどんどん大きくなる文字のような動きのあるホームページを作ることが出来る。

 知りたい!!もしかしたら最近の作成ソフトにはあるかも知れないけど、なかなか行き着かないし、ないのかも知れない。勉強続けよう。
 

HTMLを作るのに必要なもの

1. どんなソフトがいるか?
 文字を編集する「テキストエディタ」。ネット上に作ったページを転送する「FTPソフト」。写真やイラストを加工するための「画像処理ソフト」。もちろん、Internet Explorerなどの「ブラウザ」も。

 僕は無料で利用出来る「EmEditor」というのをネットでもらって来ましたー(^_^)

2. なぜWindowsに附属の「メモ帳」を使わないのか?
 メモ帳では開けるHTMLファイルの大きさに制限がある。

 これは知らなかった。それで何やかやの雑誌でエディター、エディターと言ってるわけだ。実に8年目にして知った・・・。

1月7日はここまで

HTMLの基本的なルール

1. HTMLの基本的構成
 HTMLは、次の3つの命令語のまとまりからなる。

@HTMLの先頭に付ける命令部
 その文書がHTMLであることやページのタイトルを示し、パソコンの画面上には表示されない。

A表示される情報を指定する命令部
 この部分がパソコンに表示される。

BHTMLの末尾につける命令部

 この3つの基本構成が整ってHTMLは完結する。

 そろそろ「ラシク」なってきた(^_^)
 

2. 記号の< > / はどう使う?
 タグは、命令の始まりのタグ<  >と終わりのタグ</  >がペアになって役割を果たす。

 ということは、この記号には自然に手がいくようにくせをつけておくか・・・。

3. タグは大文字?小文字?
 どちらでもいい。

 そうなんだー!


さあ、いよいよタグの実習に入ることになりました。
タグに関しては表を作ります。
最終的にはひとつの一覧表にしますが、
学習中は「ぶつ切り」になると思います。

しばらくは、このページで進めます。縦長なページになりそう(-_-;)

基本的なHTMLを入力

タグ 読み方 役割 ワンポイント
<html> </html> エイチ・テイー・エム・エル
スラッシュ エイチ・・・・
HTMLのルールに従ってファイルが作られていることを示す。  
<head> </head> ヘッダ
スラッシュ ヘッダ
HTMLの本文以外の情報を入力する。<html>の後に来る。  
<title> </title> タイトル そのページのタイトル。 ブラウザのタイトルバーに表示される。
<body> </body> ボディ 本文の開始と終了を表す。 この間の内容が、ブラウザのメイン画面に表示される。

1. 入力の後の保存は?
 ホームページの入り口のページは「index.htm.」とする。拡張子は「.htm」でもほとんど問題ない。これは、以前のWindowsでは、ファイル名は8文字、拡張子は3文字というルールがあった、その名残り。

 ウン、拡張子は「.html」を指定しているプロバイダーに「.htm」のファイルを送っても大丈夫だった。

2. 作成したHTMLの確認
 上で保存したファイルをダブルクリックするとブラウザが自動的に起動され、ページを見ることが出来る。

3. そのかわりダブルクリックでエディターで開けなくなったけど・・・。
 .htmlはブラウザに関連付けされているため。ファイルを右クリックして「送る」を利用してエディターで開くとよい。

 僕からも補足ー(^_^)。先にエディターを開いておいて「ファイル」→「開く」というのも手。それとー・・・、こんがらがるからこの程度にしておこう。

1月8日はここまで。

2.文字を表示する


タグ 読み方 役割 ワンポイント
<p> </p> ビー 文章を一つの段落(Paragraph)としてまとめる。 文章のの最後には空白行が挿入され、ひとつのまとまった文章として表示される。
<BR> ビーアール 文字の表示をいったん止めて、次の行の先頭から表示する。 空白行は入らない。
タグを閉じる必要はないので注意。
<P ALIGN> </P> ピーアライン 文章を右寄せ・中央寄せにする。 記述例
<P ALIGN="right">文章</P>
<DIV ALIGN>
</DIV>
ディバイド アライン 文章を右寄せ・中央寄せにする。 空白行が入らない。

1. タグは半角英数字
 大文字小文字はかまわないが、半角でないと通常の文字列として認識される。


2. <BR>タグと<P>タグは同じ役割?
 どちらも文章が改行されるが、<BR>は文章を改行したい時、<P>は一つの段落として文章をまとめたい時使う。

3. 右寄せの時<P>タグを使うと空白行が入るが・・・。
 <DIV>ディバイド というタグを使うと空白は入らない。

4. やってみて・・・
 考え方としては、もともと<P></P>という段落があって、その段落の性格として「右寄せ」だということを段落の始まり宣言である<P>の中に加えるということなんだろうな・・・


1月9日はここまで。


タグ 読み方 役割 ワンポイント
<H1> </H1> エイチ 文字を見出しにして文章を階層化する。  太字になり、設定した文字列の上下に空白行が挿入される。
<B> </B> ビー  文字を太字(Bold)にする。  通常の文字がひとまわり肉厚になる。
<U> </U> ユー  文字に下線をひく。  underの「U」
<I> </I> アイ  文字を斜体にする。  inclineの「I」?
<FONT>
</FONT>
フォント 文章中の一部の文字の色や大きさを変更する。 FONTは印刷用語で活字の型のこと。

4. <H1>タグ、文字を中央にするには。
 <P>タグと同様に、タグの中に「ALIGN=center」の記述を加える。

5. <H1>タグ、字の大きさは変えられる?
 <H1>から<H6>まであり、<H1>が最も大きい。文章の一部だけ文字のサイズを変えたい時は<FONT>タグを使う。

6. 一つの文字列にタグを複数組み合わせことは?
 できる。例として文字を「太字」「斜体」「下線」としての記述例。
<B><I><U>工房GUSUKU</B></I></U>とすると・・・→工房GUSUKU

7. <FONT>の使用例
 <FONT COLOR="red">工房GUSUKU</FONT>→工房GUSUKU
 <FONT SIZE="6">工房GUSUKU</FONT>→工房GUSUKU

8. 文字の大きさはどう決める?
 大きさは「1」から「7」まで。「7」が一番大きい。文字の大きさを指定しない場合は「3」になる。

9. 色と大きさ同時に指定は可能?
 可能。
 <FONT COLOR="red"SIZE="6">工房GUSUKU</FONT>→工房GUSUKU


1月10日はここまで。


タグ 読み方 役割 ワンポイント
<UL> </UL> ユーエル  箇条書きにする文章の範囲を決める。  
<LI> エルアイ  箇条書きの行頭を表す命令。  タグを閉じる必要はない。 
<UL TYPE=""> タイプ  箇条書きの先頭の記号を指定する。  FONTにおけるCOLOR、SIZEのようなもの。
<OL> </OL> オーエル  箇条書きの先頭を数字にする。  先頭の数字は1から順番にふられる。
<DL> </DL> デイーエル 箇条書きを記号の代りに用語で始める際の開始と終了。  
<DT> ディーティー 用語・説明の箇条書きにおける用語の先頭を表す。  <UL>における<LI>にあたる。
<DD> デイーデイー 用語・説明の箇条書きにおける説明の先頭を表す。  
<BODY TEXT=""> テキスト(オプション) ページ全体の文字の色を指定する。  
<BODY bgcolor=""> ビージーカラー(オプション) ページ全体の背景の色を指定する。  

10. <UL>、箇条書きの先頭の記号
 "disk"=黒丸(TYPEを指定しない場合もこれになる)、"square"=四角、"circle"=丸(中抜き)

11. <DL> <DT> <DD>
 ウーン、分かりにくい。

12. 背景色や文字の色、使いたい色の名前は・・・
 いいものがありました。ここをクリックすると見れます。→→色の名前

1月11日はここまで

3.画像を表示する

タグ 読み方 役割 ワンポイント
 <IMG SRC="ファイル名"> イメージ・ソース   ホームページに画像を貼り付ける。   IMGはIMAGE、SRCはSOURCEの略。  
<CENTER> </CENTER>  センター   文字や画像を水平方向のセンターに表示する。   中央に表示したい文字や画像を挿入する命令を挟むような順序で入力。
<DIV ALIGN="right"> </DIV> ディバイド アライン・・・   文章・画像を右側に寄せる。  
<IMG SRC="ファイル名" ALIGN=
"LEFT">
アライン=レフト  画像と同じ高さに、2行以上の文章を配置する。    画像と文字の「まわりこみ」と表現される。画像の右に文字を表示したい時は
leftをrightに。
 <IMG SRC="ファイル名" HEIGHT="高さ" WIDTH="幅">    画像の大きさを指定する。   

1. <IMG>タグ、画像ファイルならなんでも表示できる?
 「GIF」や「JPEG」形式で保存されている画像ファイル。

 そう?BMPも表示出来ました。PNGなどというファイルもあるし。まぁ試して見るべし。

2. <DIV ALIGN="">の右寄せの方法、<RIGHT>とかないもの?
 なかった!!(^_^)

3. 画像の大きさを指定するのは何故?
 画像の大きさを指定すると、通常の貼り付けにくらぺてブラウザで画像を表示するのがはやくなる。

 知りませんでした。ありがとうございますm(__)m

4. 実際の画像の大きさと違う数値を指定するとどうなる?
 入力した数値に合わせて、画像を表示する大きさが拡大・縮小される。これは表示の問題だけで転送されるデータは変わらない。

1月12日はここまで。

タグ 読み方 役割 ワンポイント
<IMG SRC="ファイル名" BORDER="5">  ボーダー  画像のまわりに枠線をつけて表示する。  数値を大きくすると枠線は太くなる。
<IMG SRC="ファイル名" ALIGN="left" HSPACE="50"> エイチスペイス  画像の左右に隙間を空ける。  数値はピクセル数。大きくなるほど隙間が広がる。
<IMG SRC="ファイル名" ALIGN="left" VSPACE="50"> ブイスペイス  画像の上下に隙間を空ける。 同上
<BODY BACKGROUND="画像ファイル名"> バックグラウンド  ページの下地である背景に画像を表示する。  BGCOLORは色、BACKGROUNDは画像。
<HR> エイチアール  ホームページを横長の線で区切る。  Horizontal Ruleの略。
<HR WIDTH="400">    区切り線の長さを指定する。  
<HR SIZE="5">    区切り線の太さを指定する。  
<EMBED SRC="音楽ファイル名 " AUTOSTART="true"> エンベッド
オートスタート
 画面を開くと音楽が流れる。   
<EMBED SRC="音楽ファイル名 " AUTOSTART="true" LOOP="5"> ループ  音楽を再生する回数を指定する。  5のかわりにtrueをいれると連続再生。falseといれると再生しない。
<EMBED SRC="音楽ファイル名 " AUTOSTART="true" HIDDEN="true"> ヒドゥン  音楽再生の目盛り表示を消す。  

5. 枠線を付けるとどんな効果がある?
 写真がひきしまってきれいに見える効果がある。

6. 画像と文章の間に隙間を入れるのはなぜ?
 画像と文章のまわりこみで、隙間が少しあいている方が読みやすい。

7. 背景は写真ではいけないか?
 写真でもいい。読みやすさなどの見た目を考えると背景用につくられた画像の方がきれい。背景画像はブラウザのウィンドウにタイル状に敷き詰めて表示されるので、上下左右連続した絵になるように作られている。

7. 音楽再生
 「画像の表示」のところに、音楽再生の話。ホームページにおいては、画像も音楽もテキスト命令によって引っ張ってくる「ファイル」としての扱いということのよう。

1月13日はここまで



4.リンクを設定する

1. ハイパーリンクってなに?
 他のホームページやファイルを呼び出して表示する仕組みのこと。ブラウザ上では通常文字の色が紫色で下線が引かれている。絵や画像にリンクが設定してある場合は、画像の上にカーソルをのせるとカーソルがてのひらマークに変わって表示される。

2. 知らない人のページに勝手にリンクを設定してもいい?
 ダメ!!「リンクを設定させて下さい」という断りを入れるのがマナー。

さて、実習だ・・・。

タグ 読み方 役割 ワンポイント
<A HREF="ファイル名">文字</A> エー・エイチレフ  文字列にリンクを設定する。  リンク命令タグと終了タグにはさまれた文字にリンクが設定される。
<A HREF="ファイル名"><IMG SRC="画像名"></A>    画像にリンクを設定する。  上記、文字の位置に画像を表示するための命令たぐを入れる。
BORDER="0" ボーダー  リンクを設定した画像につく枠を非表示にする。  画像表示命令タグの中に加える。
<A HREF="#目印名"></A>    同一ページの目印をつけた場所にリンクする。  ページ内の全ての情報が見えていない場合はジャンプしない。
<A NAME="目印名"> エイ ネイム  上記目印の名前を付ける。  
<A HREF="アドレス"></A>    外のホームページにリンクを設定する。  

3. 画像と文字にリンクを設定したいときは?
 画像を表示する命令と文字列をならべればよい。
<A HREF="ファイル名"><IMG SRC="画像名">文字</A>の要領。

4. 画像に付く枠を表示させたくない。
 リンクの存在が分かりやすいように、文字のリンクと同じ色のリンクが付く。表示させたくない時は画像表示のタグにその命令を入れるとよい。
 <IMG SRC="画像名" BORDER="0">

5. 同じページなのにリンクを設定するのはなぜ?
 長い文章をのせたときに、同じページの中で目的の場所へ移動しやすくするため。見出しを作っておいて、本文中にジャンプするというように利用する。

6. 外のホームページへのリンク、自分のページにリンクするのとどう違う。
 自分のページの場合はリンク先が同じフォルダの中にあるのでアドレスを入れる必要がない。違う場所にあるホームページの場合はアドレスを書く必要がある。世界中のホームページにはそれぞれ一つのアドレスが割り振られている。

1月14日はここまでー、


タグ 読み方 役割 ワンポイント
<A HREF="画像1"><IMG SRC="画像2"></A>    画像1をクリックすると画像2が表示される。  小さい写真が並んでいる中から見たいものを選んでクリツクすると大きな写真で見れる、というように使用する。
<BODY LINK="色の名前"> リンク  まだ、表示していないリンクの色を指定する命令。  
<BODY LINK="色の名前" VLINK="色の名前"> ブイリンク  訪問済みリンクの色を設定する。  
<A HREF="mailto:メールアドレス">文字</A> メイル トゥー  メーソフトを起動させる。  

7. 小画像から大画像へのリンク、最初から大きいものをのせないのは?
 大画像をのせると、ホームページを見る時に時間がかかってしまう。見たいときだけクリックして見れるようにしておくと、見る人にとっては親切になる。

8. リンクの色
 Internet Explorer の初期設定では、未表示のリンクは青、表示済みのリンクは紫で表示される。
<BODY>タグに1箇所設定するだけで、そのページで設定されるリンク全てに有効となる。

9. mailto
 当たり前のように使っている機能だが、こんな一行だけでメールソフトが起動できるとは、ブラウザがスゴイ役割を果たしているんだ!!


1月15日はここまで!

5.表を作る

1. 表・・・
 項目や文章などをわかりやすく見せるための罫線の枠組みのこと。Excelのような計算機能はない。表を使うと本来HTMLが苦手としている段組やレイアウトが自由にできるようになる。

2. 表の構造は?
 作成する表にいくつの行と列を作成するのかを設定する。

 分かりにくい(-_-;) 実習を通して理解すべし・・ダナ。


タグ 読み方 役割 ワンポイント
<TABLE BORDER>
</TABLE>
テーブル ボーダー   TABLEは表の作成命令。BORDERは枠線を表示。  BORDERがない場合は枠が表示されない表になる。
<TR> </TR> ティーアール  表の行を表す。  <TR>と</TR>でくくられた記述が表の1行分の情報。 
<TD> </TD> ティーディー  列を表す。  <TR>タグにはさまれるように記述しないと、正しくマス目にならない。
<TH> </TH> ティーエイチ  表の見出し欄を作成する。  <TD>と同じようにマス目を作成するが、文字は太字で中央に表示される。

3. 表の列と行を増やすには?
 表の行と列の数は、<TR>と<TD>タグの数で決まる。表の行を増やすには<TR>の数を増やし、列を増やすには<TD>タグを増やす。各行の列の数を揃えておかないと、表が崩れて表示されてしまう。

1月16日はここまで。



タグ 読み方 役割 ワンポイント
<CAPTION> </CAPTION> キャプション  表の上に表のタイトルを表示する。  <TABLE>タグの次の行に設定すること。
WIDTH="数値" HEIGHT="数値" ワイズ・ハイト  横幅と高さを指定する。  <TABLE BORDER ●>の●の部分に記述する。
WIDTH="数値%" HEIGHT="数値%"    表の大きさをウィンドウ枠に合わせて変更する。  数値は%だから、100を超えないように。
<TD ALIGN="位置"> </TD>    文字を左揃え、中央揃え、右揃えに指定する。  「位置」の部分にleft、center、right。指定しないと左寄せになる。


4. タイトルを表の右側に表示させるには。
 <CAPTION>タグの中に、文字位置を設定する「ALIGN」という命令を記述する。
<CAPTION ALIGN="right">タイトル</CAPTON>の要領。

5. HTML内の改行について
 <TABLE>タグの次の行、というのが気になってわざと改行を外してみました。表示に問題はなし。見た時に分かりやすいように、ということのようです。


6. 表の大きさを指定するのは?
 何も指定しないと表の大きさは文字の大きさや長さで決まってしまう。体裁、見やすさを考えてあらかじめ大きさを指定する。


7. WIDTHとHEIGHTの%指定、なんのため?
 どんなウィンドウの大きさで見ても、表のデザインが大きく変わらないように。

 異論あり!僕はあまりこの方法は使わない。大きさを指定してスクロールして見る方が表の形は全くかわらないから。それとWIDTHをワイズと読むのは抵抗ありです(-_-;)


8. ALIGNは前も出てきたが・・・
 性格としては、配置を設定する命令と見た。命令と組み合わせることで、画像なら画像、文字なら文字の配置を指定する。

1月17日はここまで(^.^)

タグ 読み方 役割 ワンポイント
<TABLE BORDER BGCOLOR="色の名前"> </TABLE> ビージーカラー  表全体に色をつける。   色の名前は英語。""で囲むことをわすれないこと。
<TD BGCOLOR="色の名前"> </TD> ビージーカラー  セルに色をつける。  
<TABLE BORDER="数値"> </TABLE> ボーダー  表の外枠の大きさを指定する。  BORDER=「ふち」「境界」
<TABLE BORDER="数値" CELSPACING="数値"> </TABLE> セルスペイシング  表の中の枠線の太さを指定する。   
<TD COLSPAN="3">文字</TD> コルスパン  表の列を結合する。  結合するセルの数と、表のセルの数が違うと表が崩れて表示されてしまう。
<TD ROWSPAN="3">文字</TD> ロースパン  表の行を結合する。  

8. 表の色はどう選ぶ?
 濃い文字の背景には薄い色を、薄い色の文字の背景には濃い文字を選ぶと文字が読みやすくなる。


1月28日 HTML学習完了!!


エー?!これで終わりー?
「文字を波のように動かしたり、光る文字やどんどん大きくなる文字」はー?

ガーン!!
でも、基礎口座の本は終わってしまいましたー。

そうか、この本は「基礎口座」だったんだ・・・(^_^;)

ヨシッ!!
それなら先へ行ってやる。
今度は本をなぞるんじゃなくて、ページ上でやりたいことを見つける形で
「HTML学習帳 その2」
をやります。

はじまりは2月半ばでーす。


さいごのおまけ

今までの表を1ページにまとめました。
↑クリックして下さい。


 検索などでこのページに直接来た皆様!
上のボタンでTOPページへ行けます。

 TOPページからたどってこのページに来た方は、
ページを閉じて前のページへお戻り下さいm(__)m