HTML

Learning Intentions

Understand block and inline elements and the difference between them
Understand the purpose of HTML forms
Understand how to create forms using HTML

Success Criteria

I can explain the terms block and inline elements and provide examples of each of them
I can use HTML forms to build a method that allows user input

Block vs Inline elements

HTML5 was designed as both a document mark-up language, as the original specification was, and as means to create interactive websites.
As such, block elements and inline elements are a big part of HTML.

Block vs Inline elements

A block element is one which takes up the whole line which it is found in (let's just say this for now, but it actually takes up the whole line in the element it is within).
An inline element is one which takes only the space it needs.

This is a paragraph

This is a span

Which one is block and which one is inline?

Frames

HTML, being a web of pages all interlinked in some way or another, it is possible to link to another webpage or website very easily.
We do this with <a href="example.com">Example.com</a>

We can also include other webpages in our existing webpage 😯
To do this, we use frames.

Frames

In this course, you need to be able to use the iframe tag (inline frame tag).
Iframes are, as you can imagine, are inline elements.

<iframe src="https://www.google.com/"></iframe>

Frames

Iframes can be used to embed YouTube videos as well:

<iframe src="https://www.youtube.com/embed/XHjoohto2-w/"></iframe>

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

For this course, and 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>

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>

Today's task

Find a YouTube video and copy the embed link to embed a YouTube video in some HTML page you have created.
Create an HTML form that asks the user for:
1. Their first name
2. Their surname
3. Their date of birth (use a date field for this)
4. Their dietary preferences (vegetarian or meat eater) (use radio buttons for this)
5. What town the live in (use a drop down a restrict it to Haddington, Tranent, Gifford and Pencaitland)

Presentation Overview

HTML

13:17 | 16-07-2025

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:

Apply theme

Blue theme

White theme

More effects:

Dark Mode

Bold Text

Slide Zoom

All slideshow files