目次

  1. HTML の概略
  2. HTML の例文を表示しながら学習する手順
  3. トピックと例題


O. WWW 情報発信参加の手順

外部に開かれた Web ページを作りたいときは、WWW 情報発信実験への 参加申し込みが必要です。詳しくは、 WWW情報発信実験について のページをご覧下さい。


I. HTML の概略


II. HTML の例文を表示しながら学習する手順

以下に HTML 文書の例を順にあげる。これらとブラウザでの 実際の表示を対比すれば、HTML 文法の初歩を簡単に理解できるだろう。

  1. 最初に HTML ファイルを作るとき :
    Finder の Application の中から MI を起動して、内容を作成する。
    保存するとき、.html の拡張子をつける。

  2. 保存された HTML ファイルを Safari に表示させる には:
    その HTML ファイル のアイコンをダブルクリックすれば、自動的に Safari が起動します。

  3. 保存されている HTML ファイルを書き換える には:
    1. MI を起動して、 「ファイル --> 開く」で、編集したいファイルを読み込む。
    2. 続いて、内容を編集し直した後、「ファイル-->保存」で(同じ名前で)保存する。
    3. ここですでにそのファイルが Safari に表示されているときは、 再読込のボタンを押す
      すると、編集後の内容が表示される。



III. トピックと例題

  1. HTML 文書の基本スタイル
  2. 色の表記の方法 / 背景・文字の色の変更
  3. 改行、空行、横線
  4. 見出しをつくる
  5. 他のページにリンクをはる
  6. 文字のサイズ、色の変更。標準サイズの変更。
  7. 文字の字体の変更
  8. 箇条書き
  9. 画像を表示する
  10. ページの背景に画像をはり付けるには
  11. テキストの頭下げ(インデント)
  12. 原稿をそのまま表示する
  13. 行の中央揃え、左揃え、右揃えをする
  14. 同じテキスト内で、ジャンプする
  15. 他のテキストの中の指定された位置へジャンプする
  16. 表を書く
  17. フレーム(画面分割)の利用方法


  1. HTML 文書の基本スタイル

    1. TextEdit で、下の <HTML>~ </HTML> までのテキストを 入力する。
      <HTML>
      <HEAD>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <TITLE> Example </TITLE>
      </HEAD>
      <BODY>
      Hello, World! Hello, World!
      Hello, World! Hello, World!
      </BODY>
      </HTML>
      * BODY, HTML, TITLE などのタグは 大文字小文字どちらを使ってもかまわない。 たとえば body, Body, BODY どれでも同じ。

    2. これに example.html という名前をつけてセーブする。

    3. 保存されてできたファイル example.html のアイコンをダブルクリックする。 --> すると このように表示される

      [Note] もとの HTML ファイルの中の改行や空白は無視されて、 ひとつながりの記号列として表示されることに注意する。


  2. 色の表記の方法 / 背景・文字の色の変更

    1. 色の表記方法

      HTML で色の種類を指定するには、光の3原色 赤、緑,青の各色の強度を 2桁の16進数で 0 - 255 の 256段階で指定して、それらを#の後に赤、緑、 青の順で並べた6桁の数で表す。これを RGB 値 という。 また、おもな 140 色は直接に英語名で色名を指定できる。

      #7B68EE --- 赤色の強度が 7B, 緑色の強度が 68, 青色が EE の強度の色を表す。 (これは 色名で言うと MediumSlateBlue 。)

      #000000 -- Black, #FFFFFF -- White, #008000 -- Green,
      #0000ff -- Blue, #800080 -- Purple, #ff0000 -- Red, #ffff00 -- Yellow,
      #00FFFF -- Aqua, #FF5500 -- Orange, #808080 -- Gray, #000080 -- Navy.

      好みの色の RGB 値や色の名前を知りたい時には、 つぎのようなサイトで調べることができる。

    2. 背景、テキストの色は、本文の冒頭の<BODY> タグのオプションで 指定できる。指定の仕方を例で示す。

       背景色を Ivory (#FFFFF0), 文字を Navy (#000080), リンクのあるテキストを SpringGreen (#00FF7F), すでに見たページ へのリンクテキストを DarkGreen (#006466) で表示する例。

      <BODY BGCOLOR="#FFFFF0" TEXT="#000080" LINK="#00FF7F" VLINK="#006466">
      もしくは、
      <Body BGColor="Ivory" TEXT="Skyblue" Link="Springgreen" VLink="DarkGreen">
      としてもよい。

      練習:前出の例で Bgcolor と text の色を次のように変える。

      <HTML>
      <TITLE> Example </TITLE>
      <BODY BGColor="Ivory" TEXT="red">
      Hello, World! Hello, World!
      Hello, World! Hello, World!
      </BODY>
      </HTML>
      するとその表示結果は このようになる。


  3. 改行、空行、横線

    空白と改行の扱い。もとのテキストファイルでの空白や改行は 無視される。空白はつめられて、自動的に右端が整形されて 表示される。改行や空白行を入れたい時は、次のように指定する 必要がある。

    1. <BR> </BR> ---- 強制改行のタグ
    2. <P> ~</P> ----- 段落ができて1行空く。
    3. <HR> ---- 横罫線を挿入する。
    4. 見出しを表示するタグ。 <H n > 見出しにする文字列</H n > の形で使う。 n = 1(大) ~ 6(小) で大きさを指定する。
    5. テキスト中にコメントを書き込む場合には
      <!-- コメントの文 -->
      として挿入する。

    *例題 A, B のファイルに次のように書き加えて、表示させてみる。 テキストを変更して同じ名前でセーブする。 もとのファイルを表示中のブラウザで Reload ボタンを押して、 新しいファイルを表示させる。

    <HTML>
    <TITLE> Example </TITLE>
    <BODY BGColor="Ivory" TEXT="red">
    Hello, World! Hello, World! <BR>
    Hello, World! Hello, World! <BR>
    Hello, World! Hello, World!
    <P> Hello, World! Hello, World! </P> <HR>
    Hello, World! Hello, World!
    </BODY>
    </HTML>
    上の例題の表示結果


  4. 見出しをつくる
    <Hn> ~ </Hn>
    とすると挟まれた部分が見出し (ヘッド) になる。ここで n は サイズを指定するもので、 n=1 ~ 6 の値をとり、 n=1 が最大、 n=6 が最小になる。
    <HTML>
    <TITLE> Example </TITLE>
    <BODY>
    <H2> Hello, World! </H2>
    Welcome to our country!
    </BODY>
    </HTML>
    それはこのように表示される。


  5. 他のページにリンクをはる。 つまり指定した文字列をクリックすると 指定された別のページにジャンプするようにするには、
    <A HREF="リンクする先"> リンク文字列 </A>
    とする。

      以下はリンクの利用例のひとつである。

      例題 : 検索サイトのリンク集を箇条書で作ってみる。以下の入力に対して

      次の3つは国内の代表的な検索サービスのページの例である。
      <UL>
       <LI>< A href="http://www.google.co.jp/"> Google </A>
       <LI><A HREF="http://www.yahoo.co.jp/"> Yahoo Japan</A>
       <LI>< A href="http://japan.infoseek.com/" >Infoseek </A>
      </UL>
      このような表示を得る:( 箇条書きのリンク集 )


    1. 文字のサイズ、色の変更。

      • 文字のサイズの変更。文字の大きさを変えるには
        <FONT SIZE = number> 変更する文字列 </FONT>
        でくる。ここで number = 1 ~ 7 の値をとり、1が最小、7が最大に なる。上で SIZE = +number 又は -number (number=1~7)とすると 標準の文字サイズに対する相対的な大きさで指定することになる。 その利用例:
        <HTML> <TITLE> Example </TITLE>
        <BODY>
        <font size=1>文字サイズ1</font>
        <font size=3>文字サイズ3</font>
        <font size=7>文字サイズ7</font>
        <font size=+2>文字サイズ+2</font>
        <font size=+4>文字サイズ+4</font>
        </BODY>
        </HTML>
        それを表示すると
        文字サイズ1
        文字サイズ3
        文字サイズ7
        文字サイズ+2
        文字サイズ+4
      • 同様に、FONT タグのオプションで文字の色を変更することができる。 文字の色を指定するには
        <FONT COLOR=色指定> ~ </FONT>
        としてできる。たとえば、文字の色とサイズを次のように
        <font color="green" size=+1 >Green 緑色 標準サイズ +1</font>
        <font size=+2 color="purple">Purple 紫色 文字サイズ+2</font>
        と指定すると
        Green 緑色 標準サイズ +1
        Purple 紫色 文字サイズ +2
        のように表示される。

      • 標準の文字サイズを変更するには
        < BASEFONT SIZE= n >
        とする。ここで n = 1 ~ 7 (小~大 ) でサイズを指定する。このタグ以降の 無指定の文字がすべてサイズ n になる。冒頭で使えば、文書全体にわたって 文字の大きさを変えることができる。


    2. 文字の形の変更や強調、下線などは次のようにする。

      • <B>文字列</B>---太字で表示する。
      • <I>文字列</I>---イタリックにする。
      • <U>文字列</U>---アンダーラインを引く。
      • <EM>文字列</EM>---強調(ボールド)にする。

      これらを使って次のように指定すると

      通常の文字。ABCDE
      <B>太字の文字。Bold Face. </B>
      <I>イタリック体。 Itaric</I>
      <U>下線。Underline</U>
      <EM>強調文字。Strengthened.</EM>
      それは次のように表示される。
      通常の文字。ABCDE
      太字の文字。Bold Face.
      イタリック体。 Itaric
      下線。Underline
      強調文字。Strengthened.


    3. 箇条書き :

      • 箇条書には、番号なしの箇条書<UL> </UL>と、番号による 箇条書 <OL> </OL>がある。各項目の列挙には、先頭に <LI> と書く。
        <UL>
        <LI> 睦月
        <LI> 如月
        <LI> 弥生
        </UL>
        <OL>
        <LI> January
        <LI> February
        <LI> March
        </OL>
        とすると

        • 睦月
        • 如月
        • 弥生


        1. January
        2. February
        3. March

      • 番号なしの箇条書<UL> </UL>で頭の印を変えるには <UL type="disc"又は"circle"又は"square">と指定する。例として、
        <UL type="disc">
        <LI>文章その1。
        <LI>文章その2。
        </UL>
        <UL type="circle">
        <LI>文章その3。
        <LI>文章その4。
        </UL>
        とするとその表示は ここのようになる。

      • 番号による箇条書 <OL> </OL> のときも <OL type="*"> として * のところに次のいずれかの型を指定すれば良い。
        A : 大文字アルファベット
        a : 小文字アルファベット
        I : 大文字ローマ数字
        i : 小文字ローマ数字
        1 : アラビア数字
        たとえば次のように指定すると、
        <OL type="I">
        <LI>アジア
          <OL type="a">
          <LI>タイ  <LI> ベトナム <LI> 台湾
          </OL>
        <LI>アフリカ
        <LI>オセアニア
          <OL type="i">
          <LI>オーストラリア
          <LI>ニュージーランド
          </OL>
        </OL>
        その表示結果はここのようになる。

      • 箇条書の一例。
        <H2>物語と小説 </H2>
        <OL>
        <LI>ドイツ
          <OL>
          <LI> トーマスマン「ブッテンブローグ家の人々」「魔の山」
          <LI>ゲーテ「ファウスト」
          <LI>ヘッセ「荒野の狼」
          </OL>
        <LI> 英米
          <UL>
          <LI>イギリス     <UL>
            <LI> コリンウィルソン「敗北の時代」
            <LI>ディッケンズ「デイヴィッドコパーフィールド」
            </UL>
          <LI>アメリカ
            <UL>
            <LI>ヘミングウェイ「海流の中の島々」
            <LI>サリンジャー「フラニーとゾーイー」
            <LI>スタインベック「二十日鼠と人間」
            <LI>レイブラッドベリ「火星年代記」
            </UL>
          </UL>
        </OL>

        この例の表示。

      • 定義タイプの箇条書き

        -- 見出し語その内容をひと組にして、リストに したもの。説明の部分は、段下げして示される。 <DT> 以下に見出し語、 <DD> 以下に説明を書く。 次が入力の例。

        <DL>
         <DT>mh-e
         <DD>Emacs からメイルソフト群 MH を利用できるようにしたメイルソフト。
         <DT> RGB 値
         <DD> 赤 Red 緑 Green 青 Blue の光の三原色の強度の各々をを指定したもの。 これで色がひとつ指定される。
         <DT> MATTHEW 7-7
         <DD> Ask and it will be given to you; seek and you will find;
           knock and it will be opened to you.
        </DL>

        その出力表示は、次のようになる。

        mh-e
        Emacs からメイルソフト群 MH を利用できるようにしたメイルソフト。
        RGB 値
        赤 Red 緑 Green 青 Blue の光の三原色の強度を指定して、 色をひとつ指定する値。
        MATTHEW 7-7
        Ask and it will be given to you; seek and you will find; knock and it will be opened to you.


    4. 画像を表示する。

      1. 読み込める画像のファイルの種類 は、おもに gif 形式のものと jpeg 形式のものである。
      2. 画像読み込みのタグ
        <IMG SRC="ファイル名">
        です。使用例として
        <body>
        Hubble Heritage Project のページからの Galaxy NGC 4622 の画像。<BR>
        <IMG SRC="Hubble.jpg">
        これ以外にもたくさん公開されている。
        </body>
        とすると このように表示される。 ここで Hubble.jpg はカレントディレクトリにある画像ファイルである。

      3. 画像ファイルをよそのページからコピーさせてもらうには:
        1. 画像の上にカーソルを持ってきてマウスのボタンを押したまま iMac の Finder 内の所定のフォルダに、ドラッグ (ずるずる引きずる)してくる。

          (取り込み保存の練習用の画像の表示) 土星、金星、天王星

        2. Hubble Heritage Project ( ハッブル望遠鏡の画像を集めている )
        3. 同じ要領で、動画GIF ファイルをダウンロードして表示できる。

        4. GIF アニメのページの例として ぱたぱたアニメ館 を挙げておく。 検索サイトで探せばたくさんあると思う。

      4. 表示したい画像ファイルが別のディレクトリにあるときは、パス名つきの 長いファイル名で指定する必要があります。たとえば現在のディレクトリ の下の pictures というディレクトリの下にある garden.jpg という 画像を表示させるには
        < IMG SRC="./pictures/garden.jpg" >
        とする。

      5. 画像のまわりに枠をつけるには

        <IMG SRC="file-name" BORDER=幅のサイズ>

        とする。指定したサイズのピクセル数の枠ができる。 たとえば、はばを5とした場合と、幅を10とした場合

        <IMG SRC="file-1" BORDER=5><p>
        <IMG SRC="file-2" BORDER=10>

        を表示するとこのようになる。

      6. 画像のサイズを指定するには

        <IMG SRC="ファイル名" WIDTH=幅サイズ HEIGHT=高さサイズ>

        とする。サイズの指定に数を書けばピクセル数の指定になる。指定に % をつけて指定すれば、画面のサイズに対する % を表す。例えば

        WIDTH=240ドット、 HEIGHT=200 ドットと指定すると<P>
        <img src="nezumi.gif" width=240 height=200><P>

        Width=60%, Height=40% と指定すると <P>
        <img src="nezumi.gif" width=60% height=40%>

        とするとこのように表示される。

      7. イメージの右または左に文字列を表示させる には

        <IMG SRC="ファイル名" align="left"又は"right">

        と指定する。align =left とすると、画像が左に、テキストがその右に 表示される。 align=right とすると画像が右端に、テキストが左端に表示される。
        それを利用した例


    5. ページの背景に画像をはり付けるには:
      BODY タグで BACKGROUND オプションを 次のように使って、背景のイメージファイルを指定する。
      <BODY BACKGRUOND="イメージファイル名" >
      そこに URL を指定すれば他のサイトにある画像を指定することもできる。

      具体例:

      <BODY TEXT="white" BACKGROUND="subaru.jpg">
      <H3>背景はスバル星団の写真です。</H3>
      </BODY>
      例題の表示 :背景が 暗いので文字の色を白に指定してあります。
    6. テキストを頭下げ(インデント)して引用文として表示する

      それには <blockquote>~</blockquote> でかこむ。たとえば

      谷川俊太郎より
      <blockquote>
      悲しみは <P>
      悲しみは<BR>
      むきかけのりんご<BR>
      比喩ではなく<BR>
      詩ではなく<BR>
      ただそこに在る<BR>
      むきかけのりんご
      </blockquote>
      詩集「あなたに」より (1955)
      とすると表示結果は
      谷川俊太郎より
      悲しみは

      悲しみは
      むきかけのりんご
      比喩ではなく
      詩ではなく
      ただそこに在る
      むきかけのりんご

      詩集「あなたに」より (1955)
      のようになる。


    7. 原稿をそのまま表示する。
      通常は、もとのテキストの改行、空白は 無視されて、つめて表示されるが、もとのテキストの配置のまま表示 したいときは、<PRE> </PRE>タグではさめばよい。
      <BODY>
      <PRE>
           いまはただ  思ひ絶えなんとばかりを
                     人づてならで  いふよしもがな
      
           あふことの  絶えてしなくば  なかなかに
                     人をも身をも  恨みざらまし  
      </PRE>
      </BODY>

      例題8の表示例


    8. 行の中央揃え、左揃え、右揃えをする。
      • 中央揃えは<CENTER> タグを使う。

        <CENTER> ~ </CENTER>

        簡単な例をひとつあげると

        <center>
        Lifting and Reduction of Antimatroids<P>
        Masataka Nakamura<P>
        Dept. of Systems Science, University of Tokyo<BR>
        Komaba, Meguro, Tokyo 153-8902, Japan
        </center>
        これを表示するとこのようになる。

      • また、DIV ALIGN タグでオプションに left , center, right を指定する ことで、左、中央、右行揃えができる。

        <DIV ALIGN="オプション"> ~ </DIV>


    9. 同じテキスト内で、ジャンプする。
      テキストが長いとき、指定した場所にジャンプできると便利である。 キーワードを使って、リンクボタンとリンク先文字列を結び付ける。
      <A HREF="#キーワード"> ~ </A> リンクボタン設定
      <A NAME="キーワード"> ~ </A> リンク先設定

    10. 他のテキストの中の指定された位置へジャンプする。
      ほかの文書へジャンプすると、通常文書の冒頭が表示される。これに、 例題13のキーワードを応用すれば、さらに文書の中の指定した 位置に飛ぶようにリンクすることができる。
      <A HREF="ファイルの URL #キーワード">~</A> リンクボタン設定
      <A NAME="キーワード"> ~ </A> リンク先設定

    11. 表を書く。
      表を作るタグは、枠のない表は<TABLE>~</TABLE>、枠を持つ 表は<TABLE BORDER>~</TABLE>である。その基本形は、
      <TABLE>
      <TR><TD>項目A</TD><TD>項目B</TD></TR>
      <TR><TD>項目C</TD><TD>項目D</TD></TR>
      </TABLE>

      <TABLE BORDER>
      <TR><TD>項目1</TD><TD>項目2</TD></TR>
      <TR><TD>項目3</TD><TD>項目4</TD></TR>
      </TABLE>

      <TR>~</TR> が各行、<DT>~</DT> が各行の要素を表す。
      例題の表示

      正しくは、上のように「閉じる」タグを書くのが正式ですが、面倒であれば、 行と項目の閉じるタグ </TD> , </TR> を抜かしても 正しく表示されます。

      <TABLE>
      <TR><TD>項目A<TD>項目B
      <TR><TD>項目C<TD>項目D
      </TABLE>


      [例題] 表の項目列、行に見出しをつける。
      項目の列に見出しをつけるには、最初の行<TR>~</TR>の前に 見出し項目名を<TH>~</TH>でくくって並べる。行の 見出しをつけるには、各行で
      <TABLE Border>
      <TH>お国柄 </TH><TH>英国 </TH><TH> 日本 </TH>
      <TR> <TH>社会 </TH><TD>階級制的個人主義</TD><TD>集団主義的平等主義</TD></TR>
      <TR> <TH>経済 </TH><TD>自由経済</TD><TD>社会主義的計画経済</TD></TR>
      </TABLE>
      例題の表示


    12. フレーム(画面分割)の利用方法は、 こちらです。