ホームページ作成キング基本構造

お世話様です。

カテゴリ

基本構造

ホームページ作成の基本構造

基本構造 | トラックバック(-) | CM(0)

ホームページを作成する時に最初に入力するタグを説明します

サンプルページを作ったようにメモ帳を起動して
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>簡単作成ホームページ</title>
</head>
<body>
簡単作成ホームページ
</body>
</html>
と入力またはコピー～貼り付けをしてください

メモ帳に記したものは左画面

IEで開いたものは
右画面のようになります

一行目の<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">はHTMLの言語のバージョンを指定しています
これはこのまま起用してください

二行目の<html>～最後の行の</html>はHTML言語であると示しています
このタグが無いとホームページにはきちんと表示されません

三行目の<head>～七行目の</head>に囲まれた部分はホームページ全体の情報を示すタグです

四行目の<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">は文字コードを日本語に指定しています
これもこのまま起用して下さい

五行目の<META http-equiv="Content-Style-Type" content="text/css">はスタイルシートの言語はCSSを使用していると宣言しています
これもこのまま起用してください

六行目の<title>～</title>に囲まれた部分はIEを起動した時の上部左のタイトルに表示する文字です

八行目の<body>～十行目の</body>に囲まれた部分はIEを起動した時のウインドウ内に表示される内容です

基本構造 | トラックバック(-) | CM(0)

段落

<h>～</h>タグで囲んだ文字は見出しとなり、文字のサイズを指定できます
<p>～</p>タグで囲んだ文字はひとかたまりの段落となり、この段落の前後に空白が入ります
<div>～</div>タグで囲んだ文字はひとかたまりの段落となり、この段落の前後には空白は入りません
<br>タグは改行をする時に使います

使用例
<h1>見出し<h1>
<h2>見出し<h2>
<h3>見出し<h3>
<h4>見出し<h4>
<h5>見出し<h5>
<h6>見出し<h6>
改行になります<br>改行になります<br><br>
前
<p>前後に空白が入る段落</p>
後
<br><br>
前
<div>前後に空白が入らない段落</div>
後
とメモ帳に入力してIEで開くと右上の画面ように表示されます

基本構造 | トラックバック(-) | CM(0)

表組

<table>～</table>タグは表組を定義します表を作る場合に必ず必要なタグです
<tr>～</tr>タグは表の1行になります表の行数分の<tr>～</tr>タグを使用します
<th>～</th>タグは表の見出しとなり、１マスの中央に文字が配置されます
<td>～</td>タグは表の１マスの項目になります

例
下記のようにメモ帳に入力してIEで開くと右画面のように表示されます

<table border="1">
  <tr>
     <th>見出し１</th>
     <th>見出し２</th>
     <th>見出し３</th>
  </tr>
  <tr>
     <td>表をマスター１</td>
     <td>表をマスター２</td>
     <td>表をマスター３</td>
  </tr>
  <tr>
     <td>簡単ホームページ１</td>
     <td>簡単ホームページ２</td>
     <td>簡単ホームページ３</td>
  </tr>
</table>