まず、文書に構造を持たせてみます。文書に構造上の印を書き込む ことをマークアップと呼び、そのための（人工的な）言語を マークアップ言語と呼びます。ここでは WWW で使われている ハイパーテキストマークアップ言語（HTML）を使います。
まず、タイトル、大見出し、箇条書きを使う練習をやってみましょう。 実習の手引き、システム解説編を見ながら、「メモ帳」を使って、
<HTML> <HEAD> <TITLE>好きな食べ物、嫌いな食べ物</TITLE> </HEAD> <BODY> <H1>好きな食べ物、嫌いな食べ物</H1> <UL> <LI>好きな食べ物 <UL> <LI>餃子 <LI>刺し身 <LI>天ぷら </UL> <LI>嫌いな食べ物 <UL> <LI>そうめん <LI>ひやむぎ </UL> </UL> </BODY> </HTML>このようなファイルを作り（内容は適当に変えること）、 「名前を付けて保存」します。 この時、「ファイルの種類」を 「すべてのファイル(*.*)」にして、ファイル名を index.htmlにして下さい。
（注意）文書を書く時、「半角カタカナ」を使わないこと。
作ったファイルを表示して見るには、Netscape やインターネット エクスプローラなどの WWW ブラウザを使います。いま作った index.htmlを見るには、 ブラウザのアドレスとか場所とか URL と書いてある場所に、 a:¥index.htmlと書いて、Enter キーを押します。 すると、このように表示されます。
他の文書を結び付けることを、HTML ではリンクとかアンカーと 呼びます。リンクされている文は、WWW ブラウザで見ると、 色が変わっていたり、マウスを持っていくと、マウスの形が 変わったりして、クリック可能であることが示されます。 ここをクリックすると、リンク先のファイルへジャンプして、 そのファイルを表示します。このファイルは、ネットワーク上 にあるアクセス可能なファイルであればよくて、必ずしも 同じ計算機上にある必要はありません。このことについては 来週触れますが、この機能により、世界中のファイルへジャンプ していけるわけです。
ステップ１の例にリンクを持ち込んでみましょう。例えば 「メモ帳」を使って新たに、
<HTML> <HEAD> <TITLE>そうめん、ひやむぎの嫌いな理由</TITLE> </HEAD> <BODY> <H1>そうめん、ひやむぎの嫌いな理由</H1> これらは、食っても食っても、エネルギーが湧いて来る気が しない。腹だけ太って、元気が出ない。こんなのイヤだ。 </BODY> </HTML>のようなファイルを作って例えばkirai.htmlとして、 「名前を付けて保存」します（ファイルの種類を「すべての ファイル」にしておくこと）。
これに対応して、index.htmlの嫌いな食べ物 の行
<LI>嫌いな食べ物を、
<LI><A HREF="kirai.html">嫌いな食べ物</A>に変えます。すると嫌いな食べ物の部分が、マウスでクリック できる状態になり、この文字列と、ファイルkirai.htmlが 結びつけられ、マウスでクリックすると、このkirai.html が表示されます。実際 WWW ブラウザで見ると このようになります。
画像と文書を同時に表示させるには、インラインイメージの 記述を行います。ここでは、ペイントを使って小さな .bmp ファイル（縦64ピクセル、横64ピクセル程度）を作って 埋め込んでみましょう。
ただし、ペイントが出力する画像ファイルのフォーマットは ネットワーク上では、あまり使われません（ファイルサイズが 大きくなりすぎる）。この画像ファイルの変換についても 来週説明します。いまは、とりあえず、このままで使って 下さい。
さて、ペイントで
のような絵を書いて、これを例えば soumen.bmp という
名前で「名前を付けて保存」したとしましょう。この画像を
index.htmlで表示させるには、
<IMG SRC="soumen.bmp" ALT="そうめんの絵">という行を表示させたい場所に付け加えます。 ここで、ALT=の部分は、 画像が表示できないブラウザなどの場合に、代わりに表示する 文字列です。
これを WWW ブラウザで見ると こうなります。
これを表示する場合、Netscape などでは絵の部分に全く違う絵 が表示されることがあります。これは、この画像フォーマットが扱えない ためで（扱えるように Netscape を設定することは可能なのですが、 大変なので止めておきます）、この場合は、PC にある インターネットエクスプローラを使って下さい。