HTML

Welcome to the course. 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.

Here is how a normal week works. 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. Public checks help while you work; Gradescope runs the instructor’s authoritative 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 has one goal: get you from a blank machine to a webpage you wrote, opened 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. We will start with the tools.

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 all three before we go further:

1. Create a free personal account at https://github.com/signup and verify its email address. Your username appears on work you publish, so choose one you will be comfortable showing on a resume. Record the username somewhere you can find it. GitHub also strongly recommends enabling two-factor authentication.
2. Install Git for your operating system. Accept the installer defaults. VS Code’s GitHub interface still needs Git installed on the computer.
3. Install VS Code and open it.
4. Open the Extensions view in VS Code, search for GitHub Pull Requests, verify that the publisher is GitHub, and install the extension. This extension handles GitHub sign-in and pull requests later in the course. VS Code’s built-in Source Control view handles the everyday clone, commit, and push steps.
5. Select the GitHub icon in the left Activity Bar, choose Sign In, and follow the browser prompts. Return to VS Code when GitHub asks to open it.

If a computer already has Git or VS Code, you do not need to reinstall it. If you get stuck, bring the computer to the first class meeting; we will complete this setup together. GitHub’s account guide and VS Code’s GitHub guide show the same setup with screenshots.

Now make a folder somewhere you will find it again, such as csci40 in your Documents. In VS Code choose File → Open Folder… and select it. 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 fork the starter repository, clone your copy 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>, identical except for the slash. 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. Without the closing slash, the browser cannot determine where the paragraph should stop.

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.

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

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

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.

Looking forward

You can now build a page: a skeleton, headings and paragraphs in the body, lists, links, and images. That is enough to build 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. That second half, colors, fonts, layout, spacing, is a separate language called CSS, 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.