OIM3690 - Web Technologies

2025 Fall

Session 04 (9/04)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Class Review
  • Exercise Feedback
  • Lecture

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...

  • Software / tools
    • Git, GitHub, VS Code, Chrome DevTools
  • HTML
    • basic tags
    • images
    • links

🙋 Quick Quiz

  • What attributes does <img> have?
  • What attributes does <a> have?
  • How do we use an image as a link?

Debugging Practice

  • Debugging hyperlinks (via Reddit)
  • <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 Mac)

Lecture

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