© 2005-20 Martin
J. Dürst 青山学院大学
Today's Schedule
- Overall explanations
- HTML basics
- Moodle course registration
- Explanation of exercises
- Exercises
Self-Introduction
Presentation of Teaching Staff
Assistant Professors (助教)
- Yoshiyuki SHOJI (莊司 慶行、総括)
- Motoki YATSU (谷津 元樹)
- Naoki YONEZAWA (米澤 直晃)
Teaching Assistants (TA)
- Kōsuke KURIHARA (栗原 光祐、Dürst 研 M2)
- Yukihiro KAERIYAMA (歸山 幸大、Lopez 研 M1)
- Takumi KANDA (神田 拓実、Dürst 研 M1)
- 未定
授業の位置付け
授業の内容
- Schedule
- Web is over 30 years old
- Ruby and Ruby on Rails
- Strongly recommend to also take
知的データベース (Prof. Ohara)
約束事
- 時刻通りログイン済み
- メモ又は書き込みが重要
- 全員完走 (一部の発展問題を抜く)
- 独力・独走
授業の進め方
他人との協力
- 授業中の poll/quiz、ミニテスト:
- 他人との協力、情報交換は一切禁止
- 資料、メモ、ウェブ検索は使用可
- 宿題・レポート:
- 独力・独走: 各自独自で取り組む
- 質疑などはできる限り Moodle や Webex へ
- 知り合いの間相談してもよいが、
解答やその一部の交換は禁止
これらのルールを守らない者に対し、
提出物の一部や全部を0点にすることになる！
成績評価方法
授業中の演習課題とミニテスト、プロジェクトで
総合的な評価
出席が前提、欠席の場合、
事前の許可又は診断書が必要
(医療機関のレシートだけではダメ!)
成功するには
- 自覚
- 予習
- 睡眠
- 環境の整備
- 水分・糖分の補給
- 自動翻訳サイトの敬遠
Course Schedule
https://www.sw.it.aoyama.ac.jp/2020/Projects2
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
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 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
Meta-Notation
code: literal codecode: code to be replaced by something more
specifc
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 (二重引用符)
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) listsol: ordered (numbered) listsdl: 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 listol: Ordered listdl: Definition list
- List item elements:
li: List item
dt: Definition termdd: Definition details
What to Remember for Each Element
- Name and attributes
- In what parent elements 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
documentlang attribute: indicates language
<p lang='en'>Japanese <span
lang='ja'>日本語</span></p>
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:
<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> (略語)
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
Today's Exercises
- Exercise 1A:
- Intermediate check of exercise 1C
- Deadline: 16:45
- Points: 10 if submitted
- Exercise 1B:
- Intermediate check of exercise 1C
- Deadline: 17:30
- Points: 10 if submitted
- Exercise 1C:
- Final version
- Deadline: 18:30 (May 5, 22:00: 80%; May 6, 22:00: 60%)
- Points: 100 if complete
Exercise 1C: Setting
- 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
(
about_CSS.txt) in your mail
- Your job: Mark up the manuscript using the first Web page as the
example
Exercise 1C: Mark up the Document
"Introduction to CSS", Overview
Exercise 1C: 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
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