HTMLソースの記述方法
実際のHTMLソースは、以下のように記述します。
DOCTYPE宣言
<html>
<head>
head中身
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
<html>
<html>
<head>
head中身
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
<html>
DOCTYPEとhead部分は、HTML（XHTML）のバージョンによって記述が異なります。
HTML4.01の場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ページタイトル</title>
<meta name="description" content="ページの説明文">
<meta name="keywords" content="ページのキーワード（複数の場合は半角カンマで区切る）">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ページタイトル</title>
<meta name="description" content="ページの説明文">
<meta name="keywords" content="ページのキーワード（複数の場合は半角カンマで区切る）">
<link rel="stylesheet" type="text/css" href="外部化したCSSファイルへのパス">
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
</html>
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
</html>
XHTML1.0の場合
<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>ページのタイトル</title>
<meta name="Description" content="ページの説明文" />
<meta name="Keywords" content="ページのキーワード（複数の場合は半角カンマで区切る）" />
<link href="外部化したCSSファイルへのパス" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>ページのタイトル</title>
<meta name="Description" content="ページの説明文" />
<meta name="Keywords" content="ページのキーワード（複数の場合は半角カンマで区切る）" />
<link href="外部化したCSSファイルへのパス" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
このサイトで解説しているHTMLタグとテキストなど
</body>
</html>
※XHTML1.0の1行目に記述しているXML宣言はサーバーによってエラーになり、画面が白くなる場合があります。 その場合は、1行目を削除してアップロードしてください。
テキストエディタなどで、上記のソースを記述したら、任意の文字コードを指定し、拡張子を「.html」または「.htm」にして保存します（PHPを使う場合は拡張子を「.php」にしてください）
文字コード（shift-jis、utf-8など）を記述する部分は、必ずファイルの文字コードと同じにしてください。
utf-8で保存する場合、BOMを付けるとレイアウト崩れを起こすことがありますので、BOMは付けないようにしてください。
meta情報のDescriptionとKeywordsは省略しても構いません。
おすすめのホームページ作成ソフト
コーディングをする際に、ホームページ作成ソフトを使うと非常に便利です。
現在有名なのは、『ホームページビルダー』と『Dreamweaver』の2つです。
- ホームページビルダー
- 初心者～中級者の方向けで、HTMLタグやCSSが全くわからない方におすすめです。
- Dreamweaver
- 中級者～上級者・プロ向けで、HTMLタグやCSSをある程度理解していたり、自分で調べられる方におすすめです。
『Dreamweaver』は高価ですが、スキルが上がっても使えるため、長い目で見れば、こちらをおすすめします。
また、学生や教職員の方向けに割引されたものがありますので、該当する方なら迷わず学生・教職員向けのものをおすすめします。
