12月15,22日 第10,11回 ホームページの作成
| Index | ・ HTMLファイル | |
| ・ ホームページの作り方 | A. ホームページ作成にあたっての注意 | |
| B． ホームページ用のフォルダの作成 | ||
| C． ホームページファイルの作成 | ||
| D． 追加ページの作成 （ページのリンク） | ||
| E． ユーザーのホームページ一覧 （補足； RIISEのサービス | ||
| F． HTML入門 (Basic) | ||
| G． CGIプログラムの実行とサーバー包含機能について （発展） |
| F． HTML入門 (Basic) | |||
| 文書構造タグ | (22) 大文字 | (29) 画像の背景表示 | |
| (1) <HTML> | 文字の修飾 | (23) 小文字 | (30) 背景色 |
| (2) <HEAD> | (11) サイズ | ||
| (3) <TITLE> | (12) 色指定 | 箇条書きタグ | リンク |
| (4) <BODY> | (13) フォント種 | (24) 箇条書き（マーク） | (31) リンク |
| (5) <!-- 注釈文 --> | (14) 太字 | (25) 箇条書き（番号） | (32) リンク（画像） |
| (15) 斜体 | (26) 箇条書き（インデント） | (33) E-mail送信 | |
| 基本タグ | (16) タイプライタ体 | (34) ページ内のリンク | |
| (6) 見出し | (17) アンダーライン | 作表 | |
| (7) 改行 | (18) 取消線 | (27) 表の作成・表示 | その他 |
| (8) 空白行 | (19) 上付き文字 | (35) その他 省略 | |
| (9) 文章の水平位置 | (20) 下付き文字 | 画像 | |
| (10) 水平線 | (21) 点滅文字 | (28) 画像表示 | |
ホームページに載せないほうが良いもの （プライバシーに関わるもの）
電話番号、住所
その他、個人データ
――「ネットワーク市民の手引」を参照のこと――
Indexに戻る
(1) <HTML>
… </HTML>
HTMLで記述されている文書であることを指示する。
−例 ここを参照 −
Indexに戻る
(2) <HEAD>
… </HEAD>
HTML文書の頭書き部であることを指示する。
<TITLE>タグや<META>タグが入る。
−例 ここを参照 −
Indexに戻る
(3) <TITLE>
… 題名 … </TITLE>
HTML文書の題名を指示する。
−例 ここを参照 −
Indexに戻る
(4) <BODY>
… 文書本体部 … </BODY>
HTML文書本体部であることを指示する。(30)も参照
−例 ここを参照 −
Indexに戻る
(5) <!--
注釈文 -->
注釈文を挿入する。ブラウザ上には表示されない。
−例 ここを参照 −
基本タグ
Indexに戻る
(6) <H1>
… 見出し1 … </H1>、 <H2>
… 見出し2 … </H2> ......
文書の見出しを指定する。
見出し用のタグはH1からH6まであり、 この順に見出しの大きさが小さくなる。
オプション <H1 ALIGN = "LEFT, (CENTER,
RIGHT)">
(9) と同様。参照のこと。
−例 ここを参照 −
Indexに戻る
(7) <BR>
行の終りを指示する。 ＝ 改行
−例 ここを参照 −
Indexに戻る
(8) <P>
段落の終りを指示する。 ＝ 空白行
<BR> と <P> の違いは例4参照。
<BR> は、連続で使用できるが、<P> は何回使用しても1つ分しか適用されない。
−例 ここを参照 −
Indexに戻る
(9) <DIV
ALIGN = "LEFT, (CENTER,
RIGHT)"> …
</DIV>
範囲内の文章を左寄せ（中央寄せ、右寄せ）で表示する。
<P ALIGN = "LEFT, (CENTER,
RIGHT)">
… </DIV>
でも同様。この場合、文の前後に1行空きができる。
Indexに戻る
(10) <HR
（オプション）>
水平線を引く。
（オプション） 太さを変える <HR SIZE="1 〜 100">
デフォルトは2
長さを変える <HR WIDTH="aa%,
ピクセル数">
位置を変える <HR ALIGN="LEFT 又は RIGHT"> デフォルトはCENTER
色を付ける <HR COLOR="色指定"> 色指定については
(12) 参照
平面的な線に変える <HR NOSHADE>
注意 ALIGNはWIDTHとの併用で使用できる（当然？）。COLORはNetscapeでは表示されないかも？。
−例 ここを参照 −
基本タグ （文字の修飾） −例 ここを参照
−
Indexに戻る
(11) <FONT
SIZE = "サイズ">
… </FONT>
"サイズ" は、1（最小） 〜 7（最大）、もしくは相対的な +1 〜 +7、-1 〜 -7 で表す。
−例 ここを参照 −
Indexに戻る
(12) <FONT
COLOR = "色指定">
… </FONT>
"色指定"は、色名の「 AQUA、 BLACK、
BLUE、 CYAN、 FUCHSIA、
GRAY、 GREEN、 LIME、
MAGENTA、 MAROON、 NAVY、
OLIVE、 ORANGE、 PINK、
PURPLE、 RED、 SILVER、
TEAL、 WHITE(WHITE)、 YELLOW」で行うか、RGB値（カラーコード）の「#RRGGBB」で行う。
カラーコード
光の三原色である赤(R)、緑(G)、青(B)の配分を00
〜 FFまでの16進数で記述する。
一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になる。
詳細については http://wakusei.cplaza.ne.jp/twn/wwwcolor.htm
を参照。
−例 ここを参照 −
Indexに戻る
(13) <FONT
FACE = "フォント名">
… </FONT>
<FONT FACE = "フォント名1,フォント名2,フォント名3,...">
… </FONT>
フォントを指定する。
注意 ただしこれは、インターネットエクスプローラとNetscape4.0以降でしか使えません。（他のブラウザでは無視される。）
−例 ここを参照 −
Indexに戻る
(14) <B>
… </B>
太字 (Bold) で範囲内を表示する。
−例 ここを参照 −
Indexに戻る
(15) <I>
… </I>
斜体 (Italic) で範囲内を表示する。
−例 ここを参照 −
Indexに戻る
(16) <TT>
… </TT>
タイプライタ体（等幅フォント）で範囲内を表示する。
−例 ここを参照 −
Indexに戻る
(17) <U>
… </U>
範囲内にアンダーラインを引く。
−例 ここを参照 −
Indexに戻る
(18) <S>
… </S>
範囲内に取消線を引く。
−例 ここを参照 −
Indexに戻る
(19) <SUP>
… </SUP>
上付き文字で範囲内を表示する。
−例 ここを参照 −
Indexに戻る
(20) <SUB>
… </SUB>
下付き文字で範囲内を表示する。
−例 ここを参照 −
Indexに戻る
(21) <BLINK>
… </ BLINK >
範囲内の文字を点滅させる。
注意 ただしこれは、Netscapeでしか使えません。
−例 ここを参照 −
Indexに戻る
(22) <BIG>
… </BIG>
範囲内の文字を大きくする。 <FONT SIZE=+1> … </FONT>
と同じ。
−例 ここを参照 −
Indexに戻る
(23) <SMALL>
… </SMALL>
範囲内の文字を小さくする。 <FONT SIZE=-1> … </FONT>
と同じ。
−例 ここを参照 −
箇条書きタグ
Indexに戻る
(24) <UL>
<LI> … <LI>
… … </UL>
箇条書きで表示する。箇条書きのそれぞれの項目の開始は、タグ <LI> によって指示し、各項目の始めに、自動的にマークが付けられる。
（オプション） マークの形を変える <UL(LI) TYPE="DISK,
CIRCLE 又は SQUARE">
デフォルトはDISK
注意 ただしこれは、インターネットエクスプローラでは使えません。
−例 ここを参照 −
Indexに戻る
(25) <OL>
<LI> … <LI>
… … </OL>
箇条書きで表示する。箇条書きのそれぞれの項目の開始は、タグ <LI> によって指示し、各項目の始めには、自動的に番号が付けられる。
（オプション） マークの形を変える <UL(LI) TYPE="DISK,
CIRCLE 又は SQUARE">
デフォルトはDISK
注意 ブラウザによって表示のされ方が異なります。
−例 ここを参照 −
Indexに戻る
(26) <DL>
<DT> … <DD>
… <DT> … <DD>
… … </DL>
項目とそれに対する説明の形で表示する。 項目の開始は <DT> で、それに対する説明の開始は
<DD> （改行して右にインデント表示）
<DL COMPACT> <DD>
による改行をなくす。
−例 ここを参照 −
作表 −例 ここを参照 −
Indexに戻る
(27) <TABLE
BORDER = "罫線サイズ">
<CAPTION ALIGN = "TOP 又は
BOTTOM"> タイトル名 </ CAPTION >
<TR>
<TH> … </TH> <TH>
… </TH> <TD> … </TD>
… …
</TR>
<TR>
<TD> … </TD> <TD>
… </TD> <TD> … </TD>
… …
</TR>
<TR>
… …
… …
</TR>
</TABLE>
表の作成・表示をする。
<TR> … </TR>
表の行を示す
<TD> … </TD>
表のデータを表示する。
<TH> … </TH>
表の項目を表示する。<TD> … </TD>に比べ、太字･中央揃えで表示する。
（オプション） 文章の折り返しをしない NOWRAP
セルを横に結合する COLSPAN = "結合セル数"
セルを縦に結合する ROWSPAN = "結合セル数"
セルの幅や高さを変える WIDTH = "サイズ"
HEIGHT = "サイズ"
ピクセル数又はパーセント(%)で指定する
表や文字の配置（横位置）を変える ALIGN = "LEFT, CENTER
又は RIGHT"
文字の配置（縦位置）を変える VALIGN = "TOP, MIDDLE
又は BOTTOM"
表の外枠の太さを変える BORDER = "（サイズ）"
初期値2 （BORDERのみ表示）
0又は省略では全ての線が消える
内枠線の太さを変える CELLSPACING = "サイズ"
0では線が消える
罫線と文字間を変える CELLPADDING = "サイズ"
表の内側の色を変える BGCOLOR = "色指定"
外枠線の色を変える BORDERCOLOR = "色指定"
外枠線の暗い部分の色を変える BORDERCOLORDARK = "色指定"
外枠線の明るい部分の色を変える BORDERCOLORLIGHT = "色指定"
背景イメージを指定する BACKGROUND = "ファイル名"
内枠線の有無を指定する RULES = "ALL, ROWS,
COLS, NONE
又は GROUPS"
注意 ブラウザによって表示のされ方が異なります。
画像
Indexに戻る
(28) <IMG
SRC = "画像ファイル名" （オプション）>
本文に画像ファイル（GIF形式かJPEG形式）を入れることを指示します。
例えば、<IMG SRC="rainbow.gif"> とします。
多くのWWWブラウザでは、GIF形式の画像ファイルが取り扱えるので、GIF形式の画像を用意することを推奨します。
（オプション） 画像のサイズを変える WIDTH = "横の長さ"
HEIGHT = "縦の長さ"
画像の名前（説明文）を表示させる ALT = "説明文"
文章の回り込みをする ALIGN = "LEFT 又は RIGHT"
位置を指定する ALIGN = "TOP, MIDDLE
又は BOTTOM"
画像に外枠を付ける BORDER = "サイズ"
Indexに戻る
(29) <BODY
BACKGROUND = "ファイル名">
背景に絵を載せる。
Indexに戻る
(30) <BODY
BGCOLOR= "色指定">
背景の色を指定する。
BODYタグではこの他に以下の指定が出来る。
<BODY TEXT = "色指定">
本文の色 デフォルト 黒
<BODY LINK = "色指定">
リンクの色 デフォルト 青
<BODY VLINK = "色指定">
リンク済の色 デフォルト 紫
<BODY ALINK = "色指定">
リンク中の色 デフォルト 赤
リンク
Indexに戻る
(31) <A
HREF = "リンクするＵＲＬ">
… … </A>
他のURLへリンクを張ることを指示します。
「 … … 」の部分がクリックされると、指定したURLに飛びます。
例: <A HREF="http://www.riise.hiroshima-u.ac.jp/~wadashin/">物理科学科「情報活用演習」</A>
リンク先が自分のHTMLファイルなら、 完全なURL記述の代わりに省略形式
<A HREF="フォルダ名/ファイル名">
も使えます。
例えば <A HREF="Report03.html"> は、現在表示されているページと同一のフォルダにあるファイル
Report03.htmlへのリンクを指示します。上層フォルダの場合フォルダ名は 「 ../
」 とする。
Indexに戻る
(32) <A
HREF = "リンクするＵＲＬ"> <IMG
SRC = "画像ファイル名" （BORDER
= 0）> </A>
アイコンや画像をクリックするとリンクする。
Indexに戻る
(33) <A
HREF = "MAILTO:e-mailアドレス">
… … </A>
クリックするメーラーが起動し、e-mailが送れる状態になる。
Indexに戻る
(34) <A
NAME = "リンク先の名前"> </A>
<A HREF = "#リンク先の名前">
… … </A>
ページ内でリンクを張って、そこ（特定の場所）に移る。
例 情報活用演習ホームページでの例
ホームページのソースファイル（HTMLファイル）では、"LINKS" と記した行の上に
<A NAME = "links"> </A>
と書いてあり、ホームページ最初の方にある "一気に「LINKS」に GO! " はソースファイルでは
<A HREF = "#links"> 一気に「LINKS」に GO!
</A>
と記してある。
別のページの特定場所に移るには、
<A HREF = "ファイル名#リンク先の名前">
… … </A>
例 情報活用演習ホームページ
<a href="Enquete_99.html#last"> ついでに[アンケート結果]の最後の設問にひとっ飛び!
</a>
Indexに戻る
(35) その他、フレームやイメージマップ
は 省略
Indexに戻る
Ｇ． CGIプログラムの実行とサーバー包含機能について （発展）
Last updated on Dec. 13 1999