Overview, Environment,
HTML Markup

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

Projects in Information Technology II

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

1st lecture, April 5, 2021

https://www.sw.it.aoyama.ac.jp/2021/ITPro2/lecture1.html

Martin J. Dürst, duerst@it.aoyama.ac.jp

Today's Schedule

Overall explanations
HTML basics
Moodle course registration
Explanation of exercises
Exercises

Seating / 座席の選択

最後の列は助教・TA 専用
最初の列の一部のテーブルが使用禁止
真ん中の席は使用禁止
できるだけ全ての机・スペースを均等に使うこと
PC は準備して、閉じたまま

Covid Precautions

Every morning, measure your body temperature
If you have increased temperature (above 37.5°), go to the health center
Observe social distance
Always wear a mask (correctly!)
Regularly wash/disinfect your hands thoroughly
Eat/drink quietly, alone (outside this room)
Do not clean tables, in order to not destroy the special coating

Self-Introduction

Born in Zürich, Switzerland
lic.oec.publ. from University of Zurich (修士相当、情報科学専攻、経営学と日本学副専攻, 1986)
文部省奨学金で来日、東京大学で理学博士
チューリッヒ大学助教
慶應義塾大学政策・メディア研究科特別助教授
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)

Yukihiro KAERIYAMA (歸山幸大、Lopez 研 M2)
Tomohiro ISHII (石井智大、Dürst 研 M1)
Rion SATO (佐藤利音、楽研 M1)
Naoto SHIRASHIMA (白嶋直人、楽研 M1)

授業の位置付け

3 年前期
情テク必修、EJ 科目
他学科でも履修可

授業の内容

Schedule
Web is over 30 years old, very pervasive technology
Ruby and Ruby on Rails
Strongly recommend to also take
知的データベース (Prof. Ohara)

約束事

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

独力・独走の約束

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

不正行為

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

授業の進め方

CoursePower の代り Moodle
(https://moo.sw.it.aoyama.ac.jp/course/view.php?id=49)
資料はウェブ公開
(https://www.sw.it.aoyama.ac.jp/2021/ITPro2/lecture1.html)
メモ又は書き込みがも最重要
手元のノートパソコンとサーバ上の演習
Poll/quiz、ミニテスト、宿題、レポート
出席しないと大損 (出席できない場合、必ず事前にメール!)

成績評価方法

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

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

成功するには

自覚
予習
睡眠
環境の整備
水分・糖分の補給
自動翻訳サイトの敬遠

Handouts

Schedule of Projects in Information Technology II
Today's Handouts
Introduction to HTML (as seen in a browser)
Source of Introduction to HTML
Introduction to CSS (raw text)

Course Schedule

https://www.sw.it.aoyama.ac.jp/2021/ITPro2

How to Create a Web Page

→ Write HTML

→ This is what we will be doing today

What is HTML

Full name: Hypertext Markup Language
Format/language adding markup to text to create hypertext
Hypertext: Text with links to other texts
Invented by Tim Berners-Lee in 1989

→ Format for creating Web pages

Demo: HTML in Action

HTML file (Web page) at https://moo.sw.it.aoyama.ac.jp/mod/resource/view.php?id=2724
To view source:
- Use Ctrl-U in a browser
- Save to local disk and open with a plain text editor
To view changes:
- Open local file in a browser

Editors and Browsers

We will edit all kinds of formats and languages
[Homework] Make sure you install a powerful editor on your notebook computer:
- Visual Studio Code
- Komodo Edit
- Atom
- Sublime Text
- (Notepad++)
For today, Notepad2 may 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

HTML Structure

Overall HTML structure:

<!DOCTYPE html>
<html lang='en-US'>
  <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

Notation Used in this Course

code: literal code
code: code to be replaced by something more specifc
code: bad code example

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 (箇条書き)

Headings: From `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 just 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`)

Raw HTML	Browser View
<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`)

Raw HTML	Browser View
<ol> <li>Unordered List</li> <li>Ordered List</li> <li>Definition List</li> </ol>	Unordered List Ordered List Definition List

Example of Definition List

Raw HTML	Browser View
<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

List Elements Summary

List elements:
- ul: Unordered list
- ol: Ordered list
- dl: Definition list
List item elements:
- li: List item (use inside ul and ol)
- dt: Definition term (use inside dl)
- dd: Definition details (use inside dl)

What to Remember for Each Element

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

How to Find Information about HTML Elements

To search for the aside element:

HTML aside

HTML aside element

HTML aside element tutorial

HTML aside element example

Generic Markup

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

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 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> (略語)

Moodle

https://moo.sw.it.aoyama.ac.jp (same as Discrete Mathematics 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

Today's Exercises

Exercise 1A:
- Deadline: today 18:30: 100% (April 6, 22:00: 60%)
- Points: 100 if complete

Exercise 1A: Context

You are a Web page editor (編集者)
You already have a nicely marked up Web page, about_HTML.html
Your author just sent you the manuscript for a second Web page (download from about_CSS.txt)
Your job: Mark up the manuscript using the first Web page as the example

Exercise 1A: Mark up the Document
"Introduction to CSS", Overview

Download and save the file about_CSS.txt
Open the document in a plain text editor
Save the document as about_CSS.html, and mark it up
Use the source of the document about_HTML.html as an example. Study it carefully.
Validate your document with the W3C nu validator (https://validator.w3.org/nu/#file):
- The check is okay if you see Document checking completed. No errors or warnings to show.
- Caution: The validator will only detect syntactic errors. It will not tell you whether you have enough markup. It will also not detect semantically wrong markup.
Submit to Moodle

Exercise 1A: Details

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 first document.
Find out what other elements can go into the head element, and add 2 different ones with appropriate contents.
Add translations to technical terms using the title attribute.
The following elements should also be used: blockquote, ol
Some little bits of text (e.g. "[aside]") may be removed

Exercise 1A: Procedural Advice

Have a look at the document, and try to find the overall structure
Work top-down or outside-in or inside-out
(I personally recommend outside-in, but preferences vary)
Use replace-find-copy-paste (Ctrl-H, Ctrl-F, Ctrl-C, Ctrl-V) efficiently
Occasionally check the document with the valitator to avoid making the same mistake many times

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
(if not yet done) On your notebook computer, install
- Missing browsers
- A powerful plain text editor

Overview, Environment, HTML Markup