ホームページを作ろう!



(小宮山智志)


目次

  1. 1) ともかくホームページを作っちゃおう
  2. 2) いろいろ飾って見よう
  3. 3) CSS編  


  4. 皆さんの情報処理演習2のページへ

    1)ともかく、ホームページを作っちゃおう


    ホームページの作成には専用のソフトウェアがあるのですが、ホームページが表示されるしくみを理解してもらうために、あえて今日は専用のソフトウェアではなく、メモ帳[テキストエディタ]を使って作成します。ある程度しくみを知っているだけでも、仕事に活かすことができます。

    ブラウザ(ホームページを閲覧するソフトウェア)では、ホームページを表示させているソースを見ることができます。実際に見て見ましょう。ブラウザの「表示」・「ソース」を選択してください。

    しくみがわかると、他の人のホームページを参考に、自分のホームページを改良することができます。また他の方も、皆さんのページを参考にすることができます。 近年、ホームページを自動作成するソフトウェアもあるのですが、そのようなソフトウェアで作成したものは、必ずしも人間がソースを見て分りやすいものではなく、 他の人が参考にできないばかりでなく、自分自身が「少し改良したい」と思ってもなかなか思うように行きません。

    自動作成のソフトウェアで作成すると、ソフトウェアを変えたり、ソフトウェアのバージョンを変えたりしたときに、今までと同じ仕上がりにならないときがあります。仕事でホームページを管理しているときは、大変困ります。

    では実際に手を動かして見ましょう。

       
    1. エディタ(ご自身のお気に入りエディタで構いません。特にない方は「メモ帳」で)を開き、文章を入力しよう。

       本日作成した文章の上部に
       <HTML> <HEAD> </HEAD> <BODY>
        と書き足してください。半角・英数で記入(この画面をコピー・ペーストしても構いません)  
    2. その文章の最後に
       </BODY> </HTML>
         と書こう! 
    3. メモ帳で、名前を付けて保存する。その際  ファイルの種類を「すべてのファイル」にし
       保存先はZドライブとします。 
    4. ファイル名は、アルファベット・数字で8文字以内。そのファイル名の後に
       .html と拡張子をつけてください。名前は
      他の人とダブらないようにしてください!
      例:keanu.html  
    5. ブラウザ(閲覧ソフト:インターネットエクスプローラとかNatscape Navigatorとか)で、このファイルを開く(ブラウザにドラッグ&ドロップすれば開きます)。 
    6. メモ帳でファイルを開き、文章の一部を変更する(上書き保存をする!)。 
    7. ブラウザの 更新 ボタンを押し、文章が変わったことを確認しよう。

    メモ帳とブラウザは同じファイルを開いています。メモ帳で作ったファイルテキストファイルと呼ばれ、どのパソコンでも見る事ができます。そのファイルに< > < />に囲まれた記号(この記号のこと、タグ:荷札といいます)を書き加えると、あら不思議、ブラウザで見ると、文字を飾ったり、画像を張ったりできます。これで世界中の人が(インターネット使える環境にある人だけだけど)キレイなファイルを見る事ができます! これがホームページのファイルのしくみです!






    2) いろいろ飾って見よう!

      

    見だし・改行・背景や文字色の変更
    ・ 画像の貼り付け・画像の編集

    3)CSS編



    スタイルシートって、ご存知ですか? スタイルシートはHTMLで指定したところの どのように表示させるかを、指定できるしくみです。スタイルシートを使うと 次のような利点があります。

    1. スタイルシートを変更することで複数のページの表示を更新できる
    2. HTMLでは表現できないことが可能になる
    3. 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では指定ないのに、あら不思議、 いろいろ出来ます。背景や、画像等、スタイルシートで指定できます。




    1. CSS続きへ







    目次へ








      ・この頁に関する御質問は、
      
    Send mail to komiyama@nuis.ac.jp