こんにちは!!
HTML調べる隊の佐藤です!ヽ(゚◇゚ )ノ
今回はHTMLのタグ一覧の仕上げを行いました!
画像です
クリックすれば項目ごとに瞬時に移動できるようにするボタンを作りました!(・∀・)
文字装飾
テーブル
画像
リンク
に関する最低限のタグは載せました!
これから少しずつ増やしていきたいと思います!o(^▽^)o
次回はついにネットにアップしたいと思います
では!さようなら!
最後にソース貼っておきます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="●著者●" />
<meta name="description" content="●内容説明●" />
<meta name="keywords" content="●キーワード●,●キーワード●" />
<link rev="Made" href="mailto:●著者メールアドレス●" />
<title>HTMLでホームページを作ろう!!</title>
<style type="text/css">
div{text-align:center}
div{color:#ff0000;}
div{font-size:50pt;}
div{zoom:1.2;}
</style>
</head>
<body>
<div>
<p>HTMLタグ</p>
</div>
<table border="2" cellpadding="5" align="center" cellspacing="3">
<tr align="center">
<td style="background:#66ff22; font-size:20pt;" width="150"><i>TOP</i></td>
<td style="background:#66ff22; font-size:20pt;" width="250"><i>タグ一覧</i></td>
<td style="background:#66ff22; font-size:20pt;" width="250"><i><a href="http://ameblo.jp/ebizemif/
">作成過程</a></i></td>
<td style="background:#66ff22; font-size:20pt;" width="300"><i>アドセンス!!</i></td>
<td style="background:#66ff22; font-size:20pt;" width="150"><i>リンク</i></td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td align="center" bgcolor="skyblue" style="font-size:20pt;">コーナー紹介</td>
</tr>
<tr>
<td bgcolor="##77aadd" style="color:#99ff33; font-size:15pt;"><b>HTMLのタグを載せていきます!</b></td>
</tr>
</table>
<br><br>
<table bgcolor="#ffffdd">
<tr>
<td>
<a href="#font"><h3><b>文字装飾</b></h3></a>
<a href="#table"><h3><b>テーブル</b></h3></a>
<a href="#img"><h3><b>画像</b></h3></a>
<a href="#link"><h3><b>リンク</b></h3></a>
</td>
</tr>
</table>
<br><br>
<table border="2" cellpadding="5" align="center" cellspacing="3">
<tr>
<a name="font"><td align="center" width="1000" colspan="3" bgcolor="#ff4411"><font size="5">文字装飾</font>
</td></a>
</tr>
<tr bgcolor="yellow" align="center"><td>変更内容</td><td>ソース</td><td>効果</td></tr>
<tr>
<td>文字サイズ変更</td>
<td>
<font size="1">フォントサイズ1</font><br>
<font size="2">フォントサイズ2</font><br>
<font size="3">フォントサイズ3</font><br>
<font size="4">フォントサイズ4</font><br>
<font size="5">フォントサイズ5</font><br>
<font size="6">フォントサイズ6</font><br>
<font size="7">フォントサイズ7</font></td>
<td>
<font size="1">フォントサイズ1<font><br>
<font size="2">フォントサイズ2<font><br>
<font size="3">フォントサイズ3<font><br>
<font size="4">フォントサイズ4<font><br>
<font size="5">フォントサイズ5<font><br>
<font size="6">フォントサイズ6<font><br>
<font size="7">フォントサイズ7<font><br>
</td>
</tr>
<tr>
<td>文字カラー変更</td>
<td>
<fontcolor="green">緑色</font><br>
<fontcolor="red">赤色</font><br>
<fontcolor="blue">青色</font><br>
<fontcolor="skyblue">スカイブルー</font><br>
<fontcolor="yellow">黄色</font><br>
</td>
<td>
<font color="green">緑色</font><br>
<font color="red">赤色</font><br>
<font color="blue">青色</font><br>
<font color="skyblue">スカイブルー</font><br>
<font color="yellow">黄色</font><br>
</td>
</tr>
<tr>
<td>斜体文字</td>
<td>
<i>斜体文字</i></td>
<td>
<i>斜体文字</i>
</td>
</tr>
<tr>
<td>太文字</td>
<td>
<b>太文字</b></td>
<td>
<b>太文字</b>
</td>
</tr>
<tr>
<td>改行</td>
<td>
アルフォート<br>コアラのマーチ<br>パックンチョ<br></td>
<td>
アルフォート<br>
コアラのマーチ<br>
パックンチョ<br>
</td>
</tr>
<tr>
<td>文章の段落を作る</td>
<td>
<p>1行目の文章</p>
<p>2行目の文章</p>
<p>3行目の文章</p>
</td>
<td>
<p>1行目の文章</p><p>2行目の文章</p><p>3行目の文章</p></td>
</tr>
<tr>
<td>行を揃える</td>
<td>
<p align="left">左に表示される</p>
<p align="center">中央に表示される</p>
<p align="right">右に表示される</p>
</td>
<td>
<p align="left">左に表示される</p>
<p align="center">中央に表示される</p>
<p align="right">右に表示される</p>
</td>
</tr>
<tr>
<td>見出し</td>
<td>
<h1>見出し1</h1><br>
<h2>見出し2</h2><br>
<h3>見出し3</h3><br>
<h4>見出し4</h4><br>
<h5>見出し5</h5><br>
<h6>見出し6</h6>
<td>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
</td>
</tr>
</table>
<br><br>
<table border="2" cellpadding="5" align="center" cellspacing="3">
<tr>
<a name="table"><td align="center" width="1000" colspan="3" bgcolor="#ff4411"><font size="5">テーブル</font></a>
</td>
</tr>
<tr bgcolor="yellow" align="center"><td>変更内容</td><td>ソース</td><td>効果</td></tr>
<tr>
<td>テーブル作成</td>
<td>
<table>テーブル</table>
</td>
<td>
<table>テーブル</table>
</td>
</tr>
<tr>
<td>テーブルの枠作成</td>
<td>
<table border="1"><tr><td>テーブル</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td>テーブル</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブルの列を増やす</td>
<td>
<table border="1"><tr><td>テーブル1</td><td>テーブル2</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td>テーブル1</td><td>テーブル2</td>
</tr>
</table>
<tr>
<td>テーブルの行を増やす</td>
<td>
<table border="1"><tr><td>テーブル1</td><td>テーブル2</td></tr><tr><td>テーブル3</td><td>テーブル4</td></tr></table>
</td>
<td>
<table border="1"><tr><td>テーブル1</td><td>テーブル2</td></tr><tr><td>テーブル3</td><td>テーブル4</td></tr></table>
<tr>
<td>テーブルの横幅調整</td>
<td>
<table border="1" width="200"><tr><td>テーブル</td></tr></table>
</td>
<td>
<table border="1" width="200">
<tr>
<td>テーブル</td>
</tr>
</table>
<tr>
<td>テーブルの高さ調整</td>
<td>
<table border="1" height="50"><tr><td>テーブル</td></tr></table>
</td>
<td>
<table border="1" height="50">
<tr>
<td>テーブル</td>
</tr>
</table>
<tr>
<td>テーブルの背景色設定</td>
<td>
<table border="1" bgcolor="red"><tr><td>テーブル</td></tr></table>
</td>
<td>
<table border="1" bgcolor="red">
<tr>
<td>テーブル</td>
</tr>
</table>
<tr>
<td>テーブルの位置設定(左側)</td>
<td>
<table border="1" align="left"><tr><td>左側</td></tr></table>
</td>
<td>
<table border="1" align="left">
<tr>
<td>左側</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブルの位置設定(右側)</td>
<td>
<table border="1" align="right"><tr><td>右側</td></tr></table>
</td>
<td>
<table border="1" align="right">
<tr>
<td>右側</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブルの位置設定(中央)</td>
<td>
<table border="1" align="center"><tr><td>右側</td></tr></table>
</td>
<td>
<table border="1" align="center">
<tr>
<td>中央</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内の文字の位置設定(上)</td>
<td>
<table border="1"><tr><td valign="top">上</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td height="50" valign="top">上</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内の文字の位置設定(下)</td>
<td>
<table border="1"><tr><td valign="bottom">下</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td height="50" valign="bottom">下</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内の文字の位置設定(真中)</td>
<td>
<table border="1"><tr><td valign="middle">真中</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td height="50" valign="middle">真中</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内の文字の位置設定(左側)</td>
<td>
<table border="1"><tr><td align="left">左側</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td width="300" align="left">左側</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内の文字の位置設定(右側)</td>
<td>
<table border="1"><tr><td align="right">右側</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td width="300" align="right">右側</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内の文字の位置設定(中央)</td>
<td>
<table border="1"><tr><td align="center">中央</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td width="300" align="center">中央</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内のセルを結合する(横)</td>
<td>
<table border="1"><tr><td colspan="2">セルの結合</td></tr><tr><td>セル</td><td>セル</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td colspan="2">セルの結合</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>テーブル内のセルを結合する(縦)</td>
<td>
<table border="1"><tr><td rowspan="2">セルの結合</td><td>セル</td></tr><tr><td>セル</td></tr></table>
</td>
<td>
<table border="1">
<tr>
<td rowspan="2">セルの結合</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
</tr>
</table>
</td>
</tr>
<table border="2" cellpadding="5" align="center" cellspacing="3">
<tr>
<a name="img"><td align="center" width="1000" colspan="3" bgcolor="#ff4411"><font size="5">画像</font></a>
</td>
</tr>
<tr bgcolor="yellow" align="center"><td>変更内容</td><td>ソース</td><td>効果</td></tr>
<tr>
<td>画像の貼り付け</td>
<td>
<img src="画像.jpg(.png or .gif)">
</td>
<td align="center">
<img src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Koala.jpg" width="100" height="50">
</td>
</tr>
<tr>
<td>画像のサイズ変更</td>
<td>
<img src="画像.jpg(.png or .gif) width="500"(横の長さ変更) height="300"(縦の長さ変更)">
</td>
<td align="center">
<img src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Koala.jpg" width="500" height="300">
</td>
</tr>
<table border="2" cellpadding="5" align="center" cellspacing="3">
<tr>
<a name="link"><td align="center" width="1000" colspan="3" bgcolor="#ff4411"><font size="5">リンク</font></a>
</td>
</tr>
<tr bgcolor="yellow" align="center"><td>変更内容</td><td>ソース</td><td>効果</td></tr>
<tr>
<td>ページのリンクを貼る</td>
<td>
<a href="http://www.yahoo.co.jp">
;
</td>
<td>
<a href="http://www.yahoo.co.jp
">ヤフージャパンにリンク</a>
</td>
</tr>
</table>
<br>
<br>
<table border="2" cellpadding="5" align="center" cellspacing="3">
<tr align="center">
<td style="background:#66ff22; font-size:20pt;" width="150"><i>TOP</i></td>
<td style="background:#66ff22; font-size:20pt;" width="250"><i>タグ一覧</i></td>
<td style="background:#66ff22; font-size:20pt;" width="250"><i><a href="http://ameblo.jp/ebizemif/
">作成過程</a></i></td>
<td style="background:#66ff22; font-size:20pt;" width="300"><i>アドセンス!!</i></td>
<td style="background:#66ff22; font-size:20pt;" width="150"><i>リンク</i></td>
</tr>
</table>
</body>
</html>