OIM3690 - Web Technologies

2025 Spring

Session 09 (2/20)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Lecture 09 - HTML Forms

Welcome/News/Announcements

  • Homework 1: Grades will be posted on Canvas by the end of this week
  • Project will be posted on Canvas next week
  • Quiz on CSS: Next week
  • Communications:
    • Meet with me in person during office hours at least once this semester.
    • Email - specify course # in subject title, e.g., "OIM3690: GitHub settings"
    • Use Slack/GitHub when asking code-related questions
  • Questions?

What we have learned so far...

  • HTML
    • Basic tags, images, links, lists, id, class, div, span, tables
    • Block-level elements VS. inline elements
  • CSS
    • Syntax
    • Box model
    • Selectors - basic, advanced, pseudo-elements ::, pseudo-class :
    • internal vs. external vs. inline

Quick Quiz

  1. By default, a table caption will be center-aligned below a table.
  2. img {width:100%;} (from ex08-2.html) means the image fills the entire web page.
  3. border-width: 10px; means 4 borders (of the element) have same width 10px.
  4. padding: 10px 20px; means width of padding-top is 10px and others are 20px.
  5. margin: 50px 100px 0; means margin-top is 50px, margin-left and margin-right are 100px, and there is zero margin-bottom.
  6. How do we create an Audi logo using CSS?

Recommendations

Session 09

--- # Social Time <!-- Answer the following question(s) using ***Zoom Chat*** or ***Zoom yes/no buttons*** (they may have nothing to do with class content, so you may choose not to participate):

Small-group activity (via *break-out room* and/or google doc [playground](https://docs.google.com/presentation/d/1MDGyvYT3wzQBfMdbbf8teDywTlGz7xZa0sZVHzN7_dw/edit#slide=id.p)): 1) Get to know everyone 2) Introduce your project idea 3) Find ***two things*** that are common to everyone in the breakout room (besides *gender/age/college/concentration*)

--- # Quick Quiz (cont.) 1) What is the commonly used **tag** to embed other content/document? * `<iframe>` 2) What is `svg`? * Scalable Vector Graphics

--- # Debugging Practice - **Homework 1** - *index.html* & *sitemap.html*: - In CSS: - `font-size:16` -> `16px`? `16pt`? - `0px` -> `0` - `<img ... width="50px">`[`width` as attribute of `img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width) - `<a href="http://127.0.0.1:5500/ex01.html">...</a>` - ```html <h3> <ol> <li>...</li> </ol> </h3> ``` - `<h2 id="About Me">` * [Naming convention in HTML](https://courses.cs.washington.edu/courses/cse154/17au/styleguide/html-css/naming-conventions-html.html)