Semantic HTML; CSS essentials

Today we finished HTML with tags that have no closing tag, meta tags and semantic tags, then wrote the first CSS rules inside about-me.html. Classmates gave lightning talks on AI trained on AI-generated text and on NVIDIA buying Hugging Face. If a CSS rule has no effect, check the spelling of the property first.

In class I made mine by copying index.html. If you do not have one, generate it in your oim3690 repository:

1. Ask your agent for about-me.html with a heading, a paragraph, a list and at least one link.
2. Include one image from your images/ folder and one from a URL, each with an alt that describes it.
3. Ask for a header, a main area and a footer.
4. Read the file before you commit it, and mark every tag you do not recognize.

The same steps are on slide 27 of HTML Essentials. Then add the <style> block below.

A <style> block goes inside <head>, just before </head>:

<style>
  body {
    background-color: green;
    font-family: "Comic Sans MS", sans-serif;
  }
  h1 {
    color: yellow;
  }
</style>

A rule on body styles the whole page, and a rule on h1 styles the main heading. You can write a color in several ways:

• a name, such as green
• red, green and blue values from 0 to 255, such as rgb(255, 0, 100)
• a hex code, such as #006644, which is Babson green from Babson's brand page

The browser skips a property it does not recognize and shows no error, so backgroud-color does nothing.

To use a font from Google Fonts, pick one and ask your agent, for example "Use Roboto Mono for h1 from Google Fonts." It adds a <link> to the head and a font-family rule. Reload the page and check that the heading changed.

Keep adding rules to about-me.html, and try setting one element to Babson green.

Most tags come in pairs because they wrap content: <p> wraps a paragraph and <a> wraps the link text. A few hold no content and have no closing tag: <img>, <meta>, <link>, <br> and <hr>. Placing text on top of an image takes CSS positioning, which comes later.

• alt describes the image. The browser shows it when the image cannot load, and screen readers read it aloud.
• title shows a tooltip when you hover over the image.

If you see the alt text where your picture should be, the browser could not fetch the file. Check that the src matches the file name exactly, including the extension and any capital letters.

• <title> sets the text on the browser tab. Without it, the tab shows the file name.
• <meta name="description"> is the summary search engines often show under your link.
• Open Graph tags (og:title, og:description, og:image) and Twitter card tags control the preview card when someone shares your link on social media, Slack or WhatsApp.
• <meta name="author"> names who made the page.

A correction on <meta name="keywords">: Google has ignored it since 2009, and Bing may treat a long keyword list as spam. Leave it out. Ask your agent to add a description and Open Graph tags to your personal site.

A <div> groups elements into a box and says nothing about what is inside. Many sites nest divs inside divs whether they need them or not. Semantic tags group content the same way and name it:

• <header> for the top of the page
• <nav> for the navigation links
• <main> for the main content
• <section> for a group of related content
• <footer> for the bottom of the page

Screen readers and search engines use these names. When you ask an agent for a page, ask it to use semantic tags.

MDN's Structuring documents shows a typical page layout and a way to plan a site: sketch the pages on paper, list the content, group it, then build.

For accessibility, keep heading levels in order, so an <h3> sits under an <h2>, and run Lighthouse from the DevTools tabs on your important pages.

The first talk covered what happens when AI models are trained on text other models wrote. The second covered NVIDIA's agreement to buy Hugging Face, the platform where developers share open models and datasets. Claim your own slot on the lightning board.

Clarifications from the discussion:

• Transcribing audio and video into text, as OpenAI did with its Whisper model, produces real data in a new form. Synthetic data is text that a model writes itself.
• Meta bought a 49% stake in Scale AI in 2025 and hired its founder. It did not acquire the company.
• The slides for one of the talks were made with NotebookLM, which turns your own notes and readings into summaries, slides and an audio walkthrough.

The open part of an open model is its weights, the numbers the model learned during training. The line y = ax + b has two of them. Large models have hundreds of billions, so they need a data center, while a model with a few billion runs on a laptop through Ollama. The Qwen family on Hugging Face comes in both sizes, and Babson has its own organization page there: https://huggingface.co/babson.

The clip in class came from Andrew Ng's interview with Silicon Valley Girl, and I recommend watching all of it. He talks about what students and new graduates should learn, the fears people have about AI, how he uses AI in his own work, and where the opportunities are for people who want to build.

Mini Project 1: the pace to aim for is your client interview done this week, with PROPOSAL.md, PRD.md and your sketch committed to the project repository.

In your oim3690 repository:

1. about-me.html, generated and read, with a <style> block of your own rules.
2. logs/wk03.md, with the same four prompts as the last two weeks.

Keep adding what we learn to your personal site.

On Thursday we will cover CSS layout and read the CSS an AI writes.