OIM3690 - Web Technologies

2025 Fall

Session 06 (9/11)

contain

Today's Agenda

Welcome/News/Announcements

  • Quiz 1: next class
  • Office Hours
    • By appointment: in-person (preferred) or Webex (please specify)
    • VSCode extension - Live Share
  • Homework 1
    • Due 9/19
    • Please read the instructions carefully and start early!
  • 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"

What we have learned so far...

  • Tools: VSCode, GitHub, Developer Tools
  • HTML
    • Basic tags, images, links, lists, id, class, div, span, ...
  • CSS
    • Syntax
      • <style> must be located inside head!
      • selector {property: value;}
    • Box model
  • HTML Vocabulary and CSS Vocabulary

Quick Quiz

  • How do we change the text color of an element, say p?
  • How do we select all the <p> with class="blue" in CSS?
  • Is selector p#fun the same as #fun?
     <body>
    <p id="fun">...</p>     
 </body>
  • How do we move an element, say an img, to right side and the rest of the content flows around it on the left side?
  • How do we fix the element to the top-left corner of the page? Bottom-right?

Lecture

--- # Happy **Groundhog Day**! * Try: Google "*[groundhog day](https://www.google.com/search?q=groundhog+day)*" ![bg right:45% 95%](https://media.giphy.com/media/j8sVwJid3NdjG/giphy.gif)