Computer Science 302:

Web Development

Gregory M. Kapfhammer

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

Markup languages

HTML

Tags

Formatting the content

Giving meaning to the content

HTML became "messy"

Browser behavior became unpredictable

Why is this not good?

Your own experiences?

Syntax errors

HTML Validators

"Linting"

We need a better approach!

HTML5

See Figure 3.9 for more details

Headings

Paragraphs and divisions

<div> creates a logical grouping of content

See Figure 3.15 for nesting of this tag!

<a href> creates a link

Different entities to which you can link?

See Figures 3.13 and 3.14 for more details!

Relative and absolute referencing

File System Navigation

Access Your Web Assets

Examples of Web Assets?

Above

Below

Child

Parent

Sibling

Root

Default Document

Let's Have Some Fun!

Cover the right side of Table 3.1

Try to code the covered side

Use the Figure 3.16 for reference

Images

Character Entities

Lists

<div> with id or class

HTML5 Semantic Tags

Compare Figures 3.19 to 3.20

Investigate the various semantic tags

Example of semantic tag in the slides?

Learn more about code editors

Learn more about code editors

Learn more about code playgrounds

Any questions about HTML?