Science and Commerce Section
HTML
Tags Summary Part - 1
Tags Summary - Part 2
Short Question Answers
- List the advantages of HTML.
- List the disadvantages of HTML.
- Explain <body> tag and list its attributes.
- List any 4 physical style tags and state uses of each.
- Explain the <OL> tag and its attributes.
- Explain the <UL> tag and its attributes.
- Explain the <img> tag along with its attributes.
- List and give the use of tags used to create Tables.
HTML
HTML stands
for Hyper Text Markup Language. It is the basic markup language for creating
web pages
and websites. A HTML web page contains markups or tags that defines how to
display information on the browser’s window.
Advantages
of HTML - Refer
Textbook
Disadvantages
of HTML - Refer Textbook
Tag
A tag in
HTML document is a html element surrounded by angular brackets which has a
specific meaning and task in HTML.
E.g. <html>, <body>, <head>,
<h1>, <br>, etc.
Structure
of HTML document:
<html>
<head>
</head>
<body>
</body>
</html>
A HTML
document has two sections
1) HEAD
section and 2) BODY section
A HTML
file is saved with .html or
.htm extension
<html>
tag :
The
<html> tag represents the root of an HTML document. It is the starting
tag of web page.
It is the
container for all other HTML elements, which are enclosed in <html> ……
</html>
<head>
tag:
The
<head> element is a container for all the head elements.
The
<head> element can include a title for the document, scripts, styles,
meta information, and more. E.g.<title>, <style>, <base>,
<link>, <meta>, <script>, <noscript>
<body>
tag:
The
<body> tag defines the document's body. This is the section which is
displayed on the web page.
The
<body> element contains all the contents of an HTML document, such as
text, hyperlinks, images, tables, lists, etc.
which are
enclosed in <body> …… </body>.
<title>
tag: It defines the
title for the web page. It is written in Head section. The title will be
displayed on the browser window’s title bar.
Formatting
Tags (Physical Style tags)
<b>
... </b>
- To display text in bold.
<i>
... </i>
- Displays text in italics
<u>
… </u>
- To underline the text.
<br>
- stands for break rule. It is used to start a new line. It has no
closing tag.
<tt>
... </tt> –
Displays text in mono spaced font style.
<strong>
... </strong>
– Displays text bold style.
<em>
... </em> –
Defines emphasized text.(browsers displays in italics style).
<mark>
... </mark> –
Displays marked or highlighted text
<del>
... </del> –
Displays deleted or removed text.
<ins>
... </ins> – Defines inserted(added) text.
<sub>
... </sub> –
Defines subscripted text.
<sup>
... </sup> –
Defines superscripted text.
<small>
... </small> –
Reduces the font size of text by 1 unit.
<big>...
</big> –
Increases the font size of text by 1 unit.
<blockquote>...
</blockquote>
– Defines a quoted section.
<font>
... </font> –
Changes the font of the text.
Attributes of <font> tag:
Face – specifies the name of the
font
Size – specifies the size of the
letters values: 1 to 7
Color – specifies the color name or
color code
E.g. <font face=”Arial Black” size=5 color=blue>
Good Morning
</font>
Heading
tags (H1 to H6)
The <h1>
to <h6> tags are used to define HTML headings.
<h1>
defines the most important heading.
<h6>
defines the least important heading.
<h1>
heading is big in size about 1 inch (72
pixels).
Attribute
of Heading tag:
Align –
specifies the alignment for the heading values: left, center, right
The
heading tags are block level HTML elements which means they begin with a
new line.
<p>
tag:
It is used
to indicate a paragraph in a web page. It is a block level html element. It has
the following attributes:
a)
Align - to specify alignment – left, center, right
b)
Style - to
specify css style commands.
c)
Width - to specify horizontal dimension of the
paragraph in pixels.
E.g.
<p align=center width=200>
………. ….
…..paragraph ……………..
</p>
<p style="color:blue;">
………….. paragraph …………….
</p>
<body>
tag
Attributes
of <body> tag:
background – contains the source URL of image
file to be displayed in the background.
bgcolor – specifies the color name or color
code for the background color of the web page.
text – specifies the color for the text
in the web page.
link – specifies the color for the links
in the web page.
alink - specifies the color of an active
link in the web page.
vlink - specifies the color of an visited
link in the web page.
E.g. <body bgcolor=cyan link=green vlink=red>
<body
background="Images/plotters3.jpg">
Comments
in HTML
In HTML to
write comments the following tag is used:
<!-- comments are written here -->
An HTML
comment begins with <!-- and the comment closes with -->.
HTML
comments are visible to anyone that views the page source code, but are not
rendered by a browser. They are not shown on the window.
E.g.
<!--
Author: Mr. XYZ
Description : sample page of showing physical tags
-->
LISTS IN
HTML
Html
provides three types of lists which are as:
1)
Unordered List
2)
Ordered
List
3)
Definition
List
Unordered List
It is the simplest list which is shown by bullet points.
Tags:
<UL> </UL> - to
define the list
<LI> </LI> - To define list elements
E.g.
<html>
<head>
<title>List example</title>
</head>
<body>
<h3>Fruit Lists </h3>
<UL>
<LI>Mango </LI>
<LI>Apple</LI>
<LI>Grapes</LI>
</UL>
</body>
</html>
Type
Attribute
It is used
to change the shape of the bullets in the unordered list. It is used in
<UL> tag.
There are
three types : DISC, SQUARE, CIRCLE
E.g. <UL TYPE=SQUARE>
Ordered
List
It displays
the list in number format.
<OL> and <LI> tag is
used to create Ordered list.
It has two
attributes:
1)
TYPE -
specifies the type of numbering format. E.g. 1,2,3,4
or A,B,C .. or
I, II, III, or a,b,c ..
2)
START –
specifies the start number in the list.
E.g. <OL TYPE=”A”
START=4>
Definition List
It is used to create a list of definitions of terms.
<DL>,
<DT> and <DD> tag is
used to create.
e.g
<DL>
<DT>Computer</DT>
<DD>Computer
is an electronic device which
Is used to store and process information. </DD>
<DT>Software</DT>
<DD>Software is a collection programs. </DD>
</DL>
<IMG> tag
It is used to insert images in the web page.
It has the following attributes:
Src - specifies the URL of the image.
Align - specifies the alignment of the image.
Border - specifies the width of the border around
the
image (Value in pixels)
Height - specifies the height of the image in pixels.
Width - specifies the width of the image in pixels.
Alt - specifies
the alternative text for the image. It is displayed instead of image, when
image is not displayed on the web page.
LongDesc - provides URL for the long description
of the image.
E.g.
<img
src=”computer.jpg” height=200
width=400
Border=1 alt=”Computer image”>
HTML PRACTICAL ASSIGNMENT – 1 (Use different fonts, font
styles and colors in Q. No. 1, 3 and 4)
Q1. Create a web page
that will display a heading HTML and a paragraph about HTML from the textbook along
with an image.
Q2. Create a web page that contains picture gallery. (Small
size images at least 5)
Q3. Create web page
containing an Unordered List showing list of Animals with Heading.
Q4. Create a web page
containing Ordered List of Students from your class with Heading.
Creating Tables in Web Page
To create table in a web page <table> tag is
used.
<tr> tag is used to
define a row of table.
<td> tag is used to define
a column cell of a row.
<caption> tag is used to give a title to table.
<th> tag is used to define column headers.
E.g.
<table border=1 align=center>
<caption> Student List</caption>
<tr>
<th>Roll No </th>
<th>Name </th>
</tr>
<tr>
<td> 1 </td>
<td> Kiran </td>
</tr>
</table>
Attributes
of <table> tag:
Align - defines the alignment of a table and table cell. Values – Left, Center, Right.
-
Used with <td> tag to align cell contents.
Bgcolor
- specifies the color for the
table.
Width - specifies the width for the table
in pixels or %
Border – Specifies the border for the table. Values – 0 or 1
Cellpadding
- specifies the distance between
cell wall and the content given in pixels.
Cellspacing
- specifies the distance between
adjacent cells.
