Progressing with HTML

By the end of this chapter you will have learnt about some other HTML tags and know everything you need to build a basic unstyled website.

1. Headers

```
<header> </header>
```
Used to contain any introductory content. These can be used multiple times in a page though typically there is just a single header used at the start of a page to contain navigation links and logos.

2. Footers

```
<footer> </footer>
```
In the same way as a header, you can have multiple footers, used to conclude sections or pages. Typically there is a single footer at the bottom of the page which contains copyright information and other information not critical to the rest of the page.

3. Navigation

```
<nav> </nav>
```
Tags are used to contain navigational elements of our page, alone they do not do anything and purely act as a container but provide greater accessibility as aids such as screen readers can interpret the pages content better.
To make actual links we must include
```
<a> </a>
```
tags as covered in the Links section in the previous chapter.
There is no defined correct way of building a navigation menu but it is common to find unordered lists used to form the structure.

Example:

				<!DOCTYPE html>
				<html lang="en">
					<head>
						<title>My First Website</title>
						<meta charset="utf-8">
						<meta name="viewport" content="width=device-width, initial-scale=1">
					</head>
					<body>
						<nav>
							<ul>
								<li><a href="about.html">About</a></li>
								<li><a href="experience.html">Experience</a></li>
								<li><a href="portfolio.html">Portfolio</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</nav>
					</body>
				</html>

4. Tables

Tables should be used when it is necessary to display structured data. They are made up of a number of different tags.
```
<table> </table>
```
The opening and closing tags.
```
<thead> </thead>
```
Tags act as a container for our table headers.
```
<tbody> </tbody>
```
Tags act as a container for our table body.
```
<tr> </tr>
```
Tags create a single row in our table, they are used in both the thead and tbody.
```
<th> </th>
```
Tags stand for table header and create a single column heading. They are placed inside of 'tr' tags.
```
<td> </td>
```
Tags stand for table data and create a single cell. They are placed inside of 'tr' tags.

Example:

				<!DOCTYPE html>
				<html lang="en">
					<head>
						<title>My First Website</title>
						<meta charset="utf-8">
						<meta name="viewport" content="width=device-width, initial-scale=1">
					</head>
					<body>
						<table>
							<thead>
								<tr>
									<th>Column1</th>
									<th>Column2</th>
									<th>Colomn3</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>C1:R1</td>
									<td>C2:R1</td>
									<td>C3:R1</td>
								</tr>
								<tr>
									<td>C1:R2</td>
									<td>C2:R2</td>
									<td>C3:R2</td>
								</tr>
							</tbody>
						</table>
					</body>
				</html>

5. Forms

Forms are used whenever we need to collect information from the user, for example logging in and contact forms.
```
<form method="post" action="handler.php"> </form>
```
Tags are a fundamental part and act as our container. The 'method' attribute can be either 'post' or 'get', these are the 2 HTTP protocol methods, if you aren't sure what they are I recommend having a look online. The 'action' handler points to the file which the submitted data is sent to.
```
<input type="text" id="box1">
```
Each field on a form is created using an input element (there are a few exceptions). The type attribute dictates its functionality, there are lots of type values such as phone, email, checkbox, radio, image, date, button, ect.
```
<label for="box1"> </label>
```
Tags are used add text outside of the input tag. Notice how the for' attributes value matches the previous lines 'id' attribute, this is another accessibility mechanism.
```
<input type="text" id="box1" required>
```
It is important that we always validate a users data for 2 reasons; security and data handling. The most basic level starts in HTML and the use of specific input types, but we can also makes fields mandatory by simply adding the 'required' attribute.
```
<input type="text" id="box1" placeholder="What's your name?" required>
```
If we want to place text inside of the field, maybe to show an example or to add an extra level to the question we use the 'placeholder' attribute. When a user starts typing this text automatically disappears.
```
<textarea rows="5" cols="50" maxLength="500" id="box1" placeholder="Provide some information" required> </textarea>
```
Multi-line text fields are created using this tag instead of an input tag. The 'rows' and 'cols' attributes specify the initial size of the box and the 'maxLength' attribute limits the number of characters a user can enter. By default users can resize this field but we can partially or fully prevent this using CSS if needed.

6. Adding JavaScript

```
<script> </script>
```
Tags are used whenever we want to include some JS.
Ideally we should write our JS in a separate file and link it however if this is not desired we can use the script tags without any attributes and write our JS in between the opening and closing tags.
If our JS is in a separate file we link it using the 'src' attribute.
```
<script> src="FileLocation/FileName" </script>
```
If the JS needs loading before the browser loads the HTML we place the tags inside the bottom of our
```
<head> </head>
```
If the JS requires the HTML to have been loaded before it can work (usually because we are manipulating the DOM) or if it does not matter when the JS is loaded then we place it at the bottom of our
```
<body> </body>
```
to ensure the pages load time is not impacted.

7. Adding CSS Styles

```
<link>
```
Tags can be used when we want to include a separate stylesheet file, we can use as many of these as we need. This is a self-closing tag, note how it has no closing tag like most others covered.
```
<link rel="stylesheet" href="FileLocation/FileName">
```
When using the link method we have to add 2 attributes: 'rel' and 'href'. The first simply tells the browser what we are loading, the second as you will know from the previous chapter points to the files location.
Although not the prefered method, we can write our CSS inside of our HTML file. To do this we write our CSS inside of the
```
<style> </style>
```
tags placed at the bottom of our
```
<head> </head>
```
instead of using the previous method.

8. Building our first webpage (Cont.)

This demo uses the same code from the previous chapter but builds on it with the topics we have just covered.

To see what the code outputs click this link, or build the website yourself!

				<!DOCTYPE html>
				<html lang="en">
					<head>
						<title>My First Website</title>
						<meta charset="utf-8">
						<meta name="viewport" content="width=device-width, initial-scale=1">

						<link rel="stylesheet" href="myStylesheet.css">
					</head>
					<body>
						<header>
							<h1>HTML and CSS Demo</h1>
							<nav>
								<ul>
									<li><a href="about.html">About</a></li>
									<li><a href="experience.html">Experience</a></li>
									<li><a href="portfolio.html">Portfolio</a></li>
									<li><a href="contact.html">Contact</a></li>
								</ul>
							</nav>
						</header>

						<section>
							<h2>Section Heading</h2>
							<p>This section contains two articles</p>
							<article>
								<h3>Article Heading</h3>
								<p>Paragraph... Maecenas nec velit eu mi sodales euismod. Sed aliquet in lectus sodales faucibus. Nullam orci orci, congue vel tempor eu, posuere nec sapien. Mauris eleifend dolor vel pretium commodo. Morbi ullamcorper a eros ut egestas. Quisque aliquet quis sapien vulputate elementum. In efficitur turpis ipsum, at varius nisl euismod sed.</p>
							</article>

							<article>
								<h3>Article Heading</h3>
								<p>Paragraph... Pellentesque quis justo ac mauris rutrum blandit. Ut risus lectus, placerat eget nulla ac, placerat semper leo. Curabitur tempor dui in nunc volutpat sollicitudin. Vestibulum vel erat euismod tellus rutrum dapibus nec vel metus.
							</article>
						</section>

						<section>
							<h2>Fruit & Veg</h2>
							<article>
								<h3>Fruit</h3>
								<ul>
									<li>Apple</li>
									<li>Orange</li>
									<li>Pear</li>
								</ul>
							</article>

							<article>
								<h3>Veg</h3>
								<ol>
									<li>Potato</li>
									<li>Carrot</li>
									<li>Peas</li>
								</ol>
							</article>
						</section>

						<p class="actionLink"><a href="http:daniel-ellis.co.uk" target="_blank">Click this link to view my website</a></p>
						<img src="cat.jpg" alt="A cute ginger cat laid on its back in a basket">

						<table>
							<thead>
								<tr>
									<th>Column1</th>
									<th>Column2</th>
									<th>Colomn3</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>C1:R1</td>
									<td>C2:R1</td>
									<td>C3:R1</td>
								</tr>
								<tr>
									<td>C1:R2</td>
									<td>C2:R2</td>
									<td>C3:R2</td>
								</tr>
							</tbody>
						</table>

						<form id="contactForm" method="post" action="/contact.php">
							<ul>
								<li>
									<label for="name">*Name:</label>
									<input type="text" name="name" id="name" placeholder="What's your name?" value="" maxlength="70" autofocus required>
								</li>
								<li>
									<label for="email">*Email:</label>
									<input type="email" name="email" id="email" placeholder="What's your email?" value="" required>
								</li>
								<li>
									<label for="phone">Phone:</label>
									<input type="phone" name="phone" id="phone" placeholder="What's your telephone number?" value="">
								</li>
								<li>
									<label for="message">*Message:</label>
									<textarea rows="5" cols="50" name="message" id="message" form="contactForm" placeholder="What's your enquiry?" maxlength="500" required></textarea>
								</li>
								<li class="btn">
									<input type="reset" value="Reset">
									<input type="submit" id="submit" value="Submit">
								</li>
							</ul>
						</form>

						<footer>
							© Copyright 2018 Dan Ellis
						</footer>
					</body>
				</html>

Learning

Progressing with HTML

1. Headers

2. Footers

3. Navigation

Example:

4. Tables

Example:

5. Forms

6. Adding JavaScript

7. Adding CSS Styles

8. Building our first webpage (Cont.)

← Previous Lesson: HTML Introduction

Next Lesson: Understanding CSS →