1
Definition
“HTML is a language that defines
basic structure of a website.”
Note:
In order to learn how to write web pages, it is
very important to understand how to structure
document.
2
In this class you will learn:
• How HTML describe the structure of a webpage
• How tags or elements are added to your document
• How to write your first webpage
3
Elements
The HTML code is made up of characters that live inside
the angled bracket.
• Elements are usually made up of two tags:
An opening tag A closing tag
<p> </p>
• The Closing tag has an extra forward slash in it.
• Each HTML element tells the browser something about
the information that sits between its opening and
closing tag.
4
Opening tag
Character
Note:
• The characters in the brackets
<p>
indicate the tag purpose.
For example:
In this tag the p stands for
paragraph.
Left-Angle Bracket Right-Angle Bracket
(Less than sign) (More than sign)
5
Closing tag
Character
Note:
• The Closing tag has a forward
</p>
slash after the < symbols.
Left-Angle Bracket Right-Angle Bracket
(Less than sign) (More than sign)
6
Forward Slash
Opening tag Closing tag
<p> Content
</p>
Element
Note:
• We can say tag = element,
but actually element is tags + its full content.
7
Basic Structure of HTML
html
head
body
8
Another example of HTML Structure
9
Body, Head and Title
<body> </body>
Everything inside this element is shown inside
the main browser window.
<head> </head>
This contains information about the page.
<title> </title>
The content of this element are shown in the
tab of the browser. 10
Tab Main Browser Window
Everything inside body element will be shown inside this main browser window.
11
12
You will learn about:
• Structural Markup: the elements that you can use to
describe both headings and paragraphs
• Semantic Markup: which provides extra information;
such as, where emphasis is placed in a sentence, that
something you have written in a quotation and so on
13
Headings
• HTML has six levels of heading.
<h1> • <h1> is used for main heading.
<h2> • <h2> is used for subheading.
<h3>
<h4> If there are further sections under the
subheadings then the <h3> element is
<h5> used, and so on...
<h6>
14
Headings
code result
15
Paragraphs
To create a paragraph, surround the words that make
up the paragraph with an opening <p> tag and closing
</p> tag.
<p>
code
result
16
Bold
By enclosing words in the tags <b> and </b> we can
make characters appear bold.
<b>
code
17
Bold
result
<b>
18
Italic
By enclosing words in the tags <i> and </i> we can
make characters appear italic.
<i>
code
19
Italic
result
<i>
20
Superscript & Subscript
Superscript: The <sup> element is used to contain characters
that should be superscript such as the suffixes of dates or
mathematical concepts like raising a number to a power such as
22. <sup>
example 12th E = mC2
Subscript: The <sub> element is used to contain characters
<sub>
that should be subscript. It is commonly used with foot notes or
chemical formulas such as H20.
example CO2 H2O
21
Superscript & Subscript
<sup>
<sub>
22
Self Closing Tags
Line Breaks & Horizontal Rules
if you wanted to add a line break inside the middle of a paragraph
you can use the line break tag <br/>. <br/>
To create a break between themes — such as a change of topic in a
book or a new scene in a play — you can add a horizontal rule
between sections using the <hr/> tag.
<hr/>
23
Self Closing Tags
Line Breaks & Horizontal Rules
<br/>
<hr/>
Self Closing Tags can work without forward slash.
There are more Self Closing Tags, we will discuss on later chapters. 24
Strong & Emphasis
The use of <strong> element indicates that its content has strong
importance. <strong>
The <em> element indicates emphasis that subtly changes the
meaning of a sentence.
<em>
25
Strong & Emphasis
<strong>
<em>
26
27
Lists
There are lots of occasions when we need to use lists.
HTML provides us with three different types:
1 Ordered
2 Unordered
3 Definition
28
Lists
Ordered list: Ordered list are lists where each item in the list
is numbered.
Unordered list: Unordered list are lists that begins with a
bullet point.
Definition list: Definition list are made up of a set of terms
along with the definitions for each of those terms.
29
Ordered lists
The ordered list is created with the <ol> element.
<ol>
Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item.)
<li>
Note:
we can use alphabets, no's, or roman letters for ordered lists, by
default we use numbers, if we want to change the default option
we can use attribute for this.
30
Ordered lists
<ol>
<li>
31
Unordered lists
The unordered list is created with the <ul> element.
<ul>
Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item.)
<li>
Note:
we can change bullet into circle, square, disc and so on by using
attribute.
32
Unordered lists
<ul>
<li>
33
Definition lists
The definition list is created with the <dl> element and usually
consist of a series of terms and their definitions.
Inside the <dl> element you will usually see pairs of <dt> and <dd>
<dl>
elements.
<dt> is used to contain the term being defined (the definition term) <dt>
<dd> is used to contain the definition.
<dd>
34
Definition lists
<dl>
<dt>
<dd>
35
Nested lists
You can use a second list inside an <li> element to create a sub-list
or nested list.
36
Attribute
Attribute provides additional information about the content of an
element.
They appear on the opening tag of the element and are made up
of two parts: a name and a value, separated by an equals sign.
Attribute Attribute
name value
<ol type = “ A ” >
<li> HTML </li>
</ol>
37
38
Links
Definition
Links are the defining feature of the web because they allow you
to move from one web page to another. <a>
You will commonly come across the following type of links:
• Links from one website to another.
• Links from one page to another on the same website.
• Links that open in a new browser window.
39
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.
<a>
example
<a href= “# ” > Google</a>
40
Linking to other site
When you link to a different website, the value of the href
attribute will be the full web address for the site which is known as
an absolute URL.
<a>
example
<a href= “https://www.google.com ” > Google</a>
41
Linking to other pages on the same site
When you linking to other pages within the same site, you do not
need to specify the domain name in the URL.
If all the pages of the site are in the same folder, then the value of
<a>
the href attribute is just the name of the file.
example
<a href= “About.html” > About</a>
42
Linking to other pages on the same site
Directory Structure
Link Type Example
<a>
Same Folder <a href= “About.html” > About</a>
Child Folder <a href= “page/About.html” > About</a>
Grandchild
<a href= “links/page/About.html” > About</a>
Folder
Parent Folder <a href= “../About.html” > About</a>
Grandparent
<a href= “../../About.html” > About</a>
Folder
43
Opening links in a new window
If you want a link open in a new window, you can use the target
attribute on the opening <a> tag. The value of this attribute should
be _blank.
<a>
example
<a href= “About.html” target=“_blank ”> About</a>
44
45
Tables
What is a Table?
A table represents information in a grid format.
example
46
Basic Table Structure
The <table> element is used to create a table. The contents of the
table are written out row by row. <table>
You indicate the row using the <tr> element.
(The tr stands for table row.) <tr>
Each cell of a table is represented using a <td> element.
(The td stands for table data.) <td>
47
Table Headings
The <th> element is used just like the <td> element but its purpose
is to represent the heading for either a column or a row.
(The th stands for table heading.)
<th>
<th>
48
colspan & rowspan Attribute
Sometimes you may need the entries in a table to stretch across
more than one column or You may also need entries in a table to
stretch down across more than one row.
The colspan attribute and rowspan attribute can be used on a
<th> or <td> element to indicate how many columns and rows
should span.
colspan
rowspan
49
Long Tables
There are three elements that help distinguish between the main content
of the table and the first and last rows.
These elements help you to style these sections in a different manner
than the rest of the table (as you will see when you learn about CSS).
The headings of the table should sit inside the <thead> element.
<thead>
The body should sit inside the <tbody> element.
<tbody>
The footer belong inside the <tfoot> element.
<tfoot>
50
51
Forms
HTML forms give you a set of elements to collect data from your
users.
In this chapter you will learn:
• How to create a form on your website.
• The different tools for collecting data.
• New HTML5 form controls.
52
Form Controls
There are several types of form controls that you can use to collect
information from visitors to your site.
Text Input
Adding Text Password Input
Text Area
Radio Buttons
Making Choices Check Boxes
Drop-down Boxes
Submit Buttons
Submitting Forms
Image Buttons
Uploading Files File Upload
53
Form Structure
Form controls live inside a <form> element.
<form>
<input type = “ ”>
<form>
</form> <input>
The <input> element is used to create several different form
controls. The value of the type attribute determines what kind of
input they will be creating.
54
Adding Text
Text Input Password Input Text Area
type = “ text ” type = “password”
<form>
<textarea> </textarea>
<input>
55
Adding Text
Text Input Password Input Text Area
Attributes
name
Attributes
name
Attributes
name
<form>
size size cols <input>
maxlength maxlength rows
56
Making Choices
Check Boxes Radio Buttons Drop-down
type = “checkbox” type = “ radio ” <select>
<option> </option>
<option> </option>
<form>
</select>
<input>
57
Making Choices
Check Boxes Radio Buttons Drop-down
Attributes
name
Attributes
name
Attributes
in <select>
name
<form>
value value
in <option>
value <input>
checked checked disabled
selected
58
Uploading Files
File Upload
type = “ file ”
<form>
<input>
59
Submitting Forms
Submit Buttons Image Button
type = “ submit ” type = “ image ”
<form>
<input>
60
Submitting Forms
Submit Buttons Image Button
name
Attributes
src
Attributes
<form>
value width <input>
height
61
Grouping Form Elements
<legend> <fieldset>
<form>
<input>
<fieldset>
<legend>
62
Date and Email
Date Input Email Input
<form>
type = “ date ” type = “ email ”
<input>
63
64
Doctype
<!DOCTYPE html>
<!DOCTYPE html>
Because there have been several versions of HTML, each web page
should begin with a DOCTYPE declaration to tell a browser which
version of HTML the page is using
65
Comments
<!-- -->
<!-- comment goes here -->
If you want to add a comment to your code that will not be visible in
the user's browser, you can add the text between these characters
66
ID Attribute
id=“value goes here”
id=“ ”
Every HTML element can carry the id attribute. It is used to uniquely
identify that element from other elements on the page.
Its value should start with a letter or an underscore (not a number or
any other character). It is important that no two elements on the
same page have the same value for their id attributes (otherwise the
value is no longer unique).
67
Class Attribute
class=“value goes here”
class=“ ”
Every HTML element can carry the class attribute.
the value of class can be repeated, multiple tags can have same
value of class.
68
Block Elements
Some elements will always appear to start on a new line in the
browser window. These are known as block level elements.
Examples of block elements are
<h1>, <p>, <ul>, and <li>.
69
Inline Elements
Some elements will always appear to continue on the same line as
their neighboring elements. These are known as inline elements.
Examples of inline elements are
<a>, <b>, <em>, and <img>.
70
Grouping Elements in a Block
<div>
The <div> element allows you to group a set of elements together in
one block-level box.
<div>
71
Grouping Elements in an Inline
<span>
The <span> element acts like an inline equivalent of the <div>
element.
<span>
72
Iframes
<iframe>
<iframe>
An iframe is like a little window that has been cut into your page —
and in that window you can see another page. The term iframe is an
abbreviation of inline frame.
Attributes
1. src
2. height
3. width
73
