HTML

Learning Intentions

Understand how websites are built with HTML, CSS and JavaScript
Be able to write some HTML

Success Criteria

I can explain how HTML, CSS and JavaScript are needed to build a webpage
I can write HTML tags such as the paragraph, image, link and break

What is HTML?

HTML is one of the three components for front-end web development, with the others being CSS and JavaScript.
HTML is composed of elements and tags.
Every webpage, even if built with a WYSIWYG editor like Google Sites, uses HTML underneath. The client's web browser translates the HTML into a webpage.

What is HTML?

As part of the three programming languages that make a website, HTML focuses only on the content of the webpage, with CSS focusing on the layout and style of the page and JavaScript on the interaction that the users have with the webpage.
On its own, HTML is the most boring thing in computer science since it lacks any colour or layout.

What does HTML look like?

HTML pages are made up of tags:

Image copyright jamiebalfour.scot

What does HTML look like?

<!doctype html>
<html>
  <head>
    <title>A sample webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Welcome to my website!</p>
    <p>This is my first HTML webpage!</p>
  </body>
</html>

HTML webpage

Using HTML

As mentioned previously, HTML is composed of tags and attributes. Tags normally, but not always, also feature a closing tag:

<!doctype html>
<html>
  <head>
    <title>A sample webpage</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Welcome to my website!</p>
    <p>This is my first HTML webpage!</p>
  </body>
</html>

Some HTML tags

Paragraph:

<p>Text in here</p>

An image

<img src="image1.jpg" alt="Image 1">

A link

<a href="example.com">Click here to go to example.com</a>

Some HTML tags

Numbered (ordered) list

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Bulleted (unordered) list

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Some HTML tags

A division

<div>Other code goes here</div>

A span

<span>Other code goes here</span>

A link with an image in it

<a href="example.com">
  <img src="image1.jpg" alt="Image 1">
</a>

Some HTML tags

A table

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Work through the HTML workbook from task 1 onwards using what you have seen in this lesson.

Remember to save each HTML file as a new file.

Task

Plenary

On your whiteboards, write the tag for each of the following:

The title that appears in the tab in Chrome
An image tag with an image found at image3.png
A paragraph of text containing the word "Welcome!"
A link to a page called page2.html
The second-largest heading containing the words "Stage 1"

HTML practical assessment 1

You are going to be building your first webpage from scratch!

You will have the whole period to do this.
Clear everything out of Notepad++

What to remember for your assessment

Save with .html at the end of the page
Save image files in the same folder or they won’t show
Create a folder for your webpage and anything associated with it
Open the webpage in your browser and refresh when you want to see changes
Save regularly and before you test it out in your browser

What you need to do

First identify the elements on the page.
When you have done that you must build the webpage shown as best as you can.

You are not allowed to validate the page

What you need to do

First identify the elements on the page.
When you have done that you must build the webpage shown as best as you can.

You are not allowed to validate the page

Finished solution

<html>
  <head>
    <title>My personal website</title>
  </head>
  <body>
    <h1>Welcome to my first webpage.</h1>
	<p>
	  This webpage is available on the local network for anyone to view.
	</p>
	<p>
	  On my website you will find the following information:
	</p>
	<ul>
	  <li>About me</li>
	  <li>My favourite things</li>
	  <li>People I follow</li>
	</ul>
	<p>
	  If you enjoy using my website, please feel free to visit my other
	  website at <a href="https://www.example.com">this page</a>.
	</p>
	<img src="me.jpg" alt="">
  </body>
</html>

Presentation Overview

HTML

14:05 | 29-04-2024

Join Live Session

Start Remote

Save Progress

Slideshow Outline

Presenter Mode

Widget Screen

Canvas Controls

Random Selector

Timer

Volume Meter

Binary Converter

Python Editor

Show Knox 90

Provide Feedback

Help

Keywords

DragonDocs Management

Random selector

Remove after pick

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

The following are key shortcuts for using DragonSlides and reveal.js.

Key combination	Action
→, PAGE DOWN, SPACE	Next slide
←, PAGE UP	Previous slide
SHIFT + →	Last Slide
SHIFT + ←	First slide
B	Whiteboard
W	Widget Board/White Screen
C	Toggle Notes Canvas
DEL	Clears Whiteboard/Notes Canvas
S	Show Presenter Mode
SHIFT + D	Toggle Dark Mode
H	Goes to the Home Slide
META + P	Show Print options window

In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.

Feedback 👍

Accessibility

Apply a filter:

Dark Mode

Bold Text

All slideshow files