情報学概論Ⅰ 第15回

企業情報学部

7/28

情報学概論1 第15回（7/28)

(Introduction to Informatics 1)

はじめに

試験と成績評価について 剽窃

  • 試験は、すべて持込可

    ただし相談は不可　剽窃も不可(きびしくチェックします)

  • パソコン持参のこと

    調べ物、実技的問題、解答（メール提出が標準）の道具

    ありがちな問題：　用語、経験、実技（ページ作成、ファイル操作）

  • 成績評価について

    加算評価します

    評価基準：　提出物ベースで評価（試験を含む）

まとめ

HTMLはどこに向かうか

=>別ページ参照

大学での情報学の学び

  1. 「大人のやり方」への転換
    • 「GUI」の元来の狙い
    • 言葉でのコミュニケーション
  2. 仕事で使える情報機器へ
    • （プログラミング、だけではなく、）
    • 分業のできる道具立て
    • スピードと確実性
  3. 情報形式の適切な選択

授業のまとめを作る

（前回の続き）

  • この実習は軽量マークアップ言語の使い方や、１つのソフトウェアに縛られない 文書作りの形態をマスターするのが主目的なので、 テーマとして「当科目のまとめ」でないものを選んでもかまわない。
  • 関連して見つけた画像や、参考になりそうなページへのリンクも、貼ってみて下さい。
    • ただ、今回はmarkdownで書いてエディタの機能で変換するという前提で、 画像ファイル等を貼付しようとするとうまくいかないことがあるので、 Aタグ（HREF属性）やIMGタグ（SRC属性）として、外部のURLを使ってもかまいません。 （今日は借り物でもOKとします）。
  • （このテーマで進めるとしたら、 原稿を書くのに使ったMarkdown形式のファイル、も 一緒にアップロードしましょう。
  • 前回紹介した文法に加えて、３つの記法を紹介しておく。
    • 詳しくは自分で調べてみて下さい。

  1. リンク（アンカー；Aタグ）

         [グーグル](http://www.google.co.jp)

    • [ ] (ブラケット）内が表示される文字（など）、

      ( )（かっこ）内が、ジャンプ先のURL

  1. 図（写真など；IMGタグ）

    ![顔](https://scontent-nrt1-1.xx.fbcdn.net/v/t1.0-1/c54.27.274.274/s240x240/418655_387096094649706_404213589_n.jpg?_nc_cat=0&oh=6495a081e6e579b78b5383fd103a65ad&oe=5BE445B1)

    • リンクと記法が似ているが先頭に !（エクスクラメーション）が入る。

    • [ ] (ブラケット）内は代替文字列、

      ( )（かっこ）内が、画像データのURL（またはファイル名）

  1. HTMLを直接書く

    <title>練習のページ</title>
  • CSS（CSS3 という呼称で紹介している場合もある）で、体裁を変えられる。

    • CSS属性は沢山あって一度に覚えられないので調べながら使ってみよう。

    • 方法１：styleタグの間に挟んでCSS記述を書く

      styleタグの type属性は省略していい。

      <style>
h1 {color:red;}
p {background-color:#ffccdd;}
</style>

  • ‘{ }’（ブレース）の左側に「セレクタ」、

    ブレース内に（そのセレクタで指定される要素に適用する）CSS属性名と属性値を書く。

    • 属性名と属性値の間は :（コロン）で区切ってる。
    • 属性名と属性値の対が複数あれば、 ;（セミコロン）で区切って並べる。

  • 方法２：CSSを別ファイルにして、linkタグでそのファイル名を指定する。

```language-html
<link rel=stylesheet href=default.css>
```

変換エンジンによる差異

  • Markdown を変換する際に、その変換システム（プレビューシステムと一体のこともある）独自のCSS記述を一緒にHTMLに出力するタイプのものがある。

  • CSS等によるデザインを細やかに施したいときに、ページ上の要素（タグ）に クラス名やID名をつけたいことがある。

    • その１つの方法としては、その部分だけを（HTMLの）タグ打ちで入力すること。
    • もう１つ、エンジンによってはMarkdown の拡張文法として クラス名ID名を付加できる記法が用意されている。
      • pandoc （この分野では定評のある、独立した変換ソフトウェア。コマンドとして動作するもの）では、
      • {.classname} のような表記を、
      • ~~~ （コードブロック）や
      • ::: （div 領域の前後に挟む）や
      • ### (タイトル行)や
      • 独立した []（span 領域）
      • の後に 置くことができる。
      （pandoc は 例年は IIn2で紹介しているが、今年は先行してこの回に紹介しておく）

課題

  • 前回の続きとして、「まとめ」を完成（またはバージョンアップ）させ、 （せっかくなので CSSも使ってみて下さい）

    （前回と同様に）

  • HTMLとして保存して、

  • サーバにアップロードし、

  • そのURLをお知らせ下さい。