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

AGU

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

Today's Schedule

 

Seating / 座席の選択

 

Covid Precautions

 

Self-Introduction

 

Presentation of Teaching Staff

Assistant Professors (助教)

Teaching Assistants (TA)

 

授業の位置付け

 

授業の内容

 

約束事

 

独力・独走の約束

 

不正行為

 

授業の進め方

 

成績評価方法

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

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

 

成功するには

 

Handouts

 

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

→ Format for creating Web pages

 

Demo: HTML in Action

 

Editors and Browsers

 

HTML Structure

 

Notation Used in this Course

 

Elements (要素)

 

Attributes (属性)

 

Main Elements in body

 

Headings: From h1 to h6

(heading 1 ~ heading 6)

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:

 

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>
  1. Unordered List
  2. Ordered List
  3. 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

 

What to Remember for Each Element

 

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

 

Visual vs. Structural Markup

 

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

 

Minitest

(Starting next week)

  

Today's Exercises

 

Exercise 1A: Context

 

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

 

Exercise 1A: Details

 

Exercise 1A: Procedural Advice

 

Homework