GRADE X

CHAPTER 3-BASIC HTML ELEMENTS

HISTORY OF HTML
Until 1990, accessing information through Internet was rather a technical affair. It was so
difficult, in fact that even Ph.D holding physicist were often frustrated while trying to swap
the data.
The person who invented HTML was not a computer programmer, but a physicist working at
the European Laboratory for Particle Physics in Geneva, Switzerland. Tim Berners‐Lee, the
inventor of HTML and father of web wanted to create a way for researchers to be able to
use the internet to collaborate and share information.
He invented HTML as a means that enables us to convert any document typed in a simple
word processor into a file viewable on the internet, thus making it available to anybody with
an internet connection. This system, which Tim Berners‐Lee later named 'The World‐Wide
Web' in October of 1990 defines the nature of the WWW today.
FEATURES OF HTML
• It is a computer language (not a programming language) used to create web pages but
does not require any special programming knowledge.
• It is a markup language and is used to make the text readable for the browser.
• It is a character‐based method for expressing the contents. The contents can be pictures,
text, graphics and videos.
• All text editors and word processing software support it.
• It delivers the contents to multiple platforms.
DIFFERENCE BETWEEN TEXT FILE AND HTML FILE
A text file is a computer file that contains only text and has no special formatting such as bold text,
italic text, images, etc. With Microsoft Windows text files are identified with the .txt file extension.
HTML file is a text document saved with the extension .html or .htm that contains texts and some
tags written between "< >"(greater than and less than sign) that gives the instructions needed to
configure the web page.

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_1
WORLD WIDE WEB CONSORTIUM (W3C)
• The World Wide Web Consortium, known as the W3C, is an international community of
standards for the World Wide Web (www or w3).
• It was founded by Tim Berner's Lee in October 1994.
• The W3C is working to make the Web accessible to every user all over the world. W3C is
organized as a member organization and is working to standardize the web.
• It also creates and maintains WWW standards which are called as W3C
Recommendations.
HOW DOES HTML WORK?

RULES TO CREATE HTML FILE

• HTML file must have a .htm or .html file extension.
• HTML file can be created using a simple text editor.

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_2
• HTML is not case sensitive which means you can use either lowercase or uppercase
letters.
• Output of the HTML file can be viewed through any web browser software.
RULES FOR WRITING HTML CODES
✓ Container tags should always be closed properly.
✓ Values given to the attributes should be enclosed within the double quotes.
✓ Tag name should not contain spaces.
✓ There should be no spaces
between < and > in a tag.
✓ Tags must be nested correctly

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_3
Tag Purpose
Paragraph tag: Using this tag places a blank line above and below the text of the
<p>. paragraph.

COMMENT TAG Anything you put between the <!‐‐ and ‐‐> tags in the body of your
<!‐‐ ‐‐> web page will be ignored by the browser. Comments are not visible
to the user when the web page is displayed on the web browser. You
can use comments to explain your code, which can help you when
you edit the source code at a later stage.
HEADING TAG In HTML there are six levels of headings, from Heading (one)1
<hn>………</hn> through Heading (six)6. Heading 1 (H1) is the 'most important' and
Heading 6 (H6) is the 'least important'. By default, browsers will
display six heading levels in the same font, with point size decreasing
depending on the importance of the headings

HR TAG This tag inserts a horizontal rule line and causes a line break even
without using a <br> tag.
<pre> The <pre> tag defines preformatted text.Text in a <pre> element is
displayed in a fixed-width font, and the text preserves both spaces and
line breaks. The text will be displayed exactly as written in the HTML
source code.

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_4
Alink and vlink attribute of body tags are used to change the color of active and visited link.

<BASEFONT> TAG
The code you use to write the HTML code in text editor is not displayed in the same font
style in the web browser. Each browser displays the text in the different font style (default
font style), so we can use the <basefont> tag to specify the required font for the document
be seen in browser. This tag is used to specify the text font size and optionally the color and
font name. This tag is used in head section as well as in the body section and it is applied
to the complete document.

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_5
FONT TAG <FONT>…</FONT>
Font is actually a way or a style of appearance of text on the computer screen. Not long ago,
Times New Roman was the only font you could use with HTML and is still the font of choice
(the default) for the leading browsers. Today, we can choose different font styles as well as
several other font options by using the font tag.
The font tag gives you the control over how your page will look. But unlike other tags
discussed so far, the font tag does nothing without an attribute (remember an attribute
describes what the tag should do).
SIZE ATTRIBUTE WITH <FONT> TAG

• Font size is the overall size (generally height) of a font shown on a screen or printed
on a page. The font size is generally measured in points.
• You can set font sizes using absolute or relative size value.
• There are seven fixed sizes numbered from 1 to 7, that we can set using the size
attribute of the Font tag. One(1)=8pts is the smallest and seven(7)=36pts is the
largest. The default font size is three(3)=12pts.
FACE ATTRIBUTE WITH <FONT> TAG

• Face attribute with font tag is used to change the type or style of a font. But one
important point to keep in mind is that face attribute is system dependent
• That is, it will only work if the end user has the same typeface (type style) on his or
her system as the one used in html code. If not, the browser will automatically go
with the default font i.e. Times New Roman. So what you see on your Internet
Explorer's page may not be the same for each user. How can this problem be
prevented? Include more than one type face. For example, let's say you want the
following text to appear in Arial typeface. This is how you would do it.
• Example : <font face="Arial, Helvetica">LEARNING HTML </font> In the above
example, if the user's computer did not have Arial, the browser would automatically
search for the next typeface mentioned that is Helvetica. If no such type styles are
on the computer, then the browser will choose the default type i.e. Times New
Roman.
COLOR ATTRIBUTE WITH <FONT> TAG
The text color attribute of body tag will color all the text on your Web page. But what if you
want to color only a word or a sentence, attribute color with the font tag comes to rescue.
Here's an example.
Example: <font color="#0033ff "> “ I AM PROUD OF MY COUNTRY” </font> This will create
text 'I AM PROUD OF MY COUNTRY ' in bright blue color.
You can also use any one of 16 color names to specify a font color. Besides black and white,
you can specify aqua, blue, gray, green, line, fuchsia, maroon, purple, red, silver, olive,
yellow and teal.

CHARACTER TAGS: PHYSICAL AND LOGICAL

As you work with these tags to style your text in different ways, you will discover that there
is not really a big difference as to how the text is displayed on a browser.

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_6
For example, you can italicize your text using the <i> tag (a physical character tag) or
emphasize the text using <em> tag (a logical character tag). How does that make any
difference? It depends on whether you are using italics for the purpose of using italics or
whether you are using italics to convey some special meaning.
While a physical character tag controls how to format the text, a logical character tag
describes how the text is being used, with no regard to how it should be formatted. Thus a
logical style would be used to convey some meaning while a physical style would not.

UNDERSTANDING LISTS
• A list is a collection of related items that can be used to represent information in
pointed form.
• Lists can present items of information in an easy‐to‐read format.
• Many web pages display lists of items preceded with a bullet or a sequential
numbered list.

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_7
 • These lists are easy to format in HTML and they may even be nested (lists within
lists) to produce an outline format.
• Lists are also handy for creating an index or table of contents for a series of
documents or chapters.

ORDERED LIST
• An ordered list is also called the numbered list. This type of list is used to display the items in
a sequential manner.
• For example, steps in an algorithm, etc. In HTML, the <OL> tag is used to create an ordered
list.
• The <LI> tag is used to define an item in the list. It can be used as an empty tag as well as a
container tag
TYPE Attribute with <ol> tag In ordered list,
browser automatically starts the sequence
with Arabic numeral as 1. We can use the Type
attribute to change the numbering style with
the <ol> tag use type=? (replace ? with the
type value) TABLE: Numbering Ordered List
with different styles
START ATTRIBUTE WITH <OL> TAG
Ordered lists always starts with the number 1(one), we can also start a list with a different
number. To do this, in the <ol> tag, use attribute start=? Replace? with the number you want the
list to start. i.e.<ol start= “5”>

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_8
UNORDERED LISTS
• An unordered list is also called bulleted list.
• This type of list is generally used to display random
items which never require to place in a sequential
manner.
• The <UL> tag is used to define an unordered list.
• The <UL> tag has only TYPE attribute which describe
the type of bullet style will appear with list items.

DEFINITION LIST
• The definition list is also known as description list. Definition Lists are indented lists without
any number or any bulled symbol in front of each item
• The description list is created by using the <DL> tag in conjunction with <DD> and <DT> tags.
• The <DL> tag defines the entire description list.
• The <DT> tag defines the description term.
• The <DD> tag defines the description term's definition.
NESTED LISTS
In some situations, we need one or more items in the list that contains sub items, in such situations,
we need to create new lists inside such items to store the sub items. This is called nesting of lists.
The browser automatically indents nested list levels. You can nest the same or different kinds of list,
this means we can nest a bulleted list i.e. unordered list within numbered list or vice versa

***************************************************************************
Notebook Work
Q1 Identify the errors given below:
a. <h1 align=centre>
b. <body bgcolour=blue>
c. <image src=1.jpg>
d. <title>hello<title>
e. <body background=pic>
f. <br></br>

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_9
 g. <body textcolor=red>
h. <p align = centre>
i. <h1 align=justify>
j. Hr height=2>
k. <bold>hi</bold>
l. <italic>Hello</italic>
m. <underline>Hello</underline>
Q2 Read the following statements and name the HTML tags with their attribute.
a. To begin a new paragraph and align it to the right. b) To give one blank line
between two text lines.
b. To display a red colour horizontal rule under the heading of the web page.
c. To create a heading of the text like a title.
d. To set an image as a background for a web page.
e. To justify the paragraph.
Q3 Creating a Time‐Table using Nested Bulleted List( also to be practiced in LAB)

Q4 Write the html code for the following ( also to be practiced in LAB)

SXHS_X_COMPUTER APPLICATIONS_CH3_PG_10