Scribd
Upload
206 views

Understanding HTML

The document discusses HTML (Hypertext Markup Language) and its key concepts: - HTML is the code used to design websites and web pages, created by Tim Berners-Lee in 1989. It uses tags to instruct web browsers how to display text, images, and other content. - Websites are collections of web pages containing various media types and linked together via hyperlinks. - HTML documents are created using tags like <html>, <head>, <title>, <body> and attributes to format text, add images and tables, and structure content.

Uploaded by

Priya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
206 views

Understanding HTML

The document discusses HTML (Hypertext Markup Language) and its key concepts: - HTML is the code used to design websites and web pages, created by Tim Berners-Lee in 1989. It uses tags to instruct web browsers how to display text, images, and other content. - Websites are collections of web pages containing various media types and linked together via hyperlinks. - HTML documents are created using tags like <html>, <head>, <title>, <body> and attributes to format text, add images and tables, and structure content.

Uploaded by

Priya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Understanding HTML

Notes By Tanuja Banerjee, Computer teacher St. Anne’s Girls” High School
This chapter in Computer Science deals with HTML–the Hyper Text Mark-up language to
help students understand the concept of the language that’s primarily used for website
development and related aspects.

HTML– The language used to create or design a website is called HTML.   It is a
complete code package that allows a user to create web pages. HTML was designed
by Sir Tim Berners Lee in 1989.
Websites- Websites are collection of many web pages which contain text, graphic, video,
audio and link to other web pages via hyperlink. World Wide Web was founded by Tim
Berners-Lee in 1990.
Hyper Text– Hyper text is the text used to link various web pages. It is the text on a web
page, which on clicking opens a new web page.
Mark-up – Mark- up means highlighting text either by underlining, by displaying text in
different colour or both.
Language– Language is mode of communication between web pages.
Tag- A tag is a piece of code which acts as a label that a web browser interprets. It
instructs a web browser what to display and how to display . In simple words we can say
that Tags are the HTML  commands written in particular syntax. Most HTML tags exist
in pair- Start Tag <tag> ……… </tag>.
Common HTML tags-
1. HTML tag– This tag informs the web browser that the pages are formatted
in HTML.
Syntax- <HTML> ……. Content of document…… </HTML>

2. HEAD tag- It encloses the document header but contains no text within
itself.
Syntax- <HEAD>……….. </HTML>

3. TITLE tag- This tag is written inside the <HEAD> tag and closed before
</HEAD>. It gives title of the web page displayed on the title bar.
Syntax- <HEAD><TITLE>……. Title of the document….. </TITLE></HEAD>

4. BODY tag – This tag appears just after <HEAD> tag. This tag includes all the
text, images and the formatting elements with their attributes.
Syntax- <BODY>………. Whole content of the page ……. </BODY>

Elements in HTML-
Everything from start tag to end tag is referred to as HTML elements.

There are two types of elements in HTML-


1. Container Elements- An element that has both Start or ON tag <tag> and
End or OFF tag </tag> is known as a Container element. Example-
<HTML>…. </HTML>, <HEAD>…….</HEAD>, <TITLE>………. </TITLE>,
<BODY>……… </BODY> etc.
2. Empty Elements- An element that has only Start or ON <tag> and no end tag
is known as Empty element. These elements do not contain any content.
Example- <BR>, <IMG>,<HR> etc.
 
Creating ,Saving and Viewing an HTML document.
 
How to create an HTML document
 Open Notepad
 Type the HTML codes
 Save File with .html extension
 Then save the document on the desktop
Viewing an HTML document-
 Click on Start button—>Internet Explorer→File menu
 Select Open-à Browse, Open button
In the open dialog box, the web page will be displayed.

Adding Comments– Comments are remarks which are left in a program to increase
readability of the program. Any information written between <!–and — > will not be
considered for processing but is very helpful in understanding at a later date.
 

Changing the appearance of text-

 FONT tag- Font tags change the appearance of text. It begins with <FONT>
and ends with </FONT>
 Tags can have some additional information inside them called attributes.
Various attributes of FONT tag are-

1. Face- It changes the font of the text. Example- <FONT FACE= “Lucida
Handwriting”>
2. Size- It changes the size of the font to be displayed.
Example- <FONT SIZE= “7” >

3. Color- The color attribute changes the color of the text.


Example- <FONT COLOR= “RED”>

Using these attributes we can write HTML codes like this-

<FONT FACE= “Lucida handwriting” SIZE= 6 COLOR= “Red”>

Changing Font Style Bold, Italics, Underline


B (Bold) tag- To show the content within this tag in bold form, ex: <B> St Anne’s G/H
School </B>
I (Italics) tag- To show the content within this tag in italics style i.e. leaning to right side,
ex-<I> Computer Science </I>

U (underline) tag- To underline the text enclosed within  set the back<U> and  </U>
Changing the appearance of background

Background-This attribute is used to set the background of the page by using any image
file.
Example- <BODY BACKGROUND= “C:\HTML\cutebear.jpg”>

Bgcolor– It sets the background color of the web page.


Text- It specifies the color of the text to be written on the webpage.
Example- <BODY BGCOLOR= “BLUE” TEXT= “YELLOW”>

Formatting the headings 


Heading tag- This tag is used to specify the headings in a web page. Heading ranges are
H1 to H6 ,  where the smaller suffix gives a bigger size of heading.
Syntax- <Hn> heading </Hn> (n stands for numbers 1-6)

P (PARAGRAPH)- To display a long portion of text as a paragraph. Notepad doesn’t


recognize the enter key so <P> tag is used to start a new paragraph.
Align Attribute- This attribute of <P> specifies the horizontal alignment of a paragraph.
It takes any of the four values- left, right, centre, justify.
Setting The Margins of the Webpage (<BODY> TAG)
TOP, BOTTOM, LEFT AND RIGHT MARGINS- These attributes are used to set the top,
bottom, left and right margins of the web page respectively.
BR Tag-<BR> tag moves the proceeding text or image on the next line, without giving any
space between the  two lines.
HR Tag-<HR> tag adds a horizontal line or rule which is required in a web page.

HTML-Using List and creating Table

The following notes on Computer deals with HTML coding in which the students will
learn about List, creating Table, linking, inserting image and use of different Tags.
Whenever we have to present any information in a precise manner, like list,we use
bullets. HTML supports various elements to create list for displaying items in a specific
order. A list can be defined in different styles, such as- numbers or bullet.

LIST tag- It helps us to arrange information in an organised way to increase


readability and better understanding.

A list can be defined in different styles-

 Ordered list
 Unordered list
 Definition list
ORDERED LIST

The Ordered list is used to display the list of items in a specific order. It is a container
tag which starts with <OL> tag and finishes with </OL> tag. By default , the contents get
displayed with a numbered list item.

Syntax-    <OL>          ……………..               </OL>

<LI> List Item- It is an empty element that does not require a closing tag.

Syntax-    <OL><LI> item name  </OL>

Attributes of <OL> tag

START- This attribute is used to give the starting point of the numbering
order of the list. With START attribute , the value (positive number) must be
given in double quotes. Example- START=”5”, means ordered list will start
from 5.
 TYPE- This attribute defines the type of numbering style for the ordered list
items. Example- (A,B,C), (a,b,c), (I,II,III,IV), (I,ii,iii,iv),(1,2,3,4)
Eaxmple of ordered list
Output of the ordered list coding will appear
this way
HTML Coding for Ordered List-

<HTML>
<HEAD>
<TITLE> WELCOME </TITLE>
</HEAD>
<BODY BGCOLOR= “pink” >
<FONT COLOR=”White”> The days of the week
<OL Type= “a” >
<LI> Monday
<LI> Tuesday
<LI> Wednesday
<LI> Thursday
<LI>  Friday
<LI> Saturday
<LI> Sunday
</OL>
</FONT>
</BODY>
</HTML>
UNORDERED LIST-

Unordered list is a collection of items that are not to be displayed in any special order or
sequence. It is a container tag which starts with <UL>tag and finishes with </UL> tag

Syntax- <UL> ………………. </UL>

<LI> tag- Each list item in a list has to be preceded by <LI> empty tag.

Syntax- <UL><LI> item name </UL>


Type Attribute- It specifies the type of bullet that can be used with <UL> element. The
three values. The three values that can be defined with <UL> tag are–

Disc  Specifies a filled circle

Circle Specifies  a non- filled circle

Square Specifies  a filled square bullet

DEFINITION LIST-

A definition List is used to present a list of definitions for items. It is a container tag
which starts with <DL> and ends with </DL> tag.

Definition list consists of two elements-

1. Definition Term- <DT> element is used to define the Definition Term.


2. Definition Description- <DD> element is used for Definition Description.
MARQUEE tag

A Marquee displays a moving text message on a background. It is a container element.

Syntax- <MARQUEE> Qualities of a good student </MARQUEE>

Attributes of MARQUEE tag-

 Width- Specifies the width of marquee.

 Height- Specifies the height of marquee.

 Behavior- It specifies the type of scrolling of the marquee.

 Scrolldelay- Specifies how long to delay between each jump.

 Scrollamount- Specifies the speed of marquee text.

 Loop- Specifes number of times to loop.

 Bgcolor- Specifies background colour in terms of colour name.

 Hspace- Specifies horizontal space around the marquee.

 Vspace- Specifies vertical space around the marquee.

 
Creating a Table in HTML
Tables arrange data in rows and columns and provide an attractive way to represent
information.

Tables are created to –

 Present information or data in a comprehensive manner


 Make comparative analysis of data
Tables are  created using the<TABLE> tag.

Features of <TABLE> tag-

 Each table begins with <TABLE> tag and ends with </TABLE> TAG.
 Each row begins with <TR> (table row) tag and ends with </TR> tag. Rows 
must be inside table.
 Each row contains many columns, so each column begins with <TH> (table
heading) tag ends with </TH>. Column headings must be inside row.
 Each column contains data within the cell, so it begins with <TD> (table
data) tag and ends with </TD>. Cells must be inside rows.
 The number of <TD> tags in a single <TR> tag, defines the number of
columns in a single row.
Attributes of Table Tag-

BORDER–      Specifies the thickness of the border of a table.


Syntax- <TABLE BORDER= 3>

BORDERCOLOR– It specifies the colour of table border using colour name/code.


Syntax- <TABLE BORDER=3 BORDERCOLOR= “BLUE”>

BGCOLOR– Specifies the background colour of the table.


Syntax- < TABLE BORDER=3 BGCOLOR= “WHITE”>

CELLPADDING– It specifies distance between the edge of cell & its contents in pixels
Syntax- <TABLE BORDER=3 BORDERCOLOR=”BLUE” BGCOLOR= “WHITE” ALIGN=
“CENTER” CELLPADING=”10”>
CELLSPACING– It specifies the minimum distance adjacent cells in pixels
Syntax- <TABLE BORDER=3 BORDERCOLOR= “BLUE” BGCOLOR= “WHITE”
ALIGN=”CENTER” CELLSPACING=”10”>
ALIGN –This attribute specifies the alignment of the table on the page.

Syntax- <TABLE BORDER=3 BORDERCOLOR=”BLUE” BGCOLOR=”WHITE”


ALIGN=”CENTER” CELLPADDING=”10”
HEIGHT- It specifies the overall height of the table to fit the data in it.

WIDTH- Specifies the overall height of the table to fit the data in it.

Syntax- <TABLE BORDER=1 BGCOLOR=”WHITE” HEIGHT=300 WIDTH=400


 

HTML coding to create a table-

<HTML>

<HEAD>

<TITLE> Create a Table </TITLE>

</HEAD>

<BODY TOPMARGIN= “50” LEFTMARGIN=”50” BGCOLOR= “Pink”>

<TABLE BORDER= 3 BORDERCOLOR=”Blue”>

<TR>

<TH>S.No.</TH><TH>Name</TH><TH> Grades</TH>

</TR>

<TR>

<TD>1</TD><TD>Bindu</TD><TD>A </TD>

</TR>

<TR>

<TD>2 </TD><TD>Yogesh</TD><TD> A+ </TD>

</TR>
<TR>

<TD> 3 </TD><TD>Sakshi</TD><TD> A</TD>

</TR>

</TABLE>

</BODY>

</HTML>

HYPERLINKS IN HTML-

While surfing internet , we have seen highlighted words or images on the web pages.
When we click on any of them, it takes us to another web page or part. These links take
us directly to other pages or even to specific parts of a given page are called Hyperlinks.

Hyperlinks–
Hyperlinks allow web users to navigate between websites by clicking on text and
images.

A link is specified using anchor tag <A>.

A(anchor) – This tag is used to mark the text as hypertext link, to link one page to
another. Anything written between the opening <A> tag and closing </A> t ag is used as
text of the link. When a user clicks on that link it will reach to the linked document.
Attribute of <A> tag-

HREF ( HypertextREFerence)- This attribute of <A> tag stores the reference of the


document that is to be linked. The text that appears on the hyperlink is enclosed
between the starting tag <A> and ending tag </A>.
Syntax- <A Href= “Document name”> Hyperlink Text </A>

Inserting Images- To add an image in web page use <IMG> tag.


Attributes of <IMG> tag-

 SRC- Gives image filename in double quotes with complete path. SRC(Source)
attribute gives the exact and complete location of the image file on the disk,
otherwise the image may not appear on the page.

 BORDER- Makes a border of specified width around the image.

 HEIGHT- It specifies the height of the image.

 WIDTH- It specifies the horizontal width of the image.

 ALT- Displays alternate text if image cannot be displayed.

 ALIGN- Aligns the image

 VSPACE- Adding space around the top and bottom of the image.

 HSPACE- Adding space around the left and right of the image.

You might also like