「ホームページ　作成、運営、管理ガイド」に指摘

ウェブ

誤字脱字、間違いがありましたらご指摘願います。とのことなので、最低限のことを指摘する。

ホームページの作り方、作成ガイド

ホームページの仕組み

基本的には、HTMLというルール言語で制作しパソコンにHTMLファイルとして保存します。

HTMLはマークアップ言語。HTMLをacronym要素として「HyperText Markup Language」の頭字語だと明示してゐるのに、ルール言語なる言葉を使ふのは何故でせうか。
ちなみに一つの單語のやうに讀まない「HTML」は、私ならばacronym要素ではなくabbr要素としてマークアップする。

このサイトでのご注意
  • ホームページをWEBサイト（ウェブサイト）と表現する場合があります。
    （本来はホームページとは言わないし、WEBサイトの方が素人っぽくないから）

同じウェブサイト群中の「語」は統一すべき。素人っぽくないからなどと云ふ理由で「語」をころころ變へられると初學者は混亂する。なほホームページとは、「ウェブブラウザを起動したとき、最初に表示されるウェブサイト」或は「あるウェブサイト群における最上位のウェブサイト」と云つたところでせう。

ホームページ作り方　初心者編

準備・保存

ホームページ制作ソフトは不要（まずは、基本を覚える事）。
WEBサイトを作る準備（必要な物）ですが、パソコン１台。
最初はパソコン内のメモ帳（notepad）だけで十分です。
（ エディタは慣れてから利用しましょう。　mac ならシンプルテキストかテキストエディットなど）
画像を加工するのに画像処理ソフトと最後にウェブ上に公開するのにサーバが必要です。

マークアップ作業を效率的にできる「エディタ」を薦めずに「メモ帳」と云ふ何の機能もないソフトを初學者に使はせながら、HTMLとは關係のない画像処理ソフトが必要であるとするのはどう云ふ意圖があるのでせうか。

文章を保存しよう。

今回のフォルダ名「HP」やファイル名「test.html」は、例なので本来は任意の名前で良いですが、
半角英小文字にする事を推奨します。　今回は拡張子を「 .html 」にします。

半角英數大文字でも可。

※　ブラウザ（browser）とは、Internet Explorer (IE) ・Mozilla Firefox (Fx)などで
　　ウェブサイトなどを見る為の回覧ソフト。（ウェブブラウザ、ユーザーエージェント）

ウェブブラウザとユーザエージェントは同義ではない。ウェブブラウザはユーザエージェントの一種でユーザエージェントに含まれる。

表示確認しよう。

これを文字化け と言ってブラウザが日本語の文字コードを認識出来ず、
間違った文字コードで表示してしまった為におこる現象です。
半角カタカナ,円囲み数字,ローマ数字,旧漢字,（株）を一語にした?などの
環境依存文字・特殊文字などは利用しない方が賢明です（Eメールでも）。
半角の< や > などの記号も &gt; や &gt; に実体参照文字としてエスケープします。

環境依存文字・特殊文字は――WWWで公開することを前提としてゐるのならば――利用しない方が賢明ではなく、「利用してはならない」でせう。
それ以前に環境依存文字・特殊文字を使つてはならない訣や実体参照文字を使はなければならない訣は、文字化けとは何等關係のないことなので、一緒にして説明するのは説明方法としてよろしくないでせう。

HTML

ホームページを作る基本言語は、HTMLです。
このHTMLで書いた命令文をブラウザが読み取り、指示通り表示するだけなのです。
HTMLには、数種類のバージョンがありDOCTYPE(DTD)文書宣言で示します。
各HTMLバージョンにより記述するHTML文法やタグも多少違い、表現方法も異なる場合もあります。
また、内容を正しく表示させる為に、文字コードやlang属性などを正しく記述します。

HTML文書は命令文ではなく、書かれたテキストの要素が何であるかが明示されてゐるだけで、視覺系のウェブブラウザはそれを覽やすいやうに表示してゐるに過ぎない(主要なブラウザは偶々同じやうな表示であるが)。音聲系のウェブブラウザならば明示された要素に應じて讀方を變へてゐるさうだ。屬性についても同じで、内容を正しく表示させる為ではなく、要素の屬性が何であるかを明示してゐるだけ。

HTMLの基本

HTMLを正しいルールで記述する事で、前回の文字化け表示が正しく表示されます。
それでは、何をどう記述したのか、見てみましょう。
以下が、HTML 4.01 Transitional の基本テンプレートになります。
新旧の要素や属性が使える標準仕様の初心者・中級者向きの人気バージョンです。
今回は、この一般的な HTML 4.01 Transitional でWEBサイトを作ります。
（他に 互換モード , Strict , XHTML もあります。HTMLでの表示や文法が違います）

「HTML 4.01 Transitional」は初心者・中級者向きではなく、「非推奬のタグが使はれてゐる」と宣言してゐるだけ。初學者に對しては無駄なことを覺える必要のないStrictを教へるべきだと私は思ふ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タイトル タイトル</title>
<meta name="description" content="説明文 説明文 説明文">
<meta name="keywords" content="キーワード,キーワード">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="sample.css" type="text/css">
<style type="text/css"><!--    --></style>
</head>
<body>
<div>
<p>Hello World　こんにちは　世界</p>
</div>
</body>
</html>

いきなり見た事も無いHTMLソースが複数行も出てきましたが、
このHTMLソース（特に上部）を全部覚える必要はありません。
これが基本のテンプレートなので毎回コピペ（コピーして貼り付け）すれば良いだけです。

div要素は必ず存在する要素ではないのだからテンプレートに必要はないでせう。尤も「マークアップ」と云ふ觀點からは「テンプレート」の存在自体があり得ない。

まず、このHTMLでブラウザにウェブサイトの仕様を教えます。
Microsoft Office Word の様にボタンで操作するのではなく、
それらの作業をHTMLを使って自分で正確に記述し伝える（命令する）事で、
ブラウザは、貴方の記述通りに表示（表現）しているだけなのです。

HTMLは書かれてゐるテキストが何の要素であるかを示してゐるに過ぎないのだから（命令する）は間違。ウェブブラウザは示された要素に應じて、それらの要素を好きなやうに表示してゐる。「見出が見出として表示されてゐる」という意味では確かにウェブブラウザは貴方の記述通りに表示（表現）しているのでせうが、例へば見出が常に大きく太字で表示されてゐるとは限らない。

HTMLファイルの設置・設定

<title>タイトル タイトル</title> の「タイトル タイトル」部分を削除して
自分の好きなタイトルに書き換えます。（本来はサイトに見合ったタイトルを設定）
（30全角未満、10〜20文字程度に簡潔に）
title は、ウェブページ内に表示されませんが（head内のmeta情報も）
検索エンジンの検索結果でもタイトル（見出し）としても表示されますし、
description（説明文）もスニペット（紹介文）として採用されやすい重要な部分です。

title要素は如何なる場合も省略できない必須の要素。文書である以上タイトルがあるのは當然のことで、検索エンジンの検索結果でもタイトル（見出し）としても表示されるから重要なのではない。

<meta name="description" content="説明文 説明文 説明文"> の行の
「説明文 説明文 説明文」部分を削除してキャッチコピーや説明文に書き換えます。
（80全角以内、簡潔に。句読点可能、特殊記号は避ける。括弧程度なら可能。
検索結果の説明分に採用される場合がありますのでクリックされそうな文章に。）

特殊記号は避ける。ではなく、不可(特殊記号が機種依存文字のことを指しているのならばだが)。

<p>Hello World　こんにちは　世界</p> を削除して、その行に
<h1></h1> を半角で書き <h1> と </h1> の間に好きな文章を入れてみる。
例：<h1>ここにタイトル（大見出し）</h1>
まだ、余裕があれば、<h1>○○○</h1> の次の行に
<h2></h2>　<h3></h3>　<p></p>を半角で書き
<h1>　</h1> と同じように語句や文章を入れてしてみましょう。
h1が大見出しなら<h2></h2>は、中見出しで、<h3></h3>は、小見出しです。
h1,h2,h3,h4,h5,h6までありますが、h5,h6はあまり利用されません。
<p></p>は、文章で、段落毎に利用します。

順序が逆。書かれたテキストが大見出し(最上位の見出)だからh1要素としてマークアップする。第2位の見出ならばh2要素として、第3位の見出ならばh3要素として、段落ならばp要素としてマークアップする。

HTML , HEADの説明 , DOCTYPE(DTD)

HTML
HTMLとは
HyperText Markup Languageの頭文字
つまり「テキストに意味・表現・ウェブ機能を加えたルール言語」

このHTMLで書いた命令文をブラウザが読み取り、指示通り正しく表示するだけなのです。

「HyperText Markup Language」を直譯すれば、「ハイパーテキスト用印附言語」と云つたところ。それがどうしてつまり「テキストに意味・表現・ウェブ機能を加えたルール言語」になるのでせうか。
HTMLが命令文でないことは既に書いたとほり。
なほ、dtでマークアップしている要素を更にdfnでマークアップするのは、「定義されてゐる語」であることを二重でマークアップしてゐるので、美しいマークアップではないと私は思ふ。

HTMLバージョンのDOCTYPE(DTD)宣言

HTML参考書で「システム識別子」は削除しても良いと記されているので、何気なく「システム識別子」を削除していたらブラウザによってデザインの差異に苦労した経験があります・・・。解釈・表示が変わるので、デザインを重視する場合には、「システム識別子」を削除しない方が良いかもしれません。特にXHMLで削除するのは意味がないです。

システム識別子をXHMLで削除するのは意味がないのではなく、XHTMLではシステム識別子は必須なので省略不可。

XML宣言

XML宣言は、IE6で過去互換モード (Quirks) になってしまうので、削除されがちです。

省略が許されてゐない場合にXML宣言を削除すれば、その文書はXML文書として不正になる。IE6の不具合のために不正なことをするのを奬勵してはいけない。

html要素 version lang属性

lang属性及びxml:lang属性は、当該要素の言語を指定する属性です。

lang屬性及びxml:lang屬性は、言語を指定するのではなく、その要素が何の言語で書かれてゐるかを示してゐる。

HEAD　head要素

HEAD構造

ヘッド(head)の文字通り「頭」の部分です。
<html>の次行から<head>を記述します。
<head>要素は省略しても良い様ですが、
多くのWEBサイトできちんと記述されています。
文字コード と タイトル や CSS、javascript
を結ぶ場合のlinkは、必須になります。

head要素のタグはHTML4.01では省略可、XHTML1.0及び1.1では省略不可。ちなみにhtml要素及びbody要素のタグも同樣。
meta要素による文字コードの明示は必須ではない。

文字コード （META）

XHTMLでは、最後の閉めが、 />　終了タグが無い物は、全て />で閉める。（以下参照）
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

XHTMLはタグの省略が許されてゐないので、終了タグが無い物はない。つまりmeta要素のやうな空要素にも終了タグはある。だから省略せずに<meta ○○></meta>とする。だが既存のユーザエージェントを考慮して、開始タグの末尾に/と>を附し、その前にスペース1個を組込むと云ふ最小化タグ文法を使ふことが推奬されてゐる。

テキスト保存時の文字コードもこのMETAの文字コードと合わせる必要がある。

テキスト保存時の文字コードをmeta要素として明示しただけなので、違へる方がどうかしてゐる。

TITLE　タイトル

SEO的にも文字化け防止の意味でも文字コードの次に記述したいのが、title です。
<title></title>　<title> と </title> の間にタイトルを記入します。

記述したいではなく、title要素は記述しなければならない――「HEAD構造」の項で「タイトル(中略)は、必須になります。」と書かれてゐるのだが。必須なのだからSEO的にも文字化け防止の意味でもなんて關係のないこと。と云ふか、title要素と文字化け防止がどう繋がるのだらうか。
<title> と </title> の間にタイトルを記入するのではなく、既に記述してゐるtitle要素をタグで明示する。

METAタグ

description　説明文・概要

meta には、終了タグがないのでXHTMLは、 />で閉じる（半角スペースとスラッシュが必要）。

XHTMLはタグの省略が許されてゐないので、終了タグがないことはない。つまりmeta要素のやうな空要素にも終了タグはある。だから省略せずに<meta ○○></meta>とする。だが既存のユーザエージェントを考慮して、開始タグの末尾に/と>を附し、その前にスペース1個を組込むと云ふ最小化タグ文法を使ふことが推奬されてゐる。

keywords　キーワード

meta には、終了タグがないのでXHTMLは、 /> で閉じる。

XHTMLはタグの省略が許されてゐないので、終了タグがないことはない。つまりmeta要素のやうな空要素にも終了タグはある。だから省略せずに<meta ○○></meta>とする。だが既存のユーザエージェントを考慮して、開始タグの末尾に/と>を附し、その前にスペース1個を組込むと云ふ最小化タグ文法を使ふことが推奬されてゐる。

LINK　リンク

HEAD内　linkタグ
mailto
管理者:<link rev="made" title="管理者にメール" href="ailto:○○@○○">

href屬性の屬性値はmailto:○○@○○の間違。

XHTMLでMETAを記述する場合は、最後の閉じを /> で終了。

「META」は「link」の間違だと思はれる。

「ホームページ　作成、運営、管理ガイド」自體のHTML文法はThe W3C Markup Validation Serviceではvalidであるし、Another HTML-lint gatewayでも滿點やそれに近い點數ではあるのだが、「制作者が本當にHTMLのことが解つてゐるか?」と問はれたら、「解つてゐない」と答へるしかない。ソースを覽ても、br要素、物理要素やsytle屬性の存在、class屬性の名前の附け方などあやしい箇所が見受けられる。
最近公開されたウェブサイトらしいので間違等を指摘したが、今HTMLの解説書を公開するなら、HTML5に對應したものを公開した方がいゝと思ふ。