Scribd
Upload
22 views131 pages

CBT - HTML - Ver 9.0

The document provides an overview of HTML, covering basic tags, elements, attributes, and formatting. It explains the structure of HTML documents, including headings, paragraphs, links, images, and tables, along with their respective attributes and styling options. Additionally, it emphasizes the importance of using proper syntax and structure for effective web development.

Uploaded by

pcsteam608
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
22 views131 pages

CBT - HTML - Ver 9.0

The document provides an overview of HTML, covering basic tags, elements, attributes, and formatting. It explains the structure of HTML documents, including headings, paragraphs, links, images, and tables, along with their respective attributes and styling options. Additionally, it emphasizes the importance of using proper syntax and structure for effective web development.

Uploaded by

pcsteam608
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 131

HTML

Making Professionals Globally

2
HTML
3
BASIC TAGS

Heading Tags
Any document starts with a heading. You can use different sizes for
your headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
displaying any heading, browser adds one line before and one line
after that heading. Ie,
This is heading 1 This is heading 2,
This is heading 3, This is heading 4,
This is heading 5 This is heading 6

4
HTML ELEMENTs

An HTML element is defined by a starting tag. If the element


contains other content, it ends with a closing tag, where the element
name is preceded by a forward slash as shown below with few tags −

Start Tag Content End Tag


<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br> This is a line-break.(Singular Tag)

5
HTML ELEMENTs

So here <p>....</p> is an HTML element, <h1>...</h1> is another


HTML element. There are some HTML elements which don't need to
be closed, such as <img.../>, <hr /> and <br /> elements. These
are known as singleton tags.
HTML documents consists of a tree of these elements and they
specify how HTML documents should be built, and what kind of
content should be placed in what part of an HTML document.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element
contains other content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing
6
tag of the same paragraph but <p>This is paragraph</p> is a
HTML ELEMENTs

Nested HTML Elements


It is very much allowed to keep one HTML element inside another HTML
element −
<html>
▰ The <html> element defines the whole document.
<body>
▰ It has a start tag <html> and an end tag </html>.
<h1>My First
▰ The element content is another HTML elementHeading</h1>
(the <body> element). <p>My first
▰ The <body> element defines the documentparagraph.</p>
body.
</body>
▰ It has a start tag <body> and an end tag </body>.
</html>
▰ The element content is two other HTML elements (<h1> and <p>).
7
HTML ELEMENTs

Empty HTML Elements


▰ HTML elements with no content are called empty elements.
▰ <br> is an empty element without a closing tag (the <br> tag defines a
line break).
▰ Empty elements can be "closed" in the opening tag like this: <br/>.
▰ HTML5 does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable by
XML parsers, you must close all HTML elements properly.
Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C 8
HTML ATTRIBUTES

An attribute is used to define the characteristics of an HTML element and is


placed inside the element's opening tag. All attributes are made up of two
parts − a name and a value
▰ The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the page.
▰ The value is what you want the value of the property to be set and
always put within quotations. The below example shows three possible
values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the
World Wide Web Consortium (W3C) recommends lowercase
9
attributes/attribute values in their HTML 4 recommendation.
HTML ATTRIBUTES

<!DOCTYPE html>
This will display the following
<html>
result −
<head>
<title>Align Attribute
This is left aligned
Example</title>
This is center aligned
</head>
This is right aligned
<body>
<p align = "left">This is left
aligned</p>
<p align = "center">This is center
aligned</p> 10
<p align = "right">This is right
HTML ATTRIBUTES

Core Attributes
The four core attributes that can be used on the majority of HTML
elements (although not all) are −
 Id
 Title
 Class
 Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page. There are two primary reasons that you
might want to use an id attribute on an element − 11
HTML ATTRIBUTES

If an element carries an id attribute as a unique identifier, it is possible to


identify just that element and its content.
If you have two elements of the same name within a Web page (or style
sheet), you can use the id attribute to distinguish between elements that
have the same name.

Example

<p id = "html">This para explains what is HTML</p>


<p id = "css">This para explains what is Cascading Style
Sheet</p> 12
HTML ATTRIBUTES

The title Attribute


The title attribute gives a suggested title for the element. They syntax for
the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the
element or while the element is loading.
Example
Live Demo
<!DOCTYPE html>
<html>
<head> 13
<title>The title Attribute Example</title>
HTML ATTRIBUTES

</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

Output
Titled Heading Tag Example

14
HTML ATTRIBUTES

The class Attribute


The class attribute is used to associate an element with a style sheet,
and specifies the class of element. You will learn more about the use of
the class attribute when you will learn Cascading Style Sheet (CSS). So
for now you can avoid it.

The value of the attribute may also be a space-separated list of class


names. For example −

class = "className1 className2 className3"


15
HTML ATTRIBUTES

The style Attribute


The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.
EX:
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
16
HTML ATTRIBUTES

<p style = "font-family:arial; color:#FF0000;">Some text...</p>


</body>
</html>
This will produce the following result −

Some text...

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
17
The <hr> element is used to separate content (or define a change) in an HTML
HTML HEADINGS

HTML Headings
Headings are defined with the <h1> to <h6> tags, <h1> defines the most
important heading. <h6> defines the least important heading.
Search engines use the headings to index the structure and content of your web
pages.
Users skim your pages by its headings. It is important to use headings to show the
document structure.
<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any
heading with the style attribute, using the CSS font-size property:
Example 18
HTML Paragraphs

 The HTML <p> element defines a paragraph:


 With HTML, you cannot change the output by adding extra spaces or extra lines
in your HTML code.
 The browser will remove any extra spaces and extra lines when the page is
displayed:

HTML Line Breaks


The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:

19
The HTML <pre> element defines preformatted text.
HTML Paragraphs

The pre tag preserves both spaces and line breaks:


My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

20
HTML FORMATING

 HTML also defines special elements for defining text with a special meaning.
 HTML uses elements like <b> and <i> for formatting output, like bold or italic
text.
 Formatting elements were designed to display special types of text:
<del> - Deleted text
<b> - Bold text <ins> - Inserted text
<strong> - Important text <sub> - Subscript text
<i> - Italic text <sup> - Superscript text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text 21
HTML Paragraphs

Example
<p>This is <sup>superscripted</sup> text.</p>

This
is superscripted text.

22
HTML FONT- Not Supported in
HTML5.

Example
Specify the font size, font face and color of text:
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!
</font>
OUTPUT

23
HTML STYLE

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

<tagname style="property:value;">
HTML Text Color
The color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p> 24
HTML STYLE

OUTPUT

HTML Fonts
The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
25
HTML STYLE

HTML Text Size


The font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
26
HTML STYLE

OUTPUT

27
HTML LINKS

Links are found in nearly all web pages. Links allow users to click their way from page
to page.
▰ HTML links are hyperlinks.
▰ You can click on a link and jump to another document.
▰ When you move the mouse over a link, the mouse arrow will turn into a little hand.

EX
<a href="url">link text</a>
HTML Link Colors
▰ By default, a link will appear like this (in all browsers):
▰ An unvisited link is underlined and blue
▰ A visited link is underlined and purple 28
▰
HTML LINKS

HTML Links - The target Attribute


The target attribute specifies where to open the linked document, The target
attribute can have one of the following values:
▰ _blank - Opens the linked document in a new window or tab
▰ _self - Opens the linked document in the same window/tab as it was clicked
(this is default)
▰ _parent - Opens the linked document in the parent frame
▰ _top - Opens the linked document in the full body of the window
▰ framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
<a href="https://www.Gteceducation.com/"
target="_blank">Visit Gteceducation!</a> 29
HTML LINKS

HTML Links - Image as Link


It is common to use images as links:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>

30
HTML Images

In HTML, images are defined with the <img> tag.


The <img> tag is empty, it contains attributes only, and does not have
a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
Example 31
HTML Images

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image
Example

<img src="img_girl.jpg" alt="Girl in a jacket"


style="width:500px;height:600px;">

32
HTML Images

Width and Height & Style


The width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents styles sheets
from changing the size of images:
Example
<html>
<head>
<style>
img {
width:100%;
33
}
HTML Images

</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body>
</html>

34
HTML Images

Images in Another Folder


If not specified, the browser expects to find the image in the same folder
as the web page.
However, it is common to store images in a sub-folder. You must then
include the folder name in the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">

35
HTML Table

Defining an An HTML table is defined with the <table> tag.


Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table
data/cell is defined with the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr> 36
HTML Table

<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
37
HTML Table

Output

38
HTML Table

HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without
borders.
A border is set using the CSS border property:
Example Output
table, th, td {
border: 1px solid black;
}

39
HTML Table

HTML Table - Collapsed Borders


If you want the borders to collapse into one border, add the CSS border-
collapse property:
Example
table, th, td { Output
border: 1px solid black;
border-collapse: collapse;
}

40
HTML Table

HTML Table - Adding Cell Padding


Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without
padding.
To set the padding, use the CSS padding property:
Output
<!DOCTYPE html>
<html>
<head>
<style>
41
table, th, td {
HTML Table

border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its
42
borders.</p>
HTML Table

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
43
</tr>
HTML Table

<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
44
</table>
HTML Table

<p>Try to change the padding to 5px.</p>


</body>
</html>

Output

45
HTML Table

HTML Table - Left-align Headings


By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}

46
HTML Table

HTML Table - Adding Border Spacing


Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}

47
HTML Table

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
48
HTML Table

<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

49
HTML Table

A Special Style for One Table


To define a special style for a special table, add an id attribute to the table:

<html>
<head>
<style>
table {
width:100%;
}
table, th, td { 50
HTML Table

border: 1px solid black; table#t01 tr:nth-child(odd) {


border-collapse: collapse; background-color: #fff;
} }
th, td { table#t01 th {
padding: 15px; background-color: black;
text-align: left; color: white;
} }
table#t01 tr:nth-child(even) { </style>
background-color: #eee; </head>
} <body> 51
HTML Table

<h2>Styling Tables</h2> <td>50</td>


<table> </tr>
<tr> <tr>
<th>Firstname</th> <td>Eve</td>
<th>Lastname</th> <td>Jackson</td>
<th>Age</th> <td>94</td>
</tr> </tr>
<tr> <tr>
<td>Jill</td> <td>John</td>
<td>Smith</td> <td>Doe</td> 52
HTML Table

<td>80</td> <tr>
</tr> <td>Jill</td>
</table> <td>Smith</td>
<br> <td>50</td>
<table id="t01"> </tr>
<tr> <tr>
<th>Firstname</th> <td>Eve</td>
<th>Lastname</th> <td>Jackson</td>
<th>Age</th> <td>94</td>
</tr> </tr> 53
HTML Table

<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

54
HTML LIST

HTML offers web authors three ways for specifying lists of information.
All lists must contain one or more list elements. Lists may contain −

<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to
list your items.
<dl> − A definition list. This arranges your items in the same way as
they are arranged in a dictionary.

55
HTML LIST

Unordered HTML List


The CSS list-style-type property is used to define the style of the list
item marker
Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

56
HTML LIST

Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

57
HTML LIST

Example - Square
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

58
HTML LIST

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> 59
HTML LIST

Ordered HTML- Attribute


Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman


numbers

type="i" The list items will be numbered with lowercase roman


numbers

60
HTML LIST

Lowercase Roman Numbers:


<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

61
HTML LIST

Nested HTML Lists:


List can be nested (lists inside
lists):

Example </ul>
<ul> </li>
<li>Coffee</li> <li>Milk</li>
<li>Tea </ul>
<ul>
<li>Black tea</li> 62
HTML FORM

The HTML <form> element defines a form that is used to collect user
input:
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the
type attribute.
Type Description
Here are some examples:
<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of many choices)

<input type="submit"> Defines a submit button (for submitting the form)


63
HTML FORM

Text Input
<input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
64
HTML FORM

Radio Button Input


<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> 65
HTML FORM

The Submit Button


<input type="submit"> defines a button for submitting the form data to a
form-handler.
The form-handler is typically a server page with a script for processing
input data.
The form-handler is specified in the form's action attribute:

66
HTML FORM

EX:
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

67
HTML FORM

HTML Form Elements

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup>Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation 68
HTML FORM

Visible Values:
Use the size attribute to specify the number of visible values:

Example
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> 69
HTML FORM

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

70
HTML FORM

The list Attribute


The list attribute refers to a <datalist> element that contains pre-defined
options for an <input> element.
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist> 71
HTML Iframe

An iframe is used to display a web page within a web page.


Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>

Iframe - Target for a Link


An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the
iframe:
72
HTML Iframe

Example
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="https://gteceducation.com"
target="iframe_a">gteceducation.com</a></p>
<p>When the target of a link matches the name of an iframe, the link will
open in the iframe.</p>
73
</body>
HTML Iframe

74
HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
ex:
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
</body>
</html> 75
HTML Colors

Background Color
You can set the background color for HTML elements:
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

76
HTML Colors

Text Color
You can set the color of text:
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

77
HTML Colors

Border Color
You can set the color of borders:
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

78
HTML Colors

Color Values
In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values:
Same as color name "Tomato":

, 100%, 64%, 0.5);">...</h1>


79
HTML Colors

Same as color name "Tomato", but 50% transparent:

Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
80
HTML <!DOCTYPE>

Definition and Usage


The <!DOCTYPE> declaration must be the very first thing in your
HTML document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction
to the web browser about what version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because
HTML 4.01 was based on SGML. The DTD specifies the rules for the
markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a
reference to a DTD.
Tip: Always add the <!DOCTYPE> declaration to your HTML
documents, so that the browser knows what type of document to 81
HTML Layout

HTML Layout Elements


Websites often display content in multiple columns (like a magazine
or newspaper).
HTML5 offers new semantic elements that define the different parts of
a web page: ▰ <header> - Defines a header for a document or a section
▰ <nav> - Defines a container for navigation links
▰ <section> - Defines a section in a document
▰ <article> - Defines an independent self-contained article
▰ <aside> - Defines content aside from the content (like a
sidebar)
▰ <footer> - Defines a footer for a document or a section
▰ <details> - Defines additional details
82
▰ <summary> - Defines a heading for the <details> element
HTML Layout

Ex: text-align: center;


<html> }
<head> nav {
<style> float: left;
div.container { max-width: 160px;
width: 100%; margin: 0;
border: 1px solid gray; padding: 1em;
} }
header, footer { nav ul {
padding: 1em; list-style-type: none;
color: white; padding: 0;
background-color: black; }
83
clear: left;
HTML Layout

nav ul a { <div class="container">


text-decoration: none; <header>
} <h1>City Gallery</h1>
article { </header>
margin-left: 170px; <nav>
border-left: 1px solid gray; <ul>
padding: 1em; <li><a
overflow: hidden; href="#">London</a></li>
} <li><a
href="#">Paris</a></li>
</style>
<li><a
</head> href="#">Tokyo</a></li>
<body> </ul>
84
</nav>
HTML Layout

<div class="container"> <p>London is the capital city


<header> of England. It is the most
populous city in the United
<h1>City Gallery</h1> Kingdom, with a metropolitan
</header> area of over 13 million
<nav> inhabitants.</p>

<ul> <p>Standing on the River


Thames, London has been a
<li><a href="#">London</a></li> major settlement for two
<li><a href="#">Paris</a></li> millennia, its history going back
<li><a href="#">Tokyo</a></li> to its founding by the Romans,
who named it Londinium.</p>
</ul>
</article>
</nav>
<footer>Copyright &copy;
<article> W3Schools.com</footer>
85
<h1>London</h1> </div>
HTML Layout

86
HTML HEAD

The HTML <head> Element


The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not
displayed.
Metadata typically define the document title, character set, styles, links,
scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>,
<script>, and <base>.
The HTML <title> Element
87
The <title> element defines the title of the document, and is required in all
HTML HEAD

The HTML <style> Element


The <style> element is used to define style information for a single HTML
page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
88
HTML HEAD

The HTML <meta> Element


The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines
(keywords), and other web services.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the
device, and will be smaller on a mobile phone than on a computer screen.
89
HTML HEAD

You should include the following <meta> viewport element in all your web
pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-
width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first
loaded by the browser.

90
HTML SCRIPT

The HTML <script> Element


The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with
id="demo":
Example
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script> 91
HTML Entities

Reserved characters in HTML must be replaced with character entities.


Characters that are not present on your keyboard can also be replaced by
entities.
HTML Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
To display a less than sign (<) we must write: &lt; or &#60;

92
HTML Entities

93
HTML URLs

A URL is another word for a web address.


A URL can be composed of words (gteceducation.com), or an Internet
Protocol (IP) address (192.68.20.50).
Most people enter the name when surfing, because names are easier to
remember than numbers.
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.
A Uniform Resource Locator (URL) is used to address a document (or
other data) on the web.

94
Common URL Schemes
The table below lists some common schemes:

Schem Short for Used for


e
http HyperText Transfer Protocol Common web pages. Not encrypted
https Secure HyperText Transfer Secure web pages. Encrypted
Protocol
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer 95
HTML Encoding

URL Encoding
URLs can only be sent over the Internet using the ASCII character-set. If a
URL contains characters outside the ASCII set, the URL has to be
converted.
URL encoding converts non-ASCII characters into a format that can be
transmitted over the Internet.
URL encoding replaces non-ASCII characters with a "%" followed by
hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space
with a plus (+) sign, or %20.
96
HTML Media

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.


The most common way to discover the type of a file, is to look at the file
extension.
Multimedia files have formats and different extensions
like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

97
HTML Audio

Audio on the Web


Before HTML5, audio files could only be played in a browser with a plug-in
(like flash).
The HTML5 <audio> element specifies a standard way to embed audio in
a web page.

Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg"> 98
Your browser does not support the audio element.
HTML Audio

The controls attribute adds audio controls, like play, pause, and
volume.
The <source> element allows you to specify alternative audio files
which the browser may choose from. The browser will use the first
recognized format.
The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.

99
HTML Video

How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.

100
HTML Video

The HTML <video> Element


To show a video in HTML, use the <video> element:

Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
101
HTML Video

102
HTML Video

HTML <video> Autoplay


To start a video automatically use the autoplay attribute:

Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
103
HTML Plug-ins

The purpose of a plug-in is to extend the functionality of a web browser.

HTML Helpers (Plug-ins)


Helper applications (plug-ins) are computer programs that extend the
standard functionality of a web browser.
Examples of well-known plug-ins are Java applets.
Plug-ins can be added to web pages with the <object> tag or the
<embed> tag.
Plug-ins can be used for many purposes: display maps, scan for viruses,
verify your bank id, etc.
104
HTML Plug-ins

The <object> Element


The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML
document.
It is used to embed plug-ins (like Java applets, PDF readers, Flash Players)
in web pages.
The <object> element can also be used to include HTML in HTML or images

Example
<object width="400" height="50" 105
data="bookmark.swf"></object>
HTML YouTube

The easiest way to play videos in HTML, is to use YouTube.

To play your video on a web page, do the following:


Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
106
HTML5 Elements

The most interesting new HTML5 elements are:

New semantic elements like <header>, <footer>, <article>, and


<section>.
New attributes of form elements like number, date, time, calendar, and
range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.

107
HTML5 Elements

New Semantic/Structural Elements


HTML5 offers new elements for better document structure:
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text
outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption>Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
108
<main> Defines the main content of a document
HTML5 Elements

<mark> Defines marked/highlighted text


<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
109
HTML5 Drag and Drop

Drag and Drop


Drag and drop is a very common feature. It is when you "grab" an object
and drag it to a different location.
In HTML5, drag and drop is part of the standard: Any element can be
draggable.
Make an Element Draggable
First of all: To make an element draggable, set the draggable attribute to
true:
<img draggable="true">

110
HTML5 Elements

Where to Drop - ondragover


The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a
drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the
ondragover event:
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):

111
HTML5 Elements

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
EXAMPLE:
<html>
<head>
<style>
#div1 {
112
width: 350px;
HTML5 Elements

height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id); 113
HTML5 Elements

}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag It </p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 114
HTML5 Elements

<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">
</body>
</html>

115
HTML5 Canvas

HTML Canvas
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
Draw a Line
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100); 116
HTML5 Canvas

In HTML, a <canvas> element looks like this:


<canvas id="myCanvas" width="200" height="100"></canvas>

The <canvas> element must have an id attribute so it can be referred to by


JavaScript.
The width and height attribute is necessary to define the size of the canvas.
You can have multiple <canvas> elements on one HTML page.
By default, the <canvas> element has no border and no content.
To add a border, use a style attribute:
Example
<canvas id="myCanvas" width="200" height="100“ style="border:1px solid
#000000;"> 117
HTML5 SVG

What is SVG?
▰ SVG stands for Scalable Vector Graphics
▰ SVG is used to define graphics for the Web
▰ SVG is a W3C recommendation

The HTML <svg> Element


▻ The HTML <svg> element is a container for SVG graphics.
▻ SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.
118
HTML5 SVG

SVG CIRCLE
Example
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
119
HTML5 Canvas

Differences Between SVG and Canvas


SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available
within the SVG DOM. You can attach JavaScript event handlers for
an element.
In SVG, each drawn shape is remembered as an object. If
attributes of an SVG object are changed, the browser can
automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is
drawn, it is forgotten by the browser. If its position should be 120
changed, the entire scene needs to be redrawn, including any
HTML5 Canvas

Comparison of Canvas and SVG


The table below shows some important differences between Canvas and
SVG:
Canvas SVG
• Resolution dependent • Resolution independent
• No support for event handlers • Support for event handlers
• Poor text rendering capabilities • Best suited for applications with
• You can save the resulting image large rendering areas (Google Maps)
as .png or .jpg • Slow rendering if complex (anything
• Well suited for graphic-intensive that uses the DOM a lot will be slow)
games • Not suited for game applications

121
HTML5 Geolocation

The HTML Geolocation API is used to get the geographical position of a


user.
Since this can compromise privacy, the position is not available unless the
user approves it.
Example
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
122
} else {
HTML5 Geolocation

}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

123
HTML5 Web Storage

What is HTML Web Storage?


With web storage, web applications can store data locally within the user's
browser.
Before HTML5, application data had to be stored in cookies, included in
every server request. Web storage is more secure, and large amounts of
data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information
is never transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one
origin, can store and access the same data.
124
HTML5 Web Storage

HTML Web Storage Objects


HTML web storage provides two objects for storing data on the
client:

window.localStorage - stores data with no expiration date


window.sessionStorage - stores data for one session (data is
lost when the browser tab is closed)

125
HTML5 Web Storage

The localStorage Object


The localStorage object stores the data with no expiration date. The data
will not be deleted when the browser is closed, and will be available the
next day, week, or year.

Example
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
126
localStorage.getItem("lastname");
HTML5 Web Storage

The sessionStorage Object


The sessionStorage object is equal to the localStorage object, except that it stores the
data for only one session. The data is deleted when the user closes the specific
browser tab.
The following example counts the number of times a user has clicked a button, in the
current session:
Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
} 127
document.getElementById("result").innerHTML = "You have clicked the button " +
HTML5 Web Worker

What is a Web Worker?


When executing scripts in an HTML page, the page becomes unresponsive
until the script is finished.
A web worker is a JavaScript that runs in the background, independently of
other scripts, without affecting the performance of the page. You can
continue to do whatever you want: clicking, selecting things, etc., while the
web worker runs in the background.
ex:

128
HTML5 SSE

Server-Sent Events - One Way Messaging


A server-sent event is when a web page automatically gets updates from a
server.
This was also possible before, but the web page would have to ask if any
updates were available. With server-sent events, the updates come
automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport
results, etc.
Example
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) { 129
document.getElementById("result").innerHTML += event.data +
HTML5 SSE

Server-Sent Events - One Way Messaging


A server-sent event is when a web page automatically gets updates from a
server.
This was also possible before, but the web page would have to ask if any
updates were available. With server-sent events, the updates come
automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport
results, etc.
Example
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) { 130
document.getElementById("result").innerHTML += event.data +
END
131

You might also like