CBT - HTML - Ver 9.0
CBT - HTML - Ver 9.0
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
5
HTML ELEMENTs
<!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
Example
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Output
Titled Heading Tag Example
14
HTML ATTRIBUTES
Some text...
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
19
The HTML <pre> element defines preformatted text.
HTML Paragraphs
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
<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
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
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
30
HTML Images
32
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
35
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
39
HTML Table
40
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
Output
45
HTML Table
46
HTML Table
47
HTML Table
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
49
HTML Table
<html>
<head>
<style>
table {
width:100%;
}
table, th, td { 50
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
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
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> 59
HTML LIST
60
HTML LIST
61
HTML LIST
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)
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
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
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
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
70
HTML FORM
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":
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>
86
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
92
HTML Entities
93
HTML URLs
94
Common URL Schemes
The table below lists some common schemes:
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
97
HTML Audio
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
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
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
Example
<object width="400" height="50" 105
data="bookmark.swf"></object>
HTML YouTube
107
HTML5 Elements
110
HTML5 Elements
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
What is SVG?
▰ SVG stands for Scalable Vector Graphics
▰ SVG is used to define graphics for the Web
▰ SVG is a W3C recommendation
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
121
HTML5 Geolocation
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
123
HTML5 Web Storage
125
HTML5 Web Storage
Example
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
126
localStorage.getItem("lastname");
HTML5 Web Storage
128
HTML5 SSE