HTML講座 20001120

現在のところ、「正しいHTML」でWWWサイトを記述するには、いわゆる「タグの手打ち」ができることが不可欠である。要するに「ホームページ作成ツール」を使うことなく、メモ帳などのエディタでWWWページを書けるようになるべし、ということだ。

「正しいHTML」による記述は、ルーミックファンたちの交流を広める上でも有効なことである。

初心者用(HTMLを書くカピ☆)

まず下記のテキストファイルを作成して下さい。専用のアプリケーションなどが無くても、メモ帳などで作成することができます。その後、ブラウザで、index.html を開いて下さい。それだけです。

index.html

<HTML>

<HEAD>

<TITLE>たいとる</TITLE>

</HEAD>

<BODY>

<H1>みだし</H1>

<P>ほんぶん1。</P>

<P>ほんぶん2。</P>

<P>ほんぶん3。</P>

</BODY>

</HTML>

初級者用(リンクしてみるカピ☆)

下記の2つのテキストファイルを同一のフォルダに作成して下さい(上書きして構いません)。その後、ブラウザで、index.html を開いて下さい。

index.html

<HTML>

<HEAD>

<TITLE>初級者用</TITLE>

</HEAD>

<BODY>

<H1>みだし</H1>

<P>ほんぶん1。</P>

<P>ほんぶん2。</P>

<P>ほんぶん3。</P>

<P><A href="./kapikapi.html">かぴかぴ☆</A>へのリンク。</P>

</BODY>

</HTML>

kapikapi.html

<HTML>

<HEAD>

<TITLE>かぴかぴ☆</TITLE>

</HEAD>

<BODY>

<H1>かぴかぴ☆</H1>

<P><A href="./index.html">index.html</A>へ戻るカピ☆</P>

<P><A href="http://arai.rumic.gr.jp/index.html">卓上打算機</A>へのリンク☆。</P>

</BODY>

</HTML>

中級者用(表示を変えるカピ☆)

少しだけ高度な記述にしてみました。とりあえず,Windows や Mac を使っている人に会わせて書かれてます。UNIX系の人は、Shift_JIS の部分を euc-jp と書き代えること。

default.css の中で設定できる色には、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow、などがある。

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<LINK rel="stylesheet" type="text/css" href="./default.css">

<TITLE>中級者用</TITLE>

</HEAD>

<BODY>

<H1>初級者用その2</H1>

<P><A href="./kapikapi.html">かぴかぴ☆</A>へのリンク。</P>

</BODY>

</HTML>

kapikapi.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<LINK rel="stylesheet" type="text/css" href="./default.css">

<TITLE>かぴかぴ☆</TITLE>

</HEAD>

<BODY>

<H1>かぴかぴ☆</H1>

<P><A href="./index.html">index.html</A>へ戻るカピ☆</P>

<P><A href="http://arai.rumic.gr.jp/index.html">卓上打算機</A>へのリンク☆。</P>

</BODY>

</HTML>

default.css

BODY {

color : navy ;

background-color: silver;

padding : 2% ;

}

H1 {

color : red ;

text-align: center;

}

P {

color : blue ;

text-indent : 1em ;

}

上級者用(自分で考えるカピ☆)

Academic HTMLというサイトが参考になるだろう。

[http://www.tg.rim.or.jp/~hexane/ach/index40.shtml]