HTML

Learning Intentions

To write HTML – the code needed to make websites
Understand why we use HTML

Success Criteria

To develop a simple webpage using just HTML

What is HTML?

HTML or Hyper Text Mark-up Language, is a coding language that is used to develop webpages.
HTML deals with the content that we put in our pages but doesn’t deal with the appearance of the content.
HTML is made up of elements. Each element consists of tags, attributes and content.

HTML tags

Pages are made up of tags:

Image copyright jamiebalfour.scot

Attributes

An attribute (such as src) gives the browser additional information about how to display a tag.
For example:

<img src="image1.jpg" alt="Me">

HTML structure

A web page has a very simple structure

<!doctype html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
  </body>
</html>

HTML structure

A web page has a very simple structure

<!doctype html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
  </body>
</html>

The <!doctype html> tells the browser viewing the page to treat the page as HTML

HTML structure

A web page has a very simple structure

<!doctype html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <p>
      Hello class
    </p>
  </body>
</html>

HTML structure

A web page has a very simple structure

There should only be one head tag and one body tag

The <HTML> tag/Element

The html element is the first element you need to add to the page.
This element tells the browser that everything inside it should be treated as part of the webpage.
Anything outside of here is not part of the page (for example, you can use HTML comments outside of the <html></html> tags).

The <head> tag/Element

The head element contains information about the page, including the title, any linked CSS (more later) or JavaScript (more later).
Anything that appears in the head tag is not guaranteed to display on all browsers (some browsers do display certain tags from it but others display zilch)
The information stored in the head element is often referred to as meta data.
Such information that might be found in the head tag is things like the page title, any keywords used on the page, links to any CSS pages or JavaScript scripts, locations of assets such as favicons etc or the author of the page.

The <body> tag/Element

The body element contains the content of the page. It must come after the closing head tag.
The body tag is where all content should go.
In the body tag you will find all sorts of content such as paragraphs of text, images links etc.

Tips

It's important to follow the rules when working with HTML.
- All tags must be closed. There are some self-closing tags such as the <img> tag which we will look at later that do not need closed manually. Tip: when creating a new tag, create the closing tag immediately after creating the opening tag
- Anything in the <head> is not guaranteed to display on all browsers, anything you want to display on the webpage should go in the <body> tag.
- You should only have one <head> and one <body> tag on a webpage, otherwise the browser might ignore the second tag.
- Check your webpages regularly and use the validator to ensure your page is correctly written

Answer each of the following questions:

Where should JavaScript go? [head or body]
What kind of information might you find in the head tag?
What might happen if you have tags inside the head tag?
What might happen if you have two body tags?
What issues might you face if you don't close a tag?

Revision questions

Some tags - the anchor

<a href="page2.html">To another page</a>

The anchor tag is used to make a link to another page.

Some tags - the ul

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

The ul tag is used to make a bulleted (unordered) list

Some tags - the ol

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

The ol tag is used to make a numbered (ordered) list

Some tags - the img

<img src="cat.png" alt="Cat">

The img tag is used to include an image on a webpage.
If the image is in the same folder as the HTML webpage, it can be referenced by it's name as shown below

Some tags - the img

<img src="https://cdn.pixabay.com/photo/2014/06/21/08/43/rabbit-373691_1280.jpg" alt="Cat">

You can also embed images from other websites using the absolute link to the image as shown below:

Some tags - the p tag

<p>Paragraph 1</p>
<p>Paragraph 2</p>

The p tag is used to include a paragraph of text on a webpage.
Like with actual paragraphs in a document, paragraphs are spaced out automatically.

Some tags - the audio tag

<audio width="500" controls>
  <source src="music1.mp3" type="audio/mpeg">
  <source src="music1.wav" type="audio/wav">
</audio>

The audio tag is used to sound in a webpage

Some tags - the video tag

<video width="500" controls>
  <source src="hare.mp4" type="video/mp4">
  <source src="hare.webm" type="video/webm">
</video>

The video tag is used to video in a webpage

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Headings in HTML work where the smaller the number the bigger the text, so H1 is the biggest:

Headings

It's also important to note, that the biggest heading should be the first heading and that there should only ever be one <h1> on a page.
Use <h2> elements to separate sections of content and the <h3> elements as subtitles.
At National 5 and Higher level, you will not lose marks for including multiple <h1> elements

Write the HTML for each of the following:

A link to the Google front page with the text Google.
An image on the page pointing to a file called cat.jpg
A ordered list containing three foods you like
A paragraph of text containing "I love HTML!"

Review questions

We are going to create a very simple website with some information about the ourselves using HTML. Your website should include:

a) Two or more pages

b) At least three images

c) Links between each page

d) A list of favourite things

Extension: try and add a video from YouTube using the embed code.