ホームページの作成には専用のソフトウェアがあるのですが、ホームページが表示されるしくみを理解してもらうために、あえて今日は専用のソフトウェアではなく、メモ帳[テキストエディタ]を使って作成します。ある程度しくみを知っているだけでも、仕事に活かすことができます。
ブラウザ(ホームページを閲覧するソフトウェア)では、ホームページを表示させているソースを見ることができます。実際に見て見ましょう。ブラウザの「表示」・「ソース」を選択してください。
しくみがわかると、他の人のホームページを参考に、自分のホームページを改良することができます。また他の方も、皆さんのページを参考にすることができます。 近年、ホームページを自動作成するソフトウェアもあるのですが、そのようなソフトウェアで作成したものは、必ずしも人間がソースを見て分りやすいものではなく、 他の人が参考にできないばかりでなく、自分自身が「少し改良したい」と思ってもなかなか思うように行きません。
自動作成のソフトウェアで作成すると、ソフトウェアを変えたり、ソフトウェアのバージョンを変えたりしたときに、今までと同じ仕上がりにならないときがあります。仕事でホームページを管理しているときは、大変困ります。
では実際に手を動かして見ましょう。
メモ帳とブラウザは同じファイルを開いています。メモ帳で作ったファイルテキストファイルと呼ばれ、どのパソコンでも見る事ができます。そのファイルに< > < />に囲まれた記号(この記号のこと、タグ:荷札といいます)を書き加えると、あら不思議、ブラウザで見ると、文字を飾ったり、画像を張ったりできます。これで世界中の人が(インターネット使える環境にある人だけだけど)キレイなファイルを見る事ができます! これがホームページのファイルのしくみです!
見だし・改行・背景や文字色の変更
・
画像の貼り付け・画像の編集
ページの特定の箇所にリンクを張る方法は、このページのソースを参考にしてください(できるかな?)。
スタイルシートって、ご存知ですか? スタイルシートはHTMLで指定したところの どのように表示させるかを、指定できるしくみです。スタイルシートを使うと 次のような利点があります。
HTMLファイルとは別にCSSファイル(スタイルだけを記述したファイル)を作っておいて、
ブラウザ側でリンクして表示するという方法です。この方法を使うとCSSファイルを書き換えるだけで
複数のページの表示を変更できます。
ヘッダーにこれを埋め込んでおくと、CSSファイル(この場合komikomi.css)のスタイル設定を変更するだけで、
埋め込んでおいたページのレイアウトを一気に更新できます!
<link rel=stylesheet type=text/css href=komikomi.css>
</head>
HTML
<h2>文章</h2>
<h3>文章</h3>
<strong> 文章 </strong>
等々、フツーに作っておきます。
CSS
komikomi.cssをご参照ください。
こうすると、このページのように表示されます。ソースを見てください。
h2、h3、strong、色も大きさもHTMLでは指定ないのに、あら不思議、
いろいろ出来ます。背景や、画像等、スタイルシートで指定できます。