Overview, Environment,
HTML Markup

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

Projects in Information Technology II

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

1st lecture, May 4, 2020

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

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

AGU

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

Today's Schedule

 

Self-Introduction

 

Presentation of Teaching Staff

Assistant Professors (助教)

Teaching Assistants (TA)

 

授業の位置付け

 

授業の内容

 

約束事

 

授業の進め方

 

他人との協力

これらのルールを守らない者に対し、
提出物の一部や全部を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

→ Format for creating Web pages

 

Demo: HTML in Action

 

Editors and Browsers

 

HTML Structure

 

Meta-Notation

 

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 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

 

Minitest

(Starting next week)

  

Today's Exercises

 

Exercise 1C: Setting

 

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

 

Exercise 1C: Details

 

Homework