Introduction to HTML
Lab Topics
Learning outcomes
See how HTML describes the structure of a web page
Learn how tags or elements are added to your document
Explore basic HTML elements such as
<h1>, <img>, <p>, <figure>, <table>, <form>
Explore the use of Chrome DevTool - Inspect
Exercise
Create a web page named “index.html” and insert the basic html
document elements
Structural Markups
The elements that you can use to describe both headings and
paragraphs
Headings: HTML Code
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>,
<h6></h6>
Headings: Browser Output
Paragraphs: HTML Code
<p></p>
Paragraphs: Browser Output
Superscript and Subscript
<sup></sup>, <sub></sub>
Whitespace : HTML Code
Whitespace : Browser Output
Line break
<br />
Horizontal Rules
<hr />
Semantic markup
provides extra information; such as
where emphasis is placed in a sentence,
something you have written is a quotation (and who said it),
the meaning of acronyms, and so on
are not intended to affect the structure of your web pages
Strong
<strong></strong>
Emphasis
<em></em>
Quotations: HTML Code
<blockquote></blockquote>
Quotations: Displayed on Browser
Quotations
The <blockquote> element is used for longer quotes that take up an
entire paragraph
The <q> element is used for shorter quotes that sit within a paragraph
Abbreviations: HTML Code
<abbr></abbr>
Abbreviations: Browser Output
Author Details
<address></address>
Lists
Ordered lists
are lists where each item in the list is numbered
Unordered lists
are lists that begin with a bullet point
Definition lists
are made up of a set of terms along with the definitions for each of
those terms
Ordered Lists
<ol>
<li></li>
</ol>
Unordered List
<ul>
<li></li>
</ul>
Definition Lists: HTML Code
<dl>
<dt></dt>
<dd></dd>
</dl>
Definition Lists: Displayed on Browser
Nested Lists
Links
You will commonly come across the following types of links:
● Links from one website to another
● Links from one page to another on the same website
● Links from one part of a web page to another part of the same page
● Links that open in a new browser window
● Links that start up your email program and address a new email to
someone
Links
Links are created using the <a> element
Users can click on anything between the opening <a> tag and the
closing </a> tag
You specify which page you want to link to using the href attribute
Linking to other sites
<a></a>
Linking to other pages on same site
Email Links
Opening Links in a new window/tab
target attribute, its value should be _blank
Linking to a Specific Part of the Same Page: HTML Code
Linking to a Specific
Part of the Same
Page:
Browser Output
Images
Include an image in your web pages using HTML
Show an image at the right size
Image
<img />
Height and Width of Image
Figure and Figure Caption
<figure>, <figcaption>
Tables
When representing information in a table, you need to think in terms of
a grid made up of rows and columns
Use the four key elements for creating tables
Represent complex data using tables
Add captions to tables
Tables: HTML Code
<table>
<tr>
<td></td>
</tr>
</table>
Table Headings
Spanning Columns
Spanning Rows
Long Table
<thead></thead>
<tbody></tbody>
</tfoot></tfoot>
FORMS
Form Controls
There are several types of form controls that
Text Input, Password Input, Text Area
Radio Button, Checkboxes, Dropdown Boxes
Submit Button, Image Button, File Upload
Form Structure
Form Structure
<form></form>
Form controls live inside a <form> element
action attribute
Its value is the URL for the page on the server that will receive the
information in the form when it is submitted
method attribute
Forms can be sent using one of two methods: get or post
Text Input Form Control
Password Input Form Control
Textarea Form Control
Radio Button Form Control
Checkbox Form Control
Drop Down List Form Control
Multiple Select Box: HTML Code
Multiple Select Box: Browser Output
File Input Form Control
Submit Button Form Control
Image Button Form Control
Button and Hidden Form Controls
Date Input Control
Email Input Control
Labeling Form Controls
Grouping Form Elements
Form Validation
Comments in HTML: HTML Code
<!-- -->
Comments in HTML: Browser Output
Id Attribute
Every HTML element can carry the id attribute
It is used to uniquely identify that element from other elements on the
page
Class Attribute
Every HTML element can also carry a class attribute
Rather than uniquely identifying one element within a document, it will
identify several elements as being different from the other elements on
the page
Class Attribute
Block Elements
Block level elements will always appear to start on a new line in the
browser window
Examples of block elements are <h1> , <p> , <ul> , and <li> .
Block Elements
Inline Elements
Inline elements will always appear to continue on the same line as their
neighbouring elements
Examples of inline elements are <a> , <b> , <em> , and <img>
Inline Elements
HTML Elements Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Inspecting Pages
You can use Chrome’s Inspect tool to inspect how pages are built
Right click on anywhere on a page you want to inspect, then select
Inspect option
