Slides badge

HTML

Fix the code

<html>
  <head>
    <h1>Page 1</h1>
  </head>
  <body>
    <title>Badminton!</title>
    <paragraph>
      Badminton is an old sport, originating in France.
      Originally only played by wealthy landowners
      it eventually made it into mainstream sport.
    </paragraph>
    <paragraph>
      This website is all about badminton.
    <paragraph>
  </body>
</html>

Fix the code

<html>
  <head>
    <h1>Page 1</h1>
  </head>
  <body>
    <title>Badminton!</title>
    <paragraph>
      Badminton is an old sport, originating in France.
      Originally only played by wealthy landowners
      it eventually made it into mainstream sport.
    </paragraph>
    <paragraph>
      This website is all about badminton.
    <paragraph>
  </body>
</html>

Learning Intentions

  • To write HTML – the code needed to make websites

  • Understand why we use HTML

  • Be able to use semantic elements within a webpage

Success Criteria

  • To develop a simple webpage using just HTML
  • To use semantic elements

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>

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>

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:

 

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

Revision questions

DEMO

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:

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

Review questions

Higher HTML

HTML at Higher

  • At Higher you are expected to know and use a few extra things in comparison to the National 5 course when working working with HTML.
  • These are:
    • A understanding of and the ability to use semantic elements
    • Forms and form elements, including names and attributes, but not including submission and processing of forms
    • Form validation

Semantics

  • Semantics literally means to do with meaning.
  • When you program something, syntax is the words you use to write your program, semantics is what the order of those words means to the computer.

Semantic HTML

  • HTML is a descriptive (declarative language) that tells a web browser how to display content on a page.
  • HTML5 introduced 'semantic elements'.
  • Semantic elements are designed to assist with this, but were designed primarily with screen-readers in mind.
  • Semantic elements don't actually change the layout or style of the page, but can, of course, be styled with CSS.

Semantic HTML

  • At Higher, you need to know about and use the following semantic elements:
    • <nav>
    • <header>
    • <footer>
    • <section>
    • <main>
  • What you might get asked in an exam varies from adding in the semantic element where appropriate or identifying it in a diagram.

<nav>

  • The <nav> tag is used to contain information about website or page navigation. 
  • Often the <nav> element surrounds the main menubar or webpage navigation (like Wikipedia has)

<header>

  • The <header> tag often contains what is called the masthead of the webpage.
  • The <header> may contain a logo or text that takes the user back to the main page via a hyperlink, as well as a title and potentially a site-wide search box.
  • On ecommerce websites such as Amazon, you'll often find the basket here too.

<footer>

  • The <footer> tag is used to contain site links and legal information (such as copyright information). 

<section> and <main>

  • The <main> tag is usually the main content of the page. 
  • It contains all of the main content of the webpage, including graphics and text.
  • The <main> tag is often composed of <section> tags. 
  • These <section> tags help break up the material or content of the page.
  • Within courseworks, the SQA often styles <section> tags and expects you to style them further.

Past Paper Questions

HTML 5 elements have been used to define different parts of the page shown below.

 

State which elements have been used for the parts labelled A and B. 

 

A _________________________________________

B _________________________________________

2 marks

2019 Q9

<nav>

<footer>

  1. Explain in your own words why semantic elements are useful on a webpage.
  2. Name and describe all semantic elements covered at Higher

Lesson review

HTML forms

  • Many websites across the web have ways in which we can submit data to the website.
  • Often this data is data like login data (username and password) but it could be anything.
  • When HTML was developed over the years, this was one of the most important features.
  • The feature of a webpage to allow a user to submit data is a form.

HTML forms

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>
  • The term form comes from the fact that they are like paper forms - made up of multiple fields that the user is expected to fill in.

HTML forms at Higher

  • For Higher, you need to know about the following form elements:
    • Text
    • Number
    • Text Area
    • Radio
    • Submit

The SQA is using the wrong terminology when working with this stuff so you might find conflicting information online.

The <input> element

  • The <input> element is used to take a single piece of data from the user. 
  • It's intended to contain just a short amount of data.
  • It's also not limited to one type and there are several styles of <input>.

The <input> element

  • The <input> element by default accepts text:
<input type="text" name="username" size="40">
  • The size="40" sets the width of the input box in characters.

The <input> element

  • The <input> element can also be set to accept numeric values only. 
  • With numeric inputs you can specify the range to validate the input between two values (range check).
<input type="number" name="count" min="0" max="10">

The <input> element

  • The <input> element can be styled as a radio button
  • Note that to create a radio button 'group' all buttons need to have the same name attribute:
<p>Would you like salad with your order?</p>
<label><input type="radio" name="salad" value="1">Yes</label>
<label><input type="radio" name="salad" value="0">No</label>

The <textarea> element

  • The <textarea> element is designed for collecting larger amounts of data.
  • Unlike the <input> tag, it is not self-closing.
<textarea name="order">Please insert your order here</textarea>

Submitting a form

  • When a user has completed the form, they next need to send the data from the form to the web server.
  • For Higher you do not need to understand how the data is processed on the server, only understand that this is what happens when a form submit button is clicked.
  • For Higher you should be able to implement a submit button as well as write some JavaScript to do something when the button is pressed.

Submitting a form

  • To submit a form, there needs to be a submit button.
  • To do this, we use the <input> tag and give it a type attribute of submit:
<input type="submit" value="Send data">

Dropdown lists

  • A dropdown list can also be used in HTML. To create one, we use the <select> element alongside the <option> element.
  • These are very similar in structure to how lists are created. Do not forget to include the value attribute on each option.
<form>
  Select city:
  <select name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

Dropdown lists

<form>
  Select city:
  <select name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

lists with multiple selection

<form>
  Select city:
  <select multiple name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

lists with multiple selection

<form>
  Select city:
  <select multiple name="city">
   <option value="Aberdeen">Aberdeen</option>
    <option value="Dundee">Dundee</option>
    <option value="Edinburgh">Edinburgh</option>
    <option value="Glasgow">Glasgow</option>
    <option value="Inverness">Inverness</option>
    <option value="Perth">Perth</option>
    <option value="Stirling">Stirling</option>
  </select>
</form>

The SQA sometimes refers to a list like this with multiple selections as a dropdown list. This is incorrect but know that they are asking about lists like this!

Bringing it all together

<form>
  <p>
    Welcome to the sign up form for Loch Tay Adventure Park!
  </p>
  <label>
    Name
    <input type="text" name="name">
  </label><br>
  <label>
    Number of guests
    <input type="number" name="number_of_guests" min="1" max="10">
  </label><br>
  <label>
    Why Loch Tay? <textarea name="explanation">I love...</textarea>
  </label>
  <input type="submit">
</form>

Input validation

  • It is possible to validate input via the HTML form. 
  • There are four types of validation that can be done in HTML forms:
    • Range check
    • Presence check
    • Length check
    • Restricted choice

Input validation: range check

  • We have already looked at a range check validation using the <input> element when it's type is set to number.
  • Range checks are done by specifying a min and max attribute.
<input type="number" name="count" min="0" max="10">

Input validation: Presence check

  • A presence check is used to ensure that a value is submitted. 
  • It means that a value cannot be blank.
  • In HTML, this is done by providing a required attribute.
<input type="text" required>

Input validation: Length check

  • A length check is used to ensure that a value cannot be longer than a certain length.
  • The HTML maxlength attribute adds this validation to an element.
<input type="text" maxlength="30">

Input validation: Restricted choice

  • A restricted choice is used to limit the user to certain inputs.
  • In HTML forms, this is done with <select> box as this only allows the user to pick from the selection.
<select name="sport">
  <option value="Basketball">Basketball</option>
  <option value="Football">Football</option>
  <option value="Volleyball">Volleyball</option>
</select>

Past Paper

The HTML code for a form is shown below.

 

(i) Identify two types of validation used in the form code.

 

Type 1 _________________________________________

Type 2 _________________________________________

2 marks

 

(ii) State the number of property types that a seller can select.

_______________________________________________

1 mark

1

Presence

Restricted choice

First of all, read through the notes at HIGHERFORMSBITESIZE

 

Complete the worksheet by building forms that meet the specifications.

Task

Presentation Overview
Close
JB
HTML
© 2020 - 2024 J Balfour
09:32 | 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
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files