MAD9013

Week 2: HTML & CSS Basics

Agenda

  • Zoom Tutorial
    • Folder Structure
    • Basic HTML Semantics
    • Connecting CSS File
    • CSS Basics
  • In Class
    • Website HTML Markup Activity
    • Review GitHub Repository Set Up
In-Class Tutorial

Intro to HTML & CSS

Together we will build our first HTML page and explore some basic styling.

Deliverables

In-Class 2

Website HTML Markup Audit

In groups, review the website and discuss its HTML Markup.

Due: Wed Sept 13, 2023

 Assignment 2

HTML Mark Up

Based on the Website HTML Markup Audit in-class activity, let's mark up the HTML for the page.

Due: Sun Sept 17, 2023

# HTML Basic

The following will explore the most commonly used and key HTML tags. It is not a complete list, but covers the key elements. A lot of the info below is adapted from the MDN Web Docs - HTML elements reference (opens new window). You should have that page bookmarked as you will likely need to reference it when deciding what tags are appropriate to use.

# Mandatory Page Elements

All webpages must contain the following basic HTML structure.

<!DOCTYPE html>
<!-- Helps to ensure the browser renders the page correctly -->
<html>
  <!-- represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element. -->

  <head>
    <!-- Contains machine-readable information (metadata) about the document, like its title, scripts, style sheets, etc. -->
  </head>

  <body>
    <!-- represents the content of an HTML document. There can be only one <body> element in a document. -->
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

We often need to link other files like stylesheets and scripts to our webpages.

<link rel="stylesheet" href="./css/main.css" />
<!-- a link to a stylesheet file, it goes inside the <head> -->
<script src="./scripts/main.js"></script>
<!-- a script tag will load a javascript file generally goes in the <body> as the last element before the closing </body>, however is sometimes put in the <head> -->
1
2
3
4

# Page Content structure

Within the <body> tag there are a number of elements to help build the basic content structure:

<!DOCTYPE html>
<html>
  <head></head>

  <body>
    <header>
      <!--
        Represents introductory content. When used as a direct child of `body` it is expected to include site navigation, title, logo, etc.

        The content in the main `header` should be consistent on all pages of the website, with only minor changes relevant to the specific page.
      -->
    </header>

    <main>
      <!-- represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. -->
    </main>

    <aside>
      <!-- represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. -->
    </aside>

    <footer>
      <!--
        Represent the conclusion of the page. When used as a direct child of `body` it should contains information about the author of the site, copyright data or links to related documents

        The content in the main `footer` should be consistent on all pages of the website, with only minor changes relevant to the specific page.
      -->
    </footer>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

A few notes on the elements above:

  • There can only be one (1) main per page and it is mandatory as a child of <body>.
  • Although technically not mandatory, there should be a <header> and <footer> on each page as a child of <body>.
  • There can be multiple <header>, <footer>, and <aside> tags on a page.
    • For example: a web page could include a multiple articles that required their own header and footer content to introduce and conclude the content.

# Section

A <section> element is used to represent a group of related content on the page. <section> is generally used within the <main> tag to divide up the content of the page. It is good practice for each <section> to have a heading, usually an <h2>, which acts as the main heading of the section.

<main>
  <section>
    <h2>A great topic of information</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      diam eget convallis aliquam. Proin fringilla vel nunc ut mattis. Proin
      auctor nunc eget viverra feugiat. In in purus quis odio rhoncus mattis nec
      convallis nisl. Nam vel arcu gravida enim tincidunt pretium. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti
      sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Vestibulum nec tortor a mauris volutpat rhoncus sed in ligula. Proin sit
      amet turpis quis lacus suscipit sodales.
    </p>
    <img src="./images/dog.jpg" alt="A cute husky pulling a sled" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      diam eget convallis aliquam. Proin fringilla vel nunc ut mattis. Proin
      auctor nunc eget viverra feugiat. In in purus quis odio rhoncus mattis nec
      convallis nisl. Nam vel arcu gravida enim tincidunt pretium. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti
      sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Vestibulum nec tortor a mauris volutpat rhoncus sed in ligula. Proin sit
      amet turpis quis lacus suscipit sodales.
    </p>
  </section>

  <section>
    <h2>A different, but related topic</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      diam eget convallis aliquam. Proin fringilla vel nunc ut mattis. Proin
      auctor nunc eget viverra feugiat. In in purus quis odio rhoncus mattis nec
      convallis nisl. Nam vel arcu gravida enim tincidunt pretium. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti
      sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Vestibulum nec tortor a mauris volutpat rhoncus sed in ligula. Proin sit
      amet turpis quis lacus suscipit sodales.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      diam eget convallis aliquam. Proin fringilla vel nunc ut mattis. Proin
      auctor nunc eget viverra feugiat. In in purus quis odio rhoncus mattis nec
      convallis nisl. Nam vel arcu gravida enim tincidunt pretium. Interdum et
      malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti
      sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Vestibulum nec tortor a mauris volutpat rhoncus sed in ligula. Proin sit
      amet turpis quis lacus suscipit sodales.
    </p>
  </section>
</main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

The <a> tag is an anchor element. This is how we create connections between documents on the web. We must provide an href attribute on the <a> tag. This hyper-reference is the address of the resource that you want to load in the browser to replace the current page. It can point to another web page on our website, it can point to an different website, or it can point to any other type of document such as a video, photo, pdf, etc.

We can also point to specific locations on a web page (including the page the <a> is on) by including the element's id within the href.

Some examples:

<a href="page2.html">Go to page two</a>

<a href="#about-us">Go to the element on this page with the id "about-us"</a>

<a href="page2.html#about-us">Go to page two and then find the id "about-us"</a>
1
2
3
4
5

# Images

The most basic HTML for adding an image in a web page is the <img/> element.

<img
  src="https://picsum.photos/300/300"
  alt="the alternate text for accessibility"
/>
1
2
3
4

It has two attributes:

  1. The src source which tells the browser where to find the image file to download and display. The downloaded image will REPLACE the image element with the image file.
  2. The alt attribute provides text to display if the image fails to download as well as provides text to be read by a screen reader. Screen readers are programs used by visually impaired people to browse the web.
  • Including alt attributes is required to meet accessibility standards.
  • alt attributes should provide a good visual description of the image.

# Figure & Figcaption

The <figure> and <figcaption> elements can also be used in combination with the <img>. It is a way to connect an image with a visible caption and to represent that the image is directly relevant to the content.

<figure>
  <img src="https://picsum.photos/300/300" alt="" />
  <figcaption>A caption describing the image.</figcaption>
</figure>
1
2
3
4

When using a <figure> and <figcaption> you should leave the alt empty (still include it, just empty). In this case the <figcaption> acts as the description for accessibility purposes. Having both an alt and a <figcaption> would cause the description to be read out twice.

TIP

Using <figure> is not required for all instances of <img>. In fact it is more common to just use the <img> tag on its own.

# Headings

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h4>Level 5 Heading</h4>
<h4>Level 6 Heading</h4>
1
2
3
4
5
6
  • Headings are used to help organize content on the page.
  • Each page must only have one (1) <h1> tag that acts as the title for the page.
    • This is important as it provides accessibility and search engine optimization (SEO) tools with a clear title for the page.
    • It is also good practice for each page to have a unique <h1>. This should be easy to accomplish as each page will likely have a different topic.
  • Following proper heading structure is incredibly important.
    • It keeps your content well organized
    • It allows accessibility tools, such as screen readers, to more easily navigate and understand your content.

Example of proper heading structure:

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>
1
2
3
4
5
6
7
8
9
10
11
12
13

Notice how relevant content (all of the examples) are organized together under relevant headings (<h2>Examples</h2>).

WARNING

Do not select a heading based on its visual design. Select it based on proper structure.

# Lists

<!-- Unordered list. A basic list for when the order is not relevant. Has bullets by default. -->
<ul>
  <li>Shopping</li>
  <li>List</li>
  <li>Items</li>
</ul>

<!-- Ordered list. A basic list for when the order IS relevant. Has numbers by default. -->
<ol>
  <li>Top</li>
  <li>Five</li>
  <li>Favourite</li>
  <li>Movies</li>
  <li>Ever</li>
</ol>

<!-- Description list. A list with groupings of terms and descriptions. Like a dictionary. -->
<dl>
  <dt>MAD9013</dt>
  <dd>A great course where you will learn HTML & CSS</dd>

  <dt>Professor Adam</dt>
  <dd>Everyone's favourite professor obviously.</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Here is what the lists above look like:

  • Shopping
  • List
  • Items
  1. Top
  2. Five
  3. Favourite
  4. Movies
  5. Ever
MAD9013
A great course where you will learn HTML & CSS
Professor Adam
Everyone's favourite professor obviously.

Note

The default stylings will look a little different than shown on this site.

# Paragraph Text

A <p> tag should be used for the majority of basic instances of text on the page where a more specific, semantically appropriate tag is not applicable. A <p> tag is not require when text is included inside other semantically appropriate elements. Notice in the above example that <p> is not included in the lists, figcaption, or headings.

It is common to have numerous <p> tags in a row on websites with large amounts of text.

<p>A short paragraph</p>

<p>
  A long paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent commodo diam eget convallis aliquam. Proin fringilla vel nunc ut
  mattis. Proin auctor nunc eget viverra feugiat. In in purus quis odio rhoncus
  mattis nec convallis nisl. Nam vel arcu gravida enim tincidunt pretium.
  Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent
  taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  Vestibulum nec tortor a mauris volutpat rhoncus sed in ligula. Proin sit amet
  turpis quis lacus suscipit sodales.
</p>
1
2
3
4
5
6
7
8
9
10
11
12

Common Mistakes

It is common to see large blocks of text inside of a <div> with no <p> tag. This is considered poor semantics and is often a sign of lazy HTML coding. Large blocks of text should be in a <p>.

# Divs and Spans.

<div> and <span> are elements that have NO semantic value. They are just an empty container that you can use to group content. They are useful for when you need to group and style certain elements that are not already grouped via proper semantics.

WARNING

<div> and <span> should only be used in situations where no semantically appropriate element exists. Before using a <div> or <span>, take the time to consider what other element should be used instead.

I don't want to find a file full of <div> tags without proper semantics. This is sadly more common than it should be and leads too code that is hard to read and edit and that has poor accessibility and SEO.

# HTML Comments

Sometimes you want to add notes to yourself or other developers in a web page but you don't want the user to see the message on the screen. We can use comments to achieve this.

<!--
  This is a comment in an HTML file.
  A less than sign, followed by an exclamation mark and two hyphens to start the comment.
  Then two hyphens and greater than sign to end it.
  -->
1
2
3
4
5

# Basic HTML Rules

  1. All tags need to have a matching closing tag or be self-closing.
  2. Tags should be written in lower-case
  3. Tag names never start with a number.
  4. All attribute values should have double-quotes around their value.
  5. Ampersands and double quotes should be written as character entities &amp;
  6. Comments should be wrapped in <!-- this is a comment -->
  7. The first line of every HTML file should be the Doctype declaration.
  8. The root element of every HTML file is the <html></html> element.
  9. All id attribute values need to be unique within each page.

# Basic CSS

When adding styles to create layout, set colours or backgrounds, and align elements we need to use a CSS file. The CSS file is a set of instructions to the browser about how to display your HTML content. By sharing a single CSS file for all webpages in a website the browser gets to cache the file and run more efficiently.

In the original version of HTML there were actually tags for setting styles. These were deprecated many years ago.

In many of the videos that you will see about HTML and CSS, there will be a <style> tag inside the HTML file's <head>. This is fine for demonstration purposes but should NEVER be done on a real site.

The content inside a <style> tag is the exact same as the content inside a .css file.

CSS looks like this:

p {
  font-size: 20px;
  color: rebeccapurple;
}
1
2
3
4

CSS is made up of groups of styles. Each group has a selector, which tells the browser which elements to target and apply the styles to.

After the selector there is a set of curly braces { }. Inside the curly braces you can put one or more pairs of style properties and their values.

selector {
  property: property-value;
}
1
2
3

There is a : colon between the property and its value. After each value you must put a ; semi-colon.

# Colours

There are many ways to create colours in CSS.

p {
  color: red;
  color: #f00;
  color: #ff0000;
  color: #ff33ccff;
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 1);
  color: hsl(0deg, 50%, 50%);
  color: hsla(0deg, 50%, 50%, 1);
}
1
2
3
4
5
6
7
8
9
10

8 Digit HEX

The last two digits in an 8 digit hex value are for the alpha

This short video explains all the different ways you can add colours for elements with CSS.

# Backgrounds

In the backgrounds of elements you can use colours as well as images.

# Display Block, Inline, and Inline-Block

HTML elements have a CSS property called display that controls how they occupy space on the webpage and how their edges will affect the positioning of other elements. We will talk more about all the possible values for the display property next week.

For now, we will focus on the three most common values: block, inline and inline-block.

# Block

Things like headings and paragraphs are called block elements because they occupy a large block of space. They want to fill the entire width of their parent element. On the page, they will start on a new line and whatever comes after them must start on a new line too.

# Inline

Elements like anchors or time are inline elements. They take up only as much width as required by the text inside them. They don't push anything else out of the way. An anchor tag could happily sit on one line of text in between all the other words that make up the line of text. You cannot set a width value on an inline element.

# Inline-Block

Images are inline-block elements. they have properties of both inline and block elements. Images will sit on the same line as other text, making them similar to inline elements. However, we are allowed to give them a specific width, like paragraphs and other block elements.

# CSS Comments

Sometimes you want to add notes to yourself or other developers in your stylesheets or to temporarily disable some styles. We can use comments to achieve this.

/* p {
  color: red;
} */

h2 {
  color: green;
  /* font-weight: normal;  */
}
1
2
3
4
5
6
7
8

In the above case, the first ruleset would get ignored entirely and the font-weight rule would also be ignored. Commenting out parts of your CSS like this can be useful for testing, however it can make your CSS files messy very quickly. It is important once you have solved your bugs and completed your work to go back and delete all commented out lines of code you don't need.

# HTML Validation

  • HTML is a specific list of tags that you are allowed to use.
  • Tags have specific attributes that they are allowed to include.
  • Some tags are only allowed to have certain tags as children and other tags are only allowed to be inside specific ones.

A common example is with list elements. Inside a <ol> or a <ul> the first child element MUST be an <li> tag. Nothing else is allowed here.

# Validation Tools

Many IDEs like VSCode have some validation built-in. They will correct some mistakes that you make. However, not all the validation issues can or will be corrected instantly.

To test your HTML files, try using this tool:

W3C Validator (opens new window)

You can copy and paste your HTML into the validator, or upload your file, or provide a URL to the validator. The URL must be an externally visible one. A link that starts with http://localhost/ which points to a location on your own computer will NOT work.

# To Do Before Week 3

Self-Directed To Do

Last Updated: 8/23/2023, 5:02:30 PM

← Week 3: Box Model & Fonts →