HTML

Over the next fifteen weeks you are going to learn to make a computer do your tedious work for you: scrape a website, rename a thousand files, answer a question from a stack of documents, and serve a page to the whole internet. Programmers call this automating the boring stuff. We start on the web, spend the bulk of the term on Python, and finish by building real web applications backed by a database.

Each topic has a reading like this one, which stands in for a textbook. Most weeks have a lab that you develop on GitHub and submit through Gradescope. Gradescope runs automated tests, and you resubmit until you score 100%. The labs are all due the Wednesday after they are assigned. There is a short quiz most weeks, taken on paper and open-note, bring any notes you like, but no electronic devices. Every two to three weeks there is also a project where you build something and put it on the internet. There are no exams.

Today you will write a webpage and open it in a browser. By the end of your first project you will have a real site live on the internet with your name on it.

The Tools

Programmers write code in a text editor, not a word processor. A word processor like Google Docs stores fonts, margins, and formatting alongside your words that you never see; a text editor stores exactly the characters you type and nothing else, which is what a computer program has to be. We will use Visual Studio Code (“VS Code”), a free editor that professional programmers actually use. We will also use GitHub to store each assignment and git to record and send changes. Git is the version-control program on your computer; GitHub is the website that holds a synchronized copy.

Set up before the first lab

Complete the Course Setup before starting the first lab. It installs VS Code and Git, creates your GitHub account, and connects them. The first lab then walks through creating an assignment repository, cloning it, and submitting it.

For this reading, open the csci40 folder you made during setup with File → Open Folder… in VS Code. VS Code now treats that folder as your workspace, and the Explorer panel on the left shows its contents.

A website is a folder of files that link to each other. VS Code, your browser, and git all work with that folder as a unit. Get in the habit now of keeping every file for a project inside one folder.

Create the first file. In the Explorer panel, click the New File icon and name it index.html. The .html part is the file extension, and it is a promise about what is inside: a browser that sees .html expects to find HTML. Type a single line into the file so it is not empty:

<p>Hello, world.</p>

Save it with File → Save (or Ctrl+S / Cmd+S). An unsaved file in VS Code shows a dot instead of an X on its tab, and the browser reads the file from disk, so an unsaved change is a change the browser cannot see. This is the single most common reason a beginner’s page “doesn’t update”: the file was never saved.

Find index.html in your file manager (not in VS Code) and double-click it, or drag it onto a browser window. The browser shows the words Hello, world. on an otherwise blank page. You have written a webpage. Keep both windows visible, VS Code on one side and the browser on the other, because web development uses a repeated loop: edit the file, save, switch to the browser, and reload.

This file is practice for the reading. The first lab will have you create your own repository from a course template, clone it inside the csci40 folder with VS Code, and repeat this edit-save-reload loop there.

What a Webpage Is

That file you opened was just text, and yet the browser knew to show Hello, world. as a paragraph. The reason is the part you typed around the words: <p> and </p>. Those are HTML, which stands for HyperText Markup Language.

The word to notice is markup. HTML is a markup language: you write your content as plain text and then mark it up by wrapping each piece in a label that identifies it as a paragraph, heading, link, or another element. You describe what you want; the browser decides how to draw it. This is a different kind of language than the Python we will write later, where you spell out how to do something step by step. Markup is easier to start with, so we study it before Python.

Those labels are called tags.

Tags and Nesting

A tag is a word between angle brackets, like <p>. Tags almost always come in pairs: an opening tag <p> and a closing tag </p>. The closing tag starts with a slash and contains only the tag name, while the opening tag may also contain attributes. Together with the content between them, the pair is called an element.

The opening tag says “a paragraph starts here,” the closing tag says “it ends here,” and the browser formats everything in between as a paragraph. HTML permits a few closing tags to be omitted in specific situations, but writing them explicitly makes the structure clear and avoids relying on the browser’s error-correction rules.

The p in <p> is one of a fixed vocabulary of tags the browser understands. A few you will use constantly:

Headings, <h1> through <h6>, from <h1> (the big title) down to <h6> (a small sub-sub-heading).
Paragraphs of text, <p>.
Anchors, <a>, better known as links.
Images, <img>.
Lists: <ul> for unordered (bulleted) and <ol> for ordered (numbered), whose items are <li> elements.

Elements can contain other elements, and this is where HTML gets its structure. When one element sits inside another we say it is nested, and the inside element is a child of the outside one. Nesting is how a list holds its items:

<ul>
    <li>automate the boring stuff</li>
    <li>put it on the internet</li>
    <li>get paid</li>
</ul>

The <ul> element contains three <li> children and then closes. The browser would render the list identically on one line, but indentation helps you match each opening tag with its closing tag. Notice that the tags nest cleanly: each <li> opens and closes entirely inside the <ul>, never crossing over its boundary. Tags that overlap instead of nesting (<ul><li></ul></li>) are invalid.

The browser uses the tags to decide where the list items begin and end. Pressing Enter in the source is not a substitute for starting a new paragraph or list item: in ordinary HTML text, runs of spaces and newlines collapse to a single space. Use indentation to make the source readable and elements to give the page its structure.

HTML as a Tree

The browser converts nested HTML into a tree of elements. Programmers call this tree the Document Object Model, or DOM. The tree makes containment visible: a line connects each element to the elements directly inside it.

In the tree, <body> is the parent of <h1> and <ul> because they sit directly inside it. Those two elements are its children, and they are siblings because they share the same parent. The <ul> is the parent of the two <li> elements, which are another pair of siblings. The diagram leaves out the text inside the elements so you can focus on the nesting.

To turn HTML into a tree, make one node for each element and attach it to the element that directly contains it. To go the other direction, start at the top, write a node’s opening tag, write its children from left to right, and then write its closing tag. Indentation does not change the page, but it makes the levels of this tree visible in the source code.

This vocabulary-of-tags idea is common enough to be a joke among programmers.

FoxTrot comic: two kids play a game they call 'HTML tag', shouting tag names like <b>, <head>, <div>, and <strong> as they chase each other.

(If a couple of those tags are new, that is fine, <strong> makes text bold, <div> is a generic box we will use often when we get to CSS.)

The Skeleton of a Page

An HTML page has a standard skeleton around its content, and every page you write this term will start from it.

First, tell the browser what kind of file this is and wrap the whole document in a single <html> element:

<!DOCTYPE html>
<html>
</html>

The first line, <!DOCTYPE html>, is a declaration that reads “this is modern HTML.” It is not a normal element and has no closing tag; treat it as a required first line. Everything else on the page nests inside the one <html> element.

An HTML document has two parts, and they become its two children: a <head> for information about the page, and a <body> for the content you actually see. Putting them together gives the skeleton every page starts from:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Page</title>
    </head>
    <body>
        <h1>My First Page</h1>
        <p>Hello, world.</p>
    </body>
</html>

Read it from the outside in. The <head> holds the <title>, which is the text the browser shows in the tab and the name a search engine prints, though it is not shown on the page itself. The <body> holds what appears in the window: here an <h1> heading and a <p> paragraph. Paste this into index.html, save, and reload the browser: the tab now reads My First Page, and the page shows a large heading above your paragraph. Change a word between two tags, save, and reload to see the change.

Can you predict what happens if you move the <h1> line above the <body>, into the <head>? Try it.

The browser may still show the heading because it repairs some invalid HTML as it builds the DOM. A page that looks right can therefore have a different tree from the one you intended. Move the heading back into <body> so the source states the structure explicitly.

Links and Images

Two elements turn a page into part of the web: the link and the image. Both introduce a new idea, the attribute, extra information written inside the opening tag as name="value".

A link is an <a> element whose href attribute says where it goes:

<a href="https://rtealwitter.com">my webpage</a>

The text between the tags, my webpage, is what the reader sees and clicks; the href is the destination they are sent to. Swap the destination and the visible text stays the same, which is worth remembering the first time a link sends you somewhere surprising: the words and the href are independent.

An image is an <img> element, and it is unusual in two ways:

<img src="cat.jpg" alt="a photo of my cat">

First, it has no closing tag and no content between tags, because the content is the file it points to, so there is nothing to wrap. Second, it carries two attributes that matter: src, the filename or URL of the image, and alt, a text description. The alt text is what a blind reader’s screen reader speaks aloud and what shows if the image fails to load: it keeps your page usable by people who cannot see the image. We will come back to accessibility, but start the habit now: every <img> gets real alt text.

The browser resolves cat.jpg relative to the HTML file’s location. If index.html and cat.jpg are in the same folder, that name is enough; if the image is in a folder named images, use src="images/cat.jpg". The same rule applies to a link such as href="about.html": it opens another page in the same folder. Check the folder, spelling, and capitalization when a link or image fails.

Opening a page from your disk gives it a file: address that refers to your computer. Publishing puts those files on a web server, where other people can request them through an https: address. Keeping links relative lets the files move together from your computer to the server.

Looking Forward

Use the skeleton, headings, paragraphs, lists, links, and images in Project 0, where you will make a small site and publish it to the internet.

Every page we have written is black text on a white background in the browser’s default font, because HTML only says what each piece of content is, not how it should look. CSS specifies colors, fonts, layout, and spacing, and it is next class. For now, keep a few references within reach as you work: this HTML cheatsheet for the tags, the matching CSS cheatsheet for next week, and Shay Howe’s Learn to Code HTML & CSS when you want the fuller story. No programmer keeps every tag in their head; keeping the reference open is the job, not a crutch.