Class 11 Hseb Project Sample

Final Project work on HTML
Introduction
Hypertext markup language (HTML) is the most commonly used
markup language to develop web pages. A web page is simply
electronic document written using HTML tags. A markup language
provides a way to describe the structure and the behaviour of
information on a web page. Hypertext is a type of text which
connects to the other documents. Moreover, it is used for
organizing information and for linking related documents together
using words or link. Such links are called hyperlinks.
History of HTML:
Tim Berner Lee White developed HTML in European Laboratory,
Switzerland in early 1990. World Wide Web Consortium (W3C) is an
organization that defines new specification for HTML and also
responsible for updating the languages. It has different versions.
HTML 2.0, HTML 4.0, HTML 5.0 etc.
HTML is not case sensitive language; we can type html codes either
in upper case characters lower case character or even mix. In order
to write html codes, any text editor can be used such as Notepad
for MS Windows platform and Text Editor in MS DOS environment.
The file extension for html is .html or .htm. An html file can be
opened in any web browser such as Internet Explorer, Nestscape
Navigator or Mozilla Firefox.
Steps for developing web page:

Write HTML Codes using any text editor such as Notepad
Save the file using extension .html or .htm
Open the html file in web browser such as Ms Internet Explorer.
PRAVIN KHALING RAI Saturday, 25 February 2017

Paragraph and Font

The tag <P> defines paragraph and it has one attribute align. The
<FONT> tag is used for applying font color, font face and font size.
Tags Syntax of the tag Attributes of the tag
<P> <P left for left

align="left/right/center"></P> alignment right for
right alignment
centre for centre
alignment
<FONT> <FONT size=4 color="red" face= size= 1 to 7
"arial">.</FONT> color= "colorname"
or "color code"
face="font name"
Example:
<HTML>
<HEAD><TITLE>Font and Paragraph</TITLE></HEAD>
<BODY bgcolor ="#808000"
<P align = center> Beautiful Places in Nepal</P>
<P align = left>
<FONT color = red size= 3 face=arial>
Mt. Everest<BR>
Mustang <BR>
Lumbini<BR>
Dolpa<BR>
</FONT>
</P>
</BODY>
</HTML>

Headings:
There are 6 heading tags in HTML starting form <H1> to <H6>. The size of
heading decreases from H1 to H6. The following example 6 shows the different
types of headings.
Example:
<HTML>
<HEAD><TITLE> Headings</TITLE></HEAD>
<BODY bgcolor="#802000">
<P align= centre>Examples of Headings</P>
<H1> Nepal </H1>
<H2> Bhutan </H2>
<H3> India </H3>
<H4> Pakistan </H4>
<H5> Bangladesh </H5>
<H6> Maldives </H6>
</BODY>
</HTML>

Horizontal rule
It produces a shinny line across the page, but it does not have end tag.
It is explained in example 7.
<HR> <HR size= 2 width=750 align= left> size=N(in pixels)
<HR size= 3 width= 75% align= width+ N (In pixels or
center> Percentage)
align=left/right/center
Preformatted Tag:
The <PRE> preformatted tag gives the exact output according to the
format that we have given in side the tags. The following example
gives an idea about horizontal rule tag and preformatted Tag.
Example:
<HTML>
</HEAD><TITLE>Preformatted Tag</TITLE></HEAD>
<BODY bgcolor="#802000">
<HR size= 2 width= 780 align= center>
<PRE> To
The Principal
Grammar Public H.S.S College
Sub: To whom it may concern
Dear sir,
I am Mr. Pravin Khaling Rai a student of Science Section 'B' XI in
Grammar Public H.S.S College.
</PRE>
</BODY>
</HTML>

Some More Formatted Tags

Tags Examples Description
<ADDRESS> <ADDRESS>Designed By It is used for footnote
Ram </ADDERSS>
<TT> <TT> I love Nepal</TT> Tele type text creates
Moonscape Text
<CODE> <CODE> I love Code font text and same as
Nepal</CODE> </TT> tag
<EM> <EM> I love Nepal</EM> Emphasis tag is just like <I>
tag
<CITE> <CITE> I love Nepal</CITE> Short citation tag, same as
<I>
<STRONG> <STRONG> I love Nepal Strong emphasis tag, same as
</STRONG> <B> tag
<SAMP> <SAMP> I love Sample text tag makes
Nepal</SAMP>
<BIG> <BIG> I love Nepal </BIG> It makes font size one point
bigger
<SMALL> <SMALL> I love It makes font size one point
Nepal</SMALL> smaller
<BLOCKQUOTES> BLOCKQUOTE> Text It is just like justify
</BLOCQUOTE> alignment
General Text Formatting

Tags Examples Description of tags
<B> <B>Bold Text</B> Makes text bold
<I> <I> Italic Text</I> Makes text Italic
<U> <U> Underline Text Make text underline
</U>
<S> or <STRIKE> <S> Strikethrough Text Makes text streikethrough
</S>
<SUB> <SUB>2</SUB> Makes text subscript,
Ex:H2O
<SUP> <SUP>2</SUP> Makes text
superscript,Ex: X2
Note: <BR> is used for line break and it has no ending tag.

Special Characters
Character Code Description
One Space One space
& & Ampersand
< < Less than
> > Greater than
¢ Cent symbol
© Copyright symbol
° Degree sign
± Plus minus symbol
£ Pound symbol
® Registered trade mark
¥ Japanese Yen symbol
™ Trade mark
&micro Greek micro sign
¶ Paragraph symbol
§ Section sign
A A A letter
B B B letter
COLOUR COLOUR CODE

Red #ff0000
Green #00ff00
Blue #0000ff
Black #000000
White #ffffff
Aqua #00ffff
Gray #808080
Yellow #ffff00
Maroon #800000
Purple #800080
Note: Similarly you can generate more than 16 million colors.

Ordered List
An ordered list defines a list of items using numbers or characters. The <OL> tag
defines order list.
<OL> <OL type=1>....</UL> Type: 1/A/a/i
<LI> <LI> sub tag that defines list item. It has no Start: N(number)
ending tag.
Example:
<HTML>
<HEAD><TITLE>Ordered List</TITLE></HEAD>
<BODY bgcolor=#0055bb>
<H3> Levels In Grammar Public H.S College</H3>
<OL type= "A"><LI> Grammar
<OL type="a"><LI> Montesorry
<LI> School
<LI> Higher Secondary level
<LI> College
</OL>
<li> Navajyoti
<OL type = "a"><LI> School
<LI> Higher Secondary level
<LI> College
</OL>
<LI> Angel Lord
<OL type ="a"><LI> Montessori
<LI> School
</OL>
</BODY>
</HTML>

Unordered List
An unordered list makes a bulleted list of items. The <UL> tag defines unordered
list.
<UL> <UL type= disk>....</UL> type=disk/circle/square
<LI> <LI> sub tag that defines list item.
Example:
<HTML>
<HEAD><TITLE>Unordered List </TITLE></HEAD>
<BODY bgcolor=#0055bb>
<H3>Cold Drinks from Coca-Cola Company</H3>
<UL type=square>
<LI>Coke</LI>
<LI>Fanta</LI>
<LI>Sprite</LI>
</UL>
</BODY>
<HTML>

<! Your First Page>

< HTML>
<HEAD> <TITLE > first page </TITLE>
</HEAD>
<BODY> This is your first web page. You can further explore many
more.!!!!
</BODY>
</HTML>

Definite List
The definition list is not as common as compare to other lists. The
<DL> tag defines definition list. It has two part : first part is <DT>
defines terms and the second part <DD> definition description.
Example:
<HTML>
<HEAD><TITLE>Definition List</TITLE></HEAD>
<BODY Bgcolor="#FFFF00">
<DL> <DL> Nepal
<DD> Nepal is famous for natural beauty
<DT>India
<DT> India is famous for food and cultures
<DT> Japan
<DD> Japan is famous for science and technology
</DL>
</BODY>
</HTML>

Marquee
It helps to animate text or picture in different directions with different behaviours.
It is supported by Internet Explorer not by Netscape Navigator.
<MARQUEE> <MARQUEE> Welcome to Direction=left/right/up/down
you </MARQUEE> behaviour=scroll/slide/alternate
scrollamount=N(in pixel)
width=N(in pixels or
percentage)
loop=N times or "infinite"
bgcolor=color or colorcode
Example:
<HTML>
<HEAD><TITLE> Marquee and base font </TITLE></HEAD>
<BODY bgcolor=#802000>
<HR><MARQUEE direction=right behavior=scroll scrollamount = 5
loop="infinite"> I am proud to be a Nepali </MARQUEE>
</HR>
</BODY>
</HTML>

Meta Tag
The <META> metadata tag is placed inside head tags. It defines the
descriptions of the page, keywords through which search engines can find
the page.
Example:
<HTML>
<HEAD> <TITLE> Document type and meta </TITLE>
<meta name = "author" content ="Ram singh">
<meta name = "keywords" content = "html, tag, web, internet, etc"></HEAD>
<Body background="E:\PAVIN KHALING\SpI\Sk! .. -
Gi" text="red">
This is your web page. You can type your text here
</BODY>
</HTML>

Nested List
Example:
<HTML>
<HEAD><TITLE> Nested List </TITLE></HEAD>
<BODY>
<OL type=1>
<LI> Famous Places in Nepal
<UL type="disk">
<LI> Kathmandu </LI>
<LI> Biratnagar </LI>
<LI> Ilam</LI>
</UL>
<LI> Famous Places in India
<UL type="disk">
<LI> Delhi </LI>
<LI> Bombay</LI>
<LI> Bangalore</LI>
</UL>
</OL>
</BODY>
</HTML>

How To Set The Background Color On Your Page

Example:
<HTML>
<HEAD><TITLE> second page </TITLE>
</HEAD>
<BODY bgcolor = "offff">
This is your first web page. You can explore many more..
</BODY>
</HTML>

General Text Formatting

Example:
<HTML>
<HEAD><TITLE> general text formatting </TITLE></HEAD>
<BODY bgcolor ="olive">
General formatting tags <BR>
<B>Bold Text </B><BR>
<I> Italic Text </I><BR>
<U>Underline Text </U><BR>
<S>Strikethrough Text </s><BR>
H<SUB> 2</sub>o<BR>
X<SUP>2</SUP><BR>
</BODY>
</HTML>

Insert Image and Objects

The <IMG> tag is used to insert image in the web page. It has no ending tab and
it has the following attributes:
Attributes Descriptions of the attribute
src="url/picture file name with path" URL or Path of image source file.
height= N Height of the image in pixels
width=N Width of image in pixels
border=N Image border in pixels
vspace=N Vertical Space around the image in pixels
align=top/bottom/middle/left/right Image alignment
Title Comments on the picture area while mouse over
Alt Display alternate text while error in path of the
picture file
Note: You can use <CENTER>.....</CENTER>to place image or text at center
Example:
<HTML>
<HEAD><TITLE> Image Insert </TITLE></HEAD>
</BODY>
<IMG src="E:\PAVIN KHALING\SpI\Sk! .. -
Gi.jpg" height=100 align=left border=10>
<IMG src="E:\PAVIN KHALING.jpg" height=200 align=left hspace=40 vspace=20>
<IMG src=" E:\PAVIN KHALING.jpg" height=50 align=left title='welcome"
alt="Beautiful">
<CENTER><IMG src=" E:\PAVIN KHALING" height=100 width=100></CENTER>
</BODY>
</HTML>

Attributes of <BODY>
Attributes Description of the attribute
bgcolor Sets the background color, you can use color name or color code
background Sets the background picture you can give picture name with
extension
alink Color of the hyperlink when it is clicked, you can give color or
color code
link Defines the text color in your page, you can give color or color
code
topmargin Sets top margin of the page, in pixel
bottommargin Set top margin of the page, in pixel


Class 11 Hseb Project Sample

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Class 11 Hseb Project Sample

Enviado por

Direitos autorais:

Formatos disponíveis

Final Project work on HTML

Steps for developing web page:

PRAVIN KHALING RAI Saturday, 25 February 2017

Paragraph and Font

<P> <P left for left

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

Some More Formatted Tags

General Text Formatting

PRAVIN KHALING RAI Saturday, 25 February 2017

COLOUR COLOUR CODE

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

<! Your First Page>

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

How To Set The Background Color On Your Page

PRAVIN KHALING RAI Saturday, 25 February 2017

General Text Formatting

PRAVIN KHALING RAI Saturday, 25 February 2017

Insert Image and Objects

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

PRAVIN KHALING RAI Saturday, 25 February 2017

Você também pode gostar