情報処理概論 第2回 10/10
Introduction to the Information Systems
前回の要約
- 初回のガイダンス
- ソフト（chocolateyまたはScoop経由で Ruby と
ファイル転送ソフト）をインストールした。
- 課題に代えて、アンケートをお願いした
[パソコンライフ再考(1)]
１
パソコンの知識と基本操作（おさらいを兼ねて）
本章は他の科目で扱った話の復習的内容なので、今回は講義としては大幅に端折って進めます。
ただし、今回の実習（当ページ末尾）でファイルを扱う操作に自信が持てない人は、
別ページに置いた解説を読んで補っておいて下さい。
[Webの世界を知る]
1 HTMLについて知っておく
HTMLの操作２つ
- 例えばHTMLファイルは、それに対する操作の主なものとして
の２種類がある（メディア系データにはそういうものが多い）。
- HTMLでは標準の操作（ENTERまたはダブルクリック）は「表示」になっている（ことが多い）。
（IEやChrome等のブラウザを使って開くよう「関連付け」されているから）
- 関連付けを変更する方法は、
コンテキストメニューから「プログラムで開く」。
- 関連付けを変更せずに、標準以外の開き方をする方法は知っておく必要があるだろう。
- 「プログラムで開く」（操作が少し面倒）
- アプリケーションを開いてから、「開く」メニューで当該ファイルを探す
- アプリケーションを開いてから、エクスプローラ等から当該ファイルをドラッグして、
アプリケーションの窓にドロップ
情報源：
- HTMLについて知るには、「HTML」でググってみる
（と書いたがgoogle以外の検索エンジンでも勿論OK）。
- ただし初心者向けでない情報源も多数ヒットしてしまうので、 「HTML
入門」「HTML 初歩」「HTML チュートリアル」といった組み合わせを試すといい
（或いは目的によって「一覧」「リファレンス」のような単語も有効）。
- 古い情報源もあるし、新しすぎる情報源もある。
（例えばHTML5の新機能に特化した情報は初学者には難解だろう）。
- 比較的分かりやすいサイトを２つ紹介しておく。
- また、Webブラウザで、現在表示しているページについて「ソース表示」させることで、
HTMLの実例を多数見ることができるだろう（右図）。
HTMLの現状 （歴史を踏まえて）
- HTML5 が主流になってきた（HTML4は古い、と考えていい）
- HTML5
の表現力が高くなったことで、かつてWebページの中に貼付けられて使われた技術
の幾つかが、過去のものになり消え去ろうとしている（Java
Applet、Flash、SockWave など）。
- 実際はそのHTML5も規格としては廃止になっており、現在はW3Cの手を離れた組織で
Living Standard
の形で策定・改良が行われている（が、今のところHTML5から大きく離れたもの
にはなっていない）。
- 現在、非推奨になっているタグや属性もある（たとえばこのページでご確認下さい）
- この動きは、コンテンツとスタイル（デザイン）の分離が進んだ、と要約できる。
- 文字等の表示のスタイルは、HTMLの機能ではなく、CSSで指示するのが今のやり方になった。
- 省略可能なタグもあることを知っておくといいだろう（「HTML5
省略」で検索してみよう）。
- 省略されたHTMLの文法要素は、ブラウザが適切に補う。補われた箇所は、ブラウザの開発ツール（「要素の検証」「インスペクタ」などと表示される）で確認することができるだろう。
2 HTMLでWebページ作成
a 基本
HTML
- 多くのタグが開始タグと終了タグのペアになっている。
- タグは入れ子構造になる。
- HTML文書を構成する最低限のタグは html, head, body の３つ
（とされているが最近の略記法は後で紹介する）。
- タグの概要はTAG
indexのページが分かりやすい。
- タグの
<>内には、タグ名に続いて０個以上の属性指定が並ぶ（順は不同）。
どのタグにどの属性があるか、はリファレンスを確認されたし
- body内に書かれた文字は、文書の中身として、画面に表示される。
b 実習
HTML
1 前述の３つのタグからなる骨組みを作る。
エディタで入力し、「名前をつけて保存」する。
- （Shift+Ctrl+s や Alt + f, a
といったキー操作が（大抵のエディタで）可能の筈）
保存の条件は
| 場所： |
|
科目毎のフォルダを「マイドキュメント」の下に作り、その下に保存する |
| 名前： |
|
（とりあえずは）何でもいいが、あとで整理しやすい名前を考えよう |
|
|
命名に困ったら 1002a 1002b のように日付と識別記号でもいい |
| 拡張子： |
|
.html が標準だが .htm でも可 |
| （またはファイルの種類） |
|
|
注）３文字の拡張子
.htm は、初期のWindowsでの8・3ルールの名残り
2 空っぽの文書では寂しいので、
a BODY内に文字や文を書いてみる
b HEAD内にTITLEタグを挿入しページタイトルをつける
- この変更を施したら、「上書き保存」（Ctrl + s または Alt+ f,
s）する。
- 変更前の状態もファイルとして残しておきたいなら「名前をつけて保存」で別の名前に。
例えばこんな感じ
<html>
<head>
<title>おためし</title>
</head>
<body>
あいうえお
</BODY>
</HtmL>
（わざとタグに大文字小文字を混ぜてみたけど、
これを真似する必要はありません）
3 ブラウザで表示してみる
エクスプローラでさっき保存したフォルダを開き、
該当ファイル（アイコンはIEやchromeやfirefoxのアイコン）を「開く」、
（ENTERキーでも、マウスでダブルクリックでも、マウス右クリック→「開く」でも可）
| 窓を閉じる： |
Alt + f,c または Alt+SPACE, c |
| タブを閉じる： |
Ctrl + w |
- これ以降、この方法で適宜ブラウザ表示させて自分の編集結果を確認すること。
- 確認したら、ブラウザの窓やタブを閉じてもいい（が、閉じなくてもいい）
エンコーディング
なお、日本語文字が正しく表示されない場合は、
ブラウザのメニュー（またはコンテキストメニュー）で
「エンコーディング」を変更してみること。
Windowsでの標準的なエンコーディングは Shift_JIS だが、
エディタによっては、自動的に UTF-8 になっている場合もある。
エンコーディングの選択や指示方法などについては、後述の解説を参照 （やや詳しい説明は別資料にも用意した）。
4 ブラウザでソース表示させる
（先に述べたが再掲する）
- ソース表示の操作はブラウザによって違うが、
（メニューバーにもメニューボタン（三本線）にも多分あるが）
- 文書画面上の何もない場所で右クリック（コンテキストメニュー）、
をまず試してみて下さい。
- 自分が作ったHTMLと同じものが表示される（当たり前だが）のを確認されたし。
5 H1 などのタグで章見出しを作る
- 編集がすんだら、再度ブラウザで確認する。このとき、
- 上書き保存をしていて、先にブラウザで表示した窓やタブを閉じていなければ、
- その窓やタブを表示させた状態で、
「再表示」（再読込 更新 などの呼び方もある）させればいい。
（Ctrl+R または F5 または ブラウザの再表示ボタン（円を描く矢印））
6 文字飾りをつけてみる
- 「イタリック」と書き、それを斜体にする（I
タグを使う。Pタグで改行してもいい）
- 「ボールド」と書き、それを太字にする（B タグ）
- 「赤」と書き、その文字を赤で表示させる（FONT タグ COLOR属性）
様々な色をためして見て下さい。
- 「黒地に黄色文字」と書き、その部分を該当する色で表示させる（BGCOLOR属性）
- BODYタグの属性を使って、ページ全体の背景色を変えてみる。
- 各タグの使い方はリファレンス的なページで確認されたし。
- 色の名前または表記については「HTML
色」で検索すると情報源がある。
上記は、古いHTMLの使い方に基づくガイドです（歴史的な事情も知っておいて頂くべく書いておきました）が、今回は、HTML5の時代にあった方法として、CSSで指定することを試みてください。
7 画像を一枚（沢山でもいいが）貼ってみる（IMG タグ）
- 手元にない人は前回おまけにつけた素材画像を使ってもいい。
- HTML文書と同じ場所に画像ファイルを置いておくこと。
（とは限らないがそれが最も簡単なので）
8 リンクを置いてみる（A タグ）
- リンク先は適当なURLでいい。
- ネタに困ったらこのレジュメのページのアドレスでも可
- ブラウザで表示させて、クリックしたらジャンプすることを確認すること。
今日の課題
HTMLを作る実習 以下の手順ですすめて下さい。
- エディタを開いて 入力 （HTMLで非推奨になったものを確認下さい）
- 保存（適切な場所と名前）
- 一旦閉じて
- ブラウザで開く
- エディタで再度開いて編集
（今回は練習のためにエディタを一旦閉じたが、現実には開きっぱなしでも問題はない）
- 作ったHTMLファイル（省略前のもの）を提出下さい。
- 内容をメール本文にコピペしてもいいし、添付ファイルとして送ってもいい
- 作成したファイルをダブルクリック（またはENTER）したら、
ブラウザで（予想したとおりに）表示されましたか。結果も報告下さい。
HTMLのスリム化（省略可能な部分を省略する）の試み
- HTML5であることを明示するために１行目に !doctype
記述を必ず書く。
- 先の実習で作ったHTMLファイルをコピーして（または別の名前で保存して）別ファイルを作り、以下を実施する
- 前述の方法で調べたHTML5での省略可能な（と思わる）いくつかの箇所を消去してスリム化する。
- それをブラウザで開き、省略前のものと意味的に同じコンテンツとして扱われている
（画面で同じように表示される）ことを確認する。
- また、開発ツール（要素の検証）で、どのように補われているかも確認する。
- 以下について（メールで）報告して下さい。
- 今日の話の中で自分にとって初耳だったこと（がもしあれば）
- HTMLの中で何が省略可能になったか（調べてわかったこと）
補足
最近のHTMLについて
最近のHTML
例えば以下のような記述だけでHTMLとして扱われます
（ファイルの拡張子は .html または .htm である必要があるが）。
<!doctype html>
<meta charset=utf-8>
あいうえお
- １行目で「次の行以降はHTML文書だ」と宣言しています。
- ２行目はそのファイルの文字セットに対する指示です。
- doctype宣言に細かい指示（DTD指定）を書くべしと規約にはあるが、
略式の書き方（細かいことはデフォルト任せ）でも問題なく扱われている。
- 文字セットについても、METAタグでの指定例がよく見かけられるが、
簡易な表記で問題ない。
- 属性値を囲むダブルクォート
“”も、微妙な箇所（値の中に空白文字が入るなど）以外は
省略して大丈夫そうである。
素材画像データ（もちろん使わなくてもいい）
（自分で携帯情報機器で撮影した写真やネットで見つけたフリーの画像を
適当に使えばいいのですが、そういうネタに困った人は使って下さい。）
もしくは、以下のリンク（平岡が遊びでアップロードしてる場所です）から
tumblr
flickr
Instagram
