More Elements
In this lab we shall cover the remaining HTML elements we are likely to utilize in the course. The elements explored in the lab allow the presentation of data, media and receive input from users which are core concerns of any modern application.
Task 1
Just as in lab 1 follows the link below to open codesandbox. Fork the project then sign in.
The world wide web is one of the several applications of the internet. It is a global network of web servers that host documents that web browsers connect to using the server's IP address over the HTTP. Uniform Resource Locator (URL) is the full location of a resource on a network.
HTTP URLs following format
Example
Most of the time we only need to type in the domain into the address bar and the browser can imply the rest.
In this course, there are three ways of specifying a path.
Origin-relative
This is when we use the full web URL to specify the location of a resource.
EG. href="https://picsum.photos/200/300.webp"
Root-relative
Similar to origin, but the host is assumed and therefore left out.. This would work for any file residing at that host.
E.G href="/200/300.webp". This would work on any file located at https"//picsum.photos but not on files hosted elsewhere.
Directory-relative
This is when we use relative addressing to specify the location of a resource relative to the location of the current webpage being edited in the file system of the server.
Examples
Source | Destination | Destination Directory Relative Address | Destination Root Relative Address |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In short "/" is used to delimit directories. "." to reference something in the same directory and ".." is used to go up to the parent directory.
Task 2
Just ensure you pay good attention to this section as it is a common point of error for first-time web developers, especially directory relative URLs. Understanding this can save consider
The anchor element is used to create hyperlinks which is a crucial feature of the web. We use hyperlinks to link resources and other pages to a webpage.
Link types
By specifying different protocols in a link's URL we can have our page link to emails, phone numbers or other parts of the page.
Telephone Links
On mobile phones these links can open the dialer with a specified contact number.
Download Links
These links would cause the browser to download a specified file.
Mailto Links
These links can open a mail application on the client's device.
FTP Links
These link to open ftp servers which can be browsed with a web browser or FTP client
External Links
These links to other webpages
Skip Links
Use this to let users quickly skip to a different section on the same page. The url must match the id of the desired section.
Task 3
Edit index to allow navigation to signup.html..
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=" />
<title>Home</title>
</head>
<body>
<nav>
<a href="index.html"><b>Index</b></a>
<a href="signup.html"><b>Sign UP</b></a>
<h1>Home</h1>
</nav>
</body>
</html>When you click sign up it would 404. Why?
Notice the path in the URL but what is the real location of signup.html? The location for the signup link seems to be incorrect. What should it really be?
Fix the url of the link then retry the signup link again, it should look like the image below. (The path in the url would give a hint)
These are used to present tabulated data on a webpage, they are as follows.
Table <table>
- Table Head <thead> : The head section of a table which contains table headers
- Table Header <th> : A column header of the table
- Table Body <tbody> : The contents of the table
- Table Row <tr>: Separates the rows of a table
- Table Data <td>: Separates a column within a row
- Table Footer <tfoot>: The footer section of the table
Task 4
Update index.html with a basic table.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=" />
<title>Home</title>
</head>
<body>
<nav>
<a href="index.html"><b>Index</b></a>
<a href="./pages/signup.html"><b>Sign UP</b></a>
<h1>Home</h1>
</nav>
<table border="solid">
<thead>
<th>Item</th><th>Qty</th><th>Price</th><th>Total</th>
</thead>
<tbody>
<tr>
<td>Milk</td><td>2</td><td>$8.00</td><td>$16.00</td>
</tr>
<tr>
<td>Eggs Pack</td><td>1</td><td>$6.00</td><td>$6.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td><td></td><td></td><td>$22.00</td> </tr>
</tfoot>
</table>
<script src="script.js"></script>
</body>
</html>This markup will render our table. Notice it is given a border using the border attribute, however in the HTML 5 standard css should be used for setting borders.
Before you proceed ensure your work space is split into multiple windows if you are editing in repl.it.
Picture <picture>
Not to be confused with figure, Picture can be used for adaptive images whereby different images can be displayed based on the screen size or supported image formats of the user.
Video <video>
The video tag works similarly for videos.
The <track> element lets us link subtitle files to our videos.
Audio <audio>
Object <object>
Object is a legacy element for embedding video, audio and documents. Now that there's dedicated elements for video and audio, objects are best used for embedding PDFs.
Iframe <iframe>
Iframes allows us to embed a webpage in another webpage. Platforms like youtube allow you to embed youtube videos on a site using iframes.
Map <map> & Area <area>
These elements allow us to specify hotpots in an image which links to other pages.
Task 5
Go on your favourite youtube video. Click share then embed. The iframe markup for that video will appear. Add that markup to index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=" />
<title>Home</title>
</head>
<body>
<nav>
<a href="index.html"><b>Home</b></a>
<a href="signup.html"><b>Sign UP</b></a>
<h1>Home</h1>
</nav>
<iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/kg4Na-RbSrA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<script src="script.js"></script>
</body>
</html>The video should now be seen embedded on the page.
Forms are an essential part of what makes the web interactive. Input elements specify the various ui components for taking user input based on the type attribute.
It is important that we use the appropriate element for the data needed.
Input types:
The following are various values which can be given for the type attribute of input elements.
Purpose | Element(s) | Comments |
Selecting Options | select & options | |
datalist & options | ||
type="radio" | ||
Time | input type="date" | |
input type="datetime-local" | ||
input type="month" | ||
input type="week" | ||
input type="time" | ||
Multiple/Collection | select multiple & options | |
checkbox | ||
Numeric | input type="range" | |
input type="number" | ||
Text | input type="text" | |
input type="email" | ||
input type="password" | ||
input type="url" | ||
input type="search" | ||
input type="tel" | ||
input type="text" inputmode="none" | hides the virtual keyboard | |
input type="text" inputmode="numeric" | affects mobile virtual keyboard | |
input type="text" inputmode="tel" | affects mobile virtual keyboard | |
input type="text" inputmode=decimal" | affects mobile virtual keyboard | |
input type="text" inputmode="email" | affects mobile virtual keyboard | |
input type="text" inputmode="url" | affects mobile virtual keyboard | |
input type="text" inputmode="search" | affects mobile virtual keyboard | |
Color | input type="col | |
File | input type="file" |
The inputmode attribute allows us to customise what kind of virtual keyboard appears on mobile devices. You can learn more about input modes here
Task 6
Edit signup.html and add the following form.
<form action="../results.html" method="GET">
<fieldset>
<legend>Demographic Info</legend>
<label>
Full Name
<input type="text" placeholder="Enter your name" name="fullname" />
</label>
<br />
<label>
Sex
<select name="sex">
<option value="1">male</option>
<option value="2">female</option>
<option value="3">other</option>
</select>
</label>
<br>
<label for="dob">Date Of Birth</label>
<input type="date" value="2000-01-01" name="dob" />
<br>
</fieldset>
<fieldset>
<legend>Contact Info</legend>
<label>
Email
<input type="email" name="email" />
</label>
<br />
<label>
County
<input list="counties" name="county" />
<datalist id="counties">
<option value="Caroni"></option>
<option value="Mayaro"></option>
<option value="Nariva"></option>
<option value="Saint Andrew"></option>
<option value="Saint David"></option>
<option value="Saint George"></option>
<option value="Saint Patrick"></option>
<option value="Victoria"></option>
</datalist>
</label>
<br />
<label>
Telephone
<input type="tel" name="telephone" />
</label>
</fieldset>
<fieldset>
<legend>Courses</legend>
<label>
<input type="checkbox" name="courses" value="info1601" checked/>
<span>Info 1601</span>
</label>
<label>
<input type="checkbox" name="courses" value="comp1602"/>
<span>COMP 1602</span>
</label>
<label>
<input type="checkbox" name="courses" value="comp1603"/>
<span>COMP 1603</span>
</label>
<label>
<input type="checkbox" name="courses" value="comp1604"/>
<span>COMP 1604</span>
</label>
</fieldset>
<br>
<input type="submit" value="signup" />
</form>The form should render as follows:
Things to note:
- This page takes the data from the form and sends the data to another page results.html as is specified via the action attribute.
- Each input element must have a name inorder for its values to be referenced and sent correctly as form data.
- The submit button will trigger the form sending the values to the url specified in the action attribute
Now try entering some data and pressing the ‘sign up' button. You should see the page be directed to signup.html
Notice how the form data on the previous page is written as query parameters to the url of the signup page. We also have some javascript which presents the data nicely in a table (JS code will not be covered in this lab, it's only for demonstration purposes)
Note: The importance of good usability cannot be understated. It is crucial that we guide the user as much as possible, use good validation, common design practice and useful defaults to reduce the friction in the user's experience as much as possible. To get an idea of what bad usability is like please check out https://userinyerface.com/ .
CSS is a scripting language used to affect the presentation of a webpage. It can be linked to a document in three ways:
- Inline CSS: Styles are written via the style attribute of an element
- Head Styles: Styles are written in a <style> tag within the <head> of the document
- External Styles: Styles are made in a separate page allowing styles to be reused in different pages.
Styles are made up by a selector and rules. The selector is a string that describes what elements are to be affected by the style. Rules consist of properties and values which specify what visual changes are to be applied to the element.
The style given above would change all H1 tags font colour to blue and size to 12px.
CSS is said to be cascading because an element that is matched with the selectors of multiple styles will have the combined set of rules applied to that element. If two or more styles have conflicting rules they will be applied in the following precedence
- External styles will override other external styles linked before it.
- Styles in the style tag will override external styles.
- Styles in the style tag will override other styles above it.
- Inline styles would override styles in the style tag.
Selectors
W3schools organizes selectors into 5 categories but we will only look at the first three in this lab. These categories are as follows:
Simple Selectors
These select elements by their tag, id, class or wildcard (*). We can also group them together using commas.
Combinator Selectors
These select elements based on the relationships between them.
- a > b : Any selected element b that's a direct child of selected element a
- a ~ b: Any selected element b that comes after a selected element a
- a + b: Any selected element b thats a sibling of a selected element a
- a b: Any selected element b which is a contained with a selected element a
Pseudo Class Selectors
Pseudo-class selectors allow style to be dynamically applied during events which occur on an element.
Task 7
Review the examples and try to explain which rules apply to which element.
When positioning or sizing elements we typically provide numeric values however there are several units available for us to use. They are as follows:
Absolute units are consistent everywhere, 5 centimetres would always be the same distance. However relative units are in relation to something else. Eg the screen size, therefore on different devices 50vw (viewport width) would be represented in different lengths.
This concludes your introduction to HTML & CSS. As you can see there are many elements available for building sites. It's not important to memorise all of them in detail, however, it's beneficial to have an idea of what the standard elements can do.