Websites, HTML, CSS

Understanding the basics of websites and HTML

Matthew DeHaven

March 17, 2025

Course Home Page

Lecture Summary

Static vs. Dynamic
HTML
CSS
Bootstrap

Website Primer

Websites

Websites are simply servers that deliver files upon request.

They will always return HTML files

HyperText Markup Language

The benefits of HTML

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

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 Document Structure

<!DOCTYPE html> tells the computer this is an html document

<html>

</html>

These are opening and closing commands that wrap the entire html document.

Every HTML document has two key components:

“head” for metadata and settings
“body” for content

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>

Example HTML with Headers

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>A Big Header</h1>
    <p>Hello world!</p>
    <h2>Another smaller header</h2>
    <p>Some more text written in a paragraph block</p>
  </body>
</html>

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>

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 posible <a> attribute

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

Bold and Italics

We can set bold and italics text using the default <b> and <em> tags.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello <b>world</b>!</p>
    <h2>Another smaller header</h2>
    <p>Some more <em>text</em> written in a paragraph block</p>
  </body>
</html>

Divs

<div> elements are html tags for divisions or sections.

commonly used to group portions of a html document together.

<!DOCTYPE html>
<html>
  <head>
  </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>

Divs

<div> elements are html tags for divisions or sections.

commonly used to group portions of a html document together.

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>

Setting Div Styles in HTML

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

Setting Styles in HTML

In fact, every HTML element has a style= attribute.

<!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 style="background-color:#FFC0C7;">text</em> written in a paragraph block</p>
    </div>
  </body>
</html>

Setting Styles in HTML

In fact, every HTML element has a style= attribute.

Inheritance

Notice that our “text” emphasis ends up red even though it is within the <div> tag.

This is because HTML elements inherit attributes and styles from parent elements

but the lowest level element has priority

Inheritance Example

<!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 style="background-color:#FFC0C7;">text</em> written in a paragraph block</p>
    </div>
  </body>
</html>

Our “text” inherits from:

<html> then <body> then <div> then <p> then <em>

Setting Styles in the Header

Instead of setting styles for each tag, set them for all copies of an element.

<!DOCTYPE html>
<html>
  <head>
  <style>
    p {background-color: #FFF4A3;}
    em {color: blue;}
  </style>
  </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>

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:

Inline with the style= argument for a specific HTML element
Internal with the <style></style> element in the <head> section
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>

Setting Classes

Now that we have seen CSS, it is useful to talk about one more HTML element attribute:

classes

Any HTML element can be given a class.

You can specify styles for a specific class in your CSS.

Class Example

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

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 Example Continued

Different elements can reference the same class.

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 class="myclass">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>

Classes Summary

Classes are a powerful way to group different style formatting and apply them across elements.

You can define your own classes and the specific formating for those classes.

They can also be used by JavaScript for some interactive elements, but we won’t cover that.

Learning More HTML and CSS

I recommend checking out W3Schools’ HTML Tutorials for more information on HTML and CSS.

We have covered the very basics:

HTML files are documents
Consist of a <head> and a <body>
The body has nested elements which have attributes
Styles are set inline or in CSS files
Elements inherit styles and attributes

Hosting Static Websites

There are many services for hosting static websites.

The one we will use is GitHub Pages.

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://www.matdehaven.github.io”

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

GitHub Project Pages

Every repository can have its own page.

By default, theses 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 5

Bootstrap is a “framework” for HTML websites

Includes HTML and CSS templates and pre-made elements
And some JavaScript functions for interactivity

The goals of Bootstrap are

fast and easy
mobile-friendly
responsive designs

Bootstrap Benefits

Bootstrap has…

Nice default stylings
- And multiple “themes” to choose from
dynamic resizing
- ex. on mobile, your website collapses menu buttons together
fluid “containers” for your content

Bootstrap CDN

Bootstrap can be installed, or you can use the Content Delivery Network (CDN) to load it in the <head> of any HTML file.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    
  </body>
</html>

Bootstrap Features

Buttons
Navbars (menus at the top of the screen)
Bootswatch Themes
much more

Bootstrap Buttons

Bootstrap feautues are implemented through special “classes”

for buttons: “btn” class and “btn-primary” for the subtype

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <button type="button" class="btn">Button</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>
  </body>
</html>

Bootstrap Buttons

Bootstrap Navbars

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Home</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="research.html">Research</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="test-cv.pdf">CV</a>
            </li> 
          </ul>
        </div>
      </div>
    </nav>
</html>

Bootstrap Navbars

These links don’t go anywhere, but you can see how the navbar looks.

Bootstrap Navbars - Smaller Screen

And a huge benefit of Bootstrap is that it is mobile-friendly.

Bootstrap Custom Image Borders

We can use Bootstrap to easily mask images. Notice the image is not quite square, so it is a tad squished.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <img src="figs/profile-pic.jpg">
    <img src="figs/profile-pic.jpg" class="rounded">
    <img src="figs/profile-pic.jpg" class="rounded-circle">
  </body>
</html>

Boostrap Default Theme

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container-fluid p-5 bg-primary text-white text-center">
      <h1>My First Bootstrap Page</h1>
      <p>Lorem ipsum dolor sit amet</p> 
    </div>
    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>        
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
    <div class="container-fluid text-center" style = "margin:30px">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
    </div>
  </body>
</html>

Boostrap Default Theme

Bootswatch Theme: Darkly

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container-fluid p-5 bg-primary text-white text-center">
      <h1>My First Bootstrap Page</h1>
      <p>Lorem ipsum dolor sit amet</p> 
    </div>
      
    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>        
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
    <div class="container-fluid text-center" style = "margin:30px">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
    </div>
  </body>
</html>

Bootswatch Theme: Darkly

Bootswatch Theme CDNs

You can view all the available Bootswatch themes available by CDN.

There are many options to choose from!

Bootstrap Summary

Bootstrap is a powerful tool for building websites.

It is easy to use and mobile-friendly
It has many pre-made elements and themes
It can be loaded from a CDN

If you are interested in learning HTML and Bootstrap, I recommend the W3Schools’ Bootstrap Tutorial.

Other Website Templates:

HTML5UP

Single page websites, mobile-friendly, lots of options

Minimial Academic Bootstrap Website

by me, one of the options to use for your next problem set

What About Google Sites?

There are various services for building websites that are “point-and-click”:

Google Sites (free!), Squarespace, Wix, Wordpress

You lose some freedom but don’t need to know any programming.

But if you find yourself after this course intimidated by maintaining your own website, Google Sites is by far the easiest option.

Summary

Lecture Summary

Static vs. Dynamic
HTML
CSS
Bootstrap

Live Coding Example

Simplest HTML file website on GitHub Pages
Adding Bootstrap

Coding Exercise

In VS Code, add the Live Preview extension for previewing HTML files.

Create a simple HTML file and preview it
- in VS Code
- in a browser