Web Basics

HTML, CSS, and hosting a website

Brendan Chapuis

March 15, 2027

Course Home Page

Table of contents

• Website Primer
• HTML
• CSS
• Hosting Static Websites
• Bootstrap
• Developer Tools
• Wrapping Up

Website Primer

Websites

Websites are simply servers that deliver files upon request.

They return HTML files: HyperText Markup Language

The benefits of HTML

• Supported by every browser
• Very flexible formatting
• Light-weight (meaning websites load quickly)

Technically, servers can return any file type, and often will return .json, .pdf, images, etc. But .html files are the most common.

Static vs. Dynamic Websites

HTML files are static.

This means that when you request a specific page from a server, you always get the same html file.

In contrast, some websites are dynamic.

• like amazon.com, netflix.com, nytimes.com etc.

When you visit Amazon, they dynamically build a webpage specific to you.

• Query their database for what products you like, what your recent purchases were, etc.

Client-side vs. Server-side Interactivity

A dynamic website will rebuild html files for each user using data on their servers.

You can, however, have some interactivity for static websites using JavaScript.

JavaScript is another programming language that can run client-side (on your machine).

• Very good at editing html files
• allows for sites where you “click this button” to “show a figure”
• All of the interactive data visualizations you see from the NYTimes are written in JavaScript

HTML Files

We will focus on basic HTML files.

• static
• non-interactive

Really, an HTML file is just a messy document.

• similar to LaTeX, or markdown

HTML

Example HTML file

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

HTML Elements

Every HTML document is made up of a nested list of elements.

A basic element is <p></p> for paragraphs of text.

• <p> defines the start of a text paragraph
• </p> defines the end

There are header elements as well:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Adding Links

An important part of any HTML document is linking to another webpage.

Links can be added with an <a> element.

<a href="https://www.wikipedia.org/">A link to Wikipedia!</a>

Notice that this element/tag has an additional argument

• href= is an attribute for the <a> element

• download= is another possible <a> attribute

If download is set to a filename, then the linked document will be downloaded with that name instead of being opened.

Setting Div Styles in HTML

We can use the <div> to set a style attribute for a group of html elements.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello <b>world</b>!</p>
    <div style="background-color:#FFF4A3">
    <h2>Another smaller header</h2>
    <p>Some more <em>text</em> written in a paragraph block</p>
    </div>
  </body>
</html>

CSS

CSS

CSS stands for “Cascading Style Sheets”.

• Think of the inheritance chain for “cascading”

CSS controls the style of HTML elements.

It can be set in 3 ways:

1. Inline with the style= argument for a specific HTML element
2. Internal with the <style></style> element in the <head> section
3. External with a <link> to an external CSS file

External CSS File

styles.css

p {background-color: #FFF4A3;}
em {color: blue;}

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Hello <b>world</b>!</p>
    <div>
    <h2>Another smaller header</h2>
    <p>Some more <em>text</em>
    written in a paragraph block</p>
    </div>
  </body>
</html>

Class Example

styles.css

.myclass {
  color: blue;
  font-size:30px;
  }

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Hello <b>world</b>!</p>
    <div class = "myclass">
    <h2>Another smaller header</h2>
    <p>Some more <em>text</em>
    written in a paragraph block</p>
    </div>
  </body>
</html>

Class styles are set with .classname{}. Classes are set as attributes.

Hosting Static Websites

GitHub Pages

Can be turned on for any repository.

You will need to tell it which “branch” has your HTML files

• probably “main”

And whether they are in the “root” folder or “docs/” subfolder

• default is “root” which is just the repository folder
• “docs/” is useful if you want to keep your website files separate

GitHub User Page

Each GitHub user can setup a home page for their GitHub account.

It is always called:

• “www.yourusername.github.io”

The URL for my account would be “https://bchaps1999.github.io”

• But I have instead bought a custom domain https://brendanchapuis.com/
  • and configured GitHub to use that domain instead

GitHub Project Pages

Every repository can have its own page.

By default, these will all live at

• “www.yourusername.github.io/yourrepositoryname”

Website Home Pages

When you open a website location, your browser will by default open the file called

• “index.html”

So the most basic website you can create has only an “index.html” file, and maybe a “styles.css” file.

Bootstrap

Bootstrap

Bootstrap is a “framework” of pre-made HTML and CSS (and some JavaScript).

• Nice default styles, mobile-friendly, responsive layouts
• Many ready-made themes (see Bootswatch)

Load it from a CDN in the <head>, no installation needed:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Then add its classes to your elements, e.g. <body class="container"> or <a class="btn btn-primary">.

Developer Tools

Inspecting a Page

Every browser can show you the HTML and CSS of any page.

• Right-click an element, then Inspect (or Cmd+Option+I)
• The Elements panel shows the HTML tree; click an element to see its CSS

Edit the CSS live: change a color or font size and watch the page update.

• Changes are temporary; reloading the page resets them
• Useful for trying a style before you put it in your CSS file

2-Minute Exercise

1. Open any website (try brendanchapuis.com)
2. Right-click a heading, then Inspect
3. Find the element’s tag and its class
4. Change its color or font-size in the Styles pane

Wrapping Up

Where This Is Going

Writing HTML by hand gets tedious. Site generators (Quarto, Jekyll, Hugo) turn Markdown into HTML and CSS for you; this course website is built with Quarto.

Your personal website assignment (started in class 3/24, due 3/26) will be built with an AI agent.

• This primer is so you can read and check the HTML and CSS it writes
• Can you find the <head> and <body>, the links, the classes, and the stylesheet?
• Does it work when you inspect it in the browser?
• Learn more: W3Schools HTML tutorials