KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/13th のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/JouhouC2004/13th へ行く。
  • 1 (2004-07-13 (火) 14:12:15)
  • 2 (2004-07-13 (火) 15:32:24)
  • 3 (2004-07-13 (火) 22:29:12)

情報教育演習II 第13回

前回の復習：HTMLファイルの作成 (2)

箇条書きのタグ

• ul -- 番号なし箇条書き
• ol -- 番号つき箇条書き
  • li -- 箇条書きの項目
• dl -- 説明つき箇条書き
  • dt -- 箇条書きの項目名
  • dd -- 項目名に対する説明

色の指定

• 光の三原色である、赤(R)緑(G)青(B)の強さを値であらわす
• 16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)で、RGBそれぞれを00〜FFまでの256段階で設定
  • 例：blackは#000000、redは#FF0000、whiteは#FFFFFF（「#」のあとにRGB値を設定）

特定の場所やページ全体の文字色の設定

• font -- 文字の色や大きさの設定
  • color="指定した文字色"
  • size="指定した大きさ" （大きさは1〜7の数字を指定）
• body -- ページ全体の設定
  • text="指定した文字色"
  • bgcolor="指定した背景色"

HTMLファイルの作成 (3)

前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書（Web）ページを作成しました。

今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。

他のページへのリンク

• <a href="...">...</a>
  • 他のWebページにジャンプするリンクを設定します。
  • 「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクとして表示する文字を設定します。
  • 次のように、リンク先にURLを指定すると、「Yahoo! JAPAN」のところにリンクが作られます。

    <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>

  • 次のように、リンク先にファイル名を指定すると、「ほげほげ」のところにリンクが作られます。

    <a href="hogehoge.html">ほげほげ</a>

  • 次のように、リンク先に「mailto:メールアドレス」を指定すると、指定したメールアドレスへメール送信のウィンドウが開きます。

    <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a>

「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。

 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a>

箇条書きの項目に、次のようなリンクを設定してください。

• 「わたし」について：prefile.htmlへのリンク
• 「街」について：town.htmlへのリンク
• 「わたし」と「街」：memory.htmlへのリンク

画像データの表示

画像データを表示するには、<img>要素を使います。

• <img src="画像データの位置" alt="代替テキスト">
  • src属性には、画像の位置（ファイルの場所やURL）を指定します
  • alt属性には、画像が表示できない場合に表示させる説明文を設定します
    何も説明がない場合は「alt=""」とします

    <img src="gazou1.jpg" alt="絵本を読む園児の様子">

表によるレイアウト

• <table>...</table>
  • テーブル（表）を設定します。
• <table border="外枠の太さ">
  • border属性で表の外枠の太さを指定します（0にすると枠線が見えなくなる）
• <table width="幅">
  • widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します
• <tr>...</tr>
  • テーブルのひとつの行を設定します。
• <td>...</td>
  • テーブルのひとつのマス目（セル）を設定します。
    

     <table border="1">
       <tr><td>1</td><td>2</td><td>3</td></tr>
       <tr><td>4</td><td>5</td><td>6</td></tr>
     <table>

    1	2	3
    4	5	6

• <table cellspacing="セルの間隔">
  • セルとセルの間隔を設定します（セルと外枠の間隔も設定されます）
• <table cellpadding="セル枠と内容との間隔">
  • セルの枠と内容の間隔を設定します

     <table border="2" cellspacing="1" cellpadding="5">

<table>要素は、本来、表を表示するためのものですが、 この機能を使って、Webページの内容をブロック状にレイアウトすることができます。

Webページの公開

インターネットで公開されているWebページは、 すべて、 Webサーバというコンピュータで管理され公開されています。

つまり、 Webページをインターネットに公開するには、 作成したHTMLファイルを、 手元のパソコンからWebサーバへ転送する必要があります。

ファイルの転送方法の種類

Webサーバにファイルを転送するには、いくつかの方法があります。

1. 「ftp」を使う
   • 以前から使われている、標準的な、ネットワークを使ったファイルの転送方法
   • 設定が少しややこしい（初心者にはちょっと難しい？）
2. 「記録用メディア」を使う
   • フロッピーやCD-ROMなどに記録したファイルを、サーバを直接操作してコピー
   • 運用上の大きな問題がある
     1. サーバを直接操作しないといけない（サーバの場所までいかないとできない）
     2. サーバを操作するための権限がないといけない（管理のための権限）
3. 「Webフォルダ」を使う
   • Windows上でファイルをコピーする感覚で、転送ができる（難しい設定はいらない）
   • サーバ側にいろいろな設定が必要（どんなサーバでも利用できるわけではない

Webフォルダによる転送方法

WindowsでWebフォルダを利用するには、 Internet Explorerを使用します。 次のように操作すれば、通常のデータのコピーと同じように Webサーバへファイルを転送することができます。

1. Internet Explorerを起動
2. メニューから、「ファイル」→「開く」を選択
   1. 「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック
   2. 「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力
   3. 「OK」ボタンをクリック
      
3. ユーザ名とパスワードを入力し、「OK」ボタンをクリック
4. 通常のフォルダと同じようなウィンドウが表示されるので、 通常のコピー操作をして フォルダへ作成したHTMLファイルなどをコピー

参考リンク

• とほほのWWW入門
  • http://tohoho.wakusei.ne.jp/
• Academic HTML
  • http://www.tg.rim.or.jp/~hexane/ach/
• The Quick Color Table
  • http://www.kanzaki.com/docs/colortable-t.html
• 0からHTML
  • http://www.zerokara.com/html/