HTML


 

WelcomeMyPage
 


 最近デジカメのアルバムソフトが普及しています。写真帳を整理できます。MyGalleryといった個人サイトを閲覧 するように、自分の写真が見れます。もうフイルムを現像することもなくなってしまいました。
我が家

我が家


1

2

3

4

 アルバムのデーターをExplorerで覗いてみるとHTMLとJPGのファイルが一杯あります。 それらをダブルクリックすると、HTMLならブラウザでページが見れます。JPG なら画像が開きますね。ブラウザで見た時、ツールバーの表示ソースをクリックしてみます。「メモ帳」が開き、TEXTが見れます。

<HTML>
<HEAD>
<TITLE>我が家</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR><TD ColSpan="4" ALIGN=CENTER><H2><B>我が家</B></H2></TD></TR>
<TR>
<TD ALIGN="CENTER" VALIGN="Bottom"><A HREF="DSC001.jpg">
<IMG SRC="s-DSC001.jpg"></A><BR>1</TD>
<TD ALIGN="CENTER" VALIGN="Bottom"><A HREF="DSC002.jpg">
<IMG SRC="s-DSC002.jpg"></A><BR>2</TD>
</TR>
<TR>
<TD ALIGN="CENTER" VALIGN="Bottom"><A HREF="DSC003.jpg">
<IMG SRC="s-DSC003.jpg"></A><BR>3</TD>
<TD ALIGN="CENTER" VALIGN="Bottom"><A HREF="DSC004.jpg">
<IMG SRC="s-DSC004.jpg"></A><BR>4</TD>
</TR>
</TABLE>

</BODY>
</HTML>
これがHTMLページのコードです。なんだか 規則がありそうですね。


 パソコンのBasicプログラムで簡単な仕事のプログラム を作り、省力化をしてます。だから、このソースコードが、どういう手続きを指示しているか読めます。HTMLファイルはブラウザにやってもらう仕事のプログラムだったんです。ワープロWORDのDOCファイル をHTMLに保存し直し、「メモ帳」で眺めた時、「なんだ、そういうことか」と納得しました。

 こういう場合、超簡単な1枚だけのデーターを作ります。
我が家

我が家


1

そして、じっくり眺めて見ます。多分、こんなデーターになるでしょう。
<HTML>
<HEAD>
<TITLE>我が家</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR><TD ColSpan="4" ALIGN=CENTER><H2><B>我が家</B></H2></TD></TR>
<TR>
<TD ALIGN="CENTER" VALIGN="Bottom"><A HREF="DSC001.jpg">
<IMG SRC="s-DSC001.jpg"></A><BR>1</TD>
</TR>
</TABLE>

</BODY>
</HTML>


 プログラムは規則の塊です。パターンがあります。超シンプルなこのページも、 超有名なYahooのページも、同じルールで書かれているはずです。
 じゃあ、インターネットに繋いでYahooのTopページを開き、同じように 、ツールバーの表示ソースをクリックしてみます。「メモ帳」で見てみましょう。


<HTML>
<HEAD>
<TITLE>****</TITLE>
</HEAD>
<BODY>

oooooo
oooooo

</BODY>
</HTML>

 どんなページもこのパターンです。ooooooにやらせたい事を書いておけばいい事に なります。
 <HTML>で始まって、</HTML>で終わるのは、HTML文書だという宣言 です。<HEAD>と</HEAD>の間はサーバーのための情報です。<BODY>と </BODY>の間にページを書き込むということです。

 

テーブル
 

 4個のものを、2個、2個に整理して表示する。スッキリしますね。表は便利です。超簡単に1個でも表にしてしまいましたが。
 ソースをじっくり眺めると、表のルールも分かったみたいな気分になりませんか。  「メモ帳」で、「ルールの本質はこれだ!」と思えるまでシンプルにしてみましょう。間違えたら復活という便利なものがありますから、いじってみましょう。

我が家
我が家

1

ここまでシンプルにすると、ソースはこうなります。
<HTML>
<HEAD>
<TITLE>我が家</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR><TD>我が家</TD></TR>
<TR>
<TD><A HREF="DSC001.jpg">
<IMG SRC="s-DSC001.jpg"></A><BR>1</TD>
</TR>
</TABLE>

</BODY>
</HTML>

<TABLE>と</TABLE>の間が表のデーター。<TR>と</TR>の 間が一行のデーター。<TD>と</TD>の間が一つのセル。ということです。

もっとシンプルにしましょう。
我が家
我が家

玄関
大きな画像が開かなくなりました。

<HTML>
<HEAD>
<TITLE>我が家</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR><TD>我が家</TD></TR>
<TR>
<TD>
<IMG SRC="s-DSC001.jpg"><BR>玄関</TD>
</TR>
</TABLE>

</BODY>
</HTML>

画像を配置するには、<IMG SRC="*****.jpg">とします。文字はルールを無視 しなければ、どこに書き込んでもいいようです。データーを横ならびでなく、 一段下げて配置するには<BR>ということです。これが基本中の基本。 たったこれだけです。

 シンプルにしすぎたので、大きな画像がクリックで開かなくなりました。リンクさせたい物を<A HREF="*********">と</A>で囲む。これがリンクの仕掛だったんです。
 「メモ帳」で上のソースをコピーして利用しましょう。*********やooooooを自分の画像や 文章にすれば、Photo Galleryは出来てしまいます。

 まとめてみますと、「メモ帳」でソースコード(タグ)のルールに従い画像やテキストをアレンジする。適当な名前のファイルとして保存する。拡張子はHTML かHTMにしておく。これでページができます。自分のパソコンで眺めてみましょう。
 あとはサーバーに送り込めば、世界に開けた自分のサイトになるということです。この時、サーバーについての知識が若干いりますが。それと、やっぱり色々飾り付けをしたくなりますね。その時始めて本を開けばいいでしょう。

 自分のサイトのイメージを膨らませるのは、とても楽しい時です。色々配置など してみて、飾り付けをするのも楽しいことです。その時は「メモ帳」ではすこしもどかしいですね。MicrosoftのInternet Explorer をお使いならパソコンにはMicrosoft FrontPage Express がインストールされていると思います。ワープロ感覚で マウス操作でページが作れます。僕も使っています。


HTMLクイックリファレンス


2003.10.17
by Kon