Overview, Environment, HTML Markup

(授業の概要、演習環境、HTML)

Projects in Information Technology II

(情報総合プログラミング実習 II)

1st lecture, April 8, 2019

http://www.sw.it.aoyama.ac.jp/2019/Projects2/lecture1.html

Martin J. Dürst

duerst@it.aoyama.ac.jp

O 棟 529 号室

テュールストマーティンヤコブ

授業前の準備

指定の席に直積
デスクトップ PC の電源は OFF
自分のノート PC は卓上に設置、の電源は OFF

Today's Schedule

Overall explanations
HTML basics
Moodle course registration
Explanation of exercises
Exercises

Self-Introduction

Born in Zürich, Switzerland
lic.oec.publ. from University of Zurich (修士相当、情報科学専攻、経営学と日本学副専攻, 1986)
文部省奨学金で来日、東京大学で理学博士 (情報科学専攻, 1990)
チューリッヒ大学情報科学科マルチメディア研究室主任助手
慶應義塾大学政策・メディア研究科特別研究助教授
Internationalization Activity Lead at W3C (1998-2005)
Visiting Scientist at CSAIL, MIT (2002-2004)
At Aoyama Gakuin University since 2005

Presentation of Teaching Staff

Assistant Professors (助教)

Yoshiyuki SHOJI (莊司慶行、総括、今週海外出張)
Motoki YATSU (谷津元樹)
Naoki YONEZAWA (米澤直晃)

Teaching Assistants (TA)

Nozomi KIKUCHI (菊池のぞみ、Dürst 研 M2)
Keita SUGIYAMA (杉山敬太、Dürst 研 M2)
Kōsuke KURIHARA (栗原光祐、Dürst 研 M1)
未定

授業の位置付け

3 年前期
情テク必修、EJ 科目
去年と内容や担当者が変更

授業の内容

Schedule
Web: is now 30 years old
Ruby and Ruby on Rails
Strongly recommend to also take 知的データベース

約束事

時刻通りログイン済み
プリントなどへの積極的な書き込み
私語禁止
飲食禁止
通路解放
脱帽
一人一質問ずつ
全員完走 (一部の発展問題を抜く)
独力・独走

独力・独走の約束

二人以上一緒に問題を解くのは独走ではない
知り合い (先輩など第三者も含む) に一から手伝われる・手伝うのは独走ではない
知り合いの質問に答えるのは、Q&A フォーラムと同じ範囲内で大丈夫
しかし、Q&A フォーラムそのものを使った方がよい
勉強のための交換は提出後のではなく、締め切り後
知り合いに USB メモリを貸すときには要注意

不正行為

強力な調査ツールを使用
残念ながら毎年不正が発覚
倫理上、大学の目的と授業の約束事に対し、極めて許し難い行為
対応: 一問につき、一週間分の課題をすべて 0 点
必要に応じてさらに対応を強化

成績評価方法

授業中の演習課題とミニテスト、プロジェクト、期末試験で総合的な評価

出席が前提、欠席の場合、事前の許可又は診断書が必要 (医療機関のレシートだけではダメ!)

成功するには

自覚
予習
睡眠
環境の整備
水分・糖分の補給 (部屋の外で!)
自動翻訳サイトの敬遠

Handouts

Schedule of Projects in Information Technology II
Today's Handouts

XHTML

The format for Web pages
XHTML 1.0: Cleanup of HTML 4.0 based on XML
File start and end:

<!DOCTYPE html>
<html lang='en-US'>
  ...
</html>

HTML Structure

Overall HTML structure:

<html>
  <head>...</head>
  <body>...</body>
</html>

head: Information about the document

Most important element in <head>:

<title>Your page title goes here</title>

body: Contents in the document

Elements (要素)

Mark up document contents (内容) to indicate its function/meaning
Start with start tag (開始タグ):
<element-name>
End with end tag (終了タグ):
</element-name>
Or: empty tag: <element-name />
Always properly nested. WRONG:
This is a bad example.

Attributes (属性)

Additional information for elements
Attribute name (属性名) and attribute value (属性値) in element's start tag:
<element attr-name='attr-value' attr2="value2">
No duplication of attributes.
WRONG: <e a='x' a='y'>
Order is irrelevant
Better always quote attribute values with:
- Single quotes (一重引用符), or
- Double qotes (二重引用符)

Main Elements in `body`

h1 to h6: headings (見出し)
p: paragraph (段落)
ul, ol, dl: Lists (箇条書き)

What to Remember for each Element

Name and attributes
In what parent elements it can be used
What child elements can be used
Purose and meaning
Presentation without stylesheet (browser default stylesheet)

Form `h1` to `h6`

(heading 1 ~ heading 6)

h1: Main heading (大見出し, usually just one per page)
h2 (中見出し)
h3 (小見出し)
h4~h6: smaller headings, rarely used

Heading 1 (`h1`)

Heading 2 (`h2`)

Heading 3 (`h3`)

Heading 4 (`h4`)

Important:: heading are headings. Never misuse them to change font size!

Lists

HTML has three kinds of lists:

ul: unordered (unnumbered) lists
ol: ordered (numbered) lists
dl: definition lists

Example of Unordered List

<ul>
  <li>Unordered List</li>
  <li>Ordered List</li>
  <li>Definition List</li>
</ul>

Unordered List
Ordered List
Definition List

Example of Ordered List

<ol>
  <li>Unordered List</li>
  <li>Ordered List</li>
  <li>Definition List</li>
</ol>

Unordered List
Ordered List
Definition List

Example of Definition List

<dl>
  <dt>head</dt>
    <dd>Information ABOUT the document</dd>
  <dt>body</dt>
    <dd>The visible content of the document</dd>
</dl>

head: Information ABOUT the document
body: The visible content of the document

Generic Markup

What to do when a desired element is not available in XHTML

Block level: div (division): Larger document pieces, paragraph-like blocks
(often section, aside, nav, header, footer,... are better)
Inline: span
class attribute: indicates class or category
<code class='example wrong'>Wrong example.</code>
id attribute: Uniquely identifies an element in a document
lang/xml:lang attribute: indicates language
Japanese 日本語

Visual vs. Structural Markup

Separation of document structure and style is one of the main principles of the Web
Visual markup (WRONG!):
- Use of formatting elements:  (italic, 斜体),  (bold, 太字),...
- Misuse of structural elements: <h1> (heading1, 大見出し) for very large, <table> (表) for page layout,...
Structural markup:
- Paragraphs (段落): ...
- Headings: h1 (大見出し), h2 (中見出し), h3 (小見出し),...
- Emphasis: This is really important!
- more: <var> (変数), <code> (コード), <cite> (引用), <abbr>, <acronym> (略語)

Editors and Browsers

We will edit all kinds of formats and languages
[Homework] Make sure you install a powerful editor on your notebook computer:
- Komodo Edit
- Atom
- Sublime Text
- Visual Studio Code
- (Notepad++)
For today, Notepad2 should be enough
Web pages and applications have to work on many browsers
[Homework] Install browsers, at the minimum:
- Microsoft Edge (Windows) or Safari (Mac)
- Mozilla Firefox
- Google Chrome

Moodle

https://moo.sw.it.aoyama.ac.jp (same as Discrete Mathematics I and Computer Practice I)

Enrollment key: [secret]

If you forgot your password, use "Forgotten your username or password?" on the login page.
(caution: only enter either the username or the email address, not both)

How to Ask Questions

演習問題をよく読む (例: This is not a real program.)
自分でしばらく (短すぎない、長すぎない) 考える
Q&A フォーラムをチェック
質問を Q&A フォーラムに書き込む
題名に注意:
悪い例: 「エラー」、「アップロードについて」
良い例: 「File starts with a BOM への対応」、「01A1 の family name」
手をあげて質問

Minitest

(Starting next week)

Every week at the start of the lecture
Every week, log in to your PC and go to Computer Practice I in Moodle before the lecture starts
Every week, put your books, papers, wallets, phones,... into your bag, and your bag below your seat before the lecture starts
At the end of the minitest, stay on the confirmation page, do not browse around

Exercise: Mark up the Document Introduction to CSS

Download the document and change the extension to .html.
Use the document Introduction to HTML as an example. Study it carefully.
Use code, em, strong, abbr, pre,... elements wherever appropriate.
Add the header and footer from the HTML document, and add a nav element with a table of contents.
Properly indent your markup.
Make sure you have at least as much markup as the Introduction to HTML document.
Find out what other elements can go into the head element, and add 3 different ones with appropriate contents.
Add translations to technical terms using the title attribute.
The following elements should also be used: blockquote, ol
Validate your document with the W3C nu validator. Use the desktop PC for validation.
Caution: The validator will only detect syntactic errors. It will not tell you whether you have enough markup or not.
Submit to Moodle

Homework

Review the contents of today's lecture, including Introduction to HTML and the lists of elements referenced therein
Study the contents of Introduction to CSS
On your notebook computer, install
- Missing browsers
- A powerful plain text editor