今後の本授業の予定: テーマは情報の発信
• 12/20(今回): HTMLによるweb page作成 (1)
◦ 1/10(月): 「成人の日」でお休み
• 1/12(水・見做し月曜日):
HTML による web page 作成 (2)
• 1/17(月): プレゼンテーション大会 (1)
• 1/24(月): プレゼンテーション大会 (2)
プレゼンテーション大会 2 回に亙って全員に
プレゼンテーションソフトを用いた発表 をしてもらいます
• 内容 : 何かを勧める
• 持ち時間 : 1 分 〜 1 分半 (時間厳守)
• 資料枚数 : 表紙 ＋ 3 枚程度か
• プレゼンテーション資料の事前提出 : 1/14(金)まで
にメイル添付で提出 (詳細は後で説明)
プレゼンテーション大会
プレゼンテーション資料の事前提出要領:
• 1/14(金)までにメイル添付で提出
• スライドショー形式 (.ppsx) で提出
• 添付ファイル名は学生番号(A10xxyyy.ppsx)
• メイルの件名は presen
• メイル本文に学生番号・氏名・題目を記載 (1行づつ改行して行頭から)
ID:A10xxyyy Name:何野某
Title:何とかのお勧め
さて、今回・次回は
ウェブサイト作成
HTML 文書を作る
(HyperText Markup Language)
実習
本授業のウェブサイト
http://pweb.cc.sophia.ac.jp
/tsunogai/kougi/10/jolite.html に用意したサンプルHTMLファイル
sample.html
をダウンロード
• Firefox: [右クリック] −→ [Save Link As ...]
• IE: [右クリック] −→ [対象をファイルに保存]
−→ O: ドライブの授業用フォルダに保存 (ファイル名をindex.htmlに変更のこと)
実習用ウェブサーバ 授業実習では、
学内のみに公開されたウェブサーバ lctweb.cc.sophia.ac.jp
を使う 各人のURLは
http://lctweb.cc.sophia.ac.jp/~A10xxyyy/
以下になる (一般に大文字小文字を区別するので注意)
実習1
以下の 2 箇所を自分のID・名前に直してから、
ウェブブラウザで表示を確認してみよう
<base href=" 〜 /~A10xxyyy/index.html">
<h1>何野某の授業実習用ウェブページ</h1>
• 保存したindex.htmlを
[右クリック] −→ [EmEditor]で適切に編集
−→ ファイルアイコンを[ダブルクリック]
• Firefox では [File] −→ [Open File ...]
(または[Ctrl+o]) でも可
実習1: 授業実習用ウェブサーバに
ファイルをアップロード
「授業実習用ホームページ(lctweb)サービス」
を利用する とりあえず授業実習用サーバに
掲載(アップロード)してみよう
学内のサーバに接続・ファイル転送
−→ FFFTP を用いる
(FTP = File Transfer Protocol)
FFFTPの使い方
• 起動: [スタート] −→ [プログラム]
−→ [Tools] −→ [ファイル転送]
• 終了: [接続(F)] −→ [終了(X)]
([Alt＋f] −→ [Alt+x])
または [ウィンドウ右上の×]
FFFTPの使い方
• 接続: [接続(F)] −→ [接続(C)]
−→ [ホスト一覧] でどれかを選ぶ
−→ [接続(S)]
−→ ユーザ名(学生番号)を入力 −→ [OK]
−→ パスワードを入力 −→ [OK]
−→ 接続完了
? 左側: ローカル(こっち側)
? 右側: リモート(向こう側)
• 切断: [接続(F)] −→ [切断(R)]
接続を切断してから終了すること
(学内)公開用ディレクトリの作成
(ディレクトリ: フォルダに相当) 準備として最初の 1 回だけ行なう
• [コマンド(C)] −→ [フォルダ作成(K)]
−→ [フォルダ作成(ホスト)]でフォルダ名入力
public html (半角英小文字＋記号)
(大文字小文字は区別される)
• 属性確認(変更)
今作った public html をクリックで選択
−→ [コマンド(C)] −→ [属性変更(A)]
[現在の属性] が 755 ならOK
ファイルのアップロード
ローカル(こっち側) −→ リモート(向こう側)
• リモート側(右側)のディレクトリ指定:
public html に ([ダブルクリック]で移動)
• ローカル側(左側)のフォルダ指定:
O:U −→ 授業用フォルダ
• ローカル側(左側)の index.html を選択
−→ [アップロード] (上向き青矢印) または マウスでドラッグ
アップロードしたファイルを見てみる
http://lctweb.cc.sophia.ac.jp/~A10xxyyy/
ファイル名を指定しないと index.html と仮定 (ウェブサーバの設定) ソースを確認してみよう
• IE: [右クリック] −→ [ソースの表示]
• Firefox: [右クリック] −→ [View Page Source]
(または [Ctrl+u]) 今見ているファイルが
手元のファイルかサーバ上のファイルか 意識して正しく区別・認識せよ
ブラウザによるHTML文書の表示 今掲載した index.html では、
文字の大きさなどは特に指定していないが、
見出しの文字は大きめに表示されている
• 元々のテキストデータが内容としてある
• HTML では専ら論理指定を行なう
• ブラウザが解釈して適切に表示する
ブラウザによるHTML文書の表示
ブラウザが解釈して適切に表示するということは どういうことが起こるか 使っているウェブブラウザや環境によって
見え方が異なる
−→ 過度に見た目に拘らないこと
参考: テキストベースブラウザ (w3m など)
HTML文法の基礎の基礎
• テキストを mark up して論理指定する
−→ 内容と論理指定とが共に
プレインテキストで交ぜ書きされる
• mark up は HTML のタグによって行なう
? タグは < > で囲まれる
? <xxx>から</xxx>までが指定xxxの範囲 (対応する</xxx>がないものもある)
? 様々な属性を持つタグがある (<xxx yyy="zzz"> の形で指定)
HTML文法の基礎 : 構成
• <html> 〜 </html>:
この間がHTMLで書かれていることを示す
• <head> 〜 </head>: ヘッダ部分 文書に関する情報を記述する
• <body> 〜 </body>: 本体部分 文書の内容を記述する
HTML文法の基礎 : 段落・見出し
• <h★> 〜 </h★>: 見出し(headings)
? レベル ★ = 1 〜 6 まで
? 上のレベルから順に用いるのが原則
? 通常、然るべき大きさ・配置で表示
• <p> 〜 </p>: 段落(paragraph)
? 地の文は普通この中に書くことになる
? 通常、段落内は画面端で折返し表示
? 通常、段落毎に改行、少々空けて表示
HTML文法の基礎 : 箇条書
• <ol> 〜 </ol>
: 番号付き箇条書(ordered list)
• <ul> 〜 </ul>
: 番号なし箇条書(unordered list)
? 各項目は <li> 〜 </li> で囲む
? 入れ子にも出来る (項目内に更に
<ol> 〜 </ol>・<ul> 〜 </ul>
が書ける)
HTML文法の基礎 : ハイパーリンク
• <a> 〜 </a> アンカ(anchor・碇)
? リンク先は href 属性で指定
(Hypertext REFerence) 従って次の形になる
<a href="URL文字列">
? URLの指定には絶対指定・相対指定がある
∗ 絶対指定 : 現在地と無関係に指定
−→ http:// などから始まる
∗ 相対指定 : 現在地からの位置関係で指定
−→ ./ や ../ などから始まる
実習2
ハイパーリンクの並んでいる段落を箇条書に変えて、
各リンクをそれぞれ一つの項目としよう
また、各リンクの飛び先が正しいか確かめよう (まだサーバへはアップロードしない)
実習3
ウェブページ(HTML文書)をもう一つ
ファイル名 second.html で作って、
(コピーして修正すれば良い)
• フォルダでindex.htmlを
[コピー] −→ [貼り付け]
−→ ファイル名を変更
• EmEditor 内で編集中のindex.htmlを
[ファイル] −→ [名前を付けて保存]
拡張子は .html のまま
実習3
index.html から second.html に向けた
リンクを張ろう(相対指定が適当)
<a href="./second.html">2頁目へのリンク</a>
また、second.html では、
• baseタグ内のファイル名を変更
• 見出しの修正・不要な部分の削除(適当に)
• index.html に戻るためのリンクを作る
<a href="./index.html">玄関ページへ</a>
それが出来たらサーバにアップロードして
リンクが辿れるか確認しよう
情報発信:
プレゼンテーション資料作成
“MS-PowerPoint” を使う
ウェブサイト作成
HTML 文書を作る
共通の補足
情報発信で大切なこと 情報発信に於いては、
相手に伝わること
が(当たり前だが)大切
どんな人にもきちんと伝わるようにすること ユニバーサルデザイン(Universal Design)
ユニバーサルデザイン (Universal Design)
“バリアフリー”の考え方から発展
例: シャンプー・リンスのボトル
どんな人にもきちんと伝わるようにすること 文字情報・視覚情報の発信に於いて、
特に留意すべきことは ?
参考: 色のユニバーサルデザイン
NPO法人 カラーユニバーサルデザイン機構 (Color Universal Design Organization)
http://www.cudo.jp
どんな人にもきちんと伝わるようにすることが、
結局はどんな人にも解り易い表現に繋がる
本日の実習課題の確認は、
みなさんのURL
http://lctweb.cc.sophia.ac.jp/~A10xxyyy/
でのアクセスを確認することで行なうので、
メイル等で提出する必要はない
FFFTPの使い方
必ず接続を切断してから終了すること
• 切断: [接続(F)] −→ [切断(R)]
([Alt＋f] −→ [Alt+r])
• 終了: [接続(F)] −→ [終了(X)]
([Alt＋f] −→ [Alt+x])
または [ウィンドウ右上の×]
今後の本授業の予定: テーマは情報の発信
• 12/20(今回): HTMLによるweb page作成 (1)
◦ 1/10(月): 「成人の日」でお休み
• 1/12(水・見做し月曜日):
HTML による web page 作成 (2)
• 1/17(月): プレゼンテーション大会 (1)
• 1/24(月): プレゼンテーション大会 (2)
プレゼンテーション大会 2 回に亙って全員に
プレゼンテーションソフトを用いた発表 をしてもらいます
• 内容 : 何かを勧める
• 持ち時間 : 1 分 〜 1 分半 (時間厳守)
• 資料枚数 : 表紙 ＋ 3 枚程度か
• プレゼンテーション資料の事前提出 : 1/14(金)まで
にメイル添付で提出 (詳細は後で説明)
プレゼンテーション大会
プレゼンテーション資料の事前提出要領:
• 1/14(金)までにメイル添付で提出
• スライドショー形式 (.ppsx) で提出
• 添付ファイル名は学生番号(A10xxyyy.ppsx)
• メイルの件名は presen
• メイル本文に学生番号・氏名・題目を記載 (1行づつ改行して行頭から)
ID:A10xxyyy Name:何野某
Title:何とかのお勧め
それでは、
