Understanding the basics of websites and HTML
March 31, 2024
Websites are simply servers that deliver files upon request.
They will always return HTML files
The benefits of HTML
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.
When you visit Amazon, they dynamically build a webpage specific to you.
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).
We will focus on basic HTML files.
Really, an HTML file is just a messy document.
Hello world!
<!DOCTYPE html> tells the computer this is an html document
Every HTML document has two key components:
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<!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>Hello world!
Some more text written in a paragraph block.
An important part of any HTML document is linking to another webpage.
Links can be added with an <a> element.
Notice that this element/tag has an additional argument
href= is an attribute for the <a> elementdownload= is another posible <a> attributeIf download is set to a filename, then the linked document will be downloaded with that name instead of being opened.
We can set bold and italics text using the default <b> and <em> tags.
<div> elements are html tags for divisions or sections.
<!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>Hello world!
Some more text written in a paragraph block
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>Hello world!
Some more text written in a paragraph block
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>Hello world!
Some more text written in a paragraph block
Notice that our “text” emphasis ends up red even though it is within the <div> tag.
Hello world!
Some more text written in a paragraph block
This is because HTML elements inherit attributes and styles from parent 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 style="background-color:#FFC0C7;">text</em> written in a paragraph block</p>
</div>
</body>
</html>Our “text” inherits from:
<html>
<body>
<div>
<p>
<em>Instead of setting styles for each tag, set them for all copies of an element.
CSS stands for “Cascading Style Sheets”.
CSS controls the style of HTML elements.
It can be set in 3 ways:
style= argument for a specific HTML element<style></style> element in the <head> section<link> to an external CSS fileNow that we have seen CSS, it is useful to talk about one more HTML element attribute:
Any HTML element can be given a class.
You can specify styles for a specific class in your CSS.
Class styles are set with .<classname>{}. Classes are set as attributes.
Different elements can reference the same class.
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.
I recommend checking out W3Schools’ HTML Tutorials for more information on HTML and CSS.
We have covered the very basics:
<head> and a <body>There are many services for hosting static websites.
The one we will use is GitHub Pages.
Can be tuned on for any repository.
You will need to tell it which “branch” has your HTML files
And whether they are in the “root” folder or “docs/” subfolder
Each GitHub user can setup a home page for their GitHub account.
It is always called:
The URL for my account would be “https://www.matdehaven.github.io”
Every repository can have its own page.
By default, theses will all live at
When you open a website location, your browser will by default open the file called
So the most basic website you can create has only an “index.html” file, and maybe a “styles.css” file.
Bootstrap is a “framework” for HTML websites
The goals of Bootstrap are
Bootstrap has…
Bootstrap can be installed, or you can use the Content Delivery Network (CDN) to load in the <head> of any HTML file.
There are various services for building websites that are “point-and-click”:
You lose some freedom but don’t need to know any programming.
When hosting files on Google Drive (used with Google Sites) or Dropbox, some people won’t be able to open them.
But if you find yourself after this course intimidated by maintaining your own website, Google Sites is by far the easiest option.
Simplest HTML file website on GitHub Pages
Adding another page
Adding a CSS style file
Adding Bootstrap