守ろう自由なインターネット

Webページ作成の手順

Web(ウエッブ)ページ作成に必要なことは,数多くのWebページを見ることです。
Webページを見ながら「あのようにしたい,こうしたい」と構想を練ってください。
※最初のtopページをホームページと言います。

  1. コンセプトを考える
  2. 「自分が何を伝えたいのか,何をしたいのか」をよく考えよう。
    自己紹介や趣味のページでもいいから,とりあえずホームページを作ってみよう。

  3. 構成を考える。
  4. 1ページだけなのか,連続したページにするのか,目次を作るのかをよく考えよう。
    わかりやすく,使いやすい構成にしましょう。
    迷子のページを作らないように元のページに戻れるように設定しよう。
    新着情報や更新情報を記録するWhat's Newページを作りましょう。

  5. 素材を集める
  6. 自分が表現したい絵,写真,音楽を集めます。ホームページ素材集の本を使うと便利です。
    アイコン(小さな絵)や壁紙(背景)はインターネット上のフリーなデータを使ってもかまいません。
    著作権(音楽,マンガ等)や肖像権(写真)に注意して集めてください。

  7. レイアウトをする
  8. 段落をどうするか,写真を何処へ貼り付けるか,表をどう作るかのレイアウト(配置)を考えながらWebページを作成します。
    作成したページはブラウザで確認します。

  9. サーバーに転送する
  10. ファイル転送ソフトでプロバイダーのWWWサーバーに転送します。 ホームページをもてないプロバイダーでは,ジオシティーズ等の無料ホームページサービスを利用します。

  11. メンテナンスをする
  12. またページを見たいなぁって気分にさせるためにもメインテナンスは欠かせません
    新しいデータを追加し,リンクを増やしましょう。リンク先のURLの変更にも気を付けましょう。

Webページ作成に必要なソフト

  1. エディター
  2. html文書(〜.html)を作成します。 秀丸エディターやメモ帳 (Notepad.exe)が使えます。
    htmlエディターのHTML Project2Hyper Edit を使えば簡単に作成できます。
    メモ帳でファイルを開くときはファイルの種類を全てのファイル(*.*)にして下さい。
    一太郎Word等のワープロでは,画面上に写真や絵を張り付けてレイアウトし,html形式で保存するだけでもWebページが作成できます。

  3. ブラウザ
  4. Webページのデータを表示します。
    作成したデータを確認するにはページを開く(Open File)で,作成したファイルを指定します。
    Internet ExplorerGoogle Chrome, Firefox を使用します。
    ※画面の大きさやブラウザの違いによって画面の表示が違うこと を考えましょう。

  5. 画像処理ソフト
  6. アイコンや絵のデータを作成します。 アイコンは, フリーなデータから使います。
    写真はデジタルカメラ(EX-Z1000, μ1000, FinePix Z5fd, D80)や スキャナー(GT-S600)から入力します。
    絵のデータを作るにはペイント (Pbrush.exe) が使えますが,
    GIXミレニアム LView Pro等で gif形式等に変換する必要があります。
    Paint Shop Pro を使えばハイレベルな絵が描けます。
    gif形式の動画を作るには GIF Construction Setを使います。

  7. ファイル転送ソフト
  8. WWWサーバーにファイルを転送します。(自前のWWWサーバーがある場合は不要です。)
    操作が簡単な NextFTPホームページ管理用のFTPソフトもありますが,
    Windows98 に標準で付属している ftp.exe で十分使えます。
    大規模なホームページではDeamweaverを使うと,容易に管理できます。
    ※初心者にはNextFTP4がお薦めです。

  9. ホームページ作成支援ソフト
  10. ホームページ作成支援ソフトを使うと,タグ(命令)など知らなくても簡単にWebページを作ることが出来ます。
    画像の加工やアイコンの作成,Javascriptの自動組み込みやファイルの転送まで出来るものがあります。
    雑誌の付録CD−ROMやインターネットから体験版を入手してください。
    初心者にはホームページビルダー, プロにはFireworksがお薦めです。
    グラフィックやJavascriptを駆使したホームページがデザイン(作成)できます。

Webページの構造

Webページに使うファイル名は,半角英数字で空白を含まないようにします。
ホームページ(最初のページ)のファイル名は index.html にします。
ファイルの拡張子は index.htmindex.html の様に .htm.html にします。
html文書であることを示すために全体を <html></html> で挟みます。
※HTML(HyperText Markup Language)はハイパーテキスト形式のファイルを表示するための言語です。

    ソースプログラム画面表示
    <html>
    <head>
     <title>
    ホームページ</title>
    </head>
    <!--
    ここまでがヘッダーです -->
    <!--
    これ以下がボディ(本文) -->
    <body>

    タイトル(章,節の見出し)や<br>
    本文を書きます。
    </body>
    </html>
    ホームページ - Netscape
    File Edit View Go Communicator Help
    タイトル(章,節の見出し)や
    本文を書きます。
     
     
     
     
     

  1. ヘッダー
  2. WebページにはWebページの情報を記入するヘッダーが必要です。
    ヘッダーは <head></head> の間に書きます。
    Webページのタイトルを <title></title> で挟みます。
    Webページのタイトルは画面最上部に表示されます。
    他の言語圏の人のために日本語を使わない方がよいと思います。

  3. ボディ(本文)
  4. 本文は <body></body> の間に書きます。
    改行は無視され,半角(半分の幅)の空白になります。
    改行したいときは <br> を書きます。
    2個以上の半角の空白は1個の半角の空白になります。
    日本語の間に空白を入れたいときは全角の空白を使います。
    ※半角のカタカナは文字化けの原因になることがあるので使わないでください。

    < と > に挟まれた部分をタグといい,文章を修飾します。
    基本的にタグ中の大文字小文字は同一視します。 (例外はformのGET,POST)
    <title> <TITLE> <Title>は同じです。
    オプションの値は通常 align="left" 等とダブルクォート"で挟みます。
    空白を含まない場合は align=left 等としてもかまいません。

    ソースプログラム画面表示
    <body>
    この様に  書いても,
    1行に表示します。
    </body>
    この様に 書いても, 1行に表示します。

  5. コメント(注釈)
  6. ヘッダーや本文中にコメントを入れることが出来ます。
    コメントは画面には表示されません。自分の理解のために入れます。
    <!----> で挟みます。

本文(ボディ)の書き方

  1. 見出し
  2. 章や節の見出しを書く場合は <hn></hn> の間に書きます。
    hの次のnは字の大きさを表します。 見出しは自動的に改行されます。
    見出しの表示位置はalign=位置で指定します。

    ソースプログラム画面表示
    <h1>レベル1</h1>

    レベル1

    <h2>レベル2</h2>

    レベル2

    <h3>レベル3</h3>

    レベル3

    <h4>レベル4</h4>

    レベル4

    <h5>レベル5</h5>
    レベル5
    <h6>レベル6</h6>
    レベル6
    <h3 align=left>left</h3>

    left

    <h3 align=center>center</h3>

    center

    <h3 align=right>right</h3>

    right


  3. 段落
  4. 段落をつけて文章の区切りを付ける場合は, <p> を使います。
    1行分空白が開きます。 <br><br> でも同じです。
    段落中の文章の配置を <p align=配置></p> で挟んで指定します。

    ソースプログラム画面表示
    段落の例
    <p align=left>
    左配置<br>
    ひだり</p>
    <p align=center>

    中央配置<br>
    まんなか</p>
    <p align=right>

    右配置<br>
    みぎ</p>
    段落の例

    左配置
    ひだり

    中央配置
    まんなか

    右配置
    みぎ


  5. 水平線
  6. 段落の区切りに <hr> で水平線(横線)を引くことがあります。

    <hr size=太さ>
    線の太さを指定します。
    <hr width=長さ align=位置>
    width=長さ 線の長さをドット数かパーセントで指定します。
    align=位置 線の位置を指定します。(left,center,right)
    <hr noshade>
    線を塗りつぶして表示します。

    ソースプログラム画面表示
    <hr>
    <hr size=
    5>
    <hr size=
    5 noshade>
    <hr size=
    10 color=blue>
    <hr width=
    30% align=left>
    <hr width=
    90 align=center>
    <hr width=
    30% align=right>








  7. 文章の配置
  8. 画面の大きさやフォントの大きさによって,文章の配置が違います。
    そこで文章の配置をするタグがあります。

    センタリング
    <center></center> で挟むと絵や文章を画面の中心に配置します。
    アドレス
    文書の作成者や連絡先を <address></address> で挟みます。
    プリフォーマット
    データと画面上のイメージが違うため,データを作りにくい場合には プリフォーマット を使います。
    文字が等幅フォントで表示され,イメージをそのまま入力できます。
    画面のイメージを <pre></pre> で挟みます。
    ※そのままタグまで表示できる <xmp> もありますが,危険なタグなので絶対に使わないでください。
    引用
    <blockquote></blockquote> で挟むと,左右がインデントされます。
    改行なし
    <nobr></nobr> で挟んだ部分は改行されません。
    この中で改行したいときは <wbr> を使います。

    ソースプログラム画面表示
    <center>
    センタリング<br>
    (中央配置)
    </center>
    センタリング
    (中央配置)
      --------------<br>
      |表です。  |<br>
      --------------<br>
    <pre>

      --------------
      |表です。  |
      --------------
    </pre>
    --------------
    |表です。 |
    --------------
        --------------
        |表です。    |
        --------------
    
    <address>
    kibochan
    </address>
    <blockquote>

    広島県立
    ??高等学校<br>
    定時制
    </blockquote>

    kibochan
    広島県立 ??高等学校
    定時制

    配置指定
    <div align=配置> で文章の配置を指定できます。
    指定の終わりに </div> を書きます。 <p align=...> と違い,入れ子に出来ます。

    ソースプログラム画面表示
    <div align=right>
    右に配置します。</div>
    <div align=center>
    中心に配置します。
    <div align=left>
    左に配置します。</div>
    元(中心)に戻ります。</div>
    右に配置します。
    中心に配置します。
    左に配置します。
    元(中心)に戻ります。


  9. リスト表示
  10. 番号や番号無しのリストを作ることも出来ます。
    番号付きは <ol></ol> で挟みます。
    番号無しは <ul></ul> で挟みます。
    リストは <li> を前に付けます。 また,入れ子にも出来ます。

    ソースプログラム画面表示
    <ol>
     <li>国語
     <li>数学
     <li>理科
     <ul>
      <li>物理
      <li>化学
     </ul>
     <li>英語
    </ol>
    1. 国語
    2. 数学
    3. 理科
      • 物理
      • 化学
    4. 英語

    <ol start=開始番号>
    リスト表示の開始番号を指定します。
    <li value=>
    リスト表示の値を変更します。
    <li type=マーク>
    リスト表示のマークを変更します。

    ソースプログラム 画面表示
    <ol start=3>
     <li type=I>
    I,II,III
     <li type=i>
    i,ii,iii
     <li type=1 value=
    9>1,2,3
     <li type=A>
    A,B,C
     <li type=a>
    a,b,c
    </ol>
    <ul>
     <li type=disc>
    disc
     <li type=circle>
    circle
     <li type=square>
    square
    </ul>
    1. I,II,III
    2. i,ii,iii
    3. 1,2,3
    4. A,B,C
    5. a,b,c
    • disc
    • circle
    • square

    用語の説明に用いられる定義型リストもあります。

    ソースプログラム
    きぼちゃん作のソフト
    <dl>
     <dt>passwd.exe
     <dd>DOS汎用のパスワードプログラム<br>
      EXE型のデバイスドライバ<br>
      月刊「アスキー」93/12月号に掲載
     <dt>rank.exe
     <dd>パソコン通信ホストMASHの順位表示プログラム
    </dl>
    画面表示
    きぼちゃん作のソフト
    passwd.exe
    DOS汎用のパスワードプログラム
    EXE型のデバイスドライバ
    月刊「アスキー」93/12月号に掲載
    rank.exe
    パソコン通信ホストMASHの順位表示プログラム

    字下げ(インデント)
    日本語では,文章を右にずらして表示すること(字下げ)がよくあります。
    字下げしたい部分を <ul></ul> で挟みます。
    入れ子にも出来ます。<ol> でも同様に出来ます。

    ソースプログラム 画面表示
    通常の配置です。
    <ul>
     少し右に配置します。<br>
     (1段目)
     <ul>
      更に右に配置します。<br>
      (2段目)
     </ul>
     元に戻ります。<br>
     (1段目)
    </ul>
    通常に戻りました。
    通常の配置です。
      少し右に配置します。
      (1段目)
        更に右に配置します。
        (2段目)
      元に戻ります。
      (1段目)
    通常に戻りました。

  11. 特殊文字
  12. 普通の文字はそのまま画面に出力されますが,タグ(命令)に使われている文字や
    キーボードに無い文字は &キーワード; (文字実体参照)や&#10進数; (数値実体参照)で表します。
    この表以外にも出力出来る文字もあります。

    特殊文字&<>"@©
    文字実体参照&amp;&lt;&gt;&quot;&copy;&hearts;
    数値実体参照&#38;&#60;&#62;&#34;&#64;&#169;&#9829;

  13. 文字の装飾
  14. 文字に装飾をして見えやすく出来ます。重ねて使うことも出来ます。
    閉じるタグを入れ忘れると,その後に影響が出るので注意してください。
    ブラウザによっては表示されない事もあります。
    <blink>は嫌う人が多く,Internet Explorerでは点滅しないため使わないようにしましょう。

    ソースプログラム(物理的な指定)画面表示
    <b>太文字(Bold)</b><br>
    <i>
    斜体(Italic)</i><br>
    <u>
    下線(Underline)</u><br>
    <tt>
    等幅(Typewriter)</tt><br>
    <s>
    取消(Strike)</s><br>
    <sup>付き(sup)</sup><br>
    <sub>付き(sub)</sub><br>
    <blink>
    点滅(BLINK)</blink><br>
    <b><i>
    太い斜体</i></b><br>
    太文字(Bold)
    斜体(Italic)
    下線(Underline)
    等幅(TypewriTer)
    取消(Strike)
    付き(sup)
    付き(sub)
    点滅(BLINK)
    太い斜体
    ソースプログラム(論理的な指定)画面表示
    <em>強調(EMphasis)</em><br>
    <strong>
    強い強調(STRONG)</strong><br>
    <cite>
    引用(CITAtion)</cite><br>
    <kbd>
    キー入力(Keybord)</kbd><br>
    <var>
    変数(VARiable)</var><br>
    <dfn>
    定義(DeFiNed)</dfn><br>
    <code>
    プログラム(CODE)</code><br>
    <samp>
    メッセージ(SAMPle)</samp><br>
    強調(EMphasis)
    強い強調(STRONG)
    引用(CITAtion)
    キー入力(Keybord)
    変数(VARiable)
    定義(DeFiNed)
    プログラム(CODE)
    メッセージ(SAMPle)

  15. 文字の大きさと色
  16. <basefont size=n>
    本文の最初に書き,基本の大きさを指定します。(規定値3)
    <font size=n></font>
    </font>までの文字の大きさを指定します。大きさ(n)は1〜7です。
    大きさに+-を付けると,相対的に変化します。
    <big></big>
    </big>までの文字の大きさを現在より1段階大きくします。
    <font size=+1></font>と同じです。
    <small></small>
    </small>までの文字の大きさを現在より1段階小さくします。
    <font size=-1></font>と同じです。
    <font color=#rrggbb></font>
    </font>までの文字の色を指定します。
    光の3原色のrr gg bbを16進数で指定します。(黒は#000000, 白は#ffffff)
    各色256段階で,256*256*256=16777216色表現できます。
    RGB Color Chartに色のサンプルがあります。
      (http://lowlife.jp/yasusii/static/color_chart.html)

    ソースプログラム
    <font size=1 color=#ff0000>Size=1 Red</font><br>
    <font size=2 color=#00ff00>
    Size=2 Green</font><br>
    <font size=3 color=#ffff00>
    Size=3 Yellow</font><br>
    <font size=4 color=#0000ff>
    Size=4 Blue</font><br>
    <font size=5 color=#ff00ff>
    Size=5 Purple</font><br>
    <font size=6 color=#00ffff>
    Size=6 Cyan</font><br>
    <font size=7 color=#000000>
    Size=7 Black</font><br>
    <small>
    Small</small>Normal<big>Big</big>
    Normal<font size=-1>Small</font>
    画面表示
    Size=1 Red
    Size=2 Green
    Size=3 Yellow
    Size=4 Blue
    Size=5 Purple
    Size=6 Cyan
    Size=7 Black
    SmallNormalBig NormalSmall

  17. テキストの色・背景の指定
  18. <body ...>のタグで,全体のテキストの色や背景を指定できます。
    <body text=#rrggbb bgcolor=#rrggbb>

    text=#rrggbb
    標準のテキストの色を指定します。
    link=#rrggbb
    リンク部分のテキストの色を指定します。
    vlink=#rrggbb
    一度読み込んだリンク先のテキストの色を指定します。
    alink=#rrggbb
    読み込み中のリンク先のテキストの色を指定します。
    bgcolor=#rrggbb
    背景の色を指定します。
    background="ファイル名"
    背景の絵を指定します。画面全体に繰り返し表示される。

    色を#rrggbbの形で指定するのは難しいので,色名で指定する事も出来ます。
     色見本 (http://www.tky.3web.ne.jp/~sak/color_wh134_3.html)
     色見本の館 (http://www.color-guide.com/)
    文字を白, 背景を黒では <body text=white bgcolor=black> とします。
    ※Internet Explorer 4.0 では <hr color=色名>水平線にも色が付きます。

    beige bisque black blue brown
    coral cyan gold gray green
    hotpink indigo khaki lime linen
    orange peru pink plum purple
    red salmon silver skyblue tan
    teal tomato wheat white yellow

  19. フォントの指定
  20. コンピュータにそのフォントがあれば,フォントの指定も出来ます。
    ※特殊なフォントは相手が持っていないので注意してください。

    <font face="フォント名"></font>
    </font>までのフォント名を指定します。
    <font face="フォント名1,フォント名2,.."></font>
    </font>までのフォント名を指定します。
    フォントを順に調べて最初に存在したフォントで表示します。

  21. 文字のスクロール(マーキー)
  22. Internet Explorerでは簡単に流れる文字を表示できます。
    formとJavaScriptの連続技アニメーションでも流れる文字を作ることもできます。
    スクロールしたい文字を<marquee></marquee>で挟みます。

     behavior=alternate左右を行き来します。
     behavior=scroll画面外まで流れます。(規定値)
     behavior=slide画面の端で停止します。
     direction=left左へ流れます。
     direction=right右へ流れます。
     scrollamount=移動数一回の移動するドット数を指定します。
     scrolldelay=速度移動速度をmsで指定します。
     loop=回数流れる回数を指定します。
     width=幅を指定します。
     height=高さ高さを指定します。
     hspace=左右の空白を指定します。
     vspace=高さ上下の空白を指定します。
     bgcolor=背景色背景の色を指定します。

    ソースプログラム
    <marquee>
    <font face=
    "DFPOP体,DF特太ゴシック体,MS ゴシック" size=+1>
    Netscape6では文字が流れません。</font></marquee><br>
    <center><font color=
    red size=4 face="MS 明朝">
    <marquee behavior=
    "alternate">お嫁に来てね!</marquee>
    </font></center>

    画面表示
    Netscape6では文字が流れません。
    お嫁に来てね!

画像の作成方法

文字だけのWebページでは寂しいので,絵や写真を入れて格好良くします。
※グラフを作りたいときはExcelでグラフを作成し,HTML形式で保存します。

  1. 画像の入力
  2. コンピュータに表示されている画面をキャプチャーするには,PrntScキーを押すと簡単にできます。
    PrntSC(Print Screen)キーを押した後,ペイントブラシで貼り付けると入力完了です。
    フリーソフトのScreenCutter Liteを使うと,決まった大きさに切り取る事ができます。
      (http://onegland.hp.infoseek.co.jp/)
    テレビカメラやファミコン等のビデオ信号からの入力は, ビデオキャプチャーボードを使います。
    キャプチャーボードがない場合には,カメラでTV画面を撮影します。
    真っ暗な部屋でストロボを発光させずに,一回り大きく撮影します。
    写真・絵からの入力はスキャナーを使います。
    ズームを使うと大きさに誤差が生ずるので一回り大きく入力します。
    デジタルカメラで撮影するときも,画像が欠けないように大きく撮影します。
    付属のソフトでコントラストの調整をすると画像が綺麗に見えます。
    入力したデータはとりあえずBMP形式で保存します。

  3. 画像の修正
  4. ペイントブラシなどのグラフィックツールで画像ファイルを読み込みます。
    反転とキャンバスの大きさの変更や拡大・縮小を使って画像をトリミングします。
    この時に,文字を書き込みます。修正が終わると再度BMP形式で保存します。

  5. 画像の作成
  6. GIXミレニアムで画像の形式を 変更します。
    写真や大きな絵はプログレッシブjpeg形式にします。
    (画像がじわじわとはっきりしてくる)
    アイコンやクリッカブルマップの絵はgif形式にします。
    背景を透明にする透明gifやインターレスに表示するインターレスgifもあります。
    Paint Shop Proではここまで連続して行えます。

  7. アイコンファイルの取得
  8. 絵やアイコンなどのファイルは,ブラウザで表示するとキャッシュに読み込まれます。 これを利用してアイコンを取得します。
    Internet Explorerではファイルの名前を付けて保存でWebページ全体を保存できます。
    Netscape Navigator / Communicatorではブラウザ上の操作でもアイコンだけを取り出すことが出来ます。
    入手したいアイコン(画像)を右クリックし,画像を名前を付けて保存左クリックしてファイル名を入力して保存します。

  9. アニメーション
  10. GIF Construction Setを使って 簡単にアニメーションが作成できます。
    1. 動画の枚数分の透過gifを用意します。
    2. GIF Construction SETに1枚目を読み込みます。
    3. 残りの絵を追加(MERGE)します。
    4. HEADERの後に,LOOPを挿入(INSERT)します。
    5. CONTROLのオプションを設定します。

    6. Transparent color(透明色),Delay(待ち時間),Removed by(消し方)
      (Delay=10ms,Removed by=Backgroundにしました)
    7. 保存します。

    設定画像
    HEADER GIF89a Screen(32 x 32)
    LOOP
    CONTROL
    IMAGE 32x32,256 colors
    CONTROL
    IMAGE 32x32,256 colors
    CONTROL
    IMAGE 32x32,256 colors
    CONTROL
    IMAGE 32x32,256 colors
     動 画
     1枚目
     2枚目
     3枚目
     4枚目


画像の表示方法

  1. 画像の種類
  2. 標準で表示出来る画像は,xbm形式(〜.xbm)とgif形式(〜.gif)です。
    殆どのブラウザではjpeg形式(〜.jpg)も表示出来ます。
    アイコンには背景が透ける透過gifを使います。
    クリッカブルマップにはモザイク状に表示されるインターレスgifを使います。
    大きな画像はロード(表示)に時間がかかるのでjpegを使います。
    じわじわ表示するプログレッシブjpegがお薦めです。
    画像ファイルはimggifjpeg等の別なディレクトリーに入れた方が 分かり易いと思います。
    ※100Kを越えるような巨大なgif画像は表示しないで下さい。 GIXミレニアム等でjpeg画像に変換して下さい。

    透過gif インターレスgif
    ロード中の画面
    プログレッシブjpeg
    ロード中の画面
    jpeg
    ロード中の画面
    透過gif インターレスgif プログレッシブjpegjpeg

  3. 表示方法
  4. 表示したい所で <img src="ファイル名"> とします。
    画像の一番下から,テキストが表示されます。
    ※画像を連続して表示したり,表中に表示するときに,
    空白が開く場合(Netscape)は改行せずに1行で書いて下さい。


    ソースプログラム
    ??高等学校の校章は <img src="kousyou.gif">です。
    画面表示
    ??高等学校の校章です。

    画像ファイルが壊れたり,存在しない場合は次のアイコンが表示されます。

    ブラウザ壊れている存在しない
    Nestcape Navigator 3.01
    Internet Explorer 3.02

  5. テキストの表示位置の設定
  6. テキストの表示位置は, <img src="ファイル名" align=位置> で 指定します。

    ソースプログラム画面表示
    <img src="kousyou.gif" align=top>校章 校章
    <img src="kousyou.gif" align=middle>校章 校章
    <img src="kousyou.gif" align=bottom>校章 校章

  7. テキストの回り込み
  8. 画像の横に文字を書く場合はalign=leftalign=right を使います。
    画像の最後まで,改行するには <br clear=all> とします。

    ソースプログラム画面表示
    <img src="kousyou.gif" align=left>
    広島県立<br>
    ??高等学校<br clear=all>
    数学科
    広島県立
    ??高等学校
    数学科
    <img src="kousyou.gif" align=right>
    広島県立<br>
    ??高等学校<br clear=all>
    数学科
    広島県立
    ??高等学校
    数学科
    <img src="kousyou.gif" align=left>
    <img src=
    "kousyou.gif" align=right>
    <center>
    <br><br>
    校章
    </center>


    校章
    <center>
    <img src="kousyou.gif">
    </center>

  9. 画像に関する情報
  10. <img src="ファイル名" width= height= border=>

    alt="画像名"
    画像を表示しないブラウザでは, 画像部分に[IMAGE]と表示されます。
    何を表示しているのか分からないので,alt="画像名" を付けます。
    width= height=
    あまりに大きな画像は読み込みに時間がかかり,次の文章も表示されず迷惑です。
    大きな画像は出来るだけ使わないようにしましょう。
    それでも使いたい場合は width= height= で画像の大きさを指定します。
    実際の値と違う場合は,拡大/縮小されて表示されます。
    画像の形式はインターレスgifやプログレッシブjpegにしましょう。
    vspace=間隔
    画像と直前と直後のテキストの間隔を指定します。
    hspace=間隔
    画像と左右のテキストとの間隔を指定します。
    border=
    画像の周りに指定された幅の枠を書きます。
    lowsrc="ファイル名"
    画像を2段階で表示します。lowsrcで最初のファイルを指定します。
    最初に色数を落とした画像やディバグ用の画像を表示します。
    ※Netscapeのみ使えます。

    ソースプログラム画面表示
    <img src="r1.gif"><img src="r2.gif"><br>
    <img src=
    "r3.gif"><img src="r4.gif"><br>


    <img src="r1.gif">
    <img src=
    "r2.gif"><br>
    <img src=
    "r3.gif">
    <img src=
    "r4.gif"><br>


    <img src="r1.gif" vspace=0>
    <img src=
    "r2.gif" vspace=17><br>
    <img src=
    "r3.gif" hspace=8>
    <img src=
    "r4.gif" hspace=0><br>


    <img src="r0.gif" width=10 height=10>
    <img src=
    "r0.gif" width=17 height=17>
    <img src=
    "r0.gif" width=34 height=34><br>
    <img src="r5.gif" align=left>
    文字が画像の真横に回り込みます。<br>
    <img src=
    "r5.gif" align=left
      hspace=
    15 vspace=15>
    画像の周りに余白を付けます。<br>
    文字が画像の真横に回り込みます。
    画像の周りに余白を付けます。

サウンドデータ

Webページに音や音楽を使用することも出来ます。
自動的に再生したり,クリックしたときにのみ再生することも出来ます。

  1. サウンドファイルのの作成
  2. Webページに使われるサウンドファイルは次の5種類がよく使われます。

    auファイルUNIXで使われます。
    wavファイルWindowsで使われます。
    aiffファイルMacintoshで使われます。
    ra,ramファイルRealAudio形式のファイルです。大きさ小さく音質が良い。
    pluginでは拡張子をrpmとする。
    midファイルMIDIデータです。

    Windows付属のサウンドレコーダーで録音してwavファイルを作成します。
    RealProducer BASICwavファイルをraファイルに変換します。
    シェアウェアのCool Editを使うと,録音からファイル変換(au,wav,aiff,ra等)まで一括して行えます。
    ソフトウェアシンセサイザーのWinGrooveを使えばmidファイルをwavに変換することも出来ます。

  3. サウンドデータの再生
  4. サウンドデータや動画の再生にはリンクを使うのが一般的です。
    NetscapeやInternet Explorer等のプラグイン機能を使って演奏させる方法もあります。
    <bgsound src="ファイル名" loop="演奏回数">
    Internet Explorer2.0以降で有効な方法です。ファイル(wav,mid,au)を演奏します。
    指定した演奏回数演奏を繰り返します。通常は1回ですが,-1infiniteでは無限です。
    <embed src="ファイル名" width=横幅 height=高さ>
    Netscape や Internet Explorer のプラグインを呼び出します。
    プラグインの種類によって横幅や高さが違います。
    自動的に演奏を開始するには, autostart=true とします。
    ※AVIファイル(動画)を指定する時は,必ず縦・横の大きさを指定してください。

    ソースプログラム
    <embed src="snd/kouka.mid" width=145 height=60>
    <embed src=
    "snd/kouka.rpm" width=250 height=160>
    <embed src=
    "img/kouka.avi" width=250 height=160>


表(テーブル)の作成

データを表形式で表現したいときや,段組にしてCoolな(格好良い)ページを作りたいときは表を作成します。
※同じ頁で印刷したいときはデータをで囲みます。
※複雑な表を作るときはExcelで表を作り,HTML形式で保存すると簡単に作成できます。

  1. 作成方法
  2. テーブル構造を <table></table> で挟みます。
    枠線を付けたいときは <table border=太さ> とします。
    1行のデータを <tr></tr> で挟みます。
    項目名を <th></th> で挟みます。 項目名はセンタリング(中心)に,太文字で表します。
    データを <td></td> で挟みます。

    ソースプログラム画面表示
    <table>
    <tr><th>
    項目1</th><th>項目2</th></tr>
    <tr><td>
    Data11</td><td>Data12</td></tr>
    <tr><td>
    Data21</td><td>Data22</td></tr>
    </table>

    項目1項目2
    Data11Data12
    Data21Data22
    <table border=5>
    <tr><th>
    項目1</th><th>項目2</th></tr>
    <tr><td>
    Data11</td><td>Data12</td></tr>
    <tr><td>
    Data21</td><td>Data22</td></tr>
    </table>

    項目1項目2
    Data11Data12
    Data21Data22

  3. 列・行見だし
  4. <td></td> の様にデータのない場合は空欄(枠なし)で表示されます。
    <td><br></td> にすると空欄(枠付き)で表示されます。
    列見出しの様に複数の列にする場合は <th colspan=列数> とします。
    行見出しの様に複数の行にする場合は <th rowspan=行数> とします。
    表に名前を付ける場合は,名前を <caption></caption> で挟みます。
    位置を指定する場合は align=top で上部に,align=bottomで下部に表示されます。

    ソースプログラム画面表示
    <table border=5>
    <caption>
    表題の例</caption>
    <tr><th colspan=3>
    列見出し</th></tr>
    <tr><th rowspan=2>
    行見出し</th>
    <td>
    あり</td><td>なし</td></tr>
    <tr><td><br></td><td></td></tr>
    </table>
    表題の例
    列見出し
    行見出し ありなし
     

  5. 表の大きさ
  6. <table width=横幅 height=高さ >
    表全体の大きさ(枠も含む)を指定します。横幅や高さはドット数か窓の大きさの パーセントで指定します。
    横幅だけ,高さだけの指定もできます。
    <table cellspacing=太さ >
    罫線の太さを指定できます。
    <table cellpadding=間隔>
    罫線と表中のテキストの間隔を指定できます。
    <td nowrap> <th nowrap>
    表中の項目名やデータの改行の制限をすることが出来ます。
    nowrapを付けると指示以外のところで改行しません。
    <td width=横幅 height=高さ >
    項目(<th>)やデータ(<td>)の部分の大きさを指定することも出来ます。
    横幅や高さはドット数で指定します。 横幅だけ,高さだけの指定もできます。
    ※パーセントでの指定は,Netscapeでは表の大きさに対して指定します。
    Internet Explorerでは画面の大きさに対して指定します。

    ソースプログラム画面表示
    <table border=1 width=90 height=90>
    <tr><th>
    </th><td></td></tr>
    <tr><td></td><th>
    </th></tr>
    </table>
    <table border=1>
    <tr><th width=
    80 height=80>
    数学</th></tr>
    </table>
    数学
    <table border=5 cellspacing=10>
    <tr><td>
    ??高等学校</td></tr>
    <tr><td>
    数学科</td></tr>
    </table>
    ??高等学校
    数学科
    <table border=5 cellpadding=10>
    <tr><td>
    ??高等学校</td></tr>
    <tr><td>
    数学科</td></tr>
    </table>
    ??高等学校
    数学科
    字下げの例
    <table><tr>
    <td nowrap width=
    30></td><td>
    30ドット右へ表示しました。<br>
    (1段目)
    </td></tr></table>

    終わり
    字下げの例
    30ドット右へ表示しました。
    (1段目)
    終わり

  7. 表中の区切り
  8. 罫線を太くして区切りを付けたい場合は,偽のデータを挿入します。
    縦の線は,全ての行の太くしたい位置に <td></td> を挿入します。
    横の線を太くしたい場合には <tr></tr> を挿入します。
    太さが足りない場合は繰り返します。

    ソースプログラム画面表示
    <table border=5>
    <tr><td>
    </td><td></td><td></td></tr>
    <tr></tr><tr></tr>
    <tr><td>
    </td><td></td><td></td></tr>
    </table>


  9. 表示位置の指定
  10. 項目名やデータの表示位置を指定することが出来ます。
    <td align=位置>
    横の位置を指定します。 (left,center,right)
    <td valign=位置>
    縦の位置を指定します。 (top,middle,bottom,baseline)
    項目名(th)でも同様に指定します。 1行の全データに指定する場合は <tr> で指定します。

    align= left align= center align= right
    valign= top
    valign= middle
    valign= bottom

  11. テキストの回り込み
  12. 表の横にテキストを回り込ませるときには <table align=位置> を指定します。

    ソースプログラム画面表示
    <table align=left border=3>
    <tr><td>
    left(左)</td></tr>
    </table>

    align=leftを指定すると,右側
    に文字が回り込みます。<p>
    <table align=right border=
    3>
    <tr><td>
    right(右)</td></tr>
    </table>

    align=rightを指定すると,左側
    に文字が回り込みます。<p>
    <center>
    中心です。
    <table border=
    7>
    <tr><td>
    center(中心)</td></tr>
    <table>

    回り込みません。
    </center>

    left(左)
    align=leftを指定すると,右側 に文字が回り込みます。

    right(右)
    align=rightを指定すると,左側 に文字が回り込みます。

    中心です。
    center(中心)
    回り込みません。

  13. 表の背景色
  14. Netscape 3.0 以降や Internet Explorer では表の背景に色を付けることが出来ます。

    <table bgcolor=#rrggbb>
    表全体の背景に色を付けます。
    <tr bgcolor=#rrggbb>
    行の背景にに色を付けます。
    <td bgcolor=#rrggbb>
    データに色を付けます。項目名(th)も同様に指定します。

    Netscape 4.0 以降や Internet Explorer では表の背景に画像を使うことが出来ます。

    <table background="画像ファイル名">
    表の背景を画像にします。
    <tr background="画像ファイル名">
    行の背景を画像にします。
    <td background="画像ファイル名">
    データの背景を画像にします。項目名(th)も同様に指定します。

  15. 額縁
  16. 表の中に画像を表示して,表を額縁のように表示する事があります。

    ソースプログラム画面表示
    <table border=5><tr>
    <td><img src=
    "img/dome1s.jpg"></td>
    </tr><tr>
    <th>
    原爆ドーム</th>
    </tr></table>
    原爆ドーム

  17. 影付きの枠
  18. Photoshop等の画像処理ソフトを使えば,簡単に影付きの枠を持った画像を作成できます。
    tableの構造を使えば,枠の画像を用意するだけで簡単に影付きの枠が作成できます。
    文章などのメッセージにも影の枠を付けることが出来ます。
    <tr>から</tr>までは改行しません。

    ソースプログラム
    <table border=0 cellspacing=0 cellpadding=0>
    <tr><td rowspan=2 colspan=2>
    <img src="dome1s.jpg" width=150 height=100></td>
    <td><img src="shadow1.gif" width=8 height=8></td></tr>
    <tr><td><img src="shadow2.gif" width=8 height=92></td></tr>
    <tr><td><img src="shadow3.gif" width=8 height=8 ></td>
    <td><img src="shadow4.gif" width=142 height=8></td>
    <td><img src="shadow5.gif" width=8 height=8></td></tr>
    </table>
    画面表示概  念

  19. 縦書き
  20. 俳句などを表現したい等どうしても縦書きにしたい場合も表を使います。
    文字毎に <br> をつけます。

    ソースプログラム画面表示概  念
    <table>
    <tr><td>

    <br><br>
    <br><br><br>
    </td><td>
    <br><br>
    </td></tr>
    </table>














  21. グラフ
  22. エクセルでグラフを作成して画像として貼り付けることも出来ますが,簡単なグラフならHTMLでも出来ます。

    ソースプログラム
    <table>
    <tr><th colspan=5>
    問題行動の推移<br>
    <small>
    平成12年を基準とする</small></th></tr>
    <tr valign=bottom align=middle>
    <td><img src=
    "img/graph1.gif" width=10 height=83></td>
    <td><img src=
    "img/graph1.gif" width=10 height=87></td>
    <td><img src=
    "img/graph2.gif" width=10 height=100></td>
    <td><img src=
    "img/graph3.gif" width=10 height=84></td>
    <td><img src=
    "img/graph3.gif" width=10 height=54></td>
    </tr><tr>
    <td>
    10年</td>
    <td>
    11年</td>
    <td>
    12年</td>
    <td>
    13年</td>
    <td>
    14年</td>
    </tr>
    </table>
    画面表示 概念
    問題行動の推移
    平成12年を基準とする
    10年 11年 12年 13年 14年
    問題行動の推移
    平成12年を基準とする
    10年 11年 12年 13年 14年


リンク

任意のテキストや画像をボタンとして設定し,他のページ等へリンク出来ます。
リンク部分ををクリックすると,リンク先へ移動します。
リンク部分は,下線(アンダーライン)や色が付きます。
※ブラウザの設定を「リンク部分に下線(アンダーライン)をつけない」ように指定している場合はアンダーラインは表示しません。

  1. リンクの設定
  2. <a href="リンク先"></a> でリンクしたい所を挟みます。
    リンク先をURLといい,インターネット上の番地を表します。
    別のコンピュータ上のファイルはhttp://から指定します。
    同じディレクトリー上のファイルはファイル名のみ指定します。
    別のディレクトリー上のファイルは相対指定します。
    一つ下の階層は,ディレクトリー名/ファイル名とします。
    上の階層は../ファイル名と指定します。
    文書の特定の部分にリンクするには,そこを <a name="名前"></a> で挟みます。
    リンク先は, <a href="リンク先#名前"> とします。
    挟んだ語句がロボット探索時のキーワードになります。
    画像を挟んで,ボタンの様にも使えます。(画像の周りに枠を表示)
    画像の枠を無くす場合は <img src="ファイル" border=0> にします。
    target=_blankを指定すると,新しい窓で開きます。

    ソースプログラム画面表示
    <a name="link">文書内のリンク先</a> 文書内のリンク先
    <a href="http://www.nitsushokan-h.hiroshima-c.ed.jp/">
    ★日彰館高校</a>
    ★日彰館高校
    <a href="http://www.kyutech.ac.jp/">
    ※九工大</a>
    ※九工大
    <!-- 新しく窓を開く -->
    <img src=
    "m0.gif">
    <a href=
    "knowhow.htm" target=_blank>
    講習会資料</a>
    講習会資料
    <a href="#link">
    <img src=
    "m1.gif">
    文書内へリンク</a>
    文書内へリンク
    <a href="kibochan.htm#love">
    <img src=
    "m2.gif" border=5>
    お嫁さん募集中</a>
    お嫁さん募集中
    <!-- バーナー -->
    <a href=
    "http://www.urban.ne.jp/home/kibochan/html.htm">
    <img src=
    "barner.gif"></a>
    <a href="JavaScript:history.back()">
    戻る</a>
    戻る
    <a href="JavaScript:close()">
    窓を閉じる</a>
    窓を閉じる

  3. マルチメディアへのリンク
  4. リンク先に画像や音楽データを指定すると,画像を表示したり,音を鳴らすことも出来ます。
    プログラムの配布(LZH,EXE)も出来ますが,サーバー側の設定が必要です。
    ※データは別のディレクトリーに入れて分けると管理しやすくなります。

    ソースプログラム画面表示
    <a href="snd/kimigayo.mid">
    <img src=
    "m3.gif" border=0>
    応援歌</a>
    応援歌
    <a href="snd/kimigayo.ra">
    <img src=
    "m4.gif" border=0>
    応援歌</a>
    応援歌
    <a href="img/computer.jpg">
    <img src=
    "m5.gif" border=0>
    パノラマ</a>
    パノラマ
    <a href="cg/dome.wrl">
    <img src=
    "m7.gif">
    産業奨励館</a>
    産業奨励館
    <!-- WWW上でのプログラムの配布 -->
    <!--
    DOS用パスワードプログラム -->

    <a href="img/passwd4a.lzh">
    <img src=
    "r7.gif">プログラム</a>
    プログラム

  5. メール送信
  6. <a href="mailto:メールアドレス ">で電子メール(手紙)が送れます。


    mailto:に続いてメールアドレスをそのまま記述すると,ウィルスがメールアドレスを読みとり,勝手にウィルスメールを送信します。
    数値実体参照を用いてメールアドレス等を偽装してください。


    ※NetscapeやInternet Explorer等では,メールアドレスに続いて?subject=用件を指定し,用件欄を自動的に入力できます。


    ソースプログラム画面表示
    <a href="mailto:kibochan@urban.ne.jp">
    <img src=
    "m1.gif">
    恋人募集</a>
    恋人募集
    <a href="&#109;ailto&#58;kibochan&#64;urban.ne.jp">
    <img src=
    "m1.gif" border=0>
    お嫁さん募集</a>
    お嫁さん募集
    <a href="mailto:kibochan@urban.ne.jp?subject=Drink">
    <img src=
    "maru.gif" border=0>
    コンパ</a>
    コンパ

  7. CGギャラリー(サムネイル)
  8. CGギャラリー等の様に写真や絵を大量に公開する場合には, 小さくした絵(サムネイル)を表示し,
    クリックしたときに本物のデータを表示するようにします。
    ※リンクが画像で終わる時に</a>を次の行にしないでください。

    ソースプログラム画面表示
    <a href="cg/dome1.jpg">
    <img src=
    "cg/dome1s.jpg" border=0></a>

  9. アンダーラインなし
  10. ブラウザの設定が「アンダーラインを表示する」場合でも,Netscape 4.0Internet Explorer 4.0以降のようにスタイルシートが使える場合はアンダーラインを表示させないことが出来ます。

    ソースプログラム(全体で非表示)
    <html>
    <head>
    <title>
    下線を無くしたい場合</title>
    <style type="text/css">
    <!--
     A:link { text-decoration: none; }
    -->
    </style>
    </head>
    ソースプログラム(部分的に非表示)
    <a href="cg.htm" style="text-decoration: none;">
    CGギャラリー</a>

ホームページの作り方教室 目次へ 応用編へ 応用編

Author: kibochan