[go: up one dir, main page]
Scribd
Upload
61 views24 pages

2.00. - Elements of HTML

This document provides an overview of HTML elements, tags, and colors. It discusses various HTML tags like paired tags, singular tags, and comment tags. It also explains how to specify colors in HTML using predefined color names, RGB, HEX, HSL, RGBA, and HSLA values. Examples are given to demonstrate using the <center> tag to center content and setting background colors with different color code formats.

Uploaded by

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

2.00. - Elements of HTML

This document provides an overview of HTML elements, tags, and colors. It discusses various HTML tags like paired tags, singular tags, and comment tags. It also explains how to specify colors in HTML using predefined color names, RGB, HEX, HSL, RGBA, and HSLA values. Examples are given to demonstrate using the <center> tag to center content and setting background colors with different color code formats.

Uploaded by

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

25/10/2023

Outline
• HTML Tags
• HTML Colors
Elements of HTML • Working with Text
• Working with List
Dr. Pankaj Kumar • Tables
• Frames
• Working with Hyperlinks
• Images and Multimedia
• Working with Forms and controls
1 2

HTML Tags Paired Tags


• Tags are instructions that are embedded directly into the text of the • A tag is said to be a paired tag if it, along with a companion tag, flanks
document. the text.
• By convention all HTML tags begin with an open angle bracket (<) and • For example the <B> tag is a paired tag. The <B> tag with its
with a close angle bracket (>). companion tag </B> causes the text contained between them to be
• HTML tags can be of two types. rendered in bold. The effect of other paired tags is applied only to the
• Paired Tags
text they contain.
• Singular tags • In paired tags, the first tag (<B> is often called the opening tag and
the second tag </B> is called the closing tag.

3 4

Singular tags Comment Tags


• The second type of tag is the singular or stand-alone tag. • Comment tags are used to insert comments in the HTML source code.
• A stand-alone tag does not have a companion tag. For example <BR> • Single Line Comment
tag will insert a line break. This tag does not require any companion <!-- Write your comments here -->
tag.
• Multiple Line Comment
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->

5 6

1
25/10/2023

<center> Tag HTML Colors


• We can use <center> tag to put any content in the center of the page • HTML colors are specified with predefined color names, or with RGB,
or any table cell. HEX, HSL, RGBA, or HSLA values.
• In HTML, a color can be specified by using a color name:
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
7 8

Color Values Color Values


<!DOCTYPE html>
• In HTML, colors can also be specified using RGB values, HEX values, <html>
HSL values, RGBA values, and HSLA values. <body>

• The following three <div> elements have their background color set <p>Same as color name "Tomato":</p>
with RGB, HEX, and HSL values: <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>


<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71,
0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%,
0.5)</h1>

</body>
9 </html> 10

Color Values HTML RGB and RGBA Colors


• An RGB color value represents RED, GREEN, and BLUE light sources.
• An RGBA color value is an extension of RGB with an Alpha channel
(opacity).

11 12

2
25/10/2023

RGB Color Values RGBA Color Values


• In HTML, a color can be specified • RGBA color values are an
as an RGB value, using this extension of RGB color values
formula: with an Alpha channel - which
rgb (red, green, blue) specifies the opacity for a color.
• Each parameter (red, green, and • An RGBA color value is specified
blue) defines the intensity of the with:
color with a value between 0 rgba(red, green, blue, alpha)
and 255. • The alpha parameter is a
• This means that there are 256 x number between 0.0 (fully
256 x 256 = 16777216 possible transparent) and 1.0 (not
colors! transparent at all):
13 14

HEX Color Values HTML HSL and HSLA Colors


• In HTML, a color can be specified • HSL stands for hue, saturation, and lightness.
using a hexadecimal value in the • HSLA color values are an extension of HSL with an Alpha channel
form: (opacity).
#rrggbb
• Where rr (red), gg (green) and
bb (blue) are hexadecimal values
between 00 and ff (same as
decimal 0-255).

15 16

HSL Color Values HSLA Color Values


• In HTML, a color can be specified • HSLA color values are an extension
using hue, saturation, and lightness of HSL color values with an Alpha
(HSL) in the form:
channel - which specifies the
hsl(hue, saturation, lightness)
opacity for a color.
• Hue is a degree on the color wheel
from 0 to 360. 0 is red, 120 is • An HSLA color value is specified
green, and 240 is blue. with:
• Saturation is a percentage value, hsla(hue, saturation, lightness, alpha)
0% means a shade of gray, and
100% is the full color. • The alpha parameter is a number
• Lightness is also a percentage between 0.0 (fully transparent) and
value, 0% is black, and 100% is 1.0 (not transparent at all)
white.

17 18

3
25/10/2023

Horizontal Lines Horizontal Lines


• Horizontal lines are used to visually break-up sections of a document. Attribute Value Description
The <hr> tag creates a line from the current position in the document left
to the right margin and breaks the line accordingly. Align center Used to specify the alignment of the horizontal rule.
right
• For example, we may want to give a line between two paragraphs as
noshade noshade Used to specify the bar without shading effect.
in the given example:
size pixels Used to specify the height of the horizontal rule.
width pixels Used to specify the width of the horizontal rule.

19 20

Horizontal Lines Nonbreaking Spaces


<!DOCTYPE html> • Suppose we want to use the phrase "12 Angry Men." Here, we would
<html>
<head> not want a browser to split the "12, Angry" and "Men" across two
<title>Horizontal Line lines.
Example</title>
</head> • An example of this technique appears in the movie "12 Angry Men."
<body>
<p>This is paragraph one and • In cases, where we do not want the client browser to break text, we
should be on top</p> should use a nonbreaking space entity &nbsp; instead of a normal
<hr>
<p>This is paragraph two and space. For example, when coding the "12 Angry Men" in a paragraph,
should be at bottom</p> we should use something similar to the following code
</body>
</html>

21 22

Nonbreaking Spaces <pre> Element


<!DOCTYPE html> • The HTML <pre> element defines preformatted text.
<html>
<head> • The text inside a <pre> element is displayed in a fixed-width font
<title>Nonbreaking Spaces
Example</title> (usually Courier), and it preserves both spaces and line breaks.
</head>
<body>
<p>An example of this
technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

23 24

4
25/10/2023

<pre> Element - Example HTML Elements


<html>
<head>
• An HTML element is defined by a start tag, some content, and an end
tag.
<title>Preformatted Text</title>
</head> <tagname> Content goes here... </tagname>
<body>
<p> • Example:
A B C
D E
G
F
H I
<p>My first paragraph.</p>
</p>
<pre>
A B C
D E F
G H I
</pre>
</body>
</html>
25 26

Nested HTML Elements Empty HTML Elements


• HTML elements can be nested (this means that elements can contain • HTML elements with no content are called empty elements.
other elements). • The <br> tag defines a line break, and is an empty element without a
• All HTML documents consist of nested HTML elements. closing tag
• Example
<p>This is a <br> paragraph with a line break.</p>

27 28

HTML Attributes HTML – Formatting Tags


• All HTML elements can have attributes • If we use a word processor, we must be familiar with the ability to
• Attributes provide additional information about an element make text bold, italicized, or underlined; these are just three of the
ten options available to indicate how text can appear in HTML and
• Attributes are always specified in the start tag XHTML.
• Attributes usually come in name/value pairs like: name="value" HTML Tag Name Syntax HTML Tag Name Syntax
Bold Text <b>...</b> Inserted Text <ins>...</ins>
Italic Text <i>...</i> Deleted Text <del>...</del>
Underlined Text <u>...</u> Larger Text <big>...</big>
Strike Text <strike>...</strike> Smaller Text <small>...</small>
Monospaced Font <tt>...</tt> Quoting Text <blockquote>…</blockquote>
Superscript Text <sup>...</sup> Short Quotations <q>...</q>
Subscript Text <sub>...</sub> Text Citations <cite> …</cite>
29 30

5
25/10/2023

HTML Styles The HTML Style Attribute


• The HTML style attribute is used to add styles to an element, such as • Setting the style of an HTML element, can be done with the style
color, font, size, and more. attribute.
• The HTML style attribute has the following syntax:

<tagname style="property:value;">

• The property is a CSS property. The value is a CSS value.

31 32

The HTML Style Attribute HTML Block and Inline Elements


• Set background color for two different elements: • Every HTML element has a default display value, depending on what
<!DOCTYPE html>
type of element it is.
<html> • There are two display values:
<body>
• block
<h1 style="background-color:powderblue;">This is a heading</h1> • Inline
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
</html>

33 34

Block-level Elements The <div> Element


• A block-level element always starts on a new line. • The <div> element is often used as a container for other HTML
• A block-level element always takes up the full width available elements.
(stretches out to the left and right as far as it can). • The <div> element has no required attributes, but style, class and id
• A block level element has a top and a bottom margin, whereas an are common.
inline element does not. • When used together with CSS, the <div> element can be used to style
• The <div> element is a block-level element. blocks of content.

35 36

6
25/10/2023

Block-level Elements Block-level Elements


<!DOCTYPE html> • Block-level elements in HTML are:
<html>
<body>

<div style="border: 1px solid


black">Hello World</div>

</body>
</html>

37 38

Inline Elements The <span> Element


• An inline element does not start on a new line. • The <span> element is an inline container used to mark up a part of a
• An inline element only takes up as much width as necessary. text, or a part of a document.
• This is a <span> element inside a paragraph. • The <span> element has no required attributes, but style, class and id
are common.
• When used together with CSS, the <span> element can be used to
style parts of the text.

39 40

Inline Elements Inline Elements


<!DOCTYPE html> • Inline elements in HTML are:
<html>
<body>

<p>This is an inline span <span


style="border: 1px solid
black">Hello World</span> element
inside a paragraph.</p>

</body>
</html>

41 42

7
25/10/2023

HTML class Attribute How to use class Attribute?


• The HTML class attribute is used to specify a class for an HTML • The class attribute is often used to point to a class name in a style
element. sheet. It can also be used by a JavaScript to access and manipulate
• Multiple HTML elements can share the same class. elements with the specific class name.

43 44

How to use class Attribute? HTML id Attribute


<!DOCTYPE html>
<html> • The HTML id attribute is used to specify a unique id for an HTML
<head>
<style> element.
.city
{
background-color: tomato; • We cannot have more than one element with the same id in an HTML
color: white;
border: 2px solid black; document.
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
</body>
</html>
45 46

How to use id Attribute? How to use id Attribute?


• The id attribute specifies a unique id for an HTML element. The value <!DOCTYPE html>
<html>
of the id attribute must be unique within the HTML document. <head>
<style>
• The id attribute is used to point to a specific style declaration in a #myHeader
{
style sheet. It is also used by JavaScript to access and manipulate the background-color: lightblue;
element with the specific id. color: black;
padding: 40px;
• The syntax for id is: write a hash character (#), followed by an id }
text-align: center;

name. Then, define the CSS properties within curly braces {}. </style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the
id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
47 48
</html>

8
25/10/2023

Working with Lists HTML Unordered Lists


• HTML offers web authors three ways for specifying lists of • An unordered list is a collection of related items that have no special
information. All lists must contain one or more list elements. Lists order or sequence. This list is created by using HTML <ul> tag.
may contain − • Each item in the list is marked with a bullet.
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list our
items.
• <dl> − A definition list. This arranges our items in the same way as they are
arranged in a dictionary.

49 50

HTML Unordered Lists The type Attribute


<html> • We can use type attribute for <ul> tag to specify the type of bullet we
<head>
<title>HTML Unordered like. By default, it is a disc.
List</title>
</head> • Following are the possible options
<body> • <ul type = "square">
<ul>
<li>Beetroot</li>
• <ul type = "disc">
<li>Ginger</li> • <ul type = "circle">
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

51 52

The type Attribute HTML Ordered Lists


<html> • If we are required to put our items in a numbered list instead of
<head>
<title>HTML Unordered bulleted, then HTML ordered list will be used.
List</title>
</head> • This list is created by using <ol> tag. The numbering starts at one and
<body> is incremented by one for each successive ordered list element
<ul type = "square"> tagged with <li>.
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

53 54

9
25/10/2023

HTML Ordered Lists The type Attribute


<html> • We can use type attribute for <ol> tag to specify the type of
<head>
<title>HTML Ordered numbering we like.
List</title>
</head> • By default, it is a number. Following are the possible options
<body> • <ol type = "1"> - Default-Case Numerals.
<ol>
<li>Beetroot</li>
• <ol type = "I"> - Upper-Case Numerals.
<li>Ginger</li> • <ol type = "i"> - Lower-Case Numerals.
<li>Potato</li> • <ol type = "A"> - Upper-Case Letters.
<li>Radish</li>
</ol> • <ol type = "a"> - Lower-Case Letters.
</body>
</html>

55 56

The type Attribute The start Attribute


<html> • We can use start attribute for <ol> tag to specify the starting point of
<head>
<title>HTML Ordered numbering we need.
List</title>
</head> • Following are the possible options
<body> • <ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = “A">
<li>Beetroot</li>
• <ol type = "I" start = "4"> - Numerals starts with IV.
<li>Ginger</li> • <ol type = "i" start = "4"> - Numerals starts with iv.
<li>Potato</li> • <ol type = "a" start = "4"> - Letters starts with d.
<li>Radish</li>
</ol> • <ol type = "A" start = "4"> - Letters starts with D.
</body>
</html>

57 58

The start Attribute HTML Definition Lists


<html> • HTML and XHTML supports a list style which is called definition lists
<head>
<title>HTML Ordered where entries are listed like in a dictionary or encyclopedia. The
List</title> definition list is the ideal way to present a glossary, list of terms, or
</head>
<body>
other name/value list.
<ol type = "i" start = "4"> • Definition List makes use of following three tags.
<li>Beetroot</li>
<li>Ginger</li> • <dl> − Defines the start of the list
<li>Potato</li> • <dt> − A term
<li>Radish</li> • <dd> − Term definition
</ol>
</body> • </dl> − Defines the end of the list
</html>

59 60

10
25/10/2023

HTML Definition Lists Tables


<html> • The HTML tables allow web authors to arrange data like text, images,
<head>
<title>HTML Definition links, other tables, etc. into rows and columns of cells.
List</title>
</head> • The HTML tables are created using the <table> tag in which the
<body> • <tr> tag is used to create table rows and
<dl>
<dt><b>HTML</b></dt>
• <td> tag is used to create data cells.
<dd>This stands for Hyper • The elements under <td> are regular and left aligned by default
Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper
Text Transfer Protocol</dd>
</dl>
</body>
</html>
61 62

Tables Table Heading


<html> • Table heading can be defined using <th> tag.
<head>
<title>HTML Tables</title> • This tag will be put to replace <td> tag, which is used to represent
</head>
<body> actual data cell.
<table border = "1">
<tr> • Normally we will put our top row as table heading as shown below,
<td>Row 1, Column 1</td> otherwise we can use <th> element in any row.
<td>Row 1, Column 2</td>
</tr> • Headings, which are defined in <th> tag are centered and bold by
<tr>
<td>Row 2, Column 1</td> default.
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
63 64

Table Heading Cellpadding and Cellspacing Attributes


<html>
<head> • There are two attributes called cellpadding and cellspacing which we
<title>HTML Table Header</title>
</head>
will use to adjust the white space in our table cells.
<body>
<table border = "1"> • The cellspacing attribute defines space between table cells, while
<tr>
<th>Name</th> cellpadding represents the distance between cell borders and the
<th>Salary</th>
</tr>
content within a cell.
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
65 66

11
25/10/2023

Cellspacing Attributes Cellpadding Attributes


• cellspacing is the attribute of a table that defines the distance • cellpadding is the attribute of a table that defines the distance
between each cell of a table. The default value is 1. between the border of each cell and its contents. The default value is
• Example: 1.
• Example:
<table cellspacing="20" border="1">
<tr> <table cellpadding="20" border="1">
<td>JOHN</td> <tr>
<td>SANDY</td> <td>JOHN</td>
</tr> <td>SANDY</td>
<tr> </tr>
<td>PETER</td> <tr>
<td>MARY</td> <td>PETER</td>
</tr> <td>MARY</td>
</table> </tr>
67 68
</table>

Cellpadding and Cellspacing Attributes Colspan and Rowspan Attributes


<html>
<head> • We will use colspan attribute if we want to merge two or more
<title>HTML Table Cellpadding</title>
</head>
columns into a single column.
<body>
<table border = "1" cellpadding = "5" • Similar way we will use rowspan if we want to merge two or more
cellspacing = "5">
<tr> rows.
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html> 69 70

Colspan and Rowspan Attributes Tables Backgrounds


<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
• We can set table background using one of the following two ways:
</head>
<body>
• bgcolor attribute − We can set background color for whole table or just for
<table border = "1">
<tr>
one cell.
<th>Column 1</th>
<th>Column 2</th> • background attribute − We can set background image for whole table or just
<th>Column 3</th>
</tr> for one cell.
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td> • We can also set border color using bordercolor attribute.
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

71 72

12
25/10/2023

Tables Backgrounds Table Height and Width


<html>
<head>
<title>HTML Table Background</title>
• We can set a table width and height using width and height
</head>
<body>
attributes.
<table border = "1" bordercolor = "green" bgcolor =
"yellow">
<tr>
• We can specify table width or height in terms of pixels or in terms of
<th>Column 1</th>
<th>Column 2</th> percentage of available screen area.
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
73 74

Table Height and Width Table Caption


<html>
<head>
• The caption tag will serve as a title or explanation for the table and it
<title>HTML Table shows up at the top of the table. This tag is deprecated in newer
Width/Height</title>
</head> version of HTML/XHTML.
<body>
<table border = "1" width = "400"
height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
75 76

Table Caption Table Header, Body, and Footer


<html> • Tables can be divided into three portions − a header, a body, and a foot.
<head>
<title>HTML Table Caption</title> The head and foot are rather similar to headers and footers in a word-
</head> processed document that remain the same for every page, while the body
<body>
<table border = "1" width = is the main content holder of the table.
"100%">
<caption>This is the • The three elements for separating the head, body, and foot of a table are −
caption</caption> • <thead> − to create a separate table header.
<tr>
<td>row 1, column • <tbody> − to indicate the main body of the table.
1</td><td>row 1, columnn 2</td> • <tfoot> − to create a separate table footer.
</tr>
<tr> • A table may contain several <tbody> elements to indicate different pages
<td>row 2, column
1</td><td>row 2, columnn 2</td> or groups of data. But it is notable that <thead> and <tfoot> tags should
</tr> appear before <tbody>
</table>
</body>
77 78
</html>

13
25/10/2023

Table Header, Body, and Footer Table Header, Body, and Footer
<html>
• Tables can be divided into three portions − a header, a body, and a foot. <head>
<title>HTML Table</title>
The head and foot are rather similar to headers and footers in a word- </head>
<body>
processed document that remain the same for every page, while the body <table border = "1" width = "100%">
<thead>
is the main content holder of the table. <tr>
<td colspan = "4">This is the head of the
table</td>

• The three elements for separating the head, body, and foot of a table are </tr>
</thead>
<tfoot>
• <thead> − to create a separate table header. <tr>
<td colspan = "4">This is the foot of the
• <tbody> − to indicate the main body of the table. table</td>
</tr>
• <tfoot> − to create a separate table footer. </tfoot>
<tbody>
<tr>
• A table may contain several <tbody> elements to indicate different pages <td>Cell 1</td>
<td>Cell 2</td>

or groups of data. But it is notable that <thead> and <tfoot> tags should <td>Cell 3</td>
<td>Cell 4</td>
</tr>
appear before <tbody> </tbody>
</table>
</body>
</html>
79 80

Nested Tables Nested Tables


<html>
• We can use one table inside another table. Not only tables we can use <head>
<title>HTML Table</title>

almost all the tags inside table data tag <td>. </head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

81 82

HTML Table Colgroup HTML Table Colgroup


• The <colgroup> element is used to style specific columns of a table. • The <colgroup> element should be used as a container for the column
• If we want to style the two first columns of a table, use the specifications.
<colgroup> and <col> elements. • Each group are specified with a <col> element.
• The span attribute specifies how many columns that gets the style.
• The style attribute specifies the style to give the columns.

83 84

14
25/10/2023

HTML Table Colgroup HTML Table Multiple Colgroup


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
</head>
<title> colgroup</title>
<body>
</head> <h2>Multiple Col Elements</h2>
<body> <p>Add multiple col elements in the colgroup:</p>
<table style="width: 25%;">
<h2>Colgroup</h2> <colgroup>
<p>Add the a colgroup with a col element that spans over two columns to define a <col span="2" style="background-color: #D6EEEE">
style for the two columns:</p> <col span="2" style="background-color: pink">
</colgroup>
<tr>
<table border=1 style="width: 25%;"> <th>MON</th>
<colgroup> <th>TUE</th>
<col span="2" style="background-color: #D6EEEE"> <th>WED</th>
</colgroup> <th>THU</th>
<tr> </tr>
<th>MON</th> <tr>
<td>1</td>
<th>TUE</th>
<td>2</td>
<th>WED</th> <td>3</td>
<th>THU</th> <td>4</td>
</tr> </tr>
<tr> <tr>
<td>1</td> <td>8</td>
<td>2</td> <td>9</td>
<td>10</td>
<td>3</td> <td>11</td>
<td>4</td> </tr>
</tr> <tr>
<tr> <td>15</td>
<td>8</td> <td>16</td>
<td>9</td> <td>17</td>
<td>10</td> <td>18</td>
</tr>
<td>11</td>
<tr>
</tr> <td>22</td>
</table> <td>23</td>
</body> <td>24</td>
</html> <td>25</td>
</tr>
</table>
85 </body>
</html>
86

Frames Disadvantages of Frames


• HTML frames are used to divide our browser window into multiple • There are few drawbacks with using frames, so it's never
sections where each section can load a separate HTML document. recommended to use frames in webpages:
• A collection of frames in the browser window is known as a frameset. • Some smaller devices cannot cope with frames often because their screen is
not big enough to be divided up.
• The window is divided into frames in a similar way the tables are • Sometimes our page will be displayed differently on different computers due
organized: into rows and columns. to different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame technology.

87 88

Creating Frames Creating Frames


<html>
• To use frames on a page we use <frameset> tag instead of <body> <head>
tag. <title>HTML Frames</title>
</head>
<frameset rows = "30%,40%,30%">
• The <frameset> tag defines, how to divide the window into frames. <frame name = "top" src =
"D:/Documents/NIET/Subjects/Web Technologies
• The rows attribute of <frameset> tag defines horizontal frames and (RCS-E12)/HTML/17 - UList.html" />
<frame name = "main" src =
cols attribute defines vertical frames. "D:/Documents/NIET/Subjects/Web Technologies
(RCS-E12)/HTML/08 - Table.html" />
• Each frame is indicated by <frame> tag and it defines which HTML <frame name = "bottom" src =
"D:/Documents/NIET/Subjects/Web Technologies
document shall open into the frame. (RCS-E12)/HTML/23 - Hyperlink.html" />
<noframes>
<body>Your browser does not support
frames.</body>
</noframes>
</frameset>
</html>

89 90

15
25/10/2023

Creating Frames Creating Frames


<html> <html>
<head> <head>
<title>HTML Frames</title> <title>HTML Frames</title>
</head> </head>
<frameset cols = "30%,40%,30%"> <frameset rows="50%,*" cols="320,*">
<frame name = "top" src = <frame
"D:/Documents/NIET/Subjects/Web Technologies src="D:/Documents/NIET/Subjects/Web
(RCS-E12)/HTML/17 - UList.html" /> Technologies (RCS-E12)/HTML/12 -
<frame name = "main" src = TableBgColor.html" name="topleft">
"D:/Documents/NIET/Subjects/Web Technologies <frame
(RCS-E12)/HTML/08 - Table.html" /> src="D:/Documents/NIET/Subjects/Web
<frame name = "bottom" src = Technologies (RCS-E12)/HTML/21 -
"D:/Documents/NIET/Subjects/Web Technologies OListStart.html" name="topright">
(RCS-E12)/HTML/23 - Hyperlink.html" /> <frame
<noframes> src="D:/Documents/NIET/Subjects/Web
<body>Your browser does not support Technologies (RCS-E12)/HTML/22 - DefnList.html"
frames.</body> name="botleft">
</noframes> <frame
</frameset> src="D:/Documents/NIET/Subjects/Web
</html> Technologies (RCS-E12)/HTML/24 - Image.html"
name="botright">
91 </frameset> 92
</html>

HTML Iframes Iframe - Set Height and Width


• An HTML iframe is used to display a web page within a web page. • Use the height and width attributes to specify the size of the iframe.
• The HTML <iframe> tag specifies an inline frame. • The height and width are specified in pixels by default:
• An inline frame is used to embed another document within the
current HTML document. <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

• Syntax
<iframe src="url" title="description"></iframe>

93 94

Iframe - Example HTML - Links


<!DOCTYPE html> • A webpage can contain various links that take us directly to other
<html>
<body> pages and even specific parts of a given page. These links are known
as hyperlinks.
<h2>Remove the Iframe Border</h2>
<p>To remove the default border of • Hyperlinks allow visitors to navigate between Web sites by clicking on
the iframe, use CSS:</p> words, phrases, and images. Thus we can create hyperlinks using text
<iframe src="demo_iframe.htm" or images available on a webpage.
style="border:none;" title="Iframe
Example"></iframe>

</body>
</html>

95 96

16
25/10/2023

Working with Hyperlinks The target Attribute


• A link is specified using HTML tag <a>. • The target attribute is used to specify the location where linked
• This tag is called anchor tag and anything between the opening <a> document is opened. Following are the possible options:
tag and the closing </a> tag becomes part of the link and a user can
click that part to reach to the linked document. Sl. No. Option & Description
• Following is the simple syntax to use <a> tag. _blank
1
Opens the linked document in a new window or tab.
<a href="url">link text</a>
_self
<a href = " url " target = "_self"> link text </a> 2
Opens the linked document in the same frame.
• Example: 3
_parent
Opens the linked document in the parent frame.
<a href="https://www.w3schools.com/html/">Visit our HTML _top
tutorial</a> 4
Opens the linked document in the full body of the window.
targetframe
5
97 Opens the linked document in a named targetframe. 98

The target Attribute HTML Links - Create a Bookmark


<!doctype html>
<html>
• HTML bookmarks are used to allow readers to jump to specific parts
<head> of a Web page.
<title>HyperText</title>
</head> • Bookmarks can be useful if our webpage is very long.
<body>
<!-- one page to another page link--> • To make a bookmark, we must first create the bookmark, and then
<a href="P2.html">P2 page Link </a>
add a link to it.
</body>
</html> • When the link is clicked, the page will scroll to the location with the
bookmark.

99 100

HTML Links - Create a Bookmark HTML Images


• First, create a bookmark with the id attribute: • Images enhance visual appearance of the web pages by making them
<a name=“bookmark name"> bookmark section </a> more interesting and colorful.
Then, add a link to the bookmark ("Jump to Chapter 4"), from within • The <img> tag is used to insert images in the HTML documents. It is
the same page: an empty element and contains attributes only. The syntax of the
<img> tag can be given with:
<a href="# bookmark name "> bookmark section </a>
• Or, add a link to the bookmark ("Jump to Chapter 4"), from another <img src="url" alt="some_text">
page:
<a href=“file.html# bookmark name "> bookmark section </a>

101 102

17
25/10/2023

HTML Images HTML Images


• Insert Image • Set Image Alignment
<img src="url"> <img src = "/html/images/test.png" alt = "Test Image"
• Example: border = "3" align = "right">
<img src="img_chania.jpg" alt="Flowers in Chania">
• Set Image Width/Height
<img src = "/html/images/test.png" alt = "Test Image"
width = "150" height = "100">
• Set Image Border
<img src = "/html/images/test.png" alt = "Test Image"
border = "3">

103 104

HTML Images HTML Multimedia


<html> • Multimedia comes in many different formats. It can be almost
<head>
<title>Using Image in anything we can hear or see, like images, music, sound, videos,
Webpage</title> records, films, animations, and more.
</head>
<body> • Web pages often contain multimedia elements of different types and
<p>Simple Image Insert</p> formats.
<img src =
"D:\Images\redhat.jpg"> • Multimedia elements (like audio or video) are stored in media files.
<img src =
"D:\Images\redhat.jpg" width = "150" The most common way to discover the type of a file, is to look at the
height = "100"> file extension.
<img src =
"D:\Images\redhat.jpg" border = "3"> • Multimedia files have formats and different extensions like: .wav,
</body> .mp3, .mp4, .mpg, .wmv, and .avi.
</html>
105 106

Embedding Video in HTML Document -


Embedding Video in HTML Document
Example
• Inserting video onto a web page was not relatively easy, because web <html>
<head>
browsers did not have a uniform standard for defining embedded <title>Embedding Video into an
media files like video. HTML Page</title>
</head>
• The newly introduced HTML5 <video> element provides a standard <body>
way to embed video in web pages. However, the video element is <video controls="controls"
src="D:\WD\HTML\shuttle.mp4">
relatively new, but it works in most of the modern web browsers. Your browser does not
support the HTML5 Video element.
• The following example simply inserts a video into the HTML </video>
document, using the browser default set of controls, with one source </body>
</html>
defined by the src attribute.

107 108

18
25/10/2023

Embedding Audio in HTML Document -


Embedding Audio in HTML Document
Exapmle
• Inserting audio onto a web page was not easy before, because web <html>
<head>
browsers did not have a uniform standard for defining embedded <title>Specify Alternate Sources
media files like audio. for audio Element in HTML</title>
</head>
• The newly introduced HTML5 <audio> element provides a standard <body>
way to embed audio in web pages. However, the audio element is <audio controls="controls">
<source
relatively new but it works in most of the modern web browsers. src="D:\WD\HTML\birds.mp3"
type="audio/mpeg">
• The following example simply inserts an audio into the HTML5 Your browser does not
document, using the browser default set of controls, with one source support the HTML5 audio element.
</audio>
defined by the src attribute. </body>
</html>

109 110

HTML Forms HTML Forms


• HTML Forms are required, when we want to collect some data from • The HTML <form> tag is used to create an HTML form and it has
the site visitor. For example, during user registration we would like to following syntax −
collect information such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc. The <form action = "Script URL" method = "GET|POST">
back-end application will perform required processing on the passed form elements like input, textarea etc.
data based on defined business logic inside the application. </form>
• There are various form elements available like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc.

111 112

Form Attributes HTML Form Controls


• Apart from common attributes, following is a list of the most • There are different types of form controls that we can use to collect
frequently used form attributes data using HTML form
• Label Controls
• Text Input Controls
Sl. No. Attribute & Description • Checkboxes Controls
1
action • Radio Box Controls
Backend script ready to process your passed data. • Select Box Controls
method • File Select boxes
2 Method to be used to upload data. The most frequently used are GET and
POST methods. • Hidden Controls
target • Clickable Buttons
3 Specify the target window or frame where the result of the script will be • Submit and Reset Button
displayed. It takes values like _blank, _self, _parent etc.

113 114

19
25/10/2023

Label Controls Label Controls


• The <label> tag defines a label for many form elements. <!DOCTYPE html>
<html>
<body>
• The <label> element is useful for screen-reader users, because the <h2>Label fields</h2>
<form>
screen-reader will read out loud the label when the user focus on the <label for="fname">First name:</label><br>
input element. <input type="text" id="fname" name="fname"
value="Pankaj"><br>
<label for="lname">Last name:</label><br>
• The <label> element also help users who have difficulty clicking on <input type="text" id="lname" name="lname"
value="Kumar">
very small regions (such as radio buttons or checkboxes) - because </form>
when the user clicks the text within the <label> element, it toggles </body>
</html>
the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute
of the <input> element to bind them together.
115 116

Text Input Controls Single-line text input controls


• There are three types of text input used on forms • This control is used for items that require only one line of user input,
• Single-line text input controls − This control is used for items that require such as search boxes or names. They are created using HTML <input>
only one line of user input, such as search boxes or names. They are created tag.
using HTML <input> tag.
• Password input controls − This is also a single-line text input but it masks the <!DOCTYPE html>
<html>
character as soon as a user enters it. They are also created using HTML <body>
<h2>Label fields</h2>
<input> tag. <form>
• Multi-line text input controls − This is used when the user is required to give <label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
details that may be longer than a single sentence. Multi-line input controls value="Pankaj"><br>
<label for="lname">Last name:</label><br>
are created using HTML <textarea> tag. <input type="text" id="lname" name="lname"
value="Kumar">
</form>
</body>
</html>
117 118

Attributes Password input controls


SL. No Attribute & Description • This is also a single-line text input but it masks the character as soon
1
type as a user enters it. They are also created using HTML <input>tag but
Indicates the type of input control and for text input control it will be set to text.
type attribute is set to password.
name <html>
2
Used to give a name to the control which is sent to the server to be recognized and get the value. <head>
value <title>Password Input
3 Control</title>
This can be used to provide an initial value inside the control.
</head>
size <body>
4
Allows to specify the width of the text-input control in terms of characters. <form >
User ID : <input type = "text"
maxlength name = "user_id" />
5
Allows to specify the maximum number of characters a user can enter into the text box. <br>
Password: <input type =
"password" name = "password" />
</form>
</body>
119 </html> 120

20
25/10/2023

Multiple-Line Text Input Controls Checkbox Control


• This is used when the user is required to give details that may be • Checkboxes are used when more <html>
<head>
longer than a single sentence. Multi-line input controls are created than one option is required to be <title>Checkbox
using HTML <textarea> tag. selected. They are also created Control</title>
</head>
<html>
<head>
using HTML <input> tag but type <body>
<title>Multiple-Line Input attribute is set to checkbox. <form>
Control</title> <input type = "checkbox"
</head> name = "maths" value = "on"> Maths
<body> <input type = "checkbox"
<form>
name = "physics" value = "on">
Description : <br />
<textarea rows = "5" cols =
Physics
"50" name = "description"> </form>
Enter description here... </body>
</textarea> </html>
</form>
</body>
121 122
</html>

Attributes Radio Button Control


SL. No. Attribute & Description • Radio buttons are used when <html>
<head>
1
type out of many options, just one <title>Radio Box
Indicates the type of input control and for checkbox input control it will be set to checkbox..
option is required to be selected. Control</title>
name </head>
2
Used to give a name to the control which is sent to the server to be recognized and get the value. They are also created using <body>
value HTML <input> tag but type <form>
3 <input type = "radio" name
The value that will be used if the checkbox is selected. attribute is set to radio.
= "subject" value = "maths"> Maths
checked
4 <input type = "radio" name
Set to checked if you want to select it by default.
= "subject" value = "physics">
Physics
</form>
</body>
</html>

123 124

Select Box Control Date Control


• A select box, also called drop down box which provides option to list <!DOCTYPE html>
<html>
down various options in the form of drop down list, from where a <body>
user can select one or more options. <h2>Date Field</h2>
<html> <form>
<head> <label
<title>Select Box Control</title> for="birthday">Birthday:</label>
</head> <input type="date" id="birthday"
<body> name="birthday">
<form> </form>
<select name = "dropdown"> </body>
<option value = "Maths"
</html>
selected>Maths</option>
<option value =
"Physics">Physics</option>
</select>
</form>
</body>
125 126
</html>

21
25/10/2023

Local Date Field Month Field


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>

<h2>Local Date Field</h2> <h2>Month Field</h2>


<form> <form action="/action_page.php">
<label for="birthdaytime">Birthday <label for="bdaymonth">Birthday (month
(date and time):</label> and year):</label>
<input type="datetime-local" <input type="month" id="bdaymonth"
id="birthdaytime" name="birthdaytime"> name="bdaymonth">
</form> <input type="submit" value="Submit">
</form>
<p><strong>Note:</strong>
type="datetime-local" is not supported <p><strong>Note:</strong> type="month"
in Firefox, Safari or Internet Explorer is not supported in Firefox, Safari, or
12 (or earlier).</p> Internet Explorer 11 (or earlier).</p>

</body> </body>
</html> </html>
127 128

Input Type Time Input Type Week


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h1>Display a Week Input Control</h1>
<h1>Show a Time Input Control</h1> <form action="/action_page.php">
<label for="week">Select a
<form action="/action_page.php"> week:</label>
<label for="appt">Select a <input type="week" id="week"
time:</label> name="week">
<input type="time" id="appt" <input type="submit" value="Submit">
name="appt"> </form>
<input type="submit" value="Submit"> <p><strong>Note:</strong> type="week" is
</form> not supported in Firefox, Safari or
Internet Explorer 11 (or earlier).</p>
<p><strong>Note:</strong> type="time" is
not supported in Safari or Internet </body>
Explorer 12 (or earlier).</p> </html>
</body>
</html>
129 130

Color Picker File Upload Box


<!DOCTYPE html>
<html>
• If we want to allow a user to upload a file to our web site, we will
<body> need to use a file upload box, also known as a file select box. This is
<h2>Show a Color Picker</h2> also created using the <input> element but type attribute is set to
<form> file.
<label for="favcolor">Select your
favorite color:</label> <html>
<input type="color" id="favcolor" <head>
name="favcolor" value="#ff0000"> <title>File Upload Box</title>
</head>
</form> <body>
<form>
</body>
<input type = "file" name =
</html>
"fileupload" accept = "image/*" />
</form>
</body>
</html>
131 132

22
25/10/2023

Button Controls Attributes


• There are various ways in HTML to create clickable buttons. SL. No. Type & Description
submit
• We can also create a clickable button using <input>tag by setting its 1
This creates a button that automatically submits a form.
type attribute to button. 2
reset
This creates a button that automatically resets form controls to their initial values.
• The type attribute can take the following values button
3
This creates a button that is used to trigger a client-side script when the user clicks that button.
image
4
This creates a clickable button but we can use an image as background of the button.

133 134

Button Controls Hidden Form Controls


<html> • Hidden form controls are used to hide data inside the page which
<head>
<title>Button Controls</title> later on can be pushed to the server.
</head>
<body> • This control hides inside the code and does not appear on the actual
<form> page. For example, following hidden form is being used to keep
<input type = "submit" name current page number.
= "submit" value = "Submit" />
<input type = "reset" name • When a user will click next page then the value of hidden control will
= "reset" value = "Reset" />
<input type = "button" name be sent to the web server and there it will decide which page will be
= "ok" value = "OK" /> displayed next based on the passed current page.
</form>
</body>
</html>

135 136

Hidden Form Controls HTML - Marquees


<html> • An HTML marquee is a scrolling piece of text displayed either
<head>
<title>Hidden Form horizontally across or vertically down our webpage depending on the
Control</title> settings. This is created by using HTML <marquees> tag.
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name
= "pagename" value = "10" />
<input type = "submit" name
= "submit" value = "Submit" />
<input type = "reset" name
= "reset" value = "Reset" />
</form>
</body>
</html>
137 138

23
25/10/2023

Marquee Attribute HTML - Marquees


SL. No. Attribute & Description <html>
width <head>
1 <title>HTML marquee
This specifies the width of the marquee. This can be a value like 10 or 20% etc.
Tag</title>
height </head>
2
This specifies the height of the marquee. This can be a value like 10 or 20% etc. <body>
direction <marquee width = "50%"
3 This specifies the direction in which marquee should scroll. This can be a value like up, down, left or direction = "right">This text will
right. scroll from left to right</marquee>
behavior </body>
4 This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and </html>
alternate.

139 140

HTML Entities Some Mathematical Symbols Supported by HTML


Result Description Entity Name Entity Number Char Number Entity Description
non-breaking space &nbsp; &#160; ∀ &#8704; &forall; FOR ALL
< less than &lt; &#60; ∂ &#8706; &part; PARTIAL DIFFERENTIAL
> greater than &gt; &#62; ∃ &#8707; &exist; THERE EXISTS
& ampersand &amp; &#38;
∅ &#8709; &empty; EMPTY SETS
" double quotation mark &quot; &#34;
∇ &#8711; &nabla; NABLA
' single quotation mark (apostrophe) &apos; &#39;
∈ &#8712; &isin; ELEMENT OF
¢ cent &cent; &#162;
∉ &#8713; &notin; NOT AN ELEMENT OF
£ pound &pound; &#163;
∋ &#8715; &ni; CONTAINS AS MEMBER
¥ yen &yen; &#165;
∏ &#8719; &prod; N-ARY PRODUCT
€ euro &euro; &#8364;
© copyright &copy; &#169; ∑ &#8721; &sum; N-ARY SUMMATION
® registered trademark &reg; &#174; 141 142

24

You might also like