html2jp

現在、皆さんが前期レポート用に使用している"ht980508.htm"を基にしたホームページのHTMLタグ（< と >に囲まれた記述内容）を以下に解説します。このHTMLはWeek#5のサンプルとして掲載したものに赤や青などの文字で解説を付け加えたものです。サンプルをクリックして5.のthisをクリックすると解説抜きのページを表示し、6.のthisをクリックするとNetscapeでこのHTMLがどのように表示されるか見ることができます。

Back to: Comp Home Week#11

<HTML>このファイルがHTMLファイルであることを宣言する記述です。削除しないで下さい。HTMLファイルはこの記述で始まり、最後の行は</HTML>で閉じないとファイルが正しく表示されません。

<HEAD><head>から</head>の間にファイルに関する情報を記述します。
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">この行は「おまじない」と思って下さい。削除可能ですが、最後にcharset=iso-8859-1と記述することにより、アルファベットを英語用のフォント（字体）で表示させる役目を果たしています。"iso-8859-1"の代わりに"x-sjis"と記述すると日本語用のフォントで文字を表示します。従って日本語を表示させることができます。
<TITLE>My 2nd HTML</TITLE><title>から</title>の間にブラウザー(Netscape)の左上角にこのファイルを開いたときに表示させたいファイルのタイトル名を記述します。ブラウザーの画面に表示させるタイトル名ではありません。従って、<TITLE>Shimada</TITLE>のように自分の名前などに変更して構いません。また、このページをBookmarkしたときは、ここに記述したタイトル名でBookmarkに保存されます。
</HEAD><head>はここで終わると宣言しています。

<body background="../images/parchmnt.gif" bgcolor="#C0C0C0" text="#000000"><body>はここからホームページの本体（画面に表示される内容）が始まることを意味します。この行は削除しないで下さい。bodyの後にこのページの背景や文字の色などをどうするか指定することができます。background="../images/parchmnt.gif"は背景として、このファイルがある一つ上のフォルダー(../)にあるimagesフォルダーの中にあるparchmnt.gifという画像を表示させなさいという意味です。表示させたいファイルがどこにあるかをこのように記述する方法を「相対パス」と言います。
bgcolor="#C0C0C0"は背景の色を"#C0C0C0"（灰色）にしなさい、という意味です。ただし、背景画像としてparchmnt.gifを表示するよう指定していますので、背景の灰色は一瞬しか表示されません。皆さんのフロッピー・ディスクのcomp98フォルダーにこのファイルを置かなかったとき、背景が灰色に表示されるのはこの記述があるからです。text="#000000"は特に指定がない限り本文の文字は"#000000"（黒）で表示しなさい、という意味です。色を表す記号は「HTMLの書き方」を参照して下さい。

<CENTER>以下（ここではMy Second HTML)を行の中央に表示させなさい、というタグです。
ブロック体（太字）で表示しなさい、というタグです。
<H1>見出しとして表示しなさい、というタグです。数字は文字の大きさを表し、１から６まで使えます。数字が大きくなると文字が小さく表示されます。
My Second HTML「見出し」ですが"First Semester Report"もしくはレポートのタイトルに書き換えて下さい。
</H1><H1>がここで終わったことを示します。</xxx>は<xxx>タグがそこで終わることを示します。例外はありますが、原則として終了タグをつけて下さい。以下終了タグの説明は省略します。

</CENTER>

パラグラフを挿入しなさい、というタグです。ここではパラグラフの中身がないので、一行カラの行を挿入する、つまり改行と同じ意味を持ちます。 と同じ結果になります。

上記と同じくパラグラフを挿入しなさい、というタグですが、ここでは中身がありますから、最後にという終了タグが必要です。align="center"は<center>と同じく、以下の中身を行の中央に表示しなさい、という命令です。
<img src="../../gifs/bluebal3.gif" width="14" height="14"><img src= >は =以下の引用符に囲まれた画像ファイルを表示しなさい、というタグです。ここでは相対パスで場所を指定されたbluebal3.gifという青い玉の画像を表示するようよう命令しています。widthとheightは表示する画像の大きさを指定しています。
は以下に表示する文字の大きさ、色、字体を指定したいときに使います。大きさはsize="5"のように数字で指定します。１から７の範囲で、数字が大きいほど、大きさも大きくなります。
のようにすると、文字の色(color)と字体(face)も指定できます。この例は２番目に大きい"6"の大きさで、色は赤（"#FF0000"のように色を表す記号を使うのが普通ですが、red, blue, green等の原色は色を表す単語も使用可能です）、字体はArialという英作文のホームページで用いているフォントで表示しなさい、と命令したことになります。
太字で表示。前述。
Project HTML 1

フォントの属性は必ず終了タグをつけて解除して下さい。
<img src="../../gifs/bluebal3.gif" width="14" height="14">前述参照。
このパラグラフ（と言っても両脇に青い玉がついた"Project HTML 1"という見出しですが）を終了する。１行改行されます。

前述参照。
<img src="../../gifs/redball3.gif" width="14" height="14">redball3.gifという赤い玉を表示します。前述参照。
前述参照。文字ランクが前行より１ランク大きくなります。
前述参照。
Hideaki Asakura自分の名前を英語で記述します。


<img src="../../gifs/redball3.gif" width="14" height="14">前述参照。



フォントサイズを指定しなかった場合は"4"で表示されますので、基本表示サイズより１ランク小さい表示になります。

Last modified on May 8, 1998更新したファイルを送るとき、いつもその日の日付に修正して下さい。




フェリックスが歩いている画像を表示させるパラグラフがここから始まります。以下の行は少し複雑です。
<a href="http://www2.dokkyo.ac.jp/~esemi006/index.htm"><a href="xxx">はxxxというファイルにジャンプしなさい、というハイパーリンク（通常、単に「リンク」と呼んでいます）を指定するタグです。ここでは
"http://www2.dokkyo.ac.jp/~esemi006/index.htm"という島田ゼミ・ホームページの一番最初のページのファイル名が指定されています。このようにインターネット上のファイルのアドレスを指定する方法を「絶対パス」と言います。
<img src="http://www2.dokkyo.ac.jp/~esemi006/images/FELIXWALK.GIF" border="0"><img src="xxx">は前述したようにxxxという画像ファイルを表示しなさい、という命令ですから、絶対パスでFELIXWALK.GIFというインターネット上（ここでは獨協大学のサーバーのskzemiというフォルダにあるimagesというフォルダーの中にある）のフェリックスが歩き回る画像を表示しなさい、という命令です。border="0"という属性は画像の境界を示す枠を0にしなさい、つまり枠を表示しない、という命令です。ここに１以上の数字を入れると枠が表示されます。数字が大きいほど枠が太くなります。<a href="xxx">yyy</a>は「yyyをクリックするとxxxにジャンプする」という意味ですから、このフェリックスの画像をクリックすると島田ゼミのフロントページにジャンプすることになります。
</a>ハイパーリンクがここで終わる（つまりyyyの部分がここで終わる）ことを示す終了タグです。この終了タグをつけないとyyyの部分がずっと続くことになり、以下の文字列にハイパーリンクを意味する下線が引かれてしまいますので、リンクを貼ったとき（<a href="xxx">yyyと記述したとき）は必ずこの終了タグはつけて下さい。
フェリックスが歩いている画像を表示させるパラグラフがここで終了します。ここまでの４行は２ページ目以降では削除して構いません。どのページにもフェリックスが歩き回っているのは目障りでしょうから。
ここまでの４行の代わりに以下のピンク色の４行を貼りつければ、ネコ嫌いの人も満足するかも知れません。余裕のある人は試してみて下さい。さらに余裕があって、このような動く画像を自分のページに使用したい人は、「きみえ」ちゃん（なかなか美形！）の「動くアイコンのページ」に行ってみて下さい。気に入った動く画像が見つかったら、その動く画像の上にカーソルを置き、マウスを右クリックし"save image as"をクリックします。するとその画像ファイル名が分かりますから、下の3行目最後の方の"anidog3.gif"の代わりにその画像ファイル名を入力すれば(拡張子".gif"を忘れないこと！）、皆さんのページの上でその画像が動き回るようになります。（動く画像が表示されない場合は、３行目の/e/animated_icons/を/e/moving_icons/と書き換えてみて下さい。それでも表示されなかった場合はNetscapeの「表示」メニューから「ページのソース」を選択して、動く画像のパスを確認してください。"<IMG SRC="../e/moving_icons/devider_sunset.gif" width=560 height=32>・南の島の夜明け。）"のように<IMG SRC=の後の引用符の中にパスが表示されています。この場合は下記の紫色の３行目
"<img src="http://kiki.pos.to/e/animated_icons/anidog3.gif" border="0">"
を
"<img src="http://kiki.pos.to/e/moving_icons/devider_sunset.gif" border="0">"
と書き換えれば、「南の島の夜明け」というディバイダーが「走る犬」の代わりに表示されます。）

<a href="http://www2.dokkyo.ac.jp/~esemi006/index.htm">
<img src="http://kiki.pos.to/e/animated_icons/anidog3.gif" border="0">
</a>

<hr>水平線を１本引きなさい、というタグです。終了タグは必要ありません。フェリックスの下にある長い横線です。<hr size="3" width="50%">のように線の太さ(size)を数字で、線の長さ(width)を数字やﾊﾟｰｾﾝﾄで指定することもできます。

<center>以下を行の中央に表示。前出。
<table border="0" width="90%"><table>とは表として表示しなさい、という意味です。ここでは表の枠(border)は0（つまり表示しない）、表の幅は表示画面の90％とする、という表の属性を指定しています。つまり以下の行はすべて枠のない表の中に表示されることになるため、左右のマージン（余白）付きで表示されます。
<tr>以下が表の１列目であることを示します。<tr>はこのページでは一つしかないので、表に列がないことになります。
<td width="100%"><td>は列の中にある行（厳密には「セル」）を示します。<td>もこのページでは一つしかないので、以下の行は全て表の中にある表と同じサイズのマス（セル）の中に、マスと同じ幅で(width="100%")表示されることになります。
<hr>水平線ですが、表（厳密にはマス）の中の水平線なので、上の水平線より余白の分だけ短くなります。

次行のリンクのパラグラフが始まることを意味します。
Back to: <A HREF="../comp99pr1.htm">Project 1 Home</A>相対パスで指定されている一つ上のフォルダにあるcomp99pr1.htmというファイル（ページ）に、太字で表示されている()Project 1 Homeという文字列をクリックするとジャンプします、ということを意味します。リンクの終了タグ</A>を付け忘れないようにして下さい。
前行のパラグラフを終了して、１行改行します。

<A HREF="../comp98pr0.htm">Project HTML Home Page</A>Project HTML(とで囲まれていないので太字になっていません）をクリックすると一つ上のフォルダーにあるcomp98pr0.htmというファイルにジャンプする、という意味です。


<a href="shimada01.htm">Next Page</a>

このピンク色の３行を記述すれば文字列Next Pageをクリックすると同じフォルダーのshimada01.htmにジャンプします。

<hr>水平線。
ここからe-mailのメッセージが入った長いパラグラフが始まります。つまりこのページの設定では以下の文字列は で改行して見かけのパラグラフを作っているので、HTML上ではパラグラフは一つしかないことになります。ではなく、 のみを使うよう皆さんに指示したのは、 のみを使った方が、秀丸でe-mailのメッセージをHTMLに直すのが簡単にできるからです。（ を改行するところに貼りつけるだけでよい。）この最初のページにはe-mailのメッセージは載せないで、e-mailフレンドの紹介などを載せることになっていますから、以下のようにとを用いて、HTML上もパラグラフを作ることも可能です。

Let me introduce my e-mail friends. The first e-mail I received was from Mr. Shimada, our composition teacher. As you may all agree, he is very kind and handsome...etc., etc.


Mr. Shimada seems to know a lot about computers. I would like to visit his office someday and learn more about computers from him. But I heard somebody say that she saw a picture of a young woman in a bathing suit on Mr. Shimada's computer. If that was true, maybe I had better not visit his office...etc., etc.

ここに載せたい内容を貼りつける指示なので、この３行は削除しないで下さい。""はこの間の文字列は表示しないというHTMLタグです。

PX-Originating-IP: [142.169.1.38]
 ラインブレイク（改行）です。以下説明を省略。
From: "Michel Gagnon" <ash_king@hotmail.com>
 
To: g7124000@for.dokkyo.ac.jp
 
Subject: eslcafe student
 
Date: Fri, 10 Apr 1998 01:15:18 PDT
 
 このように を２個連続させると改行して１行空けます。つまりと同じことになります。
Hi, how are you doing? My name's Michel Gagnon and I saw your message at eslcafe. I'm from Canada and I'm very interested in Japan cultures. I want to go live there when I'll be older and will have more money. I like movies, music, Manga and comic books. I gotta go now.
 
 
Bye, Michel
 

 
Get Your Private, Free Email at http://www.hotmail.com
 
 
 

X-Sender: g7124000@for.dokkyo.ac.jp
 
Date: Tue, 21 Apr 1998 12:28:51 +0900
 
To: "Michel Gagnon" <ash_king@hotmail.com>
 
From: Tetsunori <g7124000@for.dokkyo.ac.jp>
 
Subject: what you like
 
Cc: g7124000@for.dokkyo.ac.jp
 
 

At Today I'll tell you about Japanese comics. Minly there're three popularmagazines.called "JUMP,SUNDAY,MAGAZINE." Of course you have never heard of them.
 
You can read any types of comics if only you can find one of them. I have somany comics in my house. So if you want I can tell you the context.Whatkinds of comics do you like? Do you know some Japanese comics? Please tell me moreabout you.
 
 
Tetsunori
e-mail adress;g7124000@for.dokkyo.ac.jp
 
 
 
X-Originating-IP: [142.169.1.38]
 
From: "Michel Gagnon" <ash_king@hotmail.com>
 
To: g7124000@for.dokkyo.ac.jp
 
Subject: Michel
 
Date: Sun, 26 Apr 1998 00:19:51 PDT
 
 

Hi, how are you. As I said before, I'm a fan of comic books and Manga. I read many Marvel books and some Manga comic books. I read Dirty Pair and I'll have the trade paperback of Ghost in the Shell this summer. I'm very excited because the movie Ghost in the Shell is one of my favorite.
 
But the winner is Blade of the Immortal. If you didn't read it, you're missing something because it's the best comic book ever. One of my brother's friend came with some Blade of the Immortal comic books and I began reading it. I didn't stop until it was finished. It took me about 2 hours to read them all and I was asking for more. I'm supposed to have some more this month so I'm waiting impatiently. I gotta go now, it's getting late.
 
 

Bye, Michel
 
 

Get Your Private, Free Email at http://www.hotmail.com
 
 
 

X-Sender: g7124000@for.dokkyo.ac.jp (Unverified)
 
Date: Thu, 30 Apr 1998 14:25:43 +0900
 
To: "Michel Gagnon" <ash_king@hotmail.com>
 
From: Tetsunori <g7124000@for.dokkyo.ac.jp>
 
Subject: Blade of the Immortal
 
Cc: g7124000@for.dokkyo.ac.jp
 
 
I'm sorry but,I didn't know the comic that you told me by last e-mail. What kind of story is it? I wonder if it is also exiting to me.Now,I'll tell you a very popular comic in Japan. It's Monster.The hero of this story,Tennma, is a doctor.This story starts by resquing a very young patient who was shot by his sister. She tried to kill him as he had a plot of making the world of his own.As a result of Tnma's skill as a surgent,he survived and although he was't completly cured,he disappeared from the hospital.Then many curious cases happen. This is a horror story. You may not like such a kind of comics. But you have the opputunity for reading,especially in coming to Japan,you can run to the book store.To read it,you had better study Japanese as it isn't trancelated in English. Do you know some Japanese? From this mail on, I'll use some Japanese.
 
It's time to go to the class. Jaane Sayounara(Good-bye in Japanese)
 
 

Tetsunori
 
e-mail adress;g7124000@for.dokkyo.ac.jp
 

ここでHTML上の（ながーい）パラグラフが終わることを宣言しています。

<hr>水平線。
</td>大きなマス（セル）が終わることを宣言しています。１マスしかないので、このページでは表と同じことになります。
</tr>列が終わることを宣言しています。１列しかないので、このページでは表と同じことになります。
</table>表が終わることを宣言しています。
</center>表を中央に置くよう命令したので、それを解除しています。

</BODY>ページの本文が終了したことを宣言しています。

</HTML>HTMLが終わったことを宣言しています。</td>から</html>までは削除しないで下さい。削除すると本文が表示されなくなります。</td>の上のと<hr>も削除しない方がいいでしょう。