HTMLで書いてみよう！
（初級編）
初級編では必要最低限のタグを説明します。これだけ知ってれば、とりあえず大丈夫です。



・HTMLって何？

    HTML(HyperText Markup Language)は、 異なるプラットフォーム間で持ち運び可能なハイパードキュメントを記述するために用いらてきたシンプルなマークアップ言語です。HTMLドキュメントは一般的意味論を伴なうSGMLドキュメントであり、様々なアプリケーションにおいて情報を表現するのにふさわしいものです。(HTML 3.2 Reference Specificationより抜粋)
    HTMLは、WWW(World Wide Web)を記述する言語であり、タグにより文章の意味付けを行うのが特徴です。ユーザエージェント（ブラウザ）は標準化に完全に対応していない場合もありますし、逆に独自の拡張を行なっている場合もあります。我々がホームページを見ることができるのは、ユーザエージェント（ブラウザ）がHTMLドキュメントを理解して、うまく表示してくれているからです。


・標準化とブラウザの対応



・なぜ、HTMLなのか？

    昔は、ホームページを作成する人はHTMLで書くしかありませんでしたが、現在ではHTMLを知らなくても、ホームページが作成できるHTMLエディタが沢山あります。HTMLエディタは初めての人にも分かりやすく便利ですが、すべてのタグに対応しているわけではありませんし、作成されるHTMLドキュメントは効率が良いものではありません。HTMLの機能を十分に活用したい場合には、HTMLを自分で書くしかありせん。慣れれば、HTMLエディタよりも速く、HTMLエディタよりも効率的なHTMLドキュメントが作成できるようになります。


・基本的なタグだけで十分

    HTMLの拡張、ユーザエージェント（ブラウザ）の対応は現在でも進んでいます。タグの数も増え続けていますが、普通のページであれば、基本的なタグだけで十分です。逆に新しいタグを使う場合には、古いブラウザでうまく表示されるように注意が必要です。


・HTMLの構造

    HTMLは以下のような構造になっています。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
  <TITLE>もーもー補完計画</TITLE>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF"
 LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000" BACKGROUND="hokanbg.gif">
HTMLで書いてみよう！（初級編）
</BODY>
</HTML>


    上記の内容がこちらにあるので確認してみましょう。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    ドキュメントがW3CのHTML 3.2仕様書に基づいていることを示しています。

    <HTML>
    HTMLは<HTML>と</HTML>の間に書きます。

    <HEAD>
    <HEAD>と</HEAD>の間にはこの文章全体に関するヘッダー情報を書きます。

    <TITLE>もーもー補完計画</TITLE>
    <TITLE>と</TITLE>の間にはタイトルを書きます。

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
    内容の種類、文字コードなどを指定します。

    <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000" BACKGROUND="hokanbg.gif">
    <BODY>と</BODY>の間には本文を書きます。
    TEXTは文字の色、BGCOLORは背景の色、LINKはリンク文字の色、VLINKは訪問したことのあるリンク文字の色、ALINKはクリックされた時のリンク文字の色、BACKGROUNDは背景画像を指定します。



・改行する

    一行目です。<BR>
二行目です。<BR>
三行目です。<BR>


    結果は以下のようにになります。

    一行目です。
    二行目です。
    三行目です。




・コメントを入れる

    一行目です。（表示されます）<BR>
<!-- 二行目です。（表示されません） -->
三行目です。（表示されます）<BR>


    結果は以下のようにになります。

    一行目です。（表示されます）
    三行目です。（表示されます）




・文字の大きさを変える

    <FONT SIZE=1>これは１のサイズです。</FONT><BR>
<FONT SIZE=2>これは２のサイズです。</FONT><BR>
<FONT SIZE=3>これは３のサイズです。</FONT><BR>
<FONT SIZE=4>これは４のサイズです。</FONT><BR>
<FONT SIZE=5>これは５のサイズです。</FONT><BR>
<FONT SIZE=6>これは６のサイズです。</FONT><BR>
<FONT SIZE=7>これは７のサイズです。</FONT><BR>
これは標準のサイズです。<BR>
<BASEFONT SIZE=4>
標準のサイズを４にしてみました。<BR>
<BASEFONT SIZE=3>
標準のサイズを３にしてみました。<BR>
<FONT SIZE=+1>標準のサイズ＋１のサイズです。</FONT><BR>
<FONT SIZE=-1>標準のサイズ−１のサイズです。</FONT><BR>


    結果は以下のようにになります。

    これは１のサイズです。
    これは２のサイズです。
    これは３のサイズです。
    これは４のサイズです。
    これは５のサイズです。
    これは６のサイズです。
    これは７のサイズです。
    これは標準のサイズです。
    標準のサイズを４にしてみました。
    標準のサイズを３にしてみました。
    標準のサイズ＋１のサイズです。
    標準のサイズ−１のサイズです。




・文字の色を変える

    <FONT COLOR="#FF0000">これは赤です。</FONT><BR>
<FONT COLOR="#00FF00">これは緑です。</FONT><BR>
<FONT COLOR="#0000FF">これは青です。</FONT><BR>


    結果は以下のようにになります。

    これは赤です。
    これは緑です。
    これは青です。




・段落にする

    段落の前後では一行改行されます。<BR>
段落の前後では一行改行されます。<BR>
<P>
段落の前後では一行改行されます。<BR>
段落の前後では一行改行されます。<BR>
</P>
段落の前後では一行改行されます。<BR>
段落の前後では一行改行されます。<BR>
    ★<P ALIGN="">で<DIV>タグと同様に左寄せ、中寄せ、右寄せもできます。


    結果は以下のようにになります。

    段落の前後では一行改行されます。
    段落の前後では一行改行されます。

    段落の前後では一行改行されます。
    段落の前後では一行改行されます。

    段落の前後では一行改行されます。
    段落の前後では一行改行されます。




・左寄せ、中寄せ、右寄せにする

    <DIV ALIGN="left">これは左寄せです。</DIV><BR>
<DIV ALIGN="center">これは中寄せです。</DIV><BR>
<DIV ALIGN="right">これは右寄せです。</DIV><BR>


    結果は以下のようにになります。

    これは左寄せです。

    これは中寄せです。

    これは右寄せです。





・文字を装飾する

    <B>太字です。</B><BR>
<I>イタリック体です。</I><BR>
<S>抹消線です。</S><BR>
<U>下線です。</U><BR>
<TT>等幅です。</TT><BR>
<SUP>上付きです。</SUP><BR>
<SUB>下付きです。</SUB><BR>
<BLINK>点滅です。</BLINK><BR>


    結果は以下のようにになります。

    太字です。
    イタリック体です。
    抹消線です。
    下線です。
    等幅です。
    上付きです。
    下付きです。
    点滅です。




・横罫線を引く

    <HR>
<HR WIDTH="25%">
<HR WIDTH="50%">


    結果は以下のようにになります。





・イメージを貼り付ける

    <IMG SRC="hana.jpg" ALT="花の写真" BORDER=0 WIDTH=100 HEIGHT=100>
    ★hana.jpgはこのドキュメントと同じ場所にあります。



    結果は以下のようにになります。

    花の写真




・リンクする

    <A HREF="hk_html11.htm" TARGET="_blank">HTMLで書いてみよう！（初級編）</A>
    ★"_blank"を"_self"にすれば新しい窓を開きません。


    結果は以下のようにになります。

    HTMLで書いてみよう！（初級編）




・メールしてもらう

    <A HREF="mailto:yutakayutaka@yahoo.co.jp">メールしてね！</A>


    結果は以下のようにになります。

    メールしてね！




・テーブルで整理する

    <TABLE BORDER=1>
    
<TR>
<TD>名前</TD><TD>国語</TD><TD>算数</TD>
</TR>
<TR>
<TD>あきこ</TD><TD>１００点</TD><TD>１００点</TD>
</TR>
<TR>
<TD>あきら</TD><TD>９０点</TD><TD>８０点</TD>
</TR>
<TR>
<TD>ゆたか</TD><TD>２０点</TD><TD>３０点</TD>
</TR>
</TABLE>


    結果は以下のようにになります

    名前国語算数
    あきこ１００点１００点
    あきら９０点８０点
    ゆたか１０点２０点




ホームページへ戻る