簡単なホームページの作り方（PDF書類）

簡単なホームページの作り方
ホームページを作るソフトは、ウィンドゥズ（Windows）なら『メモ帳』など、
マッキントッシュ（Macintosh）なら『シンプルテキスト（Simple Text）』など
の、どのパソコンにも最初から必ず入っている文字を打ち込むだけの簡単なソ
フトを使用してます。
また、作られたホームページ書類は『インターネット・エクスプローラー
（Internet Explorer）』や『ネットスケープ（Netscape）』に代表されるホーム
ページ閲覧ソフトで、見ることができます。
１
文を打ち込み（書き込み）ます。
まず
「消防署が「地区安全担当制度」を始めました。この制度は、消防署・消防
出張所の消防隊ごとに、小学校区や自治会を単位とした担当区域を決めて地
域との連携を深めるものです。皆さんの安心と安全に関わる、きめ細かい取
り組みを目的としています。」
という文をホームページ化してみます。
文字を打ち込むだけの簡単なソフト（『メモ帳』や『Simple Text』等）に
上記の文をそのまま打ち込み（書き込み）、文の最初に<HTML>を最後に</HTML>
を書き加えます。
このまま「⃝⃝.html」と名前をつけて保存すれば一番簡単なデジタル書類
の完成です。（⃝⃝は、好きな言葉を半角英数字で書き入れます。）
（記入例）
<HTML>
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
</HTML>
このまま閲覧ソフト(エクスプローラーやネットスケープ)で活用すること
ができます。
この場合、上記の文を閲覧ソフト(エクスプローラー等)で見ると
消防署が「地区安全担当制度」を始めました。この制度は、消防署・消防
出張所の消防隊ごとに、小学校区や自治会を単位とした担当区域を決めて地域
との連携を深めるものです。皆さんの安心と安全に関わる、きめ細かい取り
組みを目的としています。
と、表示されます。
２
作ったホームページ書類を見やすくします。
・文を改行する。
改行する文の最後に を書き入れます。また、1 行開けて改行したい場
合はを書き入れます。
（入力例）
<HTML>
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
</HTML>
文の最後は改行しても、しなくてもかまいません。
上記の文を閲覧ソフト(エクスプローラー等)で見ると
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
と、表示されます。
・文の一部を中央に移動（センタリング）させます。
<CENTER>⃝⃝⃝</CENTER>
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。</CENTER>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
</HTML>
（入力例）での表示のされ方。
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
・特定の文字を太くします。
⃝⃝⃝
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。</CENTER>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会
を単位とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
</HTML>
（入力例）での表示のされ方。
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
・
特定の文字を拡大します。
⃝⃝⃝
文字を拡大します。●には任意の数字を入力します。
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会
を単位とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
</HTML>
（入力例）での表示のされ方。
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
・
文に罫線を付けます。
罫線を入れたい場所に<HR>を書き入れます。なお、<HR>の前後は自動に
改行されるので、や は必要ありません。
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
<HR>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会
を単位とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
</HTML>
（入力例）での表示のされ方。
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
※
罫線の太さと長さは<HR>を<HR SIZE=● WIDTH=●%>と書き換えることで、
調節できます。●には任意の数字を入力します
３
表を作ります。
表は<TABLE>と</TABLE>で枠組みを作り、全ての行の先頭に<TR>を書き、
<TD>と</TD>で挟んだ項目を１つの<TR>の後に同じ数だけ書きます。
表の大きさも WIDTH=●%で調節できます。(無くても良い。)
(入力例)
<HTML>
<TABLE WIDTH="90%">
<TR><TD>原因順位</TD><TD>火災原因</TD>
<TR><TD>一番</TD><TD>放火</TD>
<TR><TD>二番</TD><TD>たばこ</TD>
<TR><TD>三番</TD><TD>火遊び</TD>
</TABLE>
</HTML>
上記の文を閲覧ソフト(エクスプローラー等)で見ると
原因順位
火災原因
一番
放火
二番
たばこ
三番
火遊び
と、表示されます。
<TD>と</TD>の代わりに<TH>と</TH>を使うと、文字が太くなり、表の中央
に位置します。
ここでは「原因順位」と「火災原因」を<TH>と</TH>で挟み、最初に作成
した文の後に入れてみます。
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
<HR>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治
会を単位とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
<TABLE WIDTH="90%">
<TR><TH>原因順位</TH><TH>火災原因</TH>
<TR><TD>一番</TD><TD>放火</TD>
<TR><TD>二番</TD><TD>たばこ</TD>
<TR><TD>三番</TD><TD>火遊び</TD>
</TABLE>
</HTML>
上記の文を閲覧ソフト(エクスプローラー等)で見ると
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単
位とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
原因順位
火災原因
一番
放火
二番
たばこ
三番
火遊び
と、表示されます。
４
絵や写真をホームページ書類の中で表示します。
GIF や JPEG(JPG)形式で保存された絵や写真を用意します。
保存した時のデータ名は半角英語で入力し、末尾に「.gif」や「.jpeg」
(「.jpg」)を付けます。
ここでは仮に「gazo.gif」又は「syasin.jpeg」としておきます。
(例)
gazo.gif
syasin.jpeg
絵や写真を表示するには、文中に<IMG SRC="gazo.gif">を入れます。
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
<HR>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治
会を単位とした担当区域を決めて地域との連携を深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
<IMG SRC="gazo.gif">
</HTML>
上記の文を閲覧ソフト(エクスプローラー等)で見ると
消防署が「地区安全担当制度」を始めました。
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治会を単位
とした担当区域を決めて地域との連携を深めるものです。
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
「gazo.gif」の写真
と、表示されます。
５
文を移動させます。
今までの要領で作成して保存されたホームページ書類のデータを２つ以上
用意します。
今回は「４絵や写真をデジタル書類の中で表示します。」で作成した書類
を「tesuto.html」と名前を付けて保存し、別に同じ要領で作成したデジタル
書類を用意します。ここでは仮に「siken.html」とします。
「tesuto.html」の任意の文を<A HREF="siken.html">と</A>で挟みます。
(入力例)
<HTML>
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
<HR>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治
会を単位とした<A HREF="siken.html">担当区域</A>を決めて地域との連携を
深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
<IMG SRC="gazo.gif">
</HTML>
上記の文を閲覧ソフト(エクスプローラー等)で見ると「担当区域」の文字に
色が付いているのが分かります。
色の付いた文字をクリックする（押す）と、用意した「siken.html」に移動
できます。
なお、<A HREF="siken.html">と</A>で挟むのは文字だけで無く、絵や写真
(<IMG SRC="gazo.gif">)でもかまいません。
絵や写真を挟む場合、<IMG SRC="gazo.gif">に BORDER=0 を付けると枠線が消
え、見た目にも良いでしょう。
この場合、閲覧ソフト(エクスプローラー等)で表示されている絵や写真をク
リックする（押す）と、用意した「siken.html」に移動できます。
６
補足
ホームページ書類に背景をつける。（デジタル書類を閲覧ソフト(エクスプ
ローラー等)できれいに見せる。）
・完成したホームページ書類の背景に色を付けたい場合は、
<HTML>の後に<BODY BGCOLOR="⃝⃝⃝">を、</HTML>の前に</BODY>を書き、
⃝⃝⃝に色を入力します。
この場合、⃝⃝⃝(色)は記号で入力します。
白 =
黒 =
黄色=
青 =
#ffffff
#000000
#ffff00
#0000ff
等……
なお、色の記号に使われている「0」は数字です。
(入力例)
<HTML>
<BODY BGCOLOR="#ffffff">
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
<HR>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治
会を単位とした<A HREF="siken.html">担当区域</A>を決めて地域との連携を
深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
<IMG SRC="gazo.gif">
</BODY>
</HTML>
これで背景は白色になります。
また、背景を一色ではなく絵や写真の繰り返しパターンにすることもでき
ます。
この場合<BODY BGCOLOR="⃝⃝⃝">ではなく、<BODY BACKGROUND="■■■">
と書き、■■■には gazo.gif などの、GIF や JPEG(JPG)形式で保存された絵
や写真の名前を書き入れます。
※
完成した書類の<HTML>の後に<HEAD><TITLE>⃝⃝⃝⃝</TITLE></HEAD>を書
き入れると、インターネットで使える(UP できる)ホームページ用データとな
ります。
⃝⃝⃝⃝には、好きな言葉を入れて下さい。
それが、この書類のタイトルになります。
<HTML>
<HEAD><TITLE>⃝⃝⃝⃝</TITLE></HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>消防署が「地区安全担当制度」を始めました。
</CENTER>
<HR>
この制度は、消防署・消防出張所の消防隊ごとに、小学校区や自治
会を単位とした<A HREF="siken.html">担当区域</A>を決めて地域との連携を
深めるものです。 
皆さんの安心と安全に関わる、きめ細かい取り組みを目的としています。
<IMG SRC="gazo.gif">
</BODY>
</HTML>

Download Report