しかし、見易く装飾を施すサービスがあっても良いと思います。その装飾の仕方に就いて学んで行きます。
◇あなたにもホームページは作れる◇
世の中にはいろいろな人が居て
１．「はっきりと理解しないでも、先ず大よそのイメージを掴んでから入る。」
２．２０秒でホ−ムページガ作れる（但しタイトルだけのホームページ）
３．ホームページは難しくない。・・・云々です。
みなそのとおりで決して難しいことではありません。
但し奥が深いことは事実ですが、取り敢えず下記のことを実施すると
１．で言う「はっきりと理解しないでも、先ず大よそのイメージが掴む」ことができます。
始めのうちはあまり考えることもなく、指示どおり実行してみてください。だんだんに要領が分かってくると思います。
ここで作るホームページは「ご自分のパソコン内で、２〜３枚仕上げるだけです。２つ目はリンク実証用です。３っつ目のデザインで完成の予定です。
（１Pも３Pも同様な作業です。インターネトに載せるのはその先の話です。）
先ず「ホームページのトップにするフアイル」は必ず「 index.html 」とする決まりになっています。
注１）文字は将来に備えるためと、それに説明も簡単ですので「半角英数小文字」に統一します。
注２．出来上がった資料は保存すると「○○フアイル」と呼ばれます。この場合は「indexフアイル」になります。）
では１枚目の「index1.html」フアイル(１は後で削除)を作りますが、画像を挿入し、midiフアイルが有ればBGMも鳴らせたいので材料の
「サンプル画像フアイル１枚」と 「サンプルmidiフアイル１枚（BGM用）」を
予め用意して「My Documents」内の「My Musicフォルダー」に保存して置きます。
(大抵の方はここが空いていそうなので、たまたまそうしました。新規フォルダーの作れる方は、 フォルダー名「htmlstyle入門」を「My Dcuments」内に作ってください。）
手順
１．画像フアイル１枚 「My Music フォルダー」内に取り込みます。下記から１つで結構です。
方法１「My Pictures」の中にご自分が保存した画像のサイズの小さいもの（１０〜４０Kb位）
２．ペイントで何かに絵を書いて「 sample.jpg 」と名前を付けて「My Music フォルダー」内に保存。
３．Windowsが用意している画像を使用する。
Windows Meの場合は、マイコンピュータ→ローカルデスク（C）→Program→Common Files→MycrosoftSharedの中のClipartとStationeryに沢山のおなじみの画像が入っています、この中の一つを「右クリック」で「 My Music フォルダー」へドラッグ＆ドロップしてメニューの「此処へコピーする」を選択してください。 以上は、html・スタイルシート以前の「パソコン学習の基礎的部分」です。
ここに書かれているソースの文字は「テキスト」形式で書かれています。
この「テキスト形式」は「文字色・文字サイズ・レイアウト情報のない単純な文字だけのデータ」
で異なるワープロソフトやパソコン同士でもデータのやりとりができるので「世界中で通用」します。
なにより優れていることはインターネット上のページ（Webページ）のコピーにはそのソースからコピーして「メモ帳にペースト」するのがベストです。シンプルで忠実に再現できるからです。（但し画像を取り込みたかったら、WORDに貼り付けると良いでしょう。HPビルダーに貼り付けても取れますが、フアイルがごてごてとついてきます。）
ソースをご覧下さい。<body>から下は body終了形の</body> html終了形の</html>の３っつのみです。（スタート時点ですが）改行タグの<br>はかなり多用しました。
画面をご覧ください。味も素っ気もないただのワープロ文です。
これを
１．「body部」では
２．「head部」では、スタイルシートを使用して簡単に大変身させ、また、編集します。
今回の変身目標は、ワードにある、B（太字）I（イタリック）U（下線）文字サイズ、 文字色、リストその他リンク、画像等を「h1」「p」「ul」の３要素を適宜配分して「セレクタ」と呼ばれる要素内で設定します。（但しリンク画像は直接設定）
以上が説明部分です。
これからが、本題に入ります。
先ず「htmlフアイル」を作ります。
◇１．「htmlフアイル」の作成◇
方法は、メモ帳を開いて、このページの「ソース全文」をコピー＆ペーストしてください。
メモ帳は（スタート→プログラム→アクセサリ→メモ帳）で開らけます。
このメモ帳を「名前を付けて保存」します。名前は index1.html で「My Music 」フォルダーに保存してください。今後、何かを設定した際「上書き保存」や「名前を付けて保存」しますが、index1.html をindex2.html、index3.htmlというように番号を上げて保存する場合もあります。
◇２．見出し要素[ h1 ]のスタイルを head 部に埋め込む◇
今度は今できた「index1.html」を開き、下の「 h1 」から１３行目の「 } 」までを「1字1句漏らさず完全にコピー」して、
head 部の <!-- と -->の間にペーストします。(勿論手書きならなお結構です、理解力が数倍早くなります。若し邪魔なら/* */を含めその間も削除してください。)
大事なことは、
２．今度は今できた「index1.html」を開き下の「h1 」から一番下の「 } 」までを「1字1句漏らさず完全にコピー」して、head部の<style type=text/css>と</style>の間にペーストします。(/*〜*/はスタイルシートで使用できる、メモ書きで「ブラウザ」には表示されません。若し邪魔なら/*〜*/を含めその間も削除してください。)
大事なことは、一つの「セレクタ」（ここでは「 h1 」)に対して上に「 { 」下に「 } 」の２つの括弧が必ずついていること、一つの項目（属性と値で構成される）に「:」コロンと「;」セミコロンが必ず有ることです。
h1 {
text-align: center; /*テキスト中央*/
color: red; /*文字色赤色*/
font-size: 22pt; /*文字サイズ*/
font-family: ＭＳ 明朝; /*書体*/
font-weight: bold; /*文字強調*/
height: 48px; /*領域枠高さ*/
padding-top: 10px; /*領域枠と文字列の上の間隔*/
padding-bottom: 10px; /*領域枠と文字列の下の間隔*/
margin-left: 5px; /*領域枠の幅の設定で画面の端からの距離*/
border-size: 20px; /*枠線の幅*/
border-style: outset; /*領域枠の形式で、内容浮き出し感の立体感*/
background-color: #fffff6; /*領域色（背景色）*/
}
３．「index1.html」のソースを開いて、<body>内の「あなたにもホームページは作れる。」の左に<h1>を右に</h1>を半角で記述してください。（お目当てのところ即ち内容ををタグで囲むのです。）
２．と３．で何を行ったかと言いますと、もう既に「見出しh1部分に就いて、 １１種のスタイルシーとを設定した」ことになります。後は左側の数値等をあやつれば目に見えて変化します。
４、下の p 以下全部をコピーしてから「ソースを開き」「 h1 」の最後の「 } 」の下に「ペースト」してください。随分ありますが、「h1」の/*〜*/内のメモであらかた想像ができると思います。また、その都度解説いたします。
[p]で設定した主なものは、文字色color:#000090;文字左寄せtext-align:left; 斜体font-style:itaric;太字font-weight: bold;文字サイズfont-size: medium; 書体font-family: ＭＳ 明朝；アンダーライン下位置text-underline-position: below;位です。後はノーマルとか未設定で空かせてあります。
それから、「世の中にはいろいろな人がいて」の頭の「世」の前に<p>を記述してください。以上で h1とｐの２つの要素について一部ではありますが、スタイルシートを適用したことになります。下線が煩かったらtext-underline-position: below;のbelowをnoneにして見て下さい。
p {
text-align: left;
color: #000090;
font-size: medium;
font-family: ＭＳ 明朝；
font-style: itaric;
font-weight: bold;
text-decoration: none;
text-underline-position: below;
font-variant: normal;
line-height: normal;
line-through: normal;
width: auto;
height:auto;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
background: #fffff6;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
background-color: transparent;
background-image: url(".png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-position-x: 0%;
background-position-y: 0%;
background-attachment: scroll;
border-top-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-width: medium;
border-top-color: red;
border-left-color: blue;
border-top-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
word-break: normal;
word-wrap: normal;
writing-mode: lr-tb;
letter-spacing: normal;
word-spacing: normal;
}