HTML によるWebページ作成


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

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

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

見出しに関するタグ


リンクに関するタグ

使用例:
<A HREF="http://www.econ.tohoku.ac.jp"> 経済学部のホームページ </A> <BR> <A HREF="http://www.law.tohoku.ac.jp/" TARGET="_blank"> 法学部HPへのリンク</A>
経済学部のホームページ
法学部HPへのリンク
使用例:
<A NAME="start"> <=== 実際にはこのページの最初においてあります <A HREF="#start"> このページの先頭へ </A>
このページの先頭へ

画像の表示に関するタグ

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

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


アイコンの入手方法 --- ホームページ素材集のページから入手できます. 「ホームページ 素材」で検索するといろいろ見つかります.
使用例:
赤いボールです.<IMG SRC="redball.gif" BORDER="5"> 枠つきです.<P> 赤いボールです.<IMG SRC="redball.gif" ALIGN="right"> 右側に寄せました.<P> 赤いボールです.<IMG SRC="redball.gif" ALIGN="top"> 文章とボールを上揃えにしました.
赤いボールです.枠つきです.

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

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


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

箇条書きのためのタグ

使用例: faclist.html
東北大学の学部一覧 <UL> <LI> 文学部 <LI> 教育学部 <LI> 法学部 <LI> 経済学部 (以下略) </UL>
※入れ子にして利用することも可能 ---- 使用例: deplist.html
東北大学の学科一覧(経済学部, 農学部,理学部のみ) <UL> <LI> 経済学部 <UL> <LI> 経済学科 <LI> 経営学科 </UL> <LI> 農学部 <UL> <LI> 生物生産科学科 <LI> 応用生物化学科 </UL> (途中省略) </UL>
使用例: faclist.html
東北大学の学部学生数ランキング <OL> <LI> 工学部 --- 4000人 <LI> 理学部 --- 1400人 <LI> 経済学部 --- 1200人 (途中略) </OL>

文字に関するタグ


表組を表示させるタグ

使用例:
<TABLE> <TR> <TD> 学部名 </TD> <TD> 文学部 </TD> <TD> 教育学部 </TD> <TD> 法学部 </TD> <TD> 経済学部 </TD> </TR> <TR> <TD> 男性 </TD> <TD> 559 </TD> <TD> 171 </TD> <TD> 747 </TD> <TD> 939 </TD> </TR> (途中を省略) </TABLE>
表示例
学部名 文学部 教育学部 法学部 経済学部
男性 559 171 747 939
女性 421 196 261 237
合計 980 367 1,008 1,176

使用例:
<TABLE BORDER="4" CELLSPACING="3" ALIGN="center"> <CAPTION ALIGN="bottom"> 東北大文系4学部の男女学生数 </CAPTION> <TR> <TD> 学部名 </TD> <TD> 文学部 </TD> <TD> 教育学部 </TD> <TD> 法学部 </TD> <TD> 経済学部 </TD> </TR> (途中省略) </TABLE>
表示例
東北大文系4学部の男女学生数
学部名 文学部 教育学部 法学部 経済学部
男性 559 171 747 939
女性 421 196 261 237
合計 980 367 1,008 1,176

使用例:
<TABLE BORDER="4" CELLSPACING="3" ALIGN="center"> <CAPTION ALIGN="bottom"> 東北大文系4学部の男女学生数 </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> 559 </TD> <TD> 171 </TD> <TD> 747 </TD> <TD> 939 </TD> </TR> (途中省略) </TABLE>
表示例
学部名 文学部 教育学部 法学部 経済学部
男性 559 171 747 939
女性 421 196 261 237
合計 980 367 1,008 1,176

使用例:
(前略) <TR> <TH HEIGHT="40"> 男性 </TH> <TD ALIGN="right"> 559 </TD> <TD ALIGN="right"> 171 </TD> <TD ALIGN="right"> 747 </TD> <TD ALIGN="right"> 939 </TD> </TR> (後略)
表示例
学部名 文学部 教育学部 法学部 経済学部
男性 559 171 747 939
女性 421 196 261 237
合計 980 367 1,008 1,176

使用例:
<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"> 559 </TD> <TD ALIGN="right"> 171 </TD> <TD ALIGN="right"> 747 </TD> <TD ALIGN="right"> 939 </TD> </TR> (後略)
表示例
学部名 文学部 教育学部 法学部 経済学部
男性 559 171 747 939
女性 421 196 261 237
合計 980 367 1,008 1,176

その他有用なタグ

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