ホームページの仕組み1

ホームページはハイパーリンクが特徴です．
HTMLはHyper Text Markup Languegeの略です．

Hyper Text Markup Languegeを訳すと「文章間を飛び越えるための印を付けられる言語」とでもなるのでしょうか．ちょっと飛び越えてみましょう．

下の方へ飛ぶ

どうでしょう「飛んだ」ということを実感できましたか．

ちなみにHTMLとは下のようなプログラムです．
これは前のページの内容です．たったあれだけの内容でもこれだけの記述が必要です．
最近ではワープロソフトなどでこのHTMLを書き出すものが普及しているので，ホームページを作成するのはそれ程難しくは有りません．

しかし何度も見に来てもらえるような「便利なページ」を作成するにはハイパーリンクを上手に使いこなすことが必要です．
ハイパーリンクとは文章や他のページ間を行き来するための「関連づけ」です．　↓下へ

<HTML>
<HEAD>

<TITLE>ホームページの仕組み2</TITLE>
</HEAD>
<BODY BGCOLOR="#676767" BACKGROUND="hpimage/pattan1.gif">
<P><TABLE COOL WIDTH="795" HEIGHT="905" BORDER="0" CELLPADDING="0" CELLSPACING="0" GRIDX="16" SHOWGRIDX USEGRIDX GRIDY="16" SHOWGRIDY USEGRIDY>

<TR HEIGHT="1" CNTRLROW>
<TD WIDTH="1" HEIGHT="1"></TD>
<TD WIDTH="32" HEIGHT="1"><SPACER TYPE="block" WIDTH="32" HEIGHT="1"></TD>
<TD WIDTH="108" HEIGHT="1"><SPACER TYPE="block" WIDTH="108" HEIGHT="1"></TD>
<TD WIDTH="180" HEIGHT="1"><SPACER TYPE="block" WIDTH="180" HEIGHT="1"></TD>
<TD WIDTH="48" HEIGHT="1"><SPACER TYPE="block" WIDTH="48" HEIGHT="1"></TD>
<TD WIDTH="64" HEIGHT="1"><SPACER TYPE="block" WIDTH="64" HEIGHT="1"></TD>
<TD WIDTH="16" HEIGHT="1"><SPACER TYPE="block" WIDTH="16" HEIGHT="1"></TD>
<TD WIDTH="64" HEIGHT="1"><SPACER TYPE="block" WIDTH="64" HEIGHT="1"></TD>
<TD WIDTH="99" HEIGHT="1"><SPACER TYPE="block" WIDTH="99" HEIGHT="1"></TD>
<TD WIDTH="13" HEIGHT="1"><SPACER TYPE="block" WIDTH="13" HEIGHT="1"></TD>
<TD WIDTH="72" HEIGHT="1"><SPACER TYPE="block" WIDTH="72" HEIGHT="1"></TD>
<TD WIDTH="96" HEIGHT="1"><SPACER TYPE="block" WIDTH="96" HEIGHT="1"></TD>
</TR>

<TR HEIGHT="32">
<TD WIDTH="1" HEIGHT="32"><SPACER TYPE="block" WIDTH="1" HEIGHT="32"></TD>
<TD WIDTH="32" HEIGHT="32"></TD>
<TD WIDTH="108" HEIGHT="32"></TD>
<TD WIDTH="180" HEIGHT="32"></TD>
<TD WIDTH="48" HEIGHT="32"></TD>
<TD WIDTH="64" HEIGHT="32"></TD>
<TD WIDTH="16" HEIGHT="32"></TD>
<TD WIDTH="64" HEIGHT="32"></TD>
<TD WIDTH="99" HEIGHT="32"></TD>
<TD WIDTH="13" HEIGHT="32"></TD>
<TD WIDTH="72" HEIGHT="32"></TD>
<TD WIDTH="96" HEIGHT="32"></TD>
</TR>

<TR HEIGHT="64">
<TD WIDTH="1" HEIGHT="64"><SPACER TYPE="block" WIDTH="1" HEIGHT="64"></TD>
<TD WIDTH="32" HEIGHT="64"></TD>
<TD WIDTH="288" HEIGHT="304" COLSPAN="2" ROWSPAN="4" VALIGN="top" ALIGN="left" XPOS="32"><TABLE BORDER="6" CELLPADDING="0" CELLSPACING="0" WIDTH="73">

<TR>
<TD><A HREF="shikumi1.html"><IMG SRC="hpimage/scene2.jpg" BORDER="0" WIDTH="250" HEIGHT="224"></A></TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="304" HEIGHT="64" COLSPAN="6" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="320" CONTENT CSHEIGHT="39"><FONT COLOR="#FFFFFF">文字であっても見出しなどで独自の表現を行いたい場合は画像を利用します．</FONT></TD>
<TD WIDTH="72" HEIGHT="64"></TD>
<TD WIDTH="96" HEIGHT="64"></TD>
</TR>

<TR HEIGHT="48">
<TD WIDTH="1" HEIGHT="48"><SPACER TYPE="block" WIDTH="1" HEIGHT="48"></TD>
<TD WIDTH="32" HEIGHT="48"></TD>
<TD WIDTH="48" HEIGHT="48"></TD>
<TD WIDTH="243" HEIGHT="48" COLSPAN="4" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="368"><IMG SRC="hpimage/gazmj1.gif" WIDTH="198" HEIGHT="24"></TD>
<TD WIDTH="13" HEIGHT="48"></TD>
<TD WIDTH="72" HEIGHT="48"></TD>
<TD WIDTH="96" HEIGHT="48"></TD>
</TR>

<TR HEIGHT="128">
<TD WIDTH="1" HEIGHT="128"><SPACER TYPE="block" WIDTH="1" HEIGHT="128"></TD>
<TD WIDTH="32" HEIGHT="128"></TD>
<TD WIDTH="48" HEIGHT="128"></TD>
<TD WIDTH="243" HEIGHT="128" COLSPAN="4" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="368"><IMG SRC="hpimage/gazmj2.gif" WIDTH="200" HEIGHT="120"></TD>
<TD WIDTH="13" HEIGHT="128"></TD>
<TD WIDTH="72" HEIGHT="128"></TD>
<TD WIDTH="96" HEIGHT="128"></TD>
</TR>

<TR HEIGHT="64">
<TD WIDTH="1" HEIGHT="64"><SPACER TYPE="block" WIDTH="1" HEIGHT="64"></TD>
<TD WIDTH="32" HEIGHT="64"></TD>
<TD WIDTH="304" HEIGHT="64" COLSPAN="6" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="320" CONTENT CSHEIGHT="39"><FONT COLOR="#FFFFFF">ご覧の通り画像で表現した文字は拡大するとやはり点の集まりです．</FONT></TD>
<TD WIDTH="72" HEIGHT="64"></TD>
<TD WIDTH="96" HEIGHT="64"></TD>
</TR>

<TR HEIGHT="48">
<TD WIDTH="1" HEIGHT="48"><SPACER TYPE="block" WIDTH="1" HEIGHT="48"></TD>
<TD WIDTH="32" HEIGHT="48"></TD>
<TD WIDTH="592" HEIGHT="48" COLSPAN="8" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="32" CONTENT CSHEIGHT="43"><FONT COLOR="#FFFFFF">例えばこのページの背景の紋様も拡大すると点の集まりであることが分かります．→ <IMG SRC="hpimage/pattan2.gif" WIDTH="24" HEIGHT="24" ALIGN="top"></FONT></TD>
<TD WIDTH="72" HEIGHT="48"></TD>
<TD WIDTH="96" HEIGHT="48"></TD>
</TR>

<TR HEIGHT="32">
<TD WIDTH="1" HEIGHT="32"><SPACER TYPE="block" WIDTH="1" HEIGHT="32"></TD>
<TD WIDTH="32" HEIGHT="32"></TD>
<TD WIDTH="592" HEIGHT="32" COLSPAN="8" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="32">
<HR SIZE="2" WIDTH="592">
</TD>
<TD WIDTH="72" HEIGHT="32"></TD>
<TD WIDTH="96" HEIGHT="32"></TD>
</TR>

<TR HEIGHT="32">
<TD WIDTH="1" HEIGHT="32"><SPACER TYPE="block" WIDTH="1" HEIGHT="32"></TD>
<TD WIDTH="32" HEIGHT="32"></TD>
<TD WIDTH="108" HEIGHT="32"></TD>
<TD WIDTH="180" HEIGHT="32"></TD>
<TD WIDTH="48" HEIGHT="32"></TD>
<TD WIDTH="64" HEIGHT="32"></TD>
<TD WIDTH="16" HEIGHT="32"></TD>
<TD WIDTH="163" HEIGHT="176" COLSPAN="2" ROWSPAN="2" VALIGN="top" ALIGN="left" XPOS="448"><IMG SRC="hpimage/baby.gif" WIDTH="109" HEIGHT="140"></TD>
<TD WIDTH="13" HEIGHT="32"></TD>
<TD WIDTH="72" HEIGHT="32"></TD>
<TD WIDTH="96" HEIGHT="32"></TD>
</TR>

<TR HEIGHT="144">
<TD WIDTH="1" HEIGHT="144"><SPACER TYPE="block" WIDTH="1" HEIGHT="144"></TD>
<TD WIDTH="32" HEIGHT="144"></TD>
<TD WIDTH="400" HEIGHT="144" COLSPAN="4" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="32" CONTENT CSHEIGHT="39"><FONT COLOR="#FFFFFF">ホームページでは重なった画像を順番に見せることで簡単なアニメーション（動画）を表現することも可能です．</FONT></TD>
<TD WIDTH="16" HEIGHT="144"></TD>
<TD WIDTH="13" HEIGHT="144"></TD>
<TD WIDTH="72" HEIGHT="144"></TD>
<TD WIDTH="96" HEIGHT="144"></TD>
</TR>

<TR HEIGHT="261">
<TD WIDTH="1" HEIGHT="261"><SPACER TYPE="block" WIDTH="1" HEIGHT="261"></TD>
<TD WIDTH="32" HEIGHT="261"></TD>
<TD WIDTH="108" HEIGHT="261" COLSPAN="1" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="32" CONTENT CSHEIGHT="49">
<CENTER><FONT FACE="B Avant Garde Demi" SIZE="7"><A HREF="shikumi1.html">BACK</A></FONT>
</CENTER></TD>
<TD WIDTH="180" HEIGHT="261"></TD>
<TD WIDTH="48" HEIGHT="261"></TD>
<TD WIDTH="64" HEIGHT="261"></TD>
<TD WIDTH="16" HEIGHT="261"></TD>
<TD WIDTH="64" HEIGHT="261"></TD>
<TD WIDTH="99" HEIGHT="261" COLSPAN="1" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="512" CONTENT CSHEIGHT="49">
<CENTER><FONT FACE="B Avant Garde Demi" SIZE="7"><A HREF="shikumi3.html">NEXT</A></FONT>
</CENTER></TD>
<TD WIDTH="13" HEIGHT="261"></TD>
<TD WIDTH="72" HEIGHT="261"></TD>
<TD WIDTH="96" HEIGHT="261"></TD>
</TR>

<TR HEIGHT="49">
<TD WIDTH="1" HEIGHT="49"><SPACER TYPE="block" WIDTH="1" HEIGHT="49"></TD>
<TD WIDTH="32" HEIGHT="49"></TD>
<TD WIDTH="108" HEIGHT="49"></TD>
<TD WIDTH="180" HEIGHT="49"></TD>
<TD WIDTH="48" HEIGHT="49"></TD>
<TD WIDTH="64" HEIGHT="49"></TD>
<TD WIDTH="16" HEIGHT="49"></TD>
<TD WIDTH="64" HEIGHT="49"></TD>
<TD WIDTH="99" HEIGHT="49"></TD>
<TD WIDTH="13" HEIGHT="49"></TD>
<TD WIDTH="72" HEIGHT="49"></TD>
<TD WIDTH="96" HEIGHT="49" COLSPAN="1" ROWSPAN="1" VALIGN="top" ALIGN="left" XPOS="696" CONTENT CSHEIGHT="49">
<CENTER><FONT FACE="B Avant Garde Demi" SIZE="7"><BLINK>NEXT</BLINK></FONT>
</CENTER></TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

ここで別のウインドウで他のホームページを開いてみましょう．

開く

という具合に簡単によそのページにジャンプできましたね．

BACK NEXT

飛んできました．

もどる