Gr7 HTML Notes 2022-23

Introduction to HTML 5
SNO TOPICS
TERM1
1
Definition and Benefits of HTML
● Meaning of tags and elements Steps to create and

view a web page
● Basic tags of an HTML webpage and explanation
● Steps to create and view a web page
2 HTML 5 tags
● <h1> to <h6>, <p>,hr,br
● Formatting Tags -<b>, <i>, <sup>, <sub>,<strong>
3 CSS
● Three types of styling sheets
● Inline styling- Applying inline styling on tags
● Internal styling-
○ Text Properties
○ Font Properties
○ Properties of HR
4 Creating Lists in HTML

● OL
● UL
● DL
● Nested list
Term2
5 CSS - Internal styling
● Creating ID
● <div>,<span>
6 Inserting Images
7 Linking web pages and Images
8 Tables
9 External Style sheet: Apply styling using External css
10 Forms
11 Frames
12 HTML Layout
Chapter 1 : Definition and Benefits of HTML
HTML
HTML stands for Hyper Text Markup Language where each word has its own
significance.
Hyper signifies that the user can view World Web pages.
Text is anything written in English language or alphanumeric characters. Markup
means you can mark up the text you have written as special indicators through
special tags.
Language signifies that HTML is a computer language
HTML is not a programming language, but rather a markup language. Therefore,

unlike traditional programming languages, HTML does not use variables and constants.
HTML is tabbed as a scripting language. It includes two kinds of text – the contents and the
markup.
The content is the information to be displayed on the screen like text, pictures, audio,
video, etc.
The markup is the information inserted in the HTML script to control the display.
HTML files include both control information (tags or elements) and content (data)
which can together describe the appearance and content of Web pages.
Thus, HTML is a set of instructions given to a Web browser to describe the structure
of a Web page. It is a user-friendly language for presenting documents on the Web. It
contains commands that are used to compose the page and specify the text, graphics,
headings, etc. That would appear on the Web browser. It also contains commands for
linking pages to other pages and to other Internet resources. HTML documents can be
created with any word processor or text editor such as Notepad.
Benefits of HTML
HTML provides you with the following benefits:
● HTML is easy to learn and execute. It executes commands in very less time.
● We can create a structured document using different tags in HTML.
● HTML is an interpreter-based language as its commands are executed
instruction by instruction.
● It is a platform independent language which means it can be executed on any
operating system.
● It allows the use of different tools to make the document look more attractive.
● It provides paragraph alignment features. So you can align your text towards
left, right or centre.
● You can also insert an image, a table and an animated text or graphics on the
Web page using HTML.
● HTML allows linking of different Web pages.
● It also provides forms and frames for better user interaction.
2. Tags and elements
What are Tags?

In HTML, the instructions or commands in the form of text characters are
called tags or markups. The tags instruct a browser to retrieve and display
information or graphics in a page. They are used to markup HTML elements. They are
surrounded by two characters < (less than) and > (greater than), which are called
angular brackets. HTML tags normally come in pairs like <HTML> and </HTML>. The
first tag in a pair is the start tag and the second tag is the end tag. The text between
the start and the end tags is the element content. Tags can have attributes, which
provide additional information about the HTML elements on your page. HTML is not
case sensitive, so <html> is the same as <HTML>.
HTML Elements
There are various HTML elements that can be listed to construct a Web page.
An HTML tag consists of a left angular bracket or a less than symbol (<) followed by
the name of the tag and closed by a right angular bracket or a greater than symbol.
Various essential document structure elements are <html> ... </html>, <head> ...
</head> and <body> ... </body>.
Basic HTML elements are of two types
1. Container Elements
2. Empty Elements.
1. Container Elements:
The element that has both the tags, i.e., the starting or opening tag as well as
the ending or closing tag is known as a Container Element. So, the container
elements include both ON tag (Starting Tag) and OFF tag (Ending Tag). The OFF tag is
the same as the ON tag except for the / used after < sign.
For example, to define a text as a first level heading, you use H1 tags as shown
below:
<h1> Computer Fundamentals </h1>

The following code illustrates the container elements:
<!DOCTYPE html>
<html>
<head>
<title> Html Sample</title>
</head>
<body>
</body>
</html>
2. Empty Elements or Void Elements
The elements that have the starting tag only and have no end tag (or closing
tag) are called Empty Elements. For example,
BR- Used to provide blank line
HR- Used to insert horizontal lines.
<BR> is an empty element which is used to give a line break as illustrated in

the following code:
<!doctype html>
<html lang="en">
<head>
<title> Html Sample</title>
</head>
<body>
RAVI ARORA <br>
RIA BANSAL
</body>
</html>
The different properties that can be used with hr tag are explained below in the CSS
section.
3. HTML, HEAD, TITLE and BODY Elements
All HTML documents should have the following elements:

1. HTML Element
2. HEAD Element
3. TITLE Element
4. BODY Element
1. HTML Element
HTML documents must begin with the <html> tag. It is a container element
that identifies the document as an HTML document. This tag indicates that the
content of a file is in HTML. This element is not visible when displayed on the
browser. It is the root element of the html document and the rest of the elements are
located between start and end HTML tags.
2. HEAD Element
The <head> tag contains information about the document, indicating its title,
scripts used, style definitions and document descriptions. All the browsers do not
require this tag but most browsers find any available additional information about
the document within the <head> tag. The head element contains general
information, also called Meta-information (Meta means information about
something) about a document or a Web page. According to the HTML standard, only
a few tags such as <link>, <meta>, <title>, <style> and <script> are used under the
<head> element.
Meta element only has the start tag and no end tag. It has attributes like
charset to specify the character encoding used. “utf-8” is the very commonly used
character set.
The charset meta tag example:
<meta charset="utf-8">
It tells the browser what type of letters the page is written in. If your web site
is in a language other than English be careful to use the correct charset. If your page
is in plain old vanilla English just copy and paste <meta charset="UTF-8"> just above
the title, and with all luck you'll never have to think about it again.
Typically an HTML document is formatted into two logical sections –

Document Head and Document Body.
3. TITLE Element
The <title> element contains the document title. This title is displayed on the
topmost bar of the browser. This element is used in the <head> tag. Ideally the title
should be less than 64 characters in length.
4. BODY Element
The <body> tag encloses all the tags, attributes and information that you want the
visitor's browser to display. It forms the body of an HTML page.
4. Creating and viewing a Web Page
To create a Web page in HTML, follow the steps given below:
1. Open Notepad or Notepad++ editor by clicking on the Start icon or by typing it

in the search box.
2. In the Notepad/ Notepad++ , type in the following program:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title> My first page in Html </title>
</head>
<body> I am learning HTML
</body>
</html>
This is the basic structure of every HTML web page. We can change the text of
the title section and content of the body as per our requirement.
<!DOCTYPE html> declaration defines this document to be HTML5.
It must only appear once, at the top of the page (before any HTML tags).
The declaration is not case sensitive.
The word <!DOCTYPE html> means "this page is written in HTML5" as opposed
to, say HTML 4.
lang attribute has the value “en” which means the html document is in English
.
3. Saving a Web Page
For saving a Web page, follow the steps given below:

1. Click on the File menu and select the save option.
2. Select All Files option from the Save as type box.
3. In the Save As dialogue box, type the file name with the extension .htm
or .html, e.g.,
My First Page.htm or My First Page.html.
4. Click on the Save button to save your Web page.
4. Viewing a Web Page
To view a Web page, follow the steps given below:

1. Open the web-browser (e.g. Mozilla Firefox).
2. Click on the Open menu and select the Open File option. A dialogue box
will appear on the screen.
3. Locate the HTML file by choosing the appropriate file and folder in which
you have saved the file.
4. Click on the Open button. Now, you will see an address in the dialogue
box. For example, “C:\My folder\My First Page.html”.
5. Click on the OK button and the browser will display the page.
OR
1. Open File Explorer.
2. Locate your file and double click on it to open in the default browser.
OR
In Notepad++, click on Run menu and select browser from your list of
browsers.
Chapter 2 : HTML TAGS
1. HTML provides six levels of headings.
< h1> is the highest level and the largest of all headings and <h6> is the lowest
and the smallest level. The six heading tags are:
<h1> ... </h1>

<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
The following code illustrates the use of heading element:
<!DOCTYPE html>
<html>
<head>
<title> Headings in HTML </title>
</head>
<body>
<h1> First Level Heading </h1>
<h2> Second Level Heading </h2>
<h3> Third Level Heading </h3>
<h4> Fourth Level Heading </h4>
<h5> Fifth Level Heading</h5>
<h6> Sixth Level Heading </h6>
</body>
</html>
2. P Element
A web browser ignores all the blank spaces, but whenever a browser notices
the paragraph tag, it inserts a blank line and starts a new paragraph. The<p> tag is
the HTML tag for inserting a paragraph break at the given place in the text. Different
properties can be applied to a <p> element with CSS (explained below).
3. B ,strong, and I Elements
You can also make the text bold and/or italicised using <b> and <i> tags
as discussed below:
1. B Element: It indicates that the enclosed text should be displayed in bold face.
The following code displays the text “ ANNA HAZARE” in boldface:
<html>
…..
<body>
<b> ANNA HAZARE </b>
</body>
</html>
2. strong Element – The text appears the same as it will be with <b> element. The
difference is when a search engine analyses a page, text in <strong> tags is
considered important, text in <b> tags is not.
Syntax is :
<strong>This text is strong</strong>
3. I Element : It indicates that the enclosed text should be displayed in an Italic

typeface. To display the text “My Html Page” in Italic typeface, give the
following command:
<html>
…….
<body>
<i> My Html page </i>
</body>
</html>
4. <sub> and <sup> element
The HTML <sub> element defines subscripted text.
E.g.
<p>This is <sub>subscripted</sub> text.</p>
output :
This is subscripted text.
The HTML <sup> element defines superscripted text.

E.g. <p>This is <sup>superscripted</sup> text.</p>
output:
This is superscripted text.
Chapter 3 : CSS - Cascading Style Sheets
CSS is an important part of webpage designing as it is used to add formatting

and styling to the HTML documents. You can use it to set the style, color or size of the
text or to set background image or position text, etc. Using CSS, we can specify a
number of style properties for a given HTML element. Each property has a name and
a value, separated by a colon (:). Each property declaration is separated by a
semi-colon (;). There are several characteristics that a CSS can control.
Syntax :
<tagname style="property:value;">
There are 3 different methods in which we can apply CSS.

● Inline Styling
● Internal Styling
● External Styling
1. Inline styling method.

Place the style attribute directly in each element in the HTML code
document. Also called Inline styling method.
Eg. To change the color of the full document to red we have to use the style
attribute in the body tag as
<body style="color:red;"> ……. </body>

To change only the color of the heading to red, the code is
<h1 style="color:red;"> This is a heading </h1>
Here style is the attribute, color is the property that specifies what we are
controlling or changing. As we want to change the color of the text so we use the
color property. It is followed by colon and then the value. We can use multiple styles
together by separating them with semicolons(;).
E.g. In addition to changing the color we want the text to be centre aligned,
we can use the property text-align and set the value to centre.
<h1 style="color:red; text-align:center;"> This is a heading </h1>
Type the below code in notepad++ and run in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Test</title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color:red; text-align:center;"> This is a heading </h1>
<p style = "color: green; text-align: justify;" > This is the first paragraph
</p>
</body>
</html>
2. Internal styling method
Place the style element in the head section of the HTML code document.
Also called Internal styling method.
example:
<head>
<style>
h1 {text-align: center; color: green; }
p {color: red; background-color: yellow; text-align: justify; }
</style>
</head>
The complete program will be including the style sheet in the Html program as
follows:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:green; text-align: center; }
p {color: red; background-color: yellow ; text-align: right;}
</style>
</head>
<body>
<h1> This is a heading </h1>
<p> This is the first paragraph </p>
</body>
</html>
When this method is used, the style rules apply to the whole HTML document.
This allows individual style rules to be applied to multiple HTML elements. In the
above example, the text-align and color property will be applied to all <h1>
elements. In addition, the color, background-color and text-align properties will be
applied to all <p> elements within this HTML document. Color property defines the
text color for an HTML element, Background property defines the background color
for that HTML element and text-align property aligns the text in that particular
direction.
If we want to apply the same style to multiple elements then we can use comma and
separate them. Write the below code, run in your browser and see the result.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {text-align: left;}
p, h1, h2 {text-align: center;}
</style>
</head>
<body>
<h1>The h1 text-align set to center.</h1>
<h2>The h2 text-align set to center.</h2>
<h3>The h3 text-align set to left.</h3>
<p>The p text-align set to center.</p>
</body>
</html>
If we want a style to be applied for all the elements then we use an asterisk (*) which
matches all elements. In the following example, the color property will be set to red for all
elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Sample</title>
<style>
* {color: red;}
</style>
</head>
<body>
<h1>The h1 tag color set to red.</h1>
<p>The p tag color set to red.</p>
</body>
</html>
CSS Text Properties
We can format our HTML web page using many different tags as described below -
Text properties :
The <u> element is deprecated in HTML 5 but we can underline a text for extra
emphasis using CSS.
We can use the Text-decoration property whose values can be set to underline,
overline, line-through, etc.
One more important property is Text-transform, its value can be capitalized,

uppercase or lowercase.
capitalize - Puts the first character of each word in uppercase; other characters are
unaffected.
uppercase - Puts all characters of each word in uppercase.
lowercase - Puts all characters of each word in lowercase.
<HR> and properties
Inserting Horizontal line using <hr> and CSS
We can set different properties for horizontal line using CSS as explained in below
example-
<!DOCTYPE html>
<html>
<head>
<title>HTML HR tag</title>
<style>
hr{ width: 100%; border-color: red; }

</style>
</head>
<body >
<h1 style="color:red; text-align:center;"> This is heading </h1>
<hr>
<p>This text will be followed by a horizontal line </p>
</body>
</html>
If we want to align the line to left then set margin-left to 0 or margin:center to 0 for
center align. Width and height properties can be used to set the desired width and height
and border-colour for making a coloured line.
Changing Font using CSS
Fonts are specific to the platform. If you are using a different OS then you will have a
different look and feel of any web page. HTML <FONT> tag is deprecated in HTML version
4.0 onwards and now all fonts are set by using CSS.
A simple syntax of setting font for the body of web page is
body { font-family: "Arial";}
or
<body style="font-family:Arial;">
But there are few more attributes which can be used. The complete syntax is –
Element {font: style variant weight size/line-height family;}
Where style can use one of the following keywords: normal, italic, or oblique
Variant can have the value normal, or small-caps
Weight can have the values normal, bold, bolder, lighter or one of the following
weight-numbers: 100, 200, 300, 400, 500, 600, 700, 800, or 900
Size can be specified by using length (15px), percentage (21.3%) or one of the following
keywords: xx-small, x-small, small, medium, large, x-large, xx-large, larger, or smaller
Line-height must be preceded by a forward slash "/" if it is used. It is specified by using

a number (12.5 or 62), length (15px), percentage (21.3%) or the keyword normal.
Family can occur one or more times. If it occurs more than once then the values must be
separated by commas. It is specified by using a family-name (Arial, Courier, Calibri, Verdana,
etc.). Above is a sample of family occurring two times. The text will be displayed in the first
font-family, if it is not present then in the second one and so on.
The style, variant, weight and line-height properties are optional. Any of these
properties that are not specified will automatically be set to their initial or default value.
The size and family properties are required.
Chapter 4: Creating Lists in HTML5
Lists are one of the ways to provide information in a structured and easy-to-read
format. They help the Internet users to easily spot the information and focus attention on
the important information. By using HTML, you can arrange items in the form of a list in
several ways.
The different ways are:
1. Bulleted or Unordered List
2. Numbered or Ordered List
3. Definition List
4. Nested List
1. Unordered List
A list of items that are marked with bullets is called an unordered list. The list starts
with the <ul> tag and each item in the list starts with the <li> tag.
There is an attribute type which is used to define the type of the bullet used. The value of
this attribute can be set to disc(default), circle or square. Try the below program with <ul
type="circle"> or <ul type="square"> for changing the bullet type
The following code illustrates the use of <ul> and <li> tags:
<!DOCTYPE html>
<html>
<head>
<title> Unordered List </title>
</head>
<body>
<h1> Useful Animal Products</h1>
<ul>
<li> Milk </li>
<li> Eggs and Meat </li>
<li> Leather </li>
<li> Wool and Silk </li>
<li> Honey, Wax and Lac </li>
</ul>
</body>
</html>
2. Ordered List
The list that is marked with numbers is called an ordered list. The list starts with the
<OL> tag and each item in the list starts with the <LI> tag. In the Ordered list, type attribute
can have the values as A/a/I/i , default is 1.
The following code illustrates the ordered lists:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1> Parts of a Computer</h1>
<ol type="A">
<li> Hardware </li>
<li> Software </li>
</ol>
</body>
</html>
3. Definition List
A definition list is a list of items and description of those items indented in the
next tab positions. It starts with the <dl> tag. Each definition starts with the <dd> tag.
<!DOCTYPE html>
<html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt> UNIT I: PLANT LIFE </dt>
<dd> Chapter 1: Parts of Plants </dd>
<dd> Chapter 2: Uses of Plants</dd>
<dt> UNIT II: ANIMAL LIFE </dt>
<dd> Chapter 3: Parts of Animal Body </dd>
<dd> Chapter 4: Uses of Animals </dd>
</dl>
</body>
</html>
4. Nested List
List inside a list is called a Nested List.
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
Chapter 5: CSS - Internal styling
With CSS it is possible to define a specific style of our own and then use it with the
ID attribute of an element. E.g. if we want to use different font styles for different p
elements then we can do so using CSS ID. The # symbol is immediately preceded by a name,
then we specify the style for this id. This style will only be applied to an element that also
has a matching id attribute value as following –
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Sample</title>
<style>
#tst1 {font: italic small-caps bold 20px/1.5 Verdana, Arial, Calibri;}
#tst2 {font-size: large; font-family: Arial black;}
#tst3 {text-decoration: underline;}
</style>
</head>
<body>
<p id="tst1">All values are specified.</p>
<p id="tst2">Only size and a generic font are specified.</p>
<p id="tst3">This text will be underlined.</p>
</body>
</html>
An ID uniquely identifies a style, so it is not valid for multiple styles to have the same
ID name.
<div> and <span> elements
The <div> element defines a division or a section in a HTML document. The <div>
element is a block-level element, so a line break is placed before and after it. The <div>
element is often used as a container for other HTML elements to style them with CSS.
Example - A section in a document that will have a light blue background color:
<div style="background-color: lightblue;">

<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
The <span> element is an inline element which means that it will not start on a new
line. It is used to wrap small portions of text, images, etc. <span> element is used to stylize
texts. span element is in-line and usually used for a small chunk of text inside a line (such as
inside a paragraph)
Example -
<p> My mother has <span style="color:green; text-decoration:underline; "> green
</span> eyes.</p>
Chapter 6: Inserting Images
Images enhance the quality of a web page. You can include an image in the web
page to provide information or to make the page attractive. Images make the document
more interesting and useful. The World- Wide Web browser supports a number of graphic
formats. The most commonly used graphic formats are gif and jpg formats.
The <img> tag and Src attribute:
To insert an image in your web page, you have to use the <img> tag. To display an
image on a page, you need to use the src attribute. src stands for "Source". The value of the
src attribute is the address of the image you want to display on your page. The syntax of
defining an image is:
<img src ="address"> . The IMG element has a start tag but does not have an end tag.
The following code illustrates the use of <IMG> tag:
<html>
<head>
<title>Inserting Image</title>
</head>
<body>
My picture
<img src = "D:\Dhanpreet\Pictures\bird.jpg">
</body>
</html>
The ALT Attribute

The ALT attribute is to define an "alternate text" for an image. The value of this
attribute is an author-defined text. The alt attribute tells the reader what is missing on a
page if the browser cannot load images. The browser will then display the alternate text
instead of the image. It is a good practice to include the alt attribute for each image on a
page to improve the display and usefulness of your document for people who have text
only browsers.
For example, the following statement is used to display alternate text for the image i.e
Horse if the browser is not able to display the horse image.
<img src ="horse.jpg" alt ="Horse" >
Here we have used relative address means that horse.jpg is stored in the same folder as the
html document.
If the images are stored in a sub-folder named images inside the folder where the html
webpage is saved then the address is written as - src="images/ horse.jpg"
Actually, we can access images from any web address in the world and display them on our
web page provided we know the complete URL of the image. Example - include the below
<img> tag in the body element and see the output –
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.c
om">
If you want to change the size of an image, you can use the style attribute to specify the
width and height of an image with values in pixels as illustrated in the following statement:
<img src ="horse.jpg" alt ="Horse" style="width:100px; height:100px;">
HEIGHT and WIDTH specify the height and width of the image to be displayed on the page.
It is not mandatory to give height and width of an image but it is better to specify it as the
page might (not always) flicker while the image loads if these values are not specified.
The align attribute of <img> is not supported in HTML5. We have to use CSS instead.
To center an image, set left and right margin to auto and make it into a block element
<!DOCTYPE html>
<html>
<head>
<title>Working with Images</title>
<style>
#hori-center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" id="hori-center">
<img src ="horse.jpg" alt ="Horse" style="width:100px; height:100px;">
<img src ="scenery.jpg" alt ="scenery" style="float:right">
</body>
</html>
First image will be in the center, second in the left and third in the right side.
Floating images with text wrapping:

When floating images, it’s important that you use the clear rule correctly. Floated images (and
other web elements) will overlap one another if you do not “clear” the float. Be sure to use the
clear rule after each section in which an image is floating. clear: both
Chapter 7 : Linking web pages and Images
The web pages are linked to other pages with the help of hyperlinks. A
hyperlink is a highlighted word or image that takes a user from one web page or
document to another web page or document. It stores the address of that particular
web page or document and the linked document opens when we click on the
hyperlink.
Not to miss
There are different kinds of links, like – Internal link, External link,
Incoming link.
A link between two webpages, where both webpages belong to one
website, is called an internal link.
External link is a hyperlink that is a link from your webpage to
someone else's web page on a different website.
Incoming link is a link from someone else's web page to your
website. It's the opposite of an external link.
Anchor Tag <A>
Anchor tag <a> is used to create a hyperlink. This HTML tag creates a reference link to
a resource (web page or document) or to a specific place within a web page. It is a
container element having start <a> and end </a> tags. The href attribute of anchor tag
specifies the address/location of the web page or document that it is linking to and its value
is the URL of that particular web page. URL can be absolute or relative. Absolute meaning
the complete address or URL of the website e.g. http://www.ndtv.com or relative address
like test.html which is stored in the same folder as the html webpage.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
The syntax for the anchor tag is shown below.
<a href = "url"> link text </a>
Let's understand how to link web pages with the following example.
<!DOCTYPE html>
<html>
<head>
<title>LINKING Example</title>
</head>
<body >
<a href="http://www.yahoo.com/" title="Yahoo home page"> Click here to
open Yahoo home page </a> <br>
<a href="scenery.jpg"> Click here to open a picture </a><br>
<a href="sample.htm"> Click here to open another web page </a><br>
</body>
</html>
The content between the anchor tags will be displayed on the browser. On clicking it will
take to the webpage that is specified. The value of the title attribute is shown as a tooltip
text when the mouse moves over the text/image.
If our scenery.jpg is inside a folder named images then we write
href="images/scenery.jpg"
Linking Images
Image <img> tag can be used within <a> ... </a> tag to display an image as a link. This
is shown in the following example
<!DOCTYPE html>
<html>
<head>
<title>LINKING Image</title>
</head>
<body >
<a href=http://deensacademy.com/tag/ title="Go to Deens
academy Website"> <img src ="scenery.jpg" alt ="school">
</a><br>
</body>
</html>
Adding E-mail Link
You can also add an e-mail address on a web page. The E-mail address can be
enclosed inside the <a> tag. The e-mail address can be made as hyperlink called mailto link.
On clicking this link, a new form will appear in your browser window for sending an e-mail.
For example, on giving the following statement, ‘Contact Spectramind’ will appear on the
page as a link to the e-mail address, spectramind@vsnl.com.
<a href = “mailto: spectramind@vsnl.com”> Contact Spectramind </a>
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes,
Outlook Express etc. ) installed on the user's computer and in that a new e-mail form will
appear.
Chapter 8: Tables
HTML table allows you to arrange data into rows and columns on a webpage. They
are commonly used to display tabular data like product listings, customer's details, financial
reports, and so on. We can create a table using the <table> element. Inside
the <table> element, we can use the <tr> elements to create rows, and <td> elements to
create columns inside a row. <td> elements can contain all sorts of HTML elements like text,
images, lists, other tables, etc. We can also define a cell as a header for a group of table
cells using the <th> element. The browser renders a table header in bold and a slightly
larger font by default to distinguish the header row from the others.
The following example demonstrates the most basic structure of a table.
<!DOCTYPE html>
<html>
<head>
<title>Creating Tables in HTML</title>
</head>
<body>
<h2>HTML Table </h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Albert</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Andrew</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Charles </td>
<td>11</td>
</tr>
</table>
</body>
</html>
Tables do not have any borders by default. We can use the CSS border property to
add borders to the tables. Also, table cells are sized just large enough to fit the contents by
default. To add more space around the content in the table cells we can use the
CSS padding property. (The CSS padding property is used to generate space around an
element's content, inside any defined borders.)
Cell spacing is the space between each cell. By default the space is set to 2 pixels. To change
the space between table cells, use the CSS border-spacing property on the table element.
The following style adds a 1-pixel solid black colour border to the table and 10-pixels of
padding to its cells.
<style>
table, th, td {
border: 1px solid black;
border-spacing: 15px;
}
th, td {
padding: 10px;
}
</style>
You can change the thickness of the border by increasing the value of 1px to 5px,
style of the border can be changed by replacing solid to dotted or dashed and colour can be
changed by specifying the colour instead of black.
Eg. table, th, td { border: 5px dotted red; }
By default, borders around the table and their cells are separated from each other.
But you can collapse them into one by using the border-collapse property on
the <table> element.
By default text written in <td> element is left aligned and text written in <th>
element is center aligned. To change the default alignment you can use the
CSS text-align property.
By default the table is displayed on the left side of the web page. To align it on the
right side use float: right or to align it in the center of the web page, use margin CSS
property to auto as shown below:
<style>
table {
border-collapse: collapse; margin: auto;}
th {
text-align: left; }
td {
text-align: center; }
</style>
The width of the table can be adjusted using width property
table {width: 300px; }
Spanning Multiple Rows and Columns

Spanning allows you to extend table rows and columns across multiple other rows
and columns.
Normally, a table cell cannot pass over into the space below or above another table
cell. But, you can use the rowspan or colspan attributes to span multiple rows or columns in
a table.
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Smith</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
<table>
<tr>
<th>Name:</th>
<td>John Smith</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>5550192</td>
</tr>
<tr> <td>5550152</td> </tr > </table>
Adding all the above features in one html page -

<!DOCTYPE html>
<html>
<head>
<title>Span Multiple Rows in an HTML Table</title>
<style>
table {
width: 300px;
border-collapse: collapse; }
table, th, td {
border: 1px solid black; }
th, td {
padding: 10px; }
#center {
text-align: center; }
</style>
</head>
<body>
<h2>Spanning Columns</h2>
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Smith</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
<br>
<h2 style="text-align:center;">Spanning Rows</h2>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<th>Name:</th>
<td id="center">John Smith</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td id="center">5550192</td>
</tr>
<tr>
<td id="center">5550152</td>
</tr>
</table>
</body>
</html>
Adding Captions to Table

We can specify a caption (or title) for our tables using the <caption> element.
The <caption> element must be placed directly after the opening <table> tag. By
default, caption appears at the top of the table, but we can change its position to bottom
using the CSS caption-side property and set it to bottom.
We can also change the background colour using background-color property. If you
want to change the color of the complete table then use this property with the opening
<table> tag. If you want to change the color of the individual rows then use this property
with the opening <tr> tag and if you want to change the color of the individual cells then
use this property with the opening <td> tag. Below is the example using id
<!DOCTYPE html>
<html>
<head>
<title>Adding a Caption to the HTML Table</title>
<style>
table {
width: 300px;
border-spacing: 10px;}
table, th, td {
border: 1px solid black; }
th, td {
padding: 15px; }
#c01 {
background-color: lightgreen; }
#c02 {
background-color: lightblue; }
#c03 {
background-color: lightpink; }
</style>
</head>
<body>
<h2>Table with Caption at the Top</h2>
<table style="background-color: red;">
<caption>Users Info</caption>
<tr id="c01">
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr id="c02">
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr id="c03">
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
<br><br>
<h2>Table with Caption at the Bottom</h2>
<table id="c01" style="border-collapse: collapse;">
<caption style="caption-side: bottom;">Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
</body>
</html>
Chapter 9: External styling method
Using External Style Sheets. Also called External styling method.

CSS style rules can be contained in an external style sheet file. The HTML document
can link to the style sheet by using a <link> element located in the head section. This
allows individual style rules to be applied to every HTML document that links to the
style sheet. If an entire website links to a single style sheet, then changes made to the
style sheet will be applied to the whole website.
The following shows how a HTML document can link to a style sheet named
"website.css".
<head>
<link href="website.css" rel="stylesheet">
…..
</head>
The link tag includes href attribute and the value of it will specify the name of the
external stylesheet i.e css file. In this example, our css is named as website.css and it is
saved in the same folder as our html document. If the css file is not located in the same
folder as our html document, then the complete path needs to be specified. It is a better
practice to save the css file in the same folder as your html document.
The following code shows the contents of a style sheet file named "website.css". It is
mandatory to save this file with the extension .css . In this example, the text-align and color
property will be applied to all <h1> elements within all HTML documents that link to this
style sheet and the color, background-color and text-align properties will be applied to
all <p> elements within all HTML documents that link to this style sheet.
h1 {text-align: center; color: green; }

p {color: red; background-color: yellow; text-align: justify; }
If we have a website having 50 webpages and the same style has to be applied to all
the webpages then creating an external stylesheet and including the link tag in all the
webpages is the easier and faster method.
Chapter 10: Forms

Designing forms is a method of creating a user-friendly and interactive web
page in HTML. Forms are used to accept input from the user. Forms allow the user to
send information back to the server. Forms are also used for commercial purposes
like accepting orders from customers or taking their feedback.
The HTML <form> element defines a form that is used to collect user input.
<form>
.
.
form elements
.
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
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.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field containing letters,

numbers, etc.
<input Defines a text input field where every character

type="password"> entered appears in the form of dots.
<input Defines a box which can be checked / unchecked to

type="checkbox"> select one or more options.
<input type="radio"> Defines a radio button for selecting one of many

choices
<input Defines a submit button (for submitting the form)

type="submit">
<input type="reset"> Defines a reset button (for setting all form elements to
initial / default values)
Example
<!DOCTYPE html>
<html>
<head>
<title> Form - Text Input
</title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name: <input type="text" name="firstname"> <br>
Last name: <input type="text" name="lastname"> <br>
User Id: <input type="text" name="userid"> <br>
Password: <input type="password" name="pwd"> <br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The default width of a text input field is 20 characters. Each input field must have a
name attribute to be submitted. If the name attribute is omitted, the data of that input field
will not be sent at all.
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.
<!DOCTYPE html>
<html>
<head>
<title> Working with Form </title>
</head>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<form>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
</fieldset>
</form>
</body>
</html>
The <textarea> Element
The <textarea> element defines a multi-line input field, which is used to accept
multiple line text from a user.
<textarea name="message" style="width:200px; height:600px;">The boy was playing
in the garden.</textarea>
The <select> Element
The <select> element defines a drop-down list:
Example
<select name="cars" size = "3" multiple>
<option value="volvo">Volvo</option>
<option value="honda">Honda</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Eg : <option value="fiat" selected>Fiat</option>
Use the multiple attribute to allow the user to select more than one value.
Use the size attribute to specify the number of visible values, rest can be seen by
scrolling
Submit and Reset button
Clicking Submit button will send the data from the form to the server.
The reset button brings the form back to it's initial, default values for the user to retype
them.
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<h3> Enter Your Personal Information </h3>
<form>
First name :
<input type="text" name="firstname" required > <br><br>
Last name :
<input type="text" name="lastname"><br><br>
Password :
<input type="password" name="password"><br> <br>
<p>
<fieldset style="width:200px;">
<legend>Gender</legend>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female”>Female
</fieldset>
</p>
<p>
<fieldset style="width:220px;">
<legend>Hobbies</legend>
<input type="checkbox" name="hobby" value="sports">
Sports
<input type="checkbox" name="hobby" value="music">
Music
<input type="checkbox" name="hobby" value="reading">
Reading
</fieldset>
</p> <br>
Country :
<select>
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select><br> <br><br>
Address : <textarea name="address" id="address" style="width:170px; height:100px;">
</textarea>
<br><br><br><br>

<input type="reset" value="Reset">
</form>
</body>
</html>
Chapter 11: Frames
Frames have been removed entirely in HTML 5 i.e they are obsolete. They are referred
here just for you to know how frames were used and how they worked until we used HTML
5.
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in a browser
window is known as a frameset. The window is divided into frames in a similar way the
tables are organized into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. Each frame is indicated by <frame> tag and
it defines which HTML document shall open into the frame.
Disadvantages of Frames
There are few drawbacks in using frames, so it's never recommended to use frames in
your webpages –
1. Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
2. Sometimes your page will be displayed differently on different computers due to different
screen resolution.
3. The browser's back button might not work as the user hopes.
4. There are still few browsers that do not support frame technology.
HTML Inline Frame element
There is another element known as HTML Inline Frame element <iframe> which is
permitted in HTML 5.
The iframe element does not replace the body of a page as done by <frameset> element
instead it is used to embed another HTML page/document within the current one. The
syntax is –
<iframe src="URL"></iframe>
Example below –
<!DOCTYPE html>
<html>
<head>
<title> Iframe Example</title>
</head>
<body>
<h1>Using iframe element</h1>
<p>Document content goes here...</p>
<iframe src="list.html" style="height:500px; width:500px;"></iframe>
<p>Document content continues...</p>
</body>
</html>
Chapter 12: HTML Layout
HTML Layouts
HTML layouts provide a way to arrange web pages in well-mannered and well-structured
form or we can say that HTML layout specifies a way in which the web pages can be
arranged. Web-page layout works with arrangement of visual elements of an HTML
document.
Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a
webpage.
● <header>: It is used to define a header for a document or a section.
● <nav>: It is used to define a container for navigation links
● <section>: It is used to define a section in a document
● <footer>: It is used to define a footer for a document or a section
HTML <header>
The <header> element is used to create header section of web pages. The header contains
the introductory content, heading element, logo or icon for the webpage, and authorship
information.
Example:
<header style="background-color:green; height: 80px; width: 100%">
<h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome

to MyFirstWebpage</h1>
</header>
HTML <nav>
The <nav> elements is a container for the main block of navigation links. It can contain links
for the same page or for other pages.
Example:
<nav style="background-color:#bcdeef;">
<h1 style="text-align: center;">Navgation Links</h1>
<ul>
<li><a href="#">link1</a></li>
</ul>
</nav>
HTML <section>
HTML <section> elements represent a separate section of a web page which contains
related element grouped together. It can contain: text, images, tables, videos, etc.
Example:
<section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
<h2>Introduction to HTML</h2>
<p>HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser..</p>
</section>
HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly
contains information about author, copyright, other links, etc.
Example:
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
<h3>Footer Example</h3>
<p>© Copyright 2018-2020. </p>
</footer>

Gr7 HTML Notes 2022-23

Uploaded by

Copyright:

Available Formats

Gr7 HTML Notes 2022-23

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Gr7 HTML Notes 2022-23

Uploaded by

Copyright:

Available Formats

Introduction to HTML 5

● Meaning of tags and elements Steps to create and

● Basic tags of an HTML webpage and explanation

● Steps to create and view a web page

● <h1> to <h6>, <p>,hr,br

● Formatting Tags -<b>, <i>, <sup>, <sub>,<strong>

● Three types of styling sheets

● Inline styling- Applying inline styling on tags

4 Creating Lists in HTML

7 Linking web pages and Images

9 External Style sheet: Apply styling using External css

Chapter 1 : Definition and Benefits of HTML

HTML is not a programming language, but rather a markup language. Therefore,

2. Tags and elements

What are Tags?

Basic HTML elements are of two types

<h1> Computer Fundamentals </h1>

2. Empty Elements or Void Elements

<BR> is an empty element which is used to give a line break as illustrated in

3. HTML, HEAD, TITLE and BODY Elements

All HTML documents should have the following elements:

The charset meta tag example:

Typically an HTML document is formatted into two logical sections –

4. Creating and viewing a Web Page

To create a Web page in HTML, follow the steps given below:

1. Open Notepad or Notepad++ editor by clicking on the Start icon or by typing it

2. In the Notepad/ Notepad++ , type in the following program:

<!DOCTYPE html> declaration defines this document to be HTML5.

For saving a Web page, follow the steps given below:

4. Viewing a Web Page

To view a Web page, follow the steps given below:

1. HTML provides six levels of headings.

<h1> ... </h1>

The following code illustrates the use of heading element:

3. B ,strong, and I Elements

3. I Element : It indicates that the enclosed text should be displayed in an Italic

The HTML <sup> element defines superscripted text.

Chapter 3 : CSS - Cascading Style Sheets

CSS is an important part of webpage designing as it is used to add formatting

There are 3 different methods in which we can apply CSS.

1. Inline styling method.

<body style="color:red;"> ……. </body>

<h1 style="color:red;"> This is a heading </h1>

<h1 style="color:red; text-align:center;"> This is a heading </h1>

Type the below code in notepad++ and run in your browser:

2. Internal styling method

One more important property is Text-transform, its value can be capitalized,

Inserting Horizontal line using <hr> and CSS

hr{ width: 100%; border-color: red; }

Changing Font using CSS

Variant can have the value normal, or small-caps

Line-height must be preceded by a forward slash "/" if it is used. It is specified by using

List inside a list is called a Nested List.

<div> and <span> elements

<div style="background-color: lightblue;">

The <img> tag and Src attribute:

The ALT Attribute

Floating images with text wrapping:

Chapter 7 : Linking web pages and Images