既に、ウエブ作製の動機付けや目的が明確であることを前提とします。まず、表示したい文書の内容と構成を練ります。閲覧者が理解しやすいように、きちんと段落に分けて、文書全体のタイトルを考え、適切な見出しのフレーズを付けておきます。必要があれば、挿絵や写真を用意し、その挿入位置とそれらの表題、適切なキャプションを決めておきます。内容を理解するために参考となる文献、サイトなどをリストアップしておきます。
インターネットに接続する手段、ウエブサイトを置くサーバースペースの準備。エディタ、ＦＴＰソフトなどいくつかのソフトウエアを手に入れ、使い方を習熟しておく。楽しいことばかりではないので、ウエブ管理人の心構えなどを勉強しておくのも良いかも知れない。（別項をご参照下さい：心構えなど）
ワープロで作ったきれいな書類をそのままウエブで公開することは出来ません。閲覧者はワープロソフトではなく、ウエブブラウザソフト（エクスプローラーやネットスケープナビゲーターなど）を使ってサイトを閲覧するので、それらのブラウザソフトが理解できるような形にファイルを作り直さなくてはなりません。
ウエブブラウザで表示するための文法がHTMLと呼ばれるもので、その他のファイルは、HTMLと関連づけることでウエブサイト構築に使われます。HTMLはウエブを使った情報発信が、閲覧環境（ソフトウエア、ハードウエアのみならず、閲覧者のハンデキャップなどを含めた環境）に依存せずに等しく伝達されるように配慮されています。また、HTMLの書式に従って正しくマーク付けすることで、論旨に対する十分な予備知識がない閲覧者にも、作成者の意図を誤解無く伝えることが出来ます。
ウエブページで画像を表示する場合、画像ファイルを別に用意する必要があります。画像ファイルは一般に容量が大きくなるので、JPEG、GIFなど、ファイルサイズを小さくできるように工夫されたフォーマットで作製する必要があります。
ブラウザソフトでHTMLを表示するときに、表示するレイアウトを指定するためのファイルです。HTMLファイルだけでは、ブラウザソフトの固有のスタイルシートに従って表示されるため、ソフトによって表示が異なることになります。作成者が独自のCSSファイルを用意することで、様々な表現をブラウザソフトの種類に依存せずに、指定することが出来ます。サイトの見え方を調節し、読みやすく、また、ウエブ作成者の個性を発揮するために重要なファイルです。
場合によっては、文書をウエブページとしてではなく、PDF書類で提供した方が有効かも知れません。動画、音声、Flashというアニメーションのファイルなどが、ウエブ作製に使われます（が、おやこニュースでは使っていません）
エディタを開いてテキスト形式で文書を作製します。ファイル名は半角英数を用い、ハイフン-、アンダーバー_を使い、$%@&等、使ってはいけない文字があります。大文字と小文字は区別する。拡張子.htmlまたは.htmを付けます。（本当は拡張子は何でも良いらしいですが、、この先はそのようなことをいちいち書きません）
HTML書類は３つの部分に分かれます。並ぶ順に、
用意した文書は、ボディ部分に記載することになります。
HTML文書の中身は、「タグ」を用いてテキスト文書にしるしを付けたもの（マークアップ）です。タグの記載方法の原則は以下の通りです
エディタで作ったテキストファイルに以下の記載を加えてゆきます。
１行目は、HTML文書の書式についての情報（文型宣言）を書き込みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
この通りに書きます。この１行が無い場合、ブラウザは、多分書き忘れたのだろうと気を利かせて適当な定義をあてはめてHTMLを表示してくれますが、ルール上絶対に必要な部分です。この項ついて詳しい解説：
文型宣言に続いて、文書全体を、<html>というタグで括ります。このとき、属性（lang="ja"）を書き加え、<html lang="ja"> </html> とします。これは、言語コードが日本語であることを示します。以下の記述は全て、この <html lang="ja"> </html> の中に記載してゆきます。従って、文型宣言の次に出てくるタグは、<html lang="ja>であり、HTML文書の最後は必ず</html>です。
この項の詳しい解説
<html> </html>の中に最初に出てくる要素で、<head> </head>で括った部分です。ここに記載する内容はブラウザや検索エンジンなどに文書の情報を提示する部分で、<title>ページの名称</title>を除き、ブラウザには表示されません。ヘッド要素に含まれるのは、以下の記述です。
この部分を念入りに書くと、検索エンジンに掛かりやすくなり、訪問者を増やすのに大変効果があるようです。また、最近のウエブブラウザは、メタ情報を利用してナビゲーションしてくれるものが増えており、閲覧者の便宜を図ることになります。
この項の詳しい解説
</head>に引き続いて記載します。文書の本文を、<body> </body>によって括られている部分に記載します。この部分がブラウザに表示されます。
本文（body要素）の全ては、次のいずれかのタグによって括られている必要があります。
いずれもブロック要素と呼ばれます。以下、各々の解説。
ページに記載する文章のタイトルや、見出しに相当する部分であることを明示する。文書構成上の段階によって、<h1>から<h6>まで、６段階を設定できる。文字の大きさを指定するものではなく、文書の構成と、見出しの（意味上の）大きさを考慮し、h1から順番に、文書階層構造とつじつまが合うようにする。
文章は意味上のまとまりから段落に分けて、段落の始まりと終わりを<p> </p>で括る。<p>は改行の意味ではないことに注意。
まとめ、など、比較的短い文を羅列する場合、箇条書き（リスト表示）を用いると理解しやすくなる。リストには、番号無し、番号付き、定義リストの３種類がある。
サイトの名称、作者、連絡先、著作権の表示などの情報。<address> </address>で括る。body部分の最後に並べることが多い。
表組みをする場合に使用する。<table> </table>については、別項をご覧下さい。
これらのブロック要素の中に別のブロック要素を含めることが出来る場合がある。下記参照。
汎用要素。幾つかの一連の要素を意味上のグループにまとめたい時に使う。
<div class="week"> 一週間分の複数の要素（ブロックレベル要素を含む） </div>
HTML文書内のスペースや改行に意味があることを明示する。
開始タグのみ。文書の境界を明示する。他のタグを含めることはできない。ブロックレベル要素として扱われる。
文書全体がbody要素に入って、しかも、全ての部分が上記5つのタグのいずれかで括られ、一応、HTMLとしての体裁は整いました。ブラウザで読み込めば、きれいに表示されるはずです。（ブラウザのファイルメニューからファイルを開く）
文書をより分かりやすくするために、さらにいくつかの要素を明示し、文書を完成させます。追加される要素は、主にインライン要素と呼ばれるものです。
各々の要素の開始タグの中に属性つけて、要素の性質を示したり、付加情報を加えたりすることが出来ます。<tag 属性="属性値">要素の内容</tag>という形で表現します。属性はスペースを挟んで複数付け加えることが出来ます。
title、class、id、name、href、src、cite、rev、rel、などが使われます。以下その解説。
ほとんど全ての要素に付加的な情報を与えて説明を加えることが出来る。多くのブラウザは、カーソルを要素の上にもっていくと、title属性の属性値をポップアップして表示してくれる。閲覧者にヒントを与える便利な属性。属性値は何でもあり。閲覧者に有用な情報を与えるもの。
作者の意図に従って、要素を細分化することが出来る。属性値は要素の性質を示す簡潔なものとする。例えば、本文中に出てくる全ての通りの名前ににstreetというクラス属性を与える場合、、、、
<p><span class="street">四つ橋筋</span>をまっすぐ歩いてゆくと、そのうちに堂島川を渡り、<span class="street">中之島通り</span>に出るはずなので、そこを左に、、、</p>
という具合。なお、class属性値は半角スペースで区切って複数与えることが出来ます。
ファイル内に一カ所だけ現れる要素に名前を付ける。属性値はアルファベットで始る簡潔なもの。文書中にclass属性が同じ属性値を何度でも使えるのに対して、id属性は同じ名前がファイル中に一カ所だけである。
例えば、ファイル中に更新日時を示している場合、
<p id="DATE">2003年5月12日更新</p>
id属性はフラグメント識別子としてリンク先の指定に利用できる。スタイルシートを適用するためにも使用できる。
各々の要素に名前を付けることが出来る。属性値は名前として適切なものを選ぶ。
挿入<ins> </ins>や削除<del> </del>要素に加えて、文書に変更を加えた日付、時刻を明示する。記載方法。
アンカー<a> </a>やリンク<link>要素に加える。属性値はURI、あるいはフラグメント識別子。
画像<img>要素に付けて、画像ファイルの場所を指定する。属性値は画像ファイルのURI。
引用<q>あるいは<blockquote>に引用元の情報（URIなど）を付け加える。
head要素内で、link要素にリンクの内容を示すのに使う。
href属性と組になる。rel属性の属性値はindex （索引ページ）、contents（内容の説明を含むページ）、next（次に見るべきページ）、prev（一つまえのページ）、alternate（同様の内容を含むページ）、stylsheet（スタイルシートの指定）、rev属性の属性値はmade（作成者の連絡先メールアドレス）
いくつかの見出しや段落、区切り線など、意味上のひとまとまりになるいくつかの要素を、<div></div>で括ってひとかたまりとして扱う。id、class、name属性などを付ける。
<div id="Chapter1"> <p> 段落１−１ </p> <p> 段落１−２ </p> </div> <!-- end of "Chapter1" -->
の様に、開始タグにid属性または、class属性を付け、終了タグにコメントを付ける。
罫線を入れて、意味上の区切りを明示することが出来る。<hr>はブロック要素であり、空要素である。
画像は二次元的な広がりをもち、なおかつファイル容量が大きくなる。加えて、画像を見ることが出来ない人が居ることを考慮し、使用に際しては注意する必要があります。まず、そこに画像が必要かどうか、を十分に吟味するべきでしょう。
画像を表示させる場合、<img>要素はインライン要素であるので、ブロック要素の中に入れる必要がある。単純にテキストの中に入れると、文書のレイアウト上問題を生ずる場合が多い。絵文字ならばともかく、インラインで画像は使いにくい。また、一般に画像にはキャプションが付くが、HTMLには画像にキャプションを付ける適切な仕組みが無いようである。これは、インターネットの初期の段階で、画像を文書に組み込んで表示することを考慮していなかったためかも知れない。しかし、現実にほとんどのブラウザは画像を表示可能であるから、適切なマークアップを行わなくてはならない。
解決策として、画像とキャプションをともに<p>要素として、属性名を付ける。さらに、それらが一組のものであることを明示するために、<div> </div>で括る。例えば、
<div class="photo"> <p class="image"> <img src="gazou.jpg" alt="写真"> </p> <p class="caption"> 写真の説明文 </p> </div> <!-- end of "photo" -->
画像が段落（paragraph）として適切かどうか議論のあるところらしいが、他に適切な方法が無い。キャプションの表示方法としては、alt=""をキャプション代わりにするのもひとつの方法であるが、気軽に見ることが出来ない。<img>にtitle="キャプション"という形でタイトル属性として付けるのもひとつの方法であるけれども、表示させようと云う意志を持った人にしか伝わらない。また、段落として扱う以上、画像を挿入する場所は、文章の構成上矛盾がないように考慮するべきである。
画像を使う必然性は大いに考慮するべきで、メニューのアンカーに画像を使う場合、テキストよりも見易く、その画像自体に意味があり、なおかつファイル容量が小さいものを使う必要がある。また、画像が表示出来ない場合に、意味が通じるように、alt=""に適切な説明を入れることが大切である。
HTMLの凄いところは、ハイパーリンクです。いわゆるリンクを貼る（張る？）ことが自由に出来るところ。文書を読み進んでゆくうちに、読み手は様々な興味をそそられるはずで、その興味を満たす様に、文書中の意味のある文節から、より詳しい資料や解説、関連情報が含まれるウエブサイトのページにリンクさせることが出来るわけです。
href属性、link属性、cite属性、src属性などで、属性値としてURI（いわゆるアドレス）を指定します。URIは三つの部分からなり、初めにプロトコル（http）、続いてサーバー名（www.oyakonews.com）続いて、ファイルのパス (/oyanews/homep/creating/web_description.html）という順番に並べます。
URIには絶対位置と相対位置の二通りの表示の仕方があります。絶対位置は、プロトコル名から全てを書き並べる方法です。このページの絶対位置は、
http://www.oyakonews.com/oyanews/homep/creating/web_description.html
となります。相対位置とは、そのファイルからの位置関係を示すもので、同じディレクトリにあるファイルは、そのままファイル名のみ。下の階層に下がるときは、/を付け、上に上がるときは、../を付けます。例えば、おやこニュースのホームは、このページより３段階上のディレクトリにあるので、
../../../index.html あるいは、http://www.oyakonews.com/index.html
となります。絶対位置と相対位置のどちらを使ったらいいかは場合によると思う。ファイル管理機能の付いた、オーサリングソフトでファイルを管理する場合は、相対位置で指定した方が、いろいろと便利な場合があります。
リンクを設置したいフレーズをアンカーとして指定し、それにhref属性で、href="URI"という形でリンク先のアドレスを指定します。例えば、
<p>おやこニュースには <a href="http://www.oyakonews.com/aboutus/news.html"> 毎日の暮らしを記録した日記のページ</a>があります。</p>
おやこニュースには毎日の暮らしを記録した日記のページがあります。
アンカー要素は一般にアンダーラインと青い色で示されるので、閲覧者にはリンクがあることが明白です。そのリンクをクリックした先に何があるのか、きちんと示すべきでしょう。上の例では、おやこニュースの日記があると想像が付くはずです。アンカー要素の中身はhref属性で示されるURIの中身が具体的に示されているべきです。
おやこニュース管理人の毎日の暮らしを知りたい人は、ここをクリックして下さい。
「ここ」、という言葉には、リンク先と何の関係もありませんから、この例は宜しくないです。いわゆる常連の訪問者ばかりではありません。初めてサイトを訪れた閲覧者は、管理人を信用すべきかどうか、迷っています。初めて訪れたサイトで、ここをクリックといわれても、私には出来ません。見たくないものを見せられるのは嫌だからです。リンク先に何があるのか具体的に明示することは、管理人の閲覧者に対する配慮として必要なことだと思います。リンク先がよく分からずに安易にクリックする人はむしろ、無防備な騙されやすい人といえるかも知れません。
いろいろと興味深い情報を提供しておきながら、それに関するリンクを設置しないのは、思わせぶりで不親切な感じです。また、的はずれなリンクはウエブサイトの信用を落とします。適切なリンクを積極的に、念入りに提供することは、文書を読みやすくして、記述の信頼性を高める上で大変重要なことです。（難しいですけれど）
大きなページの場合、例えば一ヶ月の日記になっているようなページで、ページの途中、特定の場所にリンクさせたい場合、URIに続けてフラグメント識別子を付けます。リンク先の特定の場所（要素）にid属性で名前を付けておきます。段落中の特定の場所を指定したいときは、アンカー要素を設置し、<a id="xxx">特定のフレーズ</a>とします。
<h3
class="date" id="Oct0202">2002年10月2日の日記</h3>
<p>日記の内容はさまざま<
a id="xxx">ここにリンク</a>させることが出来ます。
リンク元からは、」href属性に、href="URI#Oct0202"という風に、URIに続けて#フラグメント識別子を記入することで、ページの特定の場所にジャンプさせることが出来ます。
これらの文書の整形は、スタイルシートによるウエブページのデザイン、レイアウトと密接に関わっています。スタイルシートによるデザインは、マークアップした要素単位で行われるからです。例えば、段落の間の余白の幅を指定したり、引用部分を枠で囲んだり、人の名前を全て、<span="familyname">山田さん</span>の友人の<span="familyname">田中さん</sapn>という風にマークアップしてあれば、全ての人の名前を青い太字で表現するようなことが簡単に出来ます。きちんと見出しを与えて整形してあれば、デザインは規則的になり、閲覧者の理解を大いに助けることになります。
oyanews/homep/creating/web_description