いろいろなタグを使ってみる

見出しを付けてみる
テキストを整える
文字の大きさや色をかえてみる
文字に下線を引いてみる（文字飾り）
特別な文字を使ってみる
箇条書きにしてみる
文章を区切る
表を作ってみる
画像を入れてみる
ハイパーリンクを貼ってみる
文字の表示を変えてみる
その他

1. 見出しを付けてみる

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

2. テキストを整える

html中の改行は，表示では無視する（改行されない）

改行(break)にはbrタグを用いる

第１行目の文章です。
文を置いて行きます。
行は自動的に折り返されます。<br>表示文章中で改行するには brタグを用います。<br> brタグを置くと強制的に改行することができます。<br> brタグには終了タグがありません．

第１行目の文章です。文を置いて行きます。行は自動的に折り返されます。行は自動的に折り返されます。
表示文章中で改行するにはbrタグを用います。
brタグを置くと強制的に改行することができます。
brタグには終了タグがありません．

段落(paragraph) <p> 〜 </p>

ひとかたまりの文章(division) <div> 〜 </div>

<p>
ここは段落(paragraph)です。上下の節との間で行間が空いています。
</p>
<div>
ここはdivタグで囲まれたひとかたまりの文章です。始まりと終わりに改行が入りますが，行間は開きません。
</div>
pタグとdivタグの違いに注意

ここは段落(paragraph)です。上下の節との間で行間が空いています。

ここはdivタグで囲まれたひとかたまりの文章です。始まりと終わりに改行が入りますが，行間は開きません。
pタグとdivタグの違いに注意

強調(emphasis) <em> 〜 </em>
ひとかたまりの文章 <span> 〜 </span>

下線(underline) <u> 〜 </u>

これは<em>次の行</em>です。(em: emphasis 強調)
<br> ここは<span style="background-color: gray;">ひとかたまりの文字列</span>です。 <br>
下線を引くには<u>uタグ</u>を使用します。

これは次の行です。(em: emphasis 強調)
ここはひとかたまりの文字列です。
下線を引くにはuタグを使用します。

表示位置

左揃え

中央揃え

右揃え

段落(paragraph) <p> 〜 </p>

ひとかたまりの文章(division) <div> 〜 </div>

<p>
ここは段落(paragraph)です。上下の節との間で行間が空いています。
</p>
<div>
ここはdivタグで囲まれたひとかたまりの文章です。始まりと終わりに改行が入りますが，行間は空きません。
</div>
pタグとdivタグの違いに注意

ここは段落(paragraph)です。上下の節との間で行間が空いています。

ここはdivタグで囲まれたひとかたまりの文章です。始まりと終わりに改行が入りますが，行間は空きません。
pタグとdivタグの違いに注意

強調(emphasis) <em> 〜 </em>

ひとかたまりの文章 <span> 〜 </span>

これは<em>次の行</em>です。(em: emphasis 強調)
<br> ここは<span>ひとかたまりの文字列</span>です。

これは次の行です。(em: emphasis 強調)
ここはひとかたまりの文字列です。

空白や改行をそのまま表示する <pre> 〜 </pre>

<pre>この間は

空白        や改行
がそのまま表示されます。

</pre>

この間は
空白        や改行
がそのまま表示されます。

3. 文字の大きさや色を変えてみる

[注意]: HTML5からはfontタグがなくなり、代りに、
スタイルシート，あるいは， styleタグ内でfont-size属性などを指定することになりました。

<font size=+1>フォント</font>	フォント
<font size=+2>フォント</font>	フォント
<font size=+5>フォント</font>	フォント
<font size=3>フォント</font>	フォント
<font color="red">フォント</font>	フォント
<font color="#00ff00">フォント</font>	フォント
<font color="#0000ff">フォント</font>	フォント
<font color="#ff0000" size=5>フォント</font>	フォント
<font color="green" size=+5>フォント</font>	フォント

4. 文字に下線を引いてみる（文字飾り）

文字に<u>下線を入れる</u>ことができる<br>
上付き文字 10<sup>2</sup>の例<br>
下付き文字 a<sub>1</sub>, a<2</sub>... <br>
文字を <em>強調して</em>表示する

文字に下線を入れることができる
上付き文字 10²の例
下付き文字 a₁, a₂ ...
文字を強調して表示する

5. 特別な文字

空白 を入れる
不等号 x>0, y<0
→矢印←，アンパサンド&など

空白を入れる
不等号 x>0, y<0
→矢印←,アンパサンド&など

6. 箇条書きにしてみる

番号付きリスト(ordered list) <ol> 〜 </ol>

type属性により，数字，アルファベットなどを設定できる

属性値	ラベル
type="1"	アラビア数字(1, 2, 3, ...)
type="i"	ローマ数値(小文字) (i, ii, iii, iv, ...)
type="I"	ローマ数値(大文字) (I, II, III, IV, ...)
type="a"	アルファベット小文字(a, b, c, ...)
type="A"	アルファベット大文字(A, B, C, ...)

start属性により際し番号を設定できる

<ol start="1">

番号なしリスト(unordered list) <ul> 〜 </ul>
- type属性により，黒丸(disc)、白丸(circle)、四角(square)を指定できる
定義・説明リスト(definition list) <dl> 〜 </dl>
- 定義(definition term) <dt> 〜 </dt>
- その説明(definition description) <dd> 〜 </dd>

属性値	ラベル
type="disc"	黒丸
type="circle"	白抜きの丸
type="square"	四角

<ol> <li>箇条書き内容その１</li> <li>箇条書き内容その２</li> <li>箇条書き内容その３</li> </ol>	箇条書き内容その１箇条書き内容その２箇条書き内容その３
<ol type="A" start="2"> <li>箇条書き内容その１</li> <li>箇条書き内容その２</li> <li>箇条書き内容その３</li> </ol>	箇条書き内容その１箇条書き内容その２箇条書き内容その３
<ul type="square"> <li>箇条書き内容その１</li> <li>箇条書き内容その２</li> <li>箇条書き内容その３</li> </ul>	箇条書き内容その１箇条書き内容その２箇条書き内容その３
<dl> <dt>用語1</dt> <dd>用語1の説明</dd> <dt>用語2</dt> <dd>用語2の説明</dd> </dl>	用語1 用語1の説明用語2 用語2の説明

7. 文章を区切る

水平線(holizontal line> <hr>タグを使用して横線を入れることができる。このタグには終了タグはない

強制改行(break) <br>タグ
段落(paragraph) <p> 〜 </p>タグ
ブロック要素(division) <div> 〜 </div>タグ

8. 表を作ってみる

罫線のない表

<table border="0">
<tbody>
<tr>
    <th> 列1 </th>
    <th> 列2 </th>
</tr>
<tr >
    <td >table</td>
    <td>作表を宣言する</td>
</tr>
<tr>
    <td>tr (table row)</td>
    <td>一行の範囲を指定する</td>
</tr>
<tr>
    <td>th (table header)</td>
    <td>列の見出し</td>
</tr>
<tr>
    <td>td (table data)</td>
    <td>セル内の表示内容</td>
</tr>
</tbody>
</table>

列1	列2
table	作表を宣言する
tr	一行の範囲を指定する
th (table header)	列の見出し
td (table data)	セル内の表示内容

罫線あり(1)

<table border="1">
   <tbody>
   <tr>
      <td>1行1列</td>
      <td>1行2列</td>
      <td>1行3列</td>
   </tr>

   <tr>
      <td>2行1列</td>
      <td>2行2列</td>
      <td>2行3列</td>
   </tr>
   </tbody>
</table>

1行1列	1行2列	1行3列
2行1列	2行2列	2行3列

キャプションと罫線あり

<table border="1">
<caption>[表] キャプション</caption>
<tbody>
   <tr>
     <th>属性</th>
     <th>機能</th>
     <th width="160">パラメータ値</th>
   </tr>
   <tr>
     <td> border="1"</td>
     <td> 枠線 </td>
     <td> 線幅を指定する ;</td>
    </tr>
   <tr>
     <td> width="160"</td>
     <td> セルの範囲 </td>
     <td> 列幅を指定する </td>
   </tr>
   <tr>
     <td rowspan="2"> rowspan="2" </td>
     <td>縦方向に</td>
     <td>セル数を指定する</td>
   </tr>
   <tr>

     <th> セルを結合する</th>
     <td>(セル)</td>
   </tr>
   <tr>
     <td> colspan="2"</td>
     <td colspan="2"> 横方向にセルを結合する</td>    </tr>
   <tr>
     <td> bgcolor="yellow"</td>
     <td bgcolor="yellow"> セルに色を塗る</td>
     <td>色を指定する</td>
   </tr>
</tbody>
</table>

[表] キャプション
属性	機能	パラメータ値
border="1"	枠線	線幅を指定する
width="160"	セルの範囲	列幅を指定する
rowspan="2"	縦方向に	セル数を指定する
rowspan="2"	セルを結合する	(セル)
colspan="2"	横方向にセルを結合する
bgcolor="yellow"	セルに色を塗る	色を指定する

セルの幅とセル内での表示位置

<td width="250px" height="64px"> セルの幅と高さ </td>	セルの幅と高さ
<td align="left">左詰め</td>	左詰め
<td align="center">中央揃え</td>	中央揃え
<td align="right">右詰め</td>	右詰め
<td valign="top">上詰め</td>	上詰め
<td valign="middle">中央揃え</td>	中央揃え
<td valign="bottom">下詰め</td>	下詰め

9. 画像を入れてみる

<img>タグを使用する

図の表示サイズを指定する(width, height 属性)
図に文字を回り込ませる(align 属性)

<img src="rose.jpg" align="left" width="64"> align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。<br> 図を左側に配置して、文章を回りこませる。 width, height 属性により図の表示サイズを指定する。	align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。図を左側に配置して、文章を回りこませる。 width, height 属性により図の表示サイズを指定する。
<img src="rose.jpg" align="right" height="64"> align属性の属性値をrightとすることで、図を右側に配置して、文章を回りこませる。<br> 図を右側に配置して、文章を回りこませる。	align属性の属性値をrightとすることで、図を右側に配置して、文章を回りこませる。図を右側に配置して、文章を回りこませる。
<img src="rose.jpg" align="left" width="100" height="120"> align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。 <br clear="left"> clear属性により，回り込みを解除する。	align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。 clear属性により，回り込みを解除する。

10. ハイパーリンクを貼ってみる

<a>タグ(anchor tag, アンカー・タグ)を使用する
ページ内へのリンク
- ページ内のリンクしたい箇所にアンカーを置く．
  name属性(<a name="アンカー名前">) によりアンカー名を付ける
- <a href="#アンカー名">とアンカー名を指定することで，そのページ内のアンカーを置いた箇所へのリンクを張る
  (注意) 「#アンカー名」とシャープ記号が必要
- <要素 id="アンカー名">として，要素にアンカー名を付けることもできる
外部ページへのリンク
- href属性にURLを指定する (<a href="リンク先">)

<a href="http://wwwc.cs.t-kougei.ac.jp/">コンピュータ応用学科</a>	コンピュータ応用学科
<a href="http://www.cs.t-kougei.ac.jp/"><img src="rose.jpg"></a>

11. 文字の表示を変えてみる

文字の表示色など

spanタグ中でstyle属性を設定して文章の一部分の <span style="color: red;">表示色</span>を指定する。	spanタグ中でstyle属性を設定して文章の一部分の表示色を指定する。
style属性文字の <span style="color:green;"> 表示色</span>: color 文字 <span style="font-size:24px;"> サイズ</span>: font-size	style属性文字の表示色: color 文字サイズ: font-size

20. その他

コメントはブラウザには表示されない。

コメントはブラウザには表示されない。

[戻る ]

<img src="rose.jpg" align="left" width="64"> align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。<br> 図を左側に配置して、文章を回りこませる。 width, height 属性により図の表示サイズを指定する。	align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。図を左側に配置して、文章を回りこませる。 width, height 属性により図の表示サイズを指定する。
<img src="rose.jpg" align="right" height="64"> align属性の属性値をrightとすることで、図を右側に配置して、文章を回りこませる。<br> 図を右側に配置して、文章を回りこませる。	align属性の属性値をrightとすることで、図を右側に配置して、文章を回りこませる。図を右側に配置して、文章を回りこませる。
<img src="rose.jpg" align="left" width="100" height="120"> align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。 <br clear="left"> clear属性により，回り込みを解除する。	align属性の属性値をleftとすることで、図を左側に配置して、文章を回りこませる。 clear属性により，回り込みを解除する。