HTML essentials; Markdown and prompts

Today we did HTML backwards. Instead of learning tags one at a time, the exercise was to ask an AI to generate a page, read the code it produced, and write down at least five things you did not understand. The questions that came back from the room set up everything after it. We also gave Markdown the time it did not get last week, and put the oim3690 repository online with GitHub Pages. When AI hands you code, find the line where your understanding stops, and ask about that line.

• Seven review polls covering the URL path, DNS, 127.0.0.1, where the rest of a page comes from, the s in HTTPS, editing in the Elements panel, and 404.
• Markdown: the syntax, why it is everywhere in AI work, and formatting your own weekly note.
• GitHub Pages on oim3690, so the course repository has a live URL like your personal site does.
• Generated an index.html with AI, read it, and collected the questions it raised.
• Answered those questions: charset, lists, images, alt text, and relative paths.

In the status code section I said two things that are both the wrong way round: that 400-level codes mean the problem is on the server, and that 500 might be you or your internet connection. I said at the time that I needed to check it, and it turns out I did. Here is the right version:

• 4xx means the request was wrong. The server understood you and is telling you that what you asked for is not there, or is not allowed. A 404 on your own site is almost always a wrong filename, a wrong folder, or a capital letter where you meant a lowercase one.
• 5xx means the server failed. It received your request and something broke on its end.

The short version: 4 means you, 5 means them. This matters this week, because if your GitHub Pages URL returns 404, the fix is on your side and you can find it.

When you open a file with Live Server, the address bar shows something like http://127.0.0.1:5500. That number is not a website on the internet. It is a name your computer has for itself, usually written as localhost. A server running there is running on your machine and is reachable only from your machine.

So if you send that address to a classmate, they get nothing. If you paste it into a Canvas submission, I get nothing. Live Server is for seeing your own changes instantly while you work. GitHub Pages is for the URL you give to other people.

AI tip: When an AI tells you to "open http://localhost:3000", it is describing something running on your own computer. That is fine while you build. It is never the link you share.

Markdown is a small set of plain-text shortcuts for formatting. HTML marks up a document with tags; Markdown does a lighter version of the same job with punctuation, and a platform like GitHub turns it into formatted text.

The syntax worth knowing now:

• # for a top-level heading, ## for the next level down, and so on.
• - at the start of a line for a bullet, 1. for a numbered list.
• Backticks around code so it displays as code instead of being turned into a link.
• Three backticks on their own line to open and close a block of code. Put the language name after the opening three, like ```javascript, and it gets colored.

To see how it will look before you push, open the file in VS Code and use the command palette: Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS), then type "Markdown: Open Preview to the Side".

Markdown is what you write to AI as much as what AI writes back to you. Instruction files that configure a coding agent are Markdown. README files are Markdown. When you paste code into a question online, people ask you to format it in Markdown.

Same steps as your personal site, on a different repository:

1. Open the repository on GitHub. From GitHub Desktop, Repository → View on GitHub is the shortest route.
2. Settings → Pages.
3. Under Source, choose Deploy from a branch, then branch main and folder / (root), and Save.
4. Wait. The first build takes a few minutes and there is nothing to click while it runs.

Your URL is https://<your-github-username>.github.io/oim3690/.

After that, the loop for every change is the same one: edit the file, save it, commit, push, wait for the build, refresh. A change that is not saved does not get committed, and a change that is not pushed does not reach GitHub. In VS Code an unsaved file shows a dot instead of an X on its tab.

Both can sit at the root of the same repository, and they are shown in different places.

• index.html is what a browser loads when someone visits your Pages URL with no path after it.
• README.md is what GitHub displays on the repository page itself, underneath the file list. It is the front door for anyone reading your code.

Your oim3690 repository wants both. The README is where the record of your work goes, and the index.html is the page.

The main exercise today: give an AI roughly the same prompt, ask for a plain HTML page, save the result into oim3690/index.html, and read it.

The instruction was to write down at least five things you did not understand, compare with a neighbour, and bring one question per pair. That list is the point of the exercise.

The first version an AI gives you is rarely the last one. The page shown in class went through three rounds. The first was missing information in the head. The follow-up prompt was vague on purpose ("this does not look like a complete head to me") and it still worked. The second round added styling. The third fixed an image that was not loading. Asking again is normal, and you do not have to phrase it perfectly.

AI tip: An agent inside your editor can see the files in your folder. A chat window in a browser cannot. When you ask a browser chatbot about an image in your project, you have to describe where the file is. When you ask the agent, it can look.

<meta charset="UTF-8">. The charset attribute tells the browser which character encoding the file uses, meaning how the bytes in the file map to letters. UTF-8 covers essentially every character in every language. Leave it out and accented letters, curly quotes, and any non-English text can arrive as garbage.

<ul>, <ol> and <li>. An <li> is one list item. It goes inside a list, and there are two kinds: <ul> is an unordered list, which renders as bullets, and <ol> is an ordered list, which renders as numbers. Changing one tag changes the whole list.

Where to look a tag up. Hover over any tag in VS Code and a tooltip appears with a short description and a link to MDN. MDN Web Docs is the reference for HTML, CSS, and JavaScript, and it is worth trusting over a search result.

Images. An external URL and a local file behave differently.

An external URL works anywhere: <img src="https://...">. If your AI used an Unsplash URL, that is a free image service, and some of their URLs deliberately return a different random picture each time. If you want a specific picture, that is not the tool.

A local file lives in your repository, and the src is the path from the file doing the asking:

<img src="images/headshot.jpg" alt="A short description of the picture" width="200">

Read that line one attribute at a time.

• src is relative to the HTML file, not to the site. If index.html is at the root and the picture is in an images/ folder next to it, then images/headshot.jpg is correct. Move the picture and the path has to move with it. This is the same idea as the path in a URL, which is the first thing we polled on today.
• alt is the text a browser shows when the image cannot load, and the text a screen reader speaks to someone who cannot see it. Write what the picture shows.
• width on its own keeps the proportions. Set a width in pixels and leave the height alone, and the picture scales without distorting.

Put your images in an images/ folder from the start. CSS and JavaScript will get their own folders later.

oim3690/
├── index.html
├── README.md
├── images/
└── logs/
    ├── wk01.md
    └── wk02.md

1. Check the name of your course repository. It has to be exactly oim3690. Not oim_3690, not OIM3690, not oim-3690. The checks look for that name and nothing else, so a repository full of good work under a different spelling scores as an empty one. If yours is wrong, rename it: Settings → Repository name → Rename. GitHub keeps the old address working, so nothing breaks. While you are there, make sure the repository is public, and that you only have one of them.
2. Make sure the URL you submitted actually opens for someone else. Paste it into a private browser window and see what happens. An address starting 127.0.0.1 or localhost only works on your own machine. If yours was wrong, resubmit here: 🔗 Submit Your OIM3690 Repo.
3. Push an index.html to the root of oim3690, and turn on GitHub Pages for it if you did not get there in class.
4. Write logs/wk01.md and logs/wk02.md, both in the logs/ folder. The prompts are what you worked on, what gave you trouble, something new you learned, and anything you noticed about working with AI. Cover as much of that as you can, and have something there every week. What to write has examples. Put the questions your pair collected today into wk02.md; we will use them on Thursday.

Checkpoint 1 is due Sunday 9/13. I said Saturday in class, so you have an extra day. Every checkpoint from here on closes on the Sunday that ends the week it covers. It is checked directly on GitHub and there is nothing to submit. Both weekly notes are on the list, and together they are worth more than any other single item.

Thursday we stay with code that AI wrote and go further into working with an agent instead of a chat window.