© 2005-22 Martin J. Dürst 青山学院大学

Today's Schedule

• Overall explanations
• HTML basics
• Moodle course registration
• Explanation of exercises
• Exercises

座席表・準備

• Moodle の座席表を参照に着席
• 座席表に名前が無い場合、先生に相談
• ノート PC で https://moo.sw.it.aoyama.ac.jp/ にログイン、授業ページへ移動
• 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)
• Important: Wait for the minitest to be announced as available
• Important: Do not repeatedly click buttons,...!
  It may take a few seconds to load a page.
  The more you click, the slower it gets for you and everybody else.
  (This is also a stress test for the new server hardware/software.)

Presentation of Teaching Staff

Assistant Professors (助教)

• Yoshiyuki SHOJI (莊司 慶行、総括)
• Motoki YATSU (谷津 元樹)
• Naoki YONEZAWA (米澤 直晃)

Teaching Assistants (TA)

• Tomohiro ISHII (石井 智大、Dürst 研 M2)
• Yuki SAWAMURA (澤村 勇輝、森田研 M1)
• Jinsong YU (于 津松、Dürst 研 M1)
• Tensho Miyashita (宮下 天祥、Dürst 研 M1)

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

Covid Precautions

• Every morning, measure your body temperature
• If you have increased temperature (above 37.5°), contact the health center
• Observe social distance
• Always wear a mask (correctly!)
• Regularly wash/disinfect your hands thoroughly
• Eat/drink quietly, alone (outside this room)

Overall Lecture Goals

• 情報: State-of-the-art technology
• 総合:
  Creating a Web application from many pieces
  Using and honing different skills
• プログラミング:
  Ruby, Ruby on Rails
• 実習: Mainly learning by doing

授業の位置付け

• 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=55)
• 資料はウェブ公開
  (https://www.sw.it.aoyama.ac.jp/2022/ITPro2/lecture1.html)
• メモ又は書き込みが最重要
• 手元のノートパソコンとサーバ上の演習
• Poll/quiz、ミニテスト、演習問題、プロジェクト
• 出席しないと大損 (出席できない場合、必ず事前にメール!)

成績評価方法

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

出席が前提、欠席の場合、事前の許可又は診断書などが必要

成功するには

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

Handouts

• Today's Handout (this document)
• Course Schedule
• 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/2022/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=2920
• 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:
  <i>This is a <b>bad</i> example.</b>

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 (二重引用符)

Some Important 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)

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

Example of Ordered List (ol)

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

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>

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
  <p lang='en'>Japanese <span lang='ja'>日本語</span></p>

Structural Markup

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

How to Ask Questions

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

Today's Exercises

• Exercise 1A:
  • Deadline: today 18:30: 100% (April 12, 22:00: 60%)
  • Points: 100 if complete
• If you finish before 18:20, come to the front and tell me

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, Overview: Mark up the Document
"Introduction to CSS"

• 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 Validator (https://validator.w3.org/nu/#validate_by_upload):
  • 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.
• Add internal and external links (a)
• The following elements should also be used: blockquote, ol
• Some little bits of text (e.g. "[aside]") should be removed (they are hints)

Exercise 1A: 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 a small todo list on paper
• 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 there
• Study the contents of Introduction to CSS in preparation for next lecture
• (if not yet done) On your notebook computer, install
  • Missing browsers
  • A powerful plain text editor