初期設定は出来ましたか？
それでは、実際にホームページ・ビルダーを使う前に、ホームページ・ビルダーV9を使用して作成するHTML文書についての超・基本についておさえておきましょう。そうすれば、ソースを直に編集するときに大いに役立ちます。
Hyper Text Markup Languageの略です。前半のHyper Ｔextは、文書と文書を直接関連づける機能が付いた文書です。要するにリンクを貼って、別の文書を参照するということが出来る文書です。後半のMarkup Languageは見出しや段落といった文書構造を目印を付けて区別し、コンピュータにも文書構造を理解させるための言語です。
WWWブラウザ上での見映えを規定するための言語ではありません。特に、ホームページ・ビルダーなどといった、WYSIWYG型のWebオーサリングソフトを使う方は誤解しやすいので気をつけて下さい。
といきなり言われてもピンとこない人もいるでしょう。身近なモノを例にとって説明します。
新聞や雑誌の記事には、それぞれ見出しがあって、本文が続く形になっています。雑誌などでは記事の最後に「文責：誰々」という著者に関する情報が入ることもあるでしょう。
作文では、題名があって、著者の情報があって、本文の部分には段落がいくつか用意されていますね。
レポートなどになれば、作文の本文だった部分に段落だけでなくて、表やリストが入ってくるでしょう。段落の中にグラフや図が入るかもしれません。
１つの文書はそれを構成する各要素（見出し・段落など）から成り立っているというわけです。
以下のような文書をテキストエディタで作ったとします。私たち人間は、目で見ればここが見出しなどといった文書構造はある程度理解することは出来ます。けど、機械には出来ません。
斬・Webオーサリングソフト
Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。
しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証してみましょう。
検証対象となったソフト
今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作する無料ソフトです。
・FrontPageExpress
・Netscape Composer(Netscape4.78付属)
・Netscape Composer(Netscape7.01付属）
文責：FUMING(fuming@neko.chan.ne.jp)
上の文書にマークアップを施してみます。どこが見出しになって、段落になっているかを目印を付けるのです。<目印>で始まりの目印を、</目印>で終わりの目印を示します。
<大見出し>斬・Webオーサリングソフト</大見出し>
<段落>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</段落>
<段落>しかし、性能も向上したことですし、<強調>インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証</強調>してみましょう。
</段落>
<中見出し>検証対象となったソフト</中見出し>
<段落>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作する無料ソフトです。</段落>
<リスト>
<リストの項目>・FrontPageExpress</リストの項目>
<リストの項目>・Netscape Composer(Netscape4.78付属)</リストの項目>
<リストの項目>・Netscape Composer(Netscape7.01付属）</リストの項目>
</リスト>
<連絡先>文責：FUMING(fuming@neko.chan.ne.jp)</連絡先>
これで、文書の構造を明確に示すことが出来ました。
HTML文書では、<要素名>内容</要素名>としてマークアップをし、文書構造を示します。タグはすべて半角文字で書く必要があります。
正しい <p>タグは<strong>入れ子になるように記述する</strong></p>
間違い <p>タグは<strong>入れ子になるように記述する</p></strong>
属性は、開始タグの中で指定して、その要素の性質や特性を示すために使用します。複数の属性をつけることが可能で、その場合、半角スペースで区切ります。
例 <a href="hogehoge.htm" title="ほげほげの説明">ほげほげ</a>
関連事項
以下のいずれかの方法で新規文書の作成をします。
ボタンをクリックする
新規文書を作成すると、以下のような画面が表示されます。
上がページ編集画面です。文字入力をしたり、編集作業を行うための画面です。ここで行った作業はすべて、下のHTMLソース編集画面に反映されます。なお、HTMLソース編集画面でも直接編集することは可能で、編集内容は、ページ編集画面をクリックした後に反映されます。
新規文書を作成すると、ページ編集画面には何も表示されていませんが、HTMLソース編集画面には、以下のような文字列が表示されています。
<!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>１行目は、文書型宣言を定義しています。HTML文書にはいくつかの文書型の種類が存在します。文書型宣言で、どの文書型に則った文書かを示す必要があります。要するに、どのようなルールに基づいてマークアップを施しているのかを示すためのものです。
ここでは、W3CのHTML4.01 Tranditional DTDの文書型に則った文書ですよというのを表明しています。
次の<html>は、ここからHTML文書の始まりという目印です。最終行の</html>でHTML文書の終わりを示しています。HTMLで使われる各要素はhtml要素を起点としたツリー状の親子関係を持っています。
そう言えば、この２つには終了タグが存在しませんね。meta要素は、内容を持たない空要素なので、終了タグは不要です。
属性の変更画面の出し方は以下の3つの方法があります。
ボタンを使用する
1,2番目の方法は現在選択している要素が対象になります。3番目の方法は現在選択している要素以外にも、その親要素も対象となります。直接選択できない要素を対象に属性を指定したい場合には大いに役立ちます。
ベースURLやターゲットの規定値などは入力不要です。ページタイトルの入力が終わったら、OKボタンをクリックしましょう。そうすると、title要素の部分が、<title>斬・Webオーサリングソフト</title>と変化します。
ここで説明した、meta要素やtitle要素はhead要素の子要素です。
要注意！
属性/ドキュメント アウトライナ/ページ一覧で属性を表示させることができますが、属性の変更画面より、表示/設定できる内容が少なくなるのでおすすめしません。
ページ編集画面で以下の文章を入力して下さい。
となっている部分はShift+Enterキーを入力します。最後のお名前とメールアドレスの部分は、ご自分のを入力して下さい。
斬・Webオーサリングソフト
Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。
しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証してみましょう。
検証対象となったソフト
今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作する無料のソフトです。
・FrontPageExpress
・Netscape Composer(Netscape4.78付属)
・Netscape Composer(Netscape7.01付属）
文責：お名前(メールアドレス)
入力すると、body要素の内容は以下に示すようにすべてp要素としてマークアップされてしまいます。これでは適切な文書構造を示しているとは言えません。
<p>斬・Webオーサリングソフト</p>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p>
<p>しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけ
まともなソースを吐き出すかを検証してみましょう。</p>
<p>検証対象となったソフト</p>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。
Windows環境で動作する無料ソフトです。</p>
<p>・FrontPageExpress</p>
<p>・Netscape Composer(Netscape4.78付属)</p>
<p>・Netscape Composer(Netscape7.01付属）</p>
<p>文責：お名前(メールアドレス)</p>適切な文書構造を示すために、ツールバーを使って、編集をしましょう。
を使います。一覧を表示すると、以下のようになります。
インラインで引用する場合は、q要素を使用します。ただし、ホームページ・ビルダーのメニューバーからはマークアップさせることが出来ません。HTMLソース編集画面で直接打ち込みます。
また、引用をする場合、cite要素で引用した元の文章や関連情報のあるページのURLを指定することが出来ます。
<blockquote cite="出典先URL"> 〜 </blockquote>
<q cite="出典先URL"> 〜 </q>
ここで以下にあげる部分を見出し、アドレスとしてマークアップしてみましょう。変更部分にカーソルを当ててから、ツールバーで変更です。
マークアップを変更すると、以下のようになります。
<h1>斬・Webオーサリングソフト</h1>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p>
<p>しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけ
まともなソースを吐き出すかを検証してみましょう。</p>
<h2>検証対象となったソフト</h2>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。
Windows環境で動作する無料ソフトです。</p>
<p>・FrontPageExpress</p>
<p>・Netscape Composer(Netscape4.78付属)</p>
<p>・Netscape Composer(Netscape7.01付属）</p>
<address>文責：お名前(メールアドレス)</address> この時点で、ページ編集画面やプレビューを見てみると、見出しの部分が本文より文字が大きくなっていたり、連絡先の部分が斜体になったりしています。実は、ホームページビルダーの場合、ページ編集画面とプレビュー表示にはInternetExplorerの表示エンジンを使っています。見出しの文字が大きくなっていたり、連絡先の部分が斜体になっているのはInternetExplorer自身が持っているスタイルシートに基づいて表示している結果です。後で説明するスタイルシートを使えば、見映えを変更することなどは朝飯前のことです。
これで、見出しと連絡先部分のマークアップは出来ました。後は、リストと、強調部分をマークアップします。
まずはリスト部分のマークアップです。・FrontPageExpressの文字列を選択した後、
をクリックすると、以下のような画面が出てきます。
ここでは、番号なしのリストを使用するので、そのままにしておきます。この画面で使って良いのは、丸印がついている、通常、数字付き、説明付きの３つです。見映えを変えるのは、スタイルシートで行いますので、ここで選ぶ必要はありません。
もしくは、の右側の▼をクリックして出てくるメニューから、「番号なしリスト」を選択します。
そうすると、黒丸リストマークが付いてきます。これは、あくまでInternetExplorerのデフォルトスタイルシートによる表示結果です。
この時点で、ページ編集画面を見ると、
・Netscape Composer(Netscape4.78付属)
・Netscape Composer(Netscape7.01付属）
となっています。このままでは見映えもマークアップも中途半端です。ですので、リストの項目を増やす必要があります。
FrontPageExpressの文字列の最後にカーソルをあわせてから、Enterキーを１回入力します。
・Netscape Composer(Netscape4.78付属)
・Netscape Composer(Netscape7.01付属）
黒丸リストマークが下の行へついて、リストの項目が１つ増えます。次の項目の文字列を選択して切り取り、リスト部分に貼り付けます。３つ目の項目も同様です。
リストの項目を入力し終わったら、Enterキーを２回入力して、リスト部分の入力を終了します。
テキスト文書の時はリストマークとして中点を用いましたが、HTML文書ではリストマークがありますので、中点は不要になります。ですので、削除しましょう。
リスト部分のマークアップは以下のように変更されます。
<ul>
<li>FrontPageExpress
<li>Netscape Composer(Netscape4.78付属)
<li>Netscape Composer(Netscape7.01付属）
</ul>ul要素は番号なしリストを記述するための要素です。li要素はリストの項目を記述するための要素です。
これをみて、あれ？と思った方もいるでしょう。li要素は空要素じゃないのに、終了タグがない状態になっています。実は、HTML4.01ではいくつかの要素については、タグの省略が可能です。li要素の場合、子要素がインライン要素の場合、省略が可能です。ホームページビルダーでは、li要素の終了タグを付けてきません。気になるのであれば、HTMLソース編集画面で</li>を補いましょう。
番号付きリストを選択した場合、ul要素ではなく、ol要素となります。リストの項目を記すli要素は同じように使用します。
説明付きリストを選択した場合は、dl要素で定義リストであることを記述し、dt要素で定義する用語を記述、dd要素で説明文を記述することになります。
最後に、強調部分のマークアップを行います。「インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証」の文字列部分を選択後、メニューから、書式→論理強調→ストロング を選択します。そうすると、strong要素が挿入されます。
論理強調で選択できるのは、以下の８つです。
これで、基本的なマークアップは完成しました。HTMLでのマークアップ結果は、以下のようになります。
<!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>斬・Webオーサリングソフト</title>
</head>
<body>
<h1>斬・Webオーサリングソフト</h1>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p>
<p>しかし、性能も向上したことですし、<strong>インストール後のデフォルト状態でどれだけ
まともなソースを吐き出すかを検証</strong>してみましょう。</p>
<h2>検証対象となったソフト</h2>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。
Windows環境で動作する無料ソフトです。</p>
<ul>
<li>FrontPageExpress
<li>Netscape Composer(Netscape4.78付属)
<li>Netscape Composer(Netscape7.01付属）
</ul>
<address>文責：お名前(メールアドレス)</address>
</body>
</html>これで、HTML文書が１ページ作成できました。作成した文書を名前を付けて保存しましょう。メニューのファイル→名前を付けて保存でtext1と名前を付けて保存します。拡張子は自動でつけてくれるので、入力しなくても良いです。
関連事項
説明が後になってしまいましたが、body要素の子要素として使われる要素は、ブロックレベル要素かインライン要素に分類することが出来ます。ここでは、HTMLとして本来あるべき姿であるHTML4.01 StrictDTDで定義されている要素について取り上げます。
ins要素とdel要素は指定する範囲により、ブロックレベル要素、インライン要素いずれにもなります。
HTML4.01 Strict DTDでは、body要素の子要素にインライン要素を置くことは出来ません。必ずブロックレベル要素の子要素として配置します。
Transitonal DTDでは、body要素の子要素としてインライン要素を置くことも許されています。
今回作成するHTML文書は、ホームページ・ビルダーのデフォルトであるHTML4.01Transitional DTDを採用していますが、書き方の説明はHTML4.01 Strict DTDに準ずるものとします。
ホームページ・ビルダーでHTML文書を作成する場合には、body要素の子要素として必ずブロックレベル要素が吐き出されるので問題ありません。
リンクに関してはご自由にどうぞ。