To write HTML – the code needed to make websites
Understand why we use 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.
Pages are made up of tags:
Image copyright jamiebalfour.scot
An attribute (such as src) gives the browser additional information about how to display a tag.
For example:
<img src="image1.jpg" alt="Me">
A web page has a very simple structure
<!doctype html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<p>
Hello class
</p>
</body>
</html>
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
A web page has a very simple structure
<!doctype html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<p>
Hello class
</p>
</body>
</html>
A web page has a very simple structure
There should only be one head tag and one body tag
html
element is the first element you need to add to the page.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
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.
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:
<a href="page2.html">To another page</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<img src="cat.png" alt="Cat">
<img src="https://cdn.pixabay.com/photo/2014/06/21/08/43/rabbit-373691_1280.jpg" alt="Cat">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<audio width="500" controls>
<source src="music1.mp3" type="audio/mpeg">
<source src="music1.wav" type="audio/wav">
</audio>
<video width="500" controls>
<source src="hare.mp4" type="video/mp4">
<source src="hare.webm" type="video/webm">
</video>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
Write the HTML for each of the following:
Apply a filter: