OIM3690 - Web Technologies

2025 Spring

Session 04 (1/30)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Class Review
  • Exercise Feedback
  • Session 04 - Styles

Welcome/News/Announcements

  • Exercises
    • You need to create index.html and sitemap.html under WebTech folder
    • Image file(s) must be located under WebTech/images folder
  • 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

How to Ask Questions via Slack/GitHub/Email

  • What were you trying to do?
    • The problem and context
  • What did you do?
    • Any relevant code snippets, or GitHub link to the code
  • What did you expect to happen?
  • What actually happened?
    • Screenshots or descriptions of any strange behavior or errors
    • Any relevant debug console or terminal output, such as error messages

What we have learned so far...

  • HTML
    1. basic tags
    2. images
    3. links
  • Quick Quiz:
    1. What attributes does <img> have?
    2. What attributes does <a> have?
    3. How do we use an image as a link?

Debugging Practice

  • Debugging hyperlinks (via Reddit)
  • From exercises:
    • <a href="nba.com">NBA</a>
    • <head>
  ...
</head>All About XXX
<hr>
<img ...> 
<body>
  ...
</body>
    • <a HREF="https://www.babson.edu">Babson</a>

HTML Coding Conventions

  • Use lowercase for
    • element names - i.e. <head>
    • attribute names - i.e. <img alt="..."
    • file/folder names - i.e. index.html
      • because many web servers (Unix, Apache) are case-sensitive
  • Always specify alt, width and/or height for images
  • Always remember to format your code - Using prettier in VS Code
    • Alt + Shift + F (⌥ Option + Shift + F on macOS)

Exercise Feedback

  • Please check Issues on your GitHub repository WebTech.
    • Reply if we need to continue the conversation.
    • Reply (with evidence) and Close if you think it is fixed.
  • If you have any question regarding class content/demo code

Session 04 - Styles

3. *"What if I need more time?"*