情報学概論　　第12回（7/6)

(Introduction to Informatics 1)
 ^               ^^          ^

実践的ICT生活のために

（実習編）

構造のある文書を作る

（前置きとして）構造のある文書は、たとえばワープロソフトでも作ることはできるが、この技術は、オープンでない技術であり、本科目では扱わない。
オープンな（特定のソフトウェアに依存しない、という意味でもあり、発展の方向が様々である、という意味もある）文書技術として、Web技術がある。
- Web技術は（要約すれば）HTML (+CSS) と HTTPから成り立っている。
  - HTTP（通信プロトコルの１つ）については当科目では扱わない（２年生以上のネットワーク系科目で扱う）。
  - HTMLについては今のうちに基本的な知識（と扱う技術）は得ておきましょう。
前回はHTMLを書いてみた（が、面倒ですよね）。
- その面倒を軽減する話を次回やりますが、
- 今回はちゃんとHTMLの作り方を一度学んでおきましょう。

HTMLの基本を確認

作成手順：
- エディタを開き、内容を入力し、
- 保存する（右図）。
  - このとき、拡張子は .html にする。
文法：
- タグ

補足１：HTMLファイルを扱うためのTIPS

人に伝えるためには：

複合文書としてのHTML：
- Aタグ（アンカー）や、IMGタグ（画像）で、
  - 他の文書やデータへ遷移するリンクを設定したり、
  - 画面上に当該ファイルの外にある情報をレイアウトして見せたり、
  といったことができるのがハイパーテキスト（HTML等で表現される）の特徴。いわば複合文書である。
- Aタグのジャンプ先、IMGタグの引用先としては、
  1. 同じ場所に置かれたもの
  2. 別の場所（別のサーバであることもある）にあるもの
  いずれも可能。
  - 前者の場合は、ファイル名（またはパス名）で指示し、
  - 後者はURLで指示する。
  前者のとき、HTMLと同じ（またはそこから辿ることができる）場所に当該ファイルが置かれていなければ正しく表示（や遷移）がされないことに注意。
URLについての基礎知識と落とし穴
- 一般的に使われるURLは http:// または https:// から始まる。このURLは殆どの場合、それをそのまま人に伝えたら（他人の端末からでも）アクセスできる。
- 今回のように自分のPC内でHTMLを作ってブラウザで表示させると、ブラウザのアドレスバーにURL（の一種）が表示されるが、そのURLは file:// で始まる形式になっている。
- :// の左にある名前（「URLのスキーム」と呼ぶ）には沢山の種類のものが登録されており、そのスキームによってアクセス方法が違う（例えば前述の httpスキーム、httpsスキームではブラウザでWebサイトとしてアクセスできる）。
- file スキームのものは、自分のPC内でのローカルアクセスに限定したもの。なので、そのURLを他人に伝えてもアクセスはしてもらえない（自分のPC内のファイルが他人にアクセス可能だったら怖いですよね）。

補足２：昨今のHTML事情

基本的な考え方：
ボイラープレート

余分な作業を極力減らしていけるよう知識を持っておいた方がいい。
我々は情報処理を行う際に、文書作成やプログラミング等の複雑な記述が必要になるが、それにあたって、
言語の古くさい特性や、不完全な言語処理系のために、余分な作業が要求される時、そこで必要とされる呪文（のような長い文字列）は「ボイラープレート」などと呼ばれる。ことがある。

ボイラープレートからの脱却：

省略可能なタグ：
- HTMLの入門サイトやテキストには、オーソドックスな書き方に準拠したものが多く、
  html、head、 body といったタグを律儀に記述することが求められる（たとえばこんなHTMLファイル）。
- 実際には、これらのタグは省略した場合にブラウザの方で補ってくれることが多く、
  極端に言えば、拡張子を .html にさえしておけばHTMLファイルとして認識される（たとえばこのファイルをソース表示してみて下さい）。
逆に、必ず書いておく方がいい行として：
先頭に、以下のような doctype宣言の行を書いておくといい。
```
  <!doctype html>
```
- この行は正確にはHTMLではなくXML（という規格）の一部だがHTMLにおいても（当該文書がどの文法に基づくものかを示す）標準的な記法として採用されている。
- たとえばこのファイルがその記法に基づいている（この資料集の全ページがそうだが）。
文字化けにも対処しておこう：
自分が使ったエディタ（で、どのエンコーディングで保存したか）に従って、エンコーディングに関する情報を文書の先頭部に記述しておくことができる。
- 以下はUTF-8に対応したエディタ（Atom等）で作成した場合の例（サンプルHTMLファイルもチェック下さい）。
```
<!doctype html>
<meta charset='utf-8'>
以下本文が入る...
```

課題

以下の２つの要素を含むHTMLを作成して提出ください。
1. リンク（アンカー）
2. イメージ（画像）：HTMLファイルと同じ場所に置いて引用する。
（前述のように画像ファイルも一緒に提示しないとページ上に画像が表示されないことに留意した上で提出の方法を考えて下さい）

以下２項は次回にまわします

markdown について知る
- 解説記事（たとえばここ）
Atomで扱う方法
- とりあえず markdown preview (コアパッケージ)を使う

情報学概論 第12回（7/6)

実践的ICT生活のために

構造のある文書を作る

HTMLの基本を確認

補足１：HTMLファイルを扱うためのTIPS

補足２：昨今のHTML事情

課題

情報学概論　　第12回（7/6)