教育サーバーのページ

オンラインテキスト目次（水谷先生）

コンピュータリテラシー演習目次

HTML文書作成のページ

基本的なタグ

基本

HTMLタグ
```
<html>
～
</html>
```
へッダー（タイトルやHTML文書に関するデータを記述）
```
<head>
～
</head>
```
タイトル（へッダータグで囲まれた領域内に記述）
```
<head>
<title>～</title>
</head>
```
ボディ（本文を記述）
```
<body>
～
</body>
```

一般的なHTML文書の基本構成

<html>

<head>
<title>（タイトルを書く）</title>
  （ここに、HTML文書の作者やキーワードなどの情報を書く場合もある）
</head>

<body>
  （ここに本文や、表、画像を表示させる記述を書く）
</body>

</html>

このWebページのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>コンピュータリテラシー演習：基本的なタグ</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP;">
<meta name="copyright" content="© 2003 Junichi Susaki">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="../literacy.css" type="text/css">
</head>

<body bgcolor="aliceblue">

<a name="contents"></a>
<a href="http://www.edu.tuis.ac.jp/">
<img src="../icons/prev.png">教育サーバーのページ</a><br>
<a href="http://www.rsch.tuis.ac.jp/~mizutani/online/index.html">
<img src="../icons/prev.png">
オンラインテキスト目次（水谷先生）</a><br>
<a href="../index.html">
<img src="../icons/prev.png">
コンピュータリテラシー演習目次</a><br>
<a href="web.html">
<img src="../icons/prev.png">
HTML文書作成のページ</a>


<h1>
基本的なタグ
</h1>

（中略）

<hr>
<a href="web.html">[HTML文書作成のページに戻る]</a>
<a href="../index.html">[コンピュータリテラシー演習のホームに戻る]</a>
</body>
</html>

見出し

基本型

<h1>～</h1>
<h2>～</h2>

HTML文書での記述例

<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>

Webブラウザでの表示結果

見出し

注意：スタイルシートを使って設定しているので、通常の設定と異なっている。

文章

改行：

基本型

～<br>
～<br>

HTML文書での記述例

東京情報大学に入学して早くも
2ヶ月が経とうとしています。
<br>
この間にいろいろな発見が
ありました。

Webブラウザでの表示結果

東京情報大学に入学して早くも 2ヶ月が経とうとしています。
この間にいろいろな発見がありました。

段落：

基本型

<p>
～
</p>
<p>
～
</p>

HTML文書での記述例

<p>
東京情報大学に入学して早くも
2ヶ月が経とうとしています。
</p>
<p>
この間にいろいろな発見が
ありました。
</p>

Webブラウザでの表示結果

東京情報大学に入学して早くも 2ヶ月が経とうとしています。

この間にいろいろな発見がありました。

ハイパーリンク

アンカータグ

基本型

<a href="リンク先のURL">
～
</a>

HTML文書での記述例1

<a href="tag.html">
タグの問題のページへ
</a>

Webブラウザでの表示結果
タグの問題のページへ

HTML文書での記述例2

<a href="http://www.edu.tuis.ac.jp/">
東京情報大学教育用ホームページ
</a>

Webブラウザでの表示結果
東京情報大学教育用ホームページ

表

表の開始と終了
```
<table>
～
</table>
```
行の開始と終了
```
<tr>
～
</tr>
```
列の開始と終了
```
<td>～</td>
```

例：2行3列の表

<table>                ← 表の開始
  <tr>                 ← 行の開始（1行目）
    <td>～</td>        ← 列の開始～列の終了（1列目）
    <td>～</td>        ← 2列目
    <td>～</td>        ← 3列目
  </tr>                ← 行の終了（1行目）
  <tr>                 ← 別の行の開始（2行目）
    <td>～</td>        ← 列の開始～列の終了（1列目）
    <td>～</td>        ← 2列目
    <td>～</td>        ← 3列目
  </tr>                ← 行の終了（2行目）
</table>               ← 表の終了

HTML文書での記述例

<table>
  <tr>
    <td>商品名</td>
    <td>りんご</td>
    <td>柿</td>
    <td>みかん</td>
  </tr>              
  <tr>               
    <td>価格</td>
    <td>150円</td>
    <td>80円</td>
    <td>20円</td>
  </tr>
</table>

Webブラウザでの表示結果

商品名	りんご	柿	みかん
価格	150円	80円	20円

HTML文書での記述例

<table border="1" bordercolor="black">
  <tr>
    <th>商品名</th>
    <th>りんご</th>
    <th>柿</th>
    <th>みかん</th>
  </tr>              
  <tr>               
    <td>価格</td>
    <td>150円</td>
    <td>80円</td>
    <td>20円</td>
  </tr>
</table>

Webブラウザでの表示結果

商品名	りんご	柿	みかん
価格	150円	80円	20円

HTML文書での記述例

<table border="1" bordercolor="black">
  <tr>
    <td>クラス名</td>
    <td width="50">A</td>
    <td width="50">B</td>
    <td width="50">C</td>
  </tr>              
  <tr>               
    <td>教室</td>
    <td>203</td>
    <td colspan="2">204</td>
  </tr>
</table>

Webブラウザでの表示結果

クラス名	A	B	C
教室	203	204

HTML文書での記述例

<table border="1" bordercolor="black">
  <tr>
    <td height="30">クラス名</td>
    <td>教室</td>
  </tr>              
  <tr>               
    <td height="30">A</td>
    <td>203</td>
  </tr>
  <tr>               
    <td height="30">B</td>
    <td rowspan="2">204</td>
  </tr>
  <tr>               
    <td height="30">C</td>
  </tr>
</table>

Webブラウザでの表示結果

クラス名	教室
A	203
B	204
C	204

画像


<img src="～" alt="～">

    src：画像ファイル名を指定
    alt：画像が表示されない場合に表示されるテキストを記述


~/public_html/index.html のWebページに
~/public_html/image/face.jpg の画像を表示させる時のタグの例：

<img src="image/face.jpg" alt="私の顔写真">

[HTML文書作成のページ] [コンピュータリテラシー演習]

本演習用Web教材は、平成13年度までに水谷正大教授が作成した教材に加え、須崎純一、大城正典、大見嘉弘らが加筆、修正したものである。

mizutani@rsch.tuis.ac.jp, susaki@rsch.tuis.ac.jp, ohshiro@rsch.tuis.ac.jp,
ohmi@rsch.tuis.ac.jp (加筆，修正 2002年4月13日～2003年7月10日)

基本的なタグ

基本

見出し

見出し

見出し

見出し

見出し

見出し

文章

ハイパーリンク

リスト

表

画像