Web Foundations

A 2-hour practical introduction to HTML & CSS

Overview

This workshop is designed for those who want to better understand how the web works and how to present information online.
As the Internet has been around since 1983 (See A Brief History of the Internet), it's important to recognize that the web has been around for +40 years. There has been much revamping of methods, though with each evolution, backward compatibility has been maintained, leading to multiple ways to achieve the same outcome. Newer methods are cleaner, but they rely on modern browsers to work properly.
This workshop series aims to leverage well supported features, though its always important to test your web app on multiple browers.

No prior coding experience is required.

  • Duration: 2 hours
  • Outcome: A simple, styled webpage

Setup Using Visual Studio Code (VS Code) with WYSIWYG extension

Steps:

  1. Install VS Code (https://code.visualstudio.com/Download)
  2. Launch VS Code
  3. Click Extensions icon on left navigation pane
  4. Using the left search field, type "ritwickdey.LiveServer"
  5. Click to Install Live Server extension...

Website Setup

Steps:

  1. Create a folder named "website" on your computer
  2. From with VS Code click File>Open Folder>[Navigate toe the "website" folder]
  3. Create a new file called "index.html" by clicking the "New File" icon next to the Explorer pane
  4. From within "index.html", type "!" Then press Enter on your keyboard
  5. You should now have the skeleton of a web page
  6. Right-click the file in the Explorer pane and click "Open with Live Server"

HTML Basics (Structure)

HTML provides the structure and meaning of your content. HTML stands for Hyper Text Markup Language, and it's syntax consists of elements which have an:

  • opening tag
  • content
  • closing tag
Certain tags know as Void elements are self closing since they have not content. Be sure to add a '/' at the end of the opening tag (before the '>') for backwards compatibility. Your web browser knows how to render many tags, and each tag can have zero or more attributes. Attributes are defined by the attribute name, followed by '=', and the value should be surrounded by quotes.

Example element

Looking at our index.html file, can you identify the tags? Notice how they are nested. The basic tags and their purpose are:

  • <html> is the root, every of the tag resides within.
  • <head> for the title, metadata, and indicating required files.
  • <body> is for visual content.

Common visual elements include:

  • Headings (H1, H2) for sections
  • Paragraphs (p) for text content
  • Links (a) to other webpages or websites
  • Lists (ul, ol) for organizing content
  • Images (img)
For a complete list of common elements and their usage, visit HTML cheatsheet for syntax and common tasks.

Displaying Images

To add an image to your webpage do the following:

  1. Create an "images" folder
  2. Paste the image you'd like to add to your webpage into the folder
  3. Add an image element to your index.html and set the 'src' to the image path

Note: We are using a relative path to our image. If you want to show an image from another webpage you'd use an absolute path (e.g. one that included https://...)

Mini Exercise (5–7 min)

Within the index.html file you created, add the following:

  • Your name
  • A short bio paragraph
  • Link to your favorite website
When you're done, save the file and test it in your web browse.

CSS Basics

CSS controls how your content appears. CSS stands for Cascading Style Sheet, and allows you to apply styles inline or store styles in an external file, commonly at style>style.css

CSS is kept in a separate file to support reuse and consistency across projects. Below is an exmaple style applied to the "body" tag 

                        
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f8fafc;
    color: #1f2933;
}
CSS can be applied to tags, classes, and ids, here's how to target these:
  • tag - simply use the name. e.g body
  • class - place a '.' before the class name, e.g. '.my_class'
  • id - place a '#' before the id, e.g '#my_id"
The syntax for adding both a class and id:
To load the style.css file within your webpage use:
Visit CSS reference for a comprehensive listing of CSS properties.

Mini Exercise (5–7 min)

Create a style.css file and load it into your webpage. Within your .css, file do the following:

  • Change the background color of the body tag
  • Change the text color of a class tag
  • Make an ID bold
When you're done, save the file and test it in your web browse.

Layout & Accessibility

Readable layouts are critical for communicating research clearly. Recognizing that many people will view your website on their mobile phones, has driven a mobile first design methodology. The following HTML and CSS provide an example of how to layout your content to accomodate both mobile and desktop visitors to your website.

The accessibility of web-based content is important and legally enforced. Adhering to the Web Content Accessibility Guidelines (WCAG) 2.1 is required. Using a Web Accessibility Checker will help you make sure you haven't missed anything.

The Web Accessibility Checker should also check for color contrast, but it's a good idea to check your color choices earlier on with the Contrast Checker.

The complete code for this example can been seen at lesson 1, and can be download from lesson_1.zip.