今日の授業 HTML
saori tsukamoto●背景の色の変え方
<html>
<head>
<title>Hello World</title>
</head>
<body bgcolor=”red”>
Hello World
</body>
</html>
●文字の色の変え方
<html>
<head>
<title>Hello World</title>
</head>
<body>
<font color=”#ff0000″>
Hello World
</font>
</body>
</html>
●文字の表示の変更
<html>
<head>
<title>サンプル</title>
</head>
<body>
<P><B>太字</B>です</P>
<P><I>斜体</I>です</P>
<P><U>下線</U>です</P>
<P><S>削除線</S>です</P>
<P><EM>強調</EM>です</P>
<P><STORONG>より強い強調</STORONG>です</P>
<P><SUP>上付き</SUP>です</P>
<P><SUB>下付き</SUB>です</P>
<P><B><U>太字で下線付き</B></U>です</P>
</body>
</html>
●文字の見出しとサイズ
<html>
<head>
<title>サンプル</title>
</head>
<body>
<h1>h1タイトル</h1>
<font size=”1″>文字サイズ１</font></body>
</html>
●画像の貼り付け
<html>
<head>
<title>サンプル</title>
</head>
<body>
<P><img src=”pokke.jpg”></P>
</body>
</html>
●リンクの貼り付け
<html>
<head>
<title>サンプル</title>
</head>
<body>
<P><a href=”http://www.yahoo.co.jp”target=”blank”>yahoo</a></P>
</body>
</html>
●テーブル（表）の作り方
<html>
<head>
<title>tableサンプル</title>
</head>
<body>
<p>
<table border=”1″>
<tr>
<td>test1</td><td>test2</td><td>test3</td>
</tr>
<tr>
<td>test1</td><td>test2</td><td>test3</td>
</tr>
</table></p>
</body>
</html>
●テーブル（表）の縦横の連結・色の変え方
<html>
<head>
<title>tableサンプル</title>
</head>
<body>
<p>
<table align=left border=1 cellpadding=”5″cellspacing=”0″>
<tr>
<td colspan=”3″bgcolor=”red”>test1</td>
</tr>
<tr>
<td>test1</td><td>test2</td><td>test3</td>
</tr>
</table></p>
</body>
</html>
●HTMLのレイアウト
<html>
<head>
<title>sample</title>
</head>
<body>
<center>
<table border=”0″cellspacing=”0″cellpadding=”0″width=”760″>
<tr>
<td colspan=”2″ width=”100%” bgcolor=”#3498db”>
ヘッダー
</td>
</tr>
<tr>
<td width=”200″ align=”center” valign=”top” bgcolor=”#e67e22″>
メニュー
</td>
<td width=”560″ valign=”top” bgcolor=”#2ecc71″>
コンテンツ<br>
<img src=”imgs/spacer.gif” width=”1″ height=”350″>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”#95a5a6″>
フッター
</td>
</tr>
</table>
</center>
</body>
</html>
