HTML によるWebページ作成

段落や区切りに関するタグ
見出しに関するタグ
作成したページの公開方法
リンクに関するタグ
画像の表示に関するタグ
箇条書きのためのタグ
文字に関するタグ
表組を表示させるタグ
その他有用なタグ

段落や区切りに関するタグ

※タグを書く場合, アルファベットの大文字と小文字の区別はありません．どちらで書いても同じです．

<BODY BGCOLOR="色の名前"TEXT="色の名前"> ... </BODY>

ページの背景色及び文字の基本色を指定する．ページ全体をこのタグではさむ．
色の名前についてはこちらを参照
<BR>, <P>
改行をする. <P>の場合は次の行との間に空行が出来ます
<P> ...</P>
一つの段落をつくる．ただし, 段落の前後に空行ができる．
<P ALIGN="left(または center または right)"> ...</P>
段落の中で各行を左揃え(またはセンター揃え，または右揃え)する．
<DIV> ...</DIV>
一つの段落をつくる．ただし, 段落の前後の空行はなし．
<DIV ALIGN="left(または center または right)"> ...</DIV>
段落の中で各行を左揃え(またはセンター揃え，または右揃え)する．
<HR>
区切り線を書く

見出しに関するタグ

<H2> ...</H2>, <H2> ...</H2>, ..., <H6> ...</H6>
見出しを書くためのタグ．数字が小さいほど文字が大きい．
見出しを左寄せ(またはセンター寄せ，または右寄せ)するには
<H2 ALIGN="left(または center または right)"> ... </H2>
のようにする．

リンクに関するタグ

<A HREF="URL (またはファイル名)"> ... </A>
他の web ページ(または自分で作成したページ)へのリンクを作るためのタグ
<A HREF="URL (またはファイル名)" TARGET="_blank"> ... </A>
リンク先を新しいウィンドウに表示

使用例:

<A HREF="http://www.econ.tohoku.ac.jp"> 経済学部HP </A> <BR> <A HREF="http://www.tohoku.ac.jp/" TARGET="_blank"> 東北大HPへのリンク</A>

経済学部のホームページ
東北大HPへのリンク

<A HREF="#任意のラベル"> ... </A>, <A NAME="任意のラベル"> ... </A>
(もしくは <A NAME="任意のラベル"> のみ)
同じページの指定個所にジャンプ

使用例:

<A NAME="start"> <=== 実際にはこのページの最初においてあります <A HREF="#start"> このページの先頭へ </A>

このページの先頭へ

画像の表示に関するタグ

<IMG SRC="ファイル名">
画像を表示．「ファイル名」のところには画像ファイルの名前が入る

使用例:

<IMG SRC="cablecar.jpg">サンフランシスコのケーブルカーの写真です <IMG SRC="tohoku-logo-s.gif">東北大学のロゴです <IMG SRC="bluebutton.gif">青いボタンのアイコンです<br> 右のボタンを押すと東北大学ホームページへ <A HREF="http://www.tohoku.ac.jp"> <IMG SRC="redball.gif" BORDER="0"> </A>

サンフランシスコのケーブルカーの写真です

東北大学のロゴです

青いボタンのアイコンです
右のボタンを押すと東北大学ホームページへ

<IMG SRC="ファイル名" WIDTH="数字" HEIGHT="数字">
指定した大きさで画像をページに表示

使用例:

東北大学のロゴです<IMG SRC="tohoku-logo-s.gif" HEIGHT="100"> 大きくなりました<P> 青いボタンのアイコンです．<IMG SRC="bluebutton.gif" WIDTH="100" HEIGHT="10"> 横長になりました．

東北大学のロゴです

大きくなりました

青いボタンのアイコンです．横長になりました．

アイコンの入手方法 --- ホームページ素材集のページから入手できます．「ホームページ素材」で検索するといろいろ見つかります．

欲しい画像，アイコンの上にマウスカーソルを移動
右ボタンをクリック
メニューの「画像を名前を付けて保存」をクリック
ファイル名を指定して保存

<IMG SRC="ファイル名" BORDER="数値">
画像に枠を付けて表示
「数値」を大きくすると枠が太くなる
<IMG SRC="ファイル名" ALIGN="right(left)">
画像をページの右側(左側)に強制的に表示
<IMG SRC="ファイル名" ALIGN="top(center, bottom)">
テキストと画像の上下位置の関係を指定して表示

使用例:

赤いボールです．<IMG SRC="redball.gif" BORDER="5"> 枠つきです．<P> 赤いボールです．<IMG SRC="redball.gif" ALIGN="right"> 右側に寄せました．<P> 赤いボールです．<IMG SRC="redball.gif" ALIGN="top"> 文章とボールを上揃えにしました．

赤いボールです．

枠つきです．

赤いボールです．右側に寄せました．

赤いボールです．文章とボールを上揃えにしました．

注意！！！画像を使ったウェブページをアップロードするときは，画像のファイルも一緒にアップロードすること！

箇条書きのためのタグ

<UL> <LI>...</UL>
普通の箇条書き

使用例: faclist.html

東北大学の学部一覧 <UL> <LI> 文学部 <LI> 教育学部 <LI> 法学部 <LI> 経済学部（以下略） </UL>

※入れ子にして利用することも可能 ---- 使用例: deplist.html

東北大学の学科一覧（経済学部, 農学部，理学部のみ） <UL> <LI> 経済学部 <UL> <LI> 経済学科 <LI> 経営学科 </UL> <LI> 農学部 <UL> <LI> 生物生産科学科 <LI> 応用生物化学科 </UL> （途中省略） </UL>

<OL> <LI>...</OL>
番号の付いた箇条書き

東北大学の学部学生数ランキング <OL> <LI> 工学部 --- ４０００人 <LI> 理学部 --- １４００人 <LI> 経済学部 --- １２００人（途中略） </OL>

<OL TYPE="I"> <LI>...</OL>
ローマ数字（大文字）による番号の付いた箇条書き
"I" を
"i"（ローマ数字小文字）， "A"（アルファベット大文字）， "a"（アルファベット小文字），
に変更することも可能

文字に関するタグ

<FONT SIZE="1から7までの数字"> ...</FONT>
文字の大きさを部分的に変更するタグ．数字が大きいほど文字が大きくなる．

１２３４５６７
<FONT COLOR="色の名前"> ...</FONT>
文字の色を部分的に変更するタグ．あかあおきいろ
<B> ...</B>
文字を太字にするタグ．

太字はこのような文字です
<I> ...</I>
文字を斜体にするタグ．

斜体の文字はこのような感じです
<SUP> ...</SUP>
上付き文字を書くためのタグ． 2⁸ = 256 東北大学^注１
<SUB> ...</SUB>
下付き文字を書くためのタグ． a₁ = 1, a₂ = 2, a₃ = 4, a₄ = 8, ...
<U> ...</U>
文字に下線を引くためのタグ． HTML言語はWebページを書くときに用いられる言語である
<S> ...</S>
文字の上に取り消し線を引くためのタグ．レポートの締め切り： ~~９月３０日~~ １０月７日
上記のタグを組合せて使うことも可能
例１： <FONT SIZE="7" COLOR="red"> ...</FONT>
---> 大きさ７の赤い文字
例２： <B> <I> ... </I> </B>
---> 斜体の太字

表組を表示させるタグ

<TABLE> ... </TABLE>
表の最初と最後に必ず付けるタグ
<TR> ... </TR>
表の各行（横の項目の並び）の最初と最後に付けるタグ
<TD> ... </TD>
表の各項目の最初と最後に付けるタグ

使用例:

<TABLE> <TR> <TD> 学部名 </TD> <TD> 文学部 </TD> <TD> 教育学部 </TD> <TD> 法学部 </TD> <TD> 経済学部 </TD> </TR> <TR> <TD> 男性 </TD> <TD> ５５９ </TD> <TD> １７１ </TD> <TD> ７４７ </TD> <TD> ９３９ </TD> </TR> (途中を省略) </TABLE>

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TABLE BORDER="数値"> ... </TABLE>
表に枠を付ける．数値を大きくすると枠も太くなる．
<TABLE CELLSPACING="数値"> ... </TABLE>
表の罫線の大きさを指定する．
<TABLE ALIGN="center(もしくは right)"> ... </TABLE>
表の表示位置をウィンドウの中央(もしくは右)にする．
<CAPTION ALIGN="top(もしくは bottom)"> ... </CAPTION>
表の題名(キャプション)を表の上(もしくは下)に表示する．

使用例:

<TABLE BORDER="4" CELLSPACING="3" ALIGN="center"> <CAPTION ALIGN="bottom"> 東北大文系４学部の男女学生数 </CAPTION> <TR> <TD> 学部名 </TD> <TD> 文学部 </TD> <TD> 教育学部 </TD> <TD> 法学部 </TD> <TD> 経済学部 </TD> </TR> (途中省略) </TABLE>

表示例

東北大文系４学部の男女学生数
学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TABLE WIDTH="数値" HEIGHT="数値"> ... </TABLE>
表の大きさ(幅, 高さ)を指定する．
<TD WIDTH="数値" HEIGHT="数値"> ... </TD>
<TH WIDTH="数値" HEIGHT="数値"> ... </TH>
表の欄の幅および高さを指定する．
各行の高さは，その行内の欄の高さの最大値に一致する．
各列の幅は，その列内の欄の幅の最大値に一致する．

使用例:

<TABLE BORDER="4" CELLSPACING="3" ALIGN="center"> <CAPTION ALIGN="bottom"> 東北大文系４学部の男女学生数 </CAPTION> <TR> <TD WIDTH="100" HEIGHT="30"> 学部名 </TD> <TD WIDTH="90"> 文学部 </TD> <TD WIDTH="90"> 教育学部 </TD> <TD WIDTH="90"> 法学部 </TD> <TD WIDTH="90"> 経済学部 </TD> </TR> <TR> <TD HEIGHT="40"> 男性 </TD> <TD> ５５９ </TD> <TD> １７１ </TD> <TD> ７４７ </TD> <TD> ９３９ </TD> </TR> (途中省略) </TABLE>

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TH> ... </TH>
表の見出しとなる項目の最初と最後につけるタグ．項目が中寄せされ, 文字が太字になる．
<TD ALIGN="center(もしくは left, right)"> ... </TD>
<TH ALIGN="center(もしくは left, right)"> ... </TH>
<TR ALIGN="center(もしくは left, right)"> ... </TR>
表の欄内における項目の位置を中央(もしくは左, 右)にする．
<TR> の場合は, タグで囲んだ行の全ての項目に対して有効．
<TD VALIGN="top(もしくは middle, bottom)"> ... </TD>
<TH VALIGN="top(もしくは middle, bottom)"> ... </TH>
<TR VALIGN="top(もしくは middle, bottom)"> ... </TR>
表の欄内における項目の位置を欄の上段(もしくは中段, 下段)にする．
<TR> の場合は, タグで囲んだ行の全ての項目に対して有効．

使用例:

(前略) <TR> <TH HEIGHT="40"> 男性 </TH> <TD ALIGN="right"> ５５９ </TD> <TD ALIGN="right"> １７１ </TD> <TD ALIGN="right"> ７４７ </TD> <TD ALIGN="right"> ９３９ </TD> </TR> (後略)

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TABLE BORDERCOLOR="色の名前"> ... </TABLE>
表の外枠の色を指定．
ただし, <BODY BGCOLOR> により背景の色を指定していると指定した色にならない場合がある．
<TABLE BGCOLOR="色の名前"> ... </TABLE>
表の背景の色を指定．
<TR BGCOLOR="色の名前"> ... </TR>
表の行の背景の色を指定．
<TD BGCOLOR="色の名前"> ... </TD>
<TH BGCOLOR="色の名前"> ... </TH>
表の特定の欄の背景の色を指定．

使用例:

<TABLE BGCOLOR="cornflowerblue" BORDER="4" BORDERCOLOR="blue" CELLSPACING="3" ALIGN="center"> <TR BGCOLOR="mediumslateblue"> <TH WIDTH="100" HEIGHT="30"> 学部名 </TH> <TH WIDTH="90"> 文学部 </TH> <TH WIDTH="90"> 教育学部 </TH> <TH WIDTH="90"> 法学部 </TH> <TH WIDTH="90"> 経済学部 </TH> </TR> <TR> <TH BGCOLOR="mediumslateblue" HEIGHT="40"> 男性 </TH> <TD ALIGN="right"> ５５９ </TD> <TD ALIGN="right"> １７１ </TD> <TD ALIGN="right"> ７４７ </TD> <TD ALIGN="right"> ９３９ </TD> </TR> (後略)

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

その他有用なタグ

<BODY BACKGROUND="画像ファイル名"> ... </BODY>
ページの背景にイメージを配置する．
指定した画像ファイルにより，ページの背景が縦横に埋め尽くされる．
例１：青い四角いボタンを背景にした場合 bg1.html
例２：茶色のチェック模様を背景にした場合 bg2.html
<BODY LINK="色の名前" ALINK="色の名前" VLINK="色の名前" > ... </BODY>
ページのリンクに関連する文字の色を設定する．
LINK はリンクが設定された部分の文字の色（通常は青）
ALINK はリンクが設定された部分の文字をクリックしているときの文字の色（通常は赤）
VLINK はリンクが設定された部分の文字の色（リンク先をすでに訪問した場合）（通常は紫）

使用例: link2.html

<BODY BGCOLOR="pink" LINK="white" ALINK="gray" VLINK="black"> リンクに関連する文字の色を変えてみました． <A HREF="http://www.is.tohoku.ac.jp"> 東北大学情報科学研究科 </A> </BODY>