情報基礎 講義メモ(第3回)

今後の予定とウェブサイト作成の課題について(5月18日の時間終了まで)

• 3ページ以上のウェブページからなるウェブサイトを5月18日の昼11:50までに完成させる。以下の条件を満足しなければならない。
• 3ページ以上(htmlファイルが3つ以上)で、トップページ(index.html)から子ページにきちんとリンクが張ってある。子ページからトップページへのリンクも張っておくこと。
• 気にいった(他人の)ウェブページ、3つ以上にリンクを張ること。それを、リスト構造にすること。
• 少なくとも合計で1枚、どこかのページに画像が入っていること。
  
• 締め切りより遅くなった場合
  • 完成すれば、評点は遅れた分、ほんの少しずつ下がるが、評価はする。
  • 間に合わなかった者は、完成した時点で
    
    　kiyoshi◎gscc.osaka-cu.ac.jp と k-nakano◎ex.media.osaka-cu.ac.jp
    
    　(◎　を　半角の　@　で置き換えること)に完成したことを通知するメールを出すこと。遅れるほど、評点がわずかずつ悪くなっていくが、完成すれば評価はするので遅れても完成させること。

ウェブページ作成の課題について(今日の11:50まで)

• 以下の条件を満たした index.html ファイルを作る。練習のためなので、つながりに特に必然性がなくてもいい(大阪市大の学部のリストの後に、好きな歌手の公式ウェブサイトへのリンクが張ってあったりするのでもOK)。できたら教員に言う。実際 にできているかどうか、教員がチェックする。
  
• public_html　の中にあり、名称が index.html　になっており、アクセス権の設定が適切になっていること＝他のコ ンピュータから見えること。
• titleの指定があること(h1、h2ではなく、ブラウザの左上に表示されるページタイトル)。
• h1、h2タグを使っていること。
  
• 自分のコンピュータ内ではない、(他人の)ページにリンクが張ってあり、クリックすると、そこにきちんと飛ぶこ と。
• ULタグ　か　OLタグを使ったリストが1つ入っていること。
  

今日、学ぶこと

• 電子メールのおさらい
• ウェブページ作成のための下準備をする。
• ウェブページ作成のためのHTMLタグをいくつか覚える。
• ごく簡単なウェブページを作る。＝外部からアクセスできるかどうかチェックする。アクセスできればOK。
• 来週までの課題完成のためにウェブの構成、内容を考える。

今日の内容

電子メール利用の基礎のおさらい

• 電子メールソフト(メーラ)を使う
  • メーラの起動とログイン
    • Webブラウザ(Mozilla)を起動。 教育用システムのトップページ、上辺にある「電子メールの送受信」をクリック。セキュリティに関する警告は、暗号化したページへの出入りでは、必ず出てくる。基本的には、「OK」。
    • W.mailerのログイン画面が表示されるので、ユーザ名とパスワードを入力。
  　
  • 教師宛に自己紹介のメールを出す(前回出した人は今回重複して出さなくてよい)
    • 「メールの新規作成」　　宛先は　k-nakano◎ex.media.osaka-cu.ac.jp　。◎を「@」(半角[アルファベット入力モード]のアットマーク)に変えること。　自分宛に写しを出しておく。
    • 文字や図などをウィンドウ間でコピーできる。今回は、テキストファイルの内容を、電子メールの内容(body)にコピーする。
    • intro.txt　のアイコンを、下辺のパネルのKWriteのアイコンの上にドラッグ。
    • 自己紹介文をコピー。メーラに移って、メール本文に貼りつける。
    • intro.txt　を添付しておく。。
    • メールを送信。

ウェブの構成を考える

• ウェブの構成のヒントを見てみる。
  • 4つの例を示す。ヒントであるから、別に引きずられる必要はない。すでに、構成が決まってできている者は、わざわざ変える必要はない。ヒントに似ているからといって点が高くなるわけでも低くなるわけでもない。
  • 「特にテーマがあるわけではないタイプ」の図拡大(8KB)
  • 「チーム応援タイ プ」の図拡大(8KB)
  • 「特定テーマタイ プ」の図拡大(11KB)
  • 「活動歴タイプ」の図拡 大(11KB)
    
    
    
    
    

概念の整理

• ウェブをめぐる概念を理解する。
• インターネット＝ウェブページか？
• ウェブページとホームページとは異なるのか？　トップページとホームページとは異なるのか？　ウェブページとWWW (World-Wide Web)とは、同じものか？
  
• URL(Uniform Resource Locator ＝URI [Uniform Resource Indicator])とは？
• インターネット上の資源(≒ファイル)に一意(世界中に重複がない)の名前をつけるための文字列。
• 例：　http://www.google.co.jp/　　　　http://www.nikkei.co.jp/digitalcore/listj.html
• プロトコル　http　か、https　がほとんど。ftp　がたまにある。
• ウェブとHTML(HyperText Markup Language)とは、どう違うのか？
  
• ワープロで字を大きくするのとどこが違うのか、どうしてそれではいけないのか？
• プラットフォーム(マシンの種類やOSの種類)からの独立性。＝指示の部分も、人間の目で読めること(テキスト[文字 列]になっていること)
  ワープロでは、そのワープロソフトで目で見ながら、文字の大きさを変える(そのワープロ以外のソフト で、そのワープロに適したデータを作るのが困難)。HTMLで指示すると、それがどう表示されるかは、個々の利用者が使っているブ ラウザにおまかせになる(それほど大きな違いが出ることはあまりないが)。
• 「構造化」の必要性。
  

ディレクトリの新設、index.hmtlの新設とアクセス権の設定

• ウェブページ(ホームページ)作成の前準備
• 考え方
• 参考　http://www.ex.media.osaka-cu.ac.jp/~nagata/tutorial/　　「~」(チルダ)は、Shift　を押しながら、数字の 「0」の右の右　「へ」や「＾」が書いてあるキーを押す。あくまで半角(英文字入力モード)で。
• URLを手で打ってももちろんよい。
• ここでは、情報処理教育システム　トップページ　左側のメニューの下から6つ目をクリック。
  
• ディレクトリの新設(実際の操作は後述の★★★)
• 〜/public_html ディレクトリを作る。(「〜」は自分のホームディレクトリを意味する。「/」はディレクトリ[フォル ダ]の親子関係を示す)　
  ウェブで見てもらいたいすべてのファイルを　public_html ディレクトリ　の中に置く。

　
• アクセス権の設定(実際の操作は後述の●●●)
  • ファイルのアクセス権に注意する必要がある。
  • public_html ディレクトリ　は、次のように誰からもアクセス可能にする必要がある。
    ・・・(A)
  • public_html 以下のすべてのファイルは、次のように誰からも読み取り可能にする必要がある。
    ・・・(B)
    
  　　　
• ファイルの対応付け(　index.html　の意義)(実際の操作は後述の◆◆◆)
• public_html/index.html が各自のトップページのファイル。
• http://www.ex.media.osaka-cu.ac.jp/~a03ff999/ 　にアクセスがあると、そのユーザ(a03ff999)のホームディレクト リの　public_html/index.html　がインターネットを経由して、アクセス要求を出した人のマシンに送信される。
  
• 同様に、http://www.ex.media.osaka-cu.ac.jp/~a03ff999/xxx.html 　にアクセスがあると、そのユーザ(a03ff999)の ホームディレクトリの　public_html/xxx.html　が送信される。
• ファイル名に空白・漢字・ひらがな・カタカナを含んではいけない。
  
• 注意
  • public_htmlディレクトリに置いたファイルは世界中から読める。出版と同じである。著作権違反のページ、公序良俗に 違反するページ、法律に違反するページを決して作らないこと。
    
• 操作
• (★★★)public_html　の新設
• ホームディレクトリで、白いところで右クリック　→　新しいディレクトリ(フォルダ)を作る。名前を　public_html 　とする。「_」(下線、アンダーバー、アンダースコア)は、右側のShiftキーのすぐ左(「ろ」などが書いてある)。Shiftを押しな がら、このキーを押す。あくまで半角(英文字入力モード)で。
  
• (◆◆◆)index.html　の作成(ファイル新設)
• public_htmlのアイコンをダブルクリックして、ディレクトリの中身を見る(何もない)。白いところで右クリック　→ 　新しいhtmlファイルを作る。名前を　index.html　とする。
• HTMLファイルをKonqurerあるいはMozillaを通してみる。Konqurerのファイル管理のウィンドウの中で、index.htmlを ダブルクリックしてみる。真っ白。
  
• index.htmlをKWriteを通してみる。index.htmlを画面下辺のパネルの中の、KWriteのアイコン(紙と鉛筆)の上にドラッグ。タグ＝数学の小なり記号と大なり記号とで囲まれた文字列　が、書かれていることがわかる。
  
• (●●●)他の人から見えるようにアクセス権を設定
• Konquerorの左上の左向き矢印をクリックして、上の階層に戻る。他の人から見えるように、ディレクトリのプロパ ティを変える。public_htmlのアイコンを右クリック　→　プロパティ。プロパティパネルが表示されるので、「許可情報(P)」タブ をクリックする。前述　(A)　のように設定。
  
• 他の人から見えるように、ファイルのプロパティを変える。index.htmlのアイコンを右クリック　→　プロパティ。プ ロパティパネルが表示されるので、「許可情報(P)」タブ をクリックする。前述　(B)　のように設定。
• 今後、いくつか　.html　ファイルを作ってもらうが、作ったら、プロパティを必ず確認する。
  

index.hmtlの内容作成

• index.html　の中身を書き換えていく
  • 注意するべきこと　＝情処教育システム　→　ホームページの作成について　→　Webページを作ろう　→　考えておこう - Webページの構成
    • 全体として各ページを、特にトップページを軽いページにする。
      
      • 画像は、文字の数十倍、数百倍のデータ容量を擁する。フロッピー1枚(1.4MB)に漢字1000字Ｘ700ページが入るが、 デジカメの写真だと1枚入るか入らないか
      • 大きな画像などを表示したい場合、ワンステップ置く(小さなサムネール[指の爪]画像を置くなど)。
        
  • 以下の▼▼▼と▲▲▲との間のように、自分で打った方がわかりやすいが、既存のページから切り貼りするようにした。
    • 　http://www.media.osaka-cu.ac.jp/~kiyoshi/
      　→　中野　media 全学情処レジュメ
      　→　掲載されている講義資料
      　→　情報基礎(情報処理I)
      　→　2007年度前期
      　→　【第15回　の後、「その他関連資料」の「5.」】index.html　の最初の中身　を開く
      
    • ウェブページに書かれた　文字列　(HTMLコード)　を、ctrl ＋ c　で覚える。KWrite　で編集中の　index.html　にカーソルを持っていって　ctrl ＋ v　で貼り付ける。
      
  • ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
  • いくつか決まりごとの設定をする　＝情処教育システム　→　ホームページの作成について　→　Webページを作ろう　→ 　トップページ index.html の編集　このページの中の「いくつかの重要な初期設定」
    • 冒頭に、DOCTYPE　というのを入れる。
      • このページの指示にしたがって、<html>　の上の行として、
        　　　　　　　　<!DOCTYPE HTML PUBLIC "(中略)Transitional//EN">
        をウェブページからコピー( Ctrl + c )して、 index.html　にペーストする( Ctrl + p )。
        
    • 用いる文字コードを宣言する。
      • このページの指示にしたがって、<title></title>　の行と、<style></style>　の行と の間に、
        　　　　　　　　<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">　
        をウェブページからコピー( Ctrl + c )して、index.html　にペーストする( Ctrl + p )。
        
  • ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
    
  • ページのタイトルを決める。
    • このページの指示にしたがって、<title>　と　</title>　との間に、タイトルを打ち込む。通常、 英語にする(日本語の使えないマシンからアクセスしても、最低、タイトルだけが見えるようにする)。タイトルとは、ページの本体 に書く　H1　で囲んだ大見出しのことではない。ブラウザの左上に表示されるものである。同じく、<head>　と　</head>　で囲んだ全体も、ヘッダと呼ぶが、ページの本体の先頭の、タイトルや見出し(header)のことではない。
      
  • 本文を記述してみる　＝情処教育システム　→　ホームページの作成について　→　Webページを作ろう　→　トップペー ジ index.html の編集　このページの中の「本文を記述する場所」
  • <body>と</body>との間に、1行、空行を作って、でたらめでいいので、何か打ってみよう。
  • KWriteで上書き保存　　Ctrl + s　　あるいは、ファイル→保存
  • Konquerorで再読み込み(更新)　　表示→再読み込み
    
  • でたらめに打った文字列が、ウェブページの中身として表示される。＝タグと、表示される本文部分などを含め て、.htmlファイルの中身を「ソース」あるいは「ソースコード」と呼ぶ。WindowsのMS-Wordの　.doc　ファイルのように、中身が 人間には読めないようにしているものは、ソースと呼ばない。
    
  • タグをいくつか覚えよう　＝情処教育システム　→　ホームページの作成について　→　Webページを作ろう　→　HTMLの 書き方のヒント
    • HTMLの書き方のヒント　→　HTMLの基本的な構造
    • HTMLの書き方のヒント　→　見出し文字　＝h1からh6まで、文書の構造を示すためのものであって、文字の大きさを 指定するためのものではない。h1：章、h2：節、h3：項、h4：小見出し。タグは大文字でも小文字でもよい。ただし、統一するこ と。
      
    • HTMLの書き方のヒント　→　箇条書き 　＝これは、理解して、今日、使ってみること。UL Un-ordered Listでは、番 号が付かず、OL Ordered Listでは、順に番号を振ってくれる。　＆ｌ(エル)ｔ；　と　＆ｇｔ；　は、<　や　>　を実際に 本文として表示したいときに用いる。<　や　>　をソースコードの中に打つと、タグだと誤って解釈されて、不具合が生じる ため。
    • HTMLの書き方のヒント　→　リンク　＝これは、理解して、今日、使ってみること。
      
    • HTMLの書き方のヒント　→　段落と強制改行
      • 通常の文章は、段落単位で、<p> および</p>　で括る。
      • 段落の途中で強制改行を入れるとき、たとえば、数式の説明文章のあと、改行して数式を1行入れ、また改行して 説明を続けるときなどには、<br>タグを入れる。<br>には、閉じタグがない。
        
      • 画面の右端で、文章が折り返している(自然改行している)が、そのために<br>を入れる必要はない。この折 り返しは、ブラウザが勝手に実行する。

以上

(第2回)←　↑(この期の目次)　→(第4回)