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:

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>