Class 1 — HTML elements, entities & attributes
        The structural layer for web pages

The interactive ear

An example of what can be done with HTML, CSS, and Javascript. However, such a complex site is not built without using sophisticated web development tools, which are beyond the scope of this course. What you lear is the fundamental concepts that underly the creation dynamic and interactive web pages.

Background

• Become familiar with the World wide Web Consortium (US) web site Welcome to Web Platform Docs
  • Expecially, follow the link Beginners guide and peruse the links under the heading Web fundamentals
  • Do the exercises at the end of the pages for the first two links in the section Web fundamentals

Content

• Administrative; creating EECS accounts; using forum (spec, questions); review report 1 purpose
• Example showing the structural, presentation and dynamic layers of a web page
  • spaceling_text.html — text only; not easy to read
  • spaceling_html.html — Structural layer - text with added HTML tags; can read the page but it does very presentable
  • spaceling.html — the complete page; CSS & Javascript added
  • spaceling.css — Presentation layer - the stye sheet
  • spaceling.js — Dynamic layer - Javascript to make the page dynamic
• HTML elements, entities, and attributes and their syntax.
  • The main points in HTML basics.
  • A basic starting structure for a web page.
• Wireframe diagrams showing the basic layout — example: An annotated structure of a report specification.
• Creating tables. The main points are here.

Exam questions

Exam questions can be based on the following sources: (1) on-line web sites, (3) classes, (4) reports, (5) exercises, and (6) course web pages. They are based on topics from the beginning of the year up to and including the class before the exam, although more recent topics will be emphasized in later exams.

Consider all concepts and terminology used in on-line web sites, reports, and classes and ask the typical questions - how, why, when, where and what -- individually and in combination. In particular, variations are based on "describe", "explain", "define", "what is meant by", etc. you may be asked to do variations of some of the programming exercises.

History of the web questions

1. Describe four reasons why HTML5 is a good thing for web developers.
2. Describe the origins of the Internet.
3. Describe the creation of the World Wide Web.

How dows the Internet work questions

1. Provide a brief definition for HTML and HTTP and explain the difference between the two.
2. Describe what are static and dynamic websites, and what is the difference between the two?
3. Describe what is an IP address.
4. Describe what the system DNS, Domain Name Server, does.

HTML questions

1. What does HTML stand for?
2. What is a markup language?
3. What is the basic structure of a markup language?
4. What is an HTML tag? What is its relationship to an HTML element?
5. Given a table, give good and correct HTML text that would render the table.
6. Given a diagram of a page, give good and correct HTML text to render the page.
7. Given an HTML file, find and describe the errors in the file.

General questions

1. What is a wireframe diagram? For what is it used? When do you use it?
2. What properties should a good wireframe diagram have?