# Week 2: Images, Links, Colours

Agenda

HTML Links
HTML Images
Most Common HTML tags
CSS tag styles
CSS colours
block vs inline
HTML validation

# Links (Anchors)

The <a> tag is an anchor element. This is how we create connections between documents on the web. An anchor can be the start or the end of a link. The start of a link will have an href attribute. This hyper-reference is the address of the resource that you want to load in the browser to replace the current page.

If the <a> does not have an href then it should have an id attribute. If you have a value at the end of your URL like this - #bob it would mean that the browser is supposed to load the page and look for the anchor with the id bob.

On the first page we could have this:

<a href="page2.html#bob">Go to page two and find the id bob</a>

On the second page we could have this:

<a id="bob"></a>

Notice that there does not need to be any text inside the anchor which is a target. The first anchor needed text because that text is what the user will click on.

# Basic 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:

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.
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.

# Common HTML Tags

Some of the most common HTML elements are:

Semantic elements. Elements that give meaning to the text inside them.

<p>Paragraph</p>
<a href="http://google.ca">Google Link</a>
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<img src="" alt="image element" />
<ul>
  <li>Unordered</li>
  <li>Lists</li>
</ul>
<ol>
  <li>Ordered</li>
  <li>Lists</li>
</ol>
<time datetime="2020-05-29T19:00:00Z">Today at 3pm</time>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Layout elements. The elements that give structure to the page.

<html></html>
<head></head>
<body></body>
<header></header>
<nav></nav>
<main></main>
<section></section>
<aside></aside>
<footer></footer>

1
2
3
4
5
6
7
8
9

You can probably guess what each of those tags represents.

Divs and Spans.

Divs and spans are elements that have NO semantic value. They are just an empty container that you can use to group content.

Divs are block elements.

Spans are inline elements.

Other content

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 -->
<script src="./scripts/main.js"></script>
<!-- a script tag will load a javascript file -->

1
2
3
4

# 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 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.

Remember

Research has show that you understand and remember content better with videos played back at 1.5 - 1.6 times normal speed.

# 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.

# 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

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.

# Basic HTML Rules

All tags need to have a matching closing tag or be self-closing.
Tags should be written in lower-case
Tag names never start with a number.
All attribute values should have double-quotes around their value.
Ampersands and double quotes should be written as character entities &
Comments should be wrapped in 
Self-closing tags can be written with an opening and a closing tag. Eg: <img></img>
The first line of every HTML file should be the Doctype declaration.
The root element of every HTML file is the <html></html> element.
All id attribute values need to be unique within each page.