to change background

8/3/2019 To Change Background

http://slidepdf.com/reader/full/to-change-background 1/26

ACKNOWLEDGEMENT

I express my sincere thanks and deep gratitude to MISS IRAM IRFAN (Computer facultyMember for giving me a chance to make the project on HTML and always guiding me and

providing help for the completion of the project.

I am also very thankful to all those who directly or indirectly helped me for the successful

Completion of the project.

PRIYANKA ARORA

BBA (B & I)

ROLL NO: 0831171806



INDEX

TOPIC1. INTRODUCTION TO HTML PAGE 22. BASIC TAGS OF HTML PAGE 3

3. LIST OF PRACTICALS PAGE 4

4. CHANGING BACKGROUND PAGE 5

5. OUTPUT PAGE 66. FORMATTING STYLES PAGE 7-10

7. ORDERED LIST PAGE 10

8. UNORDERED LISTS PAGE 119. INSERTING IMAGE PAGE 11

10. OUTPUT PAGE 12

11. DESIGNING TABLES WITH DIFFERENT STYLES PAGE 12-1612. ANCHOR TAG PAGE 16

13. SOME OTHER TAGS : FONT TAG PAGE 18

14. HEADING TAG PAGE 2015. FRAMES PAGE 22-23



INTRODUCTION

TO

HTML



1. INTRODUCTION

WHAT IS HTML?

HTML stands for Hypertext Markup Language.

HYPERTEXT is an ordinary text that has some extra features such as formatting, images,

Multimedia and links to another document. MARKUP is the process of adding extra features to ordinary text.

LANGUAGE means that it has its own syntax, slang and rules for proper communication.

This is not a programming language like JAVA, PERL, C or BASIC. A simple markup

Language, way of describing how a set of text and images should be displayed to the viewer,

Similar in concept to a newspaper editor’s markup symbols. HTML is just a series of tags that areintegrated into a document that can have text, images or multimedia content.

The basic HTML page begins with the tag <HTML> and ends with </HTML>. In between the file

Has two sections- the HEADER and the BODY.

HTML pages are of two types and the pages can be read on web.

STATIC: It comprises of text or images. DYNAMIC: These are the pages where content of web page depend on user input. So interaction

With the user is required in order to display the web page.

EXAMPLE: Consider a web page which requires a number to be entered from the user in order toFind out if it is even or odd. When the user enters the number and click the appropriate button, the

number is sent to web server, which in turn returns the result to the user in an HTML page.

HISTORY OF HTML

HTML developed a few years ago as a subset of SGML (standard generalized markup language)

Which is a high level markup language that has been used by the department of defense. Like,HTML, it defines different components of a document, and describes formatting and hypertext

Links.

HTML is simpler than SGML. HTML is best suited for transmission over the internet (in the form

Of web pages) SGML is not ideal for transmission across the internet to many different types of

computers, users and browsers applications.

TIM BERNERS LEE at CERN designed the original HTML document type in 1990. In 1992,

DAN CONNOLLY wrote the HTML document type and a brief HTML specification. In 1994,

DAN CONNOLLY and KAREN OLSON MULDROW rewrote the HTML specification.

IMPORTANCE OF HTML:

1. HTML can be used to display any type of document on the host computer which can be any

Computer (anywhere in the world)2. It is a versatile language and can be used on any platform (MACINTOSH, UNIX)

3. HTML is used to make the text look attractive.4. It has additional feature of linking one document with another.



BASIC

TAGSOF

HTML



BASIC TAGS OF HTML

HTML ELEMENT: Container element. It identifies the document as an HTML document. The

HTML element does not affect the appearance of the document. This element is not visible whendisplayed by the browser but gives a hint to the browser that the document is an HTML document

The <HTML> element delimits the beginning and the end of an HTML document. It contains only

the <HEAD> and <BODY> elements, which in turn contains a number of other elements.<HTML>

……..

……..

……..</HTML>

HEAD ELEMENT: Container element that contains information about document. There are

certain elements that must be considered in HEAD element. One of them is TITLE element.

<HTML><HEAD>

<TITLE> BLS </TITLE>

</HEAD>

</HTML>

TITLE ELEMENT: A container element used in <HEAD> element to provide the title of thedocument. The title is a string that identifies the contents bof the document.

<HEAD>

<TITLE> IGNOU </TITLE></HEAD>

BODY ELEMENT: Contains all the text and images that make up the page. It also contains all

the HTML elements that provide the control and formatting of the page. It contains the following

attributes:BG COLOR: Can be used for changing the background color of the page. By default backgroundcolor is White.BACKGROUND: Used for specifying the image to be displayed in background of the page.LINK: Indicates colors of the HYPERLINKS, which have not been visited or clicked on.ALINK: Indicates color of ACTIVE HYPERLINK.

VLINK: Indicates color of the HYPERLINKS after the mouse is clicked on it.TEXT: Used for specifying color of the text displayed on the page.LEFT MARGIN: Used to set the left hand margin. Value is given in Pixels.

TOP MARGIN: Used to set the top margin of the document. Value is given in Pixels.

<BODY>……….

……….{PARAMETERS}

……….</BODY>



LIST OF PRACTICALS

Write the code in HTML to change the background of a web page. Write the code in HTML to demonstrate various formatting styles.

Write the code in HTML to demonstrate the use of ordered and unordered lists. Write the code in HTML to insert images in the web page. Write the code in HTML to design a table with different styles.

Write the code in HTML to demonstrate the use of anchor tag. Write the code in HTML to design a sign up form.

Write the code in HTML to design a purchase order form. Write the code in HTML to design a web page for a food corner.

Write the code in HTML to design a web page for online shopping. Write the code in HTML to design a web page for online reservation. Write the code in HTML to design a web page for a commercial bank.

Write the code in HTML to design a web page for various insurance policies.



1. TO CHANGE BACKGROUND:

This background is used to specify a URL, which is pointing to an image. This Image will be

used as background for the document. The image is titled across the browser window.

SYNTAX: <BODY BACKGROUND = “FIGURE.JPG”>

.

.

.

</BODY>

EXAMPLE:

<HTML>

<HEAD>

<TITLE> WELCOME TO OUR SITE </TITLE>

</HEAD>

<BODY BACKGROUND=”C:\Program Files\MicrosofOffice\Templates\1033\Pages\2cstagr.tem\FISH.JPG">

<H1> MY FIRST HTML CODE </H1></BODY>

</HTML>



OUTPUT:



2. FORMATTING STYLES:

B(BOLD): Indicates that the enclosed text should be displayed in bold face.

SYNTAX: <B>-----------</B>EXAMPLE:

<HTML>

<HEAD>

<TITLE> BLSIM </TITLE></HEAD>

<BODY>

THE TEXT IS DISPLAYED IN <B> BOLDFACE </B></BODY>

</HTML>OUTPUT:

BOLDFACE

I (ITALIC): Indicates that the enclosed text should be displayed in an italic type face.

SYNTAX: <I>-----------------</I>EXAMPLE:

<HTML>

<BODY>

THE TEXT IS DISPLAYED IN <I> ITALIC TYPE FACE </I></BODY>

</HTML>OUTPUT:

ITALIC TYPE FACE

U (UNDERLINE): This tag underlines the text it encloses. Blank spaces between words are alsounderlined.

SYNTAX: <U>----------------</U>EXAMPLE:

<HTML>

<BODY>THIS TEXT IS <U> UNDERLINED </U>

</BODY>

</HTML>OUTPUT:

UNDERLINED

P (PARAGRAPH): It indicates a paragraph. Paragraph can be left aligned, right or center using

the ALIGN attribute. By default the text starts from the left side.

SYNTAX: <P>--------------</P>EXAMPLE:



<HTML>

<BODY>

<P> BLSIM amongst the best B-SCHOOLS. Offers different courses such as BBA, BA(B & I),MBA </P>

</BODY>

</HTML>

STRIKE (STRIKEOUT TYPE): Indicates that the enclosed text should be displayed with a

line drawn through it.

SYNTAX: <STRIKE>--------------</STRIKE>EXAMPLE:

<HTML>

<HEAD>

<TITLE> BLS </TITLE><BODY>

THIS TEXT IS DISPLAYED IN <STRIKE> STRIKEOUT TYPE </STRIKE>

</BODY>

</HTML>

OUTPUT:STRIKEOUT TYPE

SUB (SUBSCRIPT): Characters enclosed between SUB & </SUB> tags are displayed as a

subscript. A subscript character appears slightly below the base line and in a smaller font.

SYNTAX: <SUB>-----------</SUB>EXAMPLE:

<HTML>

<HEAD>

<TITLE> CHEMISTRY </TITLE></HEAD><BODY>

SOME CHEMICAL FORMULAS <BR>

CO <SUB>2</SUB> <BR>H <SUB>2</SUB>O <BR>

H<SUB>2</SUB>SO<SUB>4</SUB>

</BODY></HTML>

OUTPUT:

SOME CHEMICAL FORMULACO2

H2O

H2SO4

SUP (SUPERSCRIPT): The text enclosed between <SUP> and </SUP> tags is displayed as a

superscript. A superscript text appears slightly above the top of the preceding text and in a

similar font.



SYNTAX: <SUP>---------------</SUP>EXAMPLE:

<HTML><HEAD>

<TITLE>-----</TITLE>

<BODY>SOME MATHEMATICAL FORMULA <BR>

(A+B)<SUP>2</SUP> = A<SUP>2</SUP>+B<SUP>2</SUP>+2AB <BR>

(A-B)<SUP>2</SUP> = A<SUP>2</SUP>+B<SUP>2</SUP>-2AB

</BODY></HEAD>

</HTML>OUTPUT:

SOME MATHEMATICAL FORMULA

(A+B)2 = A2+B2+2AB

(A-B)2 = A2+B2-2AB

BR(BREAK): This tag is used for inserting a line brake. The text written after the <BR> tag is

displayed from the beginning of the next line onwards. This tag does not need a corresponding

terminating tag.

EXAMPLE:

<HTML>

<BODY>

Internet is World’s largest network <BR>It has revolutionized the way in which people communicate with

Each other<BR>

Actually it is a network of networks <BR></BODY>

</HTML>

OUTPUT:The Internet is World’s largest network.It has revolutionized the way in which people communicate with each other.

Actually a network of networks.

HR(HORIZONTAL RULE): This element draws a horizontal line across the page. This

horizontal line can be used to divide information or sections. The<HR> element is an emptyelement and has no end tag as it does not enclose any data.

EXAMPLE:

<HTML><HEAD>

<TITLE> PRIYANKA </TITLE>

<BODY><HR>

INTRODUCTION TO HTML

</BODY></HEAD>



</HTML>OUTPUT:

INTRODUCTION TO HTML

It has the following attributes:ALIGN: Used for aligning line on the page. It has values such as left, right, or center.

NO SHADE: This attribute is used to prevent any shading effect.SIZE: This determines the thickness of the horizontal rule. Value is given in pixels.

WIDTH: This defines the horizontal width of the line. Can be specified in pixels or as a percentage.COLOR: Color of horizontal rule can be set using color attribute. General format

<HR COLOR=NAME>

3.USE OF ORDERED AND UNORDERED LIST:

LISTS: Lists are used when the data are to be mentioned in the form of points like: causes of a

particular issue, list of items etc. Lists break up the monotony of a long paragraph and direct the

reader’s attention to the essential parts.

Lists are segregated into two types mainly the ordered list and the unordered list.

ORDERED LIST: This tag is used when items are to be placed in a specific order. It displaysthe list that is preceded by ARABIC NUMBERS or LETTERS or ROMAN NUMERALS

Default order is determined by the browser, but the style can be changed by using the type

attribute.SYNTAX: <OL START =”VALUE”>

TYPE = “A”/”a”/”i”/”I”

----------------------</OL>

EXAMPLE:

<HTML><HEAD><TITLE> BLSIM </TITLE>

<BODY>

<OL><LI> FIRST ITEM </LI>

<LI> SECOND ITEM </LI>

</OL></BODY>

</HEAD>

</HTML>OUTPUT:

1. FIRST ITEM

2. SECOND ITEM

UNORDERED LIST: Used when list of items are not to be placed in a specific order. A

browser adds a bullet for each item.

SYNTAX: <UL TYPE =”CIRCLE”/”DISC”/”SQUARE”>



--------------------------------------------------------------------------------------------------------------</UL>

EXAMPLE:

<HTML>

<BODY><UL>

<LI> CHOCOLATES </LI>

<LI> BISCUITS </LI>

</UL></BODY>

</HTML>OUTPUT:

CHOCOLATES

BISCUITS

3. INSERT IMAGES IN THE WEBPAGE:

The IMG tag specifies an image to be displayed in an HTML document. This element cannot be

used for embedding other HTML text. It is an empty element. The IMG element has SRC,

ALIGN, BORDER, HEIGHT, WIDTH as the attributes.SYNTAX: <IMG SRC=” “> </IMG>EXAMPLE:

<HTML>

<HEAD>


<IMG SRC="C:\WINNT\Web\Wallpaper\Gold Petals.jpg">

</IMG></BODY>

</HEAD>

</HTML>

OUTPUT:

4. DESIGN A TABLE WITH DIFFERENT STYLES

Three tags are essential ingredients for creating a table.

TABLE: This is the main tag. It tells the browser that a table follows. It has attributes like size

and border width.TR: A table row defines a horizontal row that consists of table data cells.TD: This tag specifies an individual block and cell in a table row.

EXAMPLE 1:

<HTML>

<HEAD>

<TITLE><H1>BLS FEST</H1></TITLE><HEAD>

<BODY BGCOLOR="SKY BLUE">



FIRST TABLE WITH BORDER = 5<TABLE BORDER=5>

<TR>

<TD>CULTURAL FESTIVAL HAS BEEN ORGANISED BY BLS INSTITUTE OFMANAGEMENT</td>

</TR>

</TABLE><BR></BR>

SECOND TABLE WITH WIDTH=50%

<TABLE BORDER=WIDTH=100%><TR>

<TD>SELECTED FOR SINGING IN CULTURAL FESTIVAL</TD>

</TABLE><BR></BR>



THIRD TABLE WITH WIDTH =50

<TABLE BORDER=1 WIDTH=100><TR>

<TD> THE MOST SENSATIONAL EVENT </TD>

</TR></TABLE>

<BR></BR>

FOURTH TABLE WITH AN IMAGE

<TABLE BORDER=3>

<TR>

<TD><ALIGN=LEFT VALIGN=MIDDLE><IMG

SRC="C:\WINNT\Web\Wallpaper\Paradise.jpg"WIDTH=150 HEIGHT=150></TD></TABLE>

<BR></BR>

FIFTH: A COMPLETE TABLE WITH DIFFERENT SIZED COLUMN

<TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR>

<TD><WIDTH=60%>SWATI</TD>

<TD><WIDTH=20%>PRIYANKA</TD><TD><WIDTH=30%>DEVANSHI</TD>

</TR>

<TD>A</TD><TD>B</TD><TD>C</TD>

</TR>

</TABLE></BODY>

</HTML>

OUTPUT:

FIRST TABLE WITH BORDER = 5

CULTURAL FESTIVAL HAS BEEN ORGANISED BY BLS INSTITUTE OF MANAGEMENT

SECOND TABLE WITH WIDTH=50%

SELECTED FOR SINGING IN CULTURAL FESTIVAL

THIRD TABLE WITH WIDTH =50

THE MOST

SENSATIONAL

EVENT

FOURTH TABLE WITH AN IMAGE

FIFTH: A COMPLETE TABLE WITH DIFFERENT SIZED COLUMN

SWATI PRIYANKA DEVANSHI

A B C

EXAMPLE 2:

<HTML>

<HEAD>

<TITLE> BLSIM </TITLE></HEAD>

<BODY BGCOLOR="PLUM">



FIRST TABLE<TABLE BORDER = 5>

<TR>

<TD> <FONT COLOR="RED"> SWATI</FONT></TD><TD> <FONT COLOR="RED">NEHA </FONT></TD>

<TD> <FONT COLOR="RED">DEEPSHIKHA</FONT></TD>

</TR><TR> <FONT COLOR="RED">

<TD> <FONT COLOR="RED">TARUN</FONT></TD>

<TD> <FONT COLOR="RED">RASHI</FONT></TD>

<TD> <FONT COLOR="RED"> MEGHA</FONT></TD></FONT>

</TR>

</TABLE><BR>

SECOND TABLE

<TABLE BORDER = 5><TR>

<TD COLSPAN = 2><FONT COLOR="GREEN"> NEHA</FONT> </TD>

<TD> <FONT COLOR="GREEN"> TARUN </FONT></TD>



<TR>

<TD> <FONT COLOR="GREEN"> SWATI</FONT></TD>

<TD> <FONT COLOR="GREEN"> PRIYANKA </FONT></TD><TD> <FONT COLOR="GREEN">DEEKSHA </FONT></TD>

</TR>

</TABLE><BR>

THIRD TABLE

<TABLE BORDER = 5>

<TR><TD ROWSPAN = 2><FONT COLOR="YELLOW"> NEHA</FONT></TD>

<TD> <FONT COLOR="YELLOW">TARUN </FONT></TD>

<TD> <FONT COLOR="YELLOW"> DEVANSHI</FONT></TD></TR>

<TR>

<TD> <FONT COLOR="YELLOW">NITIN</FONT></TD><TD> <FONT COLOR="YELLOW"> NEHA </FONT></TD>

</TR>

</TABLE>

<BR>

FOURTH TABLE<TABLE BORDER = 5>

<TR><TD ROWSPAN = 2>NEHA </TD>

<TD COLSPAN = 2> TARUN </TD>

<TR><TD> RADHIKA </TD>

<TD> RINKI </TD>

</TR></TABLE>

<BR>

FIFTH TABLE<TABLE BORDER = 5><TR>

<TD COLSPAN = 3> NEHA </TD>

</TR><TR>

<TD > NAVEEN </TD>

<TD> PRIYANKA </TD><TD> SWATI</TD>

</TR>

</TABLE>

</BODY></HEAD>

</HTML>



OUTPUT:

5. USE OF ANCHOR TAG:The Anchor tag is used to create links between different objects like HTML pages, fileswebsites, etc. It is introduced by the characters <A> and terminated b </A>. HREF is the most

common attribute of the ANCHOR tag. It defines the destination of the link.

It is also possible to make an image a link if desired. This is done using the <IMG> tag.EXAMPLE:

<HTML>

<HEAD><TITLE> PLAN </TITLE>

</HEAD>

<BODY>

<BODY BGCOLOR="PINK"><H1><FONT FACE="MONOTYPE CORSIVA" COLOR="PURPLE"><CENTER> PLAN1

</CENTER></FONT></H1>

<A HREF="C:\USERS\KANIKA\DOCUMENTS\Z.HTML"> ABC </A></BODY BGCOLOR>

</BODY>

</HTML>



<HTML>

<HEAD>

<TITLE> FUTURE </TITLE></HEAD>

<BODY>

<BODY BGCOLOR="RED"><H1><FONT FACE="MONOTYPE CORSIVA" COLOR="WHITE"><CENTER> FUTUREPLAN </CENTER></FONT></H1>

</BODY>

</HTML>OUTPUT:



SOME OTHER TAGS

USE OF FONT TAG

The HTML element <FONT> is paired tag used to change the way text is displayed within

<font>------------</font> tags. This element requires the following attributes:FONT SIZE: It is possible to set the relative size of the text by setting the size attribute of the<font> element. The size attribute is represented as:SYNTAX: <FONT SIZE=VALUE>

The default value is 3. The valid value ranges from 1-7, where 1 is the smallest & 7 is the largestEXAMPLE:

<HTML>

<HEAD><TITLE> BLS </TITLE>

<BODY>

<FONT SIZE= “7”>

PRIYANKA ARORA</FONT>

</BODY>

</HEAD></HTML>OUTPUT:

PRIYANKA ARORA



FONT COLOR: Color attribute changes the color of the text that will appear on the screen. Thecolor can be set by giving the name of the color supported by the browser or by giving the value

as # RRGGBB, a hexadecimal color value.EXAMPLE:

<HTML>

<HEAD>

<TITLE> BLS </TITLE>

<BODY><FONT COLOR =”VIOLET”>

PRIYANKA ARORA

</FONT></BODY>

</HEAD>

</HTML>OUTPUT:

PRIYANKA ARORA

FONT FACE: The FACE attribute of the <FONT> element is used to set the name of the fontfor the text. If no match is found, the text is displayed in the default type according to the

browser preference settings.EXAMPLE:

<HTML>

<HEAD><TITLE> BLS </TITLE>

</HEAD>

<BODY><FONT FACE=”LUCIDA CONSOLE”>

PRIYANKA

</FONT></BODY></HTML>OUTPUT:

PRIYANKA

CENTER TAG: The <center> element is used to center the content between the current left and

right margins. To center text or embedded objects such as images, enclose the content within

<center> and </center> tag.SYNTAX: <CENTER>-------------</CENTER>

EXAMPLE:<HTML><HEAD>

<TITLE>------------</TITLE>

<BODY><CENTER> BLSIM </CENTER>

</BODY>

</HTML>



OUTPUT:

BLSIM

HEADING TAG: HTML defines six levels of headings. HEADING element can be used togive section headings. The heading element is written as <HN>-----------</HN>, where n is the

level of the heading and can take values from 1 to 6. H1 gives the most prominent heading while

H6 gives the least prominent. Headings are usually displayed in bolder and larger font than the

normal text.SYNTAX: <HN>---------</HN>

Where n is the level of heading.EXAMPLE:

<HTML>

<HEAD>


<BODY TEXT=”GREEN”>

<CENTER><H1> WELCOME TO INDIA </H1></CENTER>

<CENTER><H2> WELCOME TO INDIA </H2></CENTER>

<CENTER><H3> WELCOME TO INDIA </H3></CENTER><CENTER><H4> WELCOME TO INDIA </H4></CENTER>

<CENTER><H5> WELCOME TO INDIA </H5></CENTER><CENTER><H6> WELCOME TO INDIA </H6></CENTER>

</BODY TEXT>

</BODY></HEAD>

</HTML>

OUTPUT:



FRAMES:

When you divide one browser window into multiple windows, then those multiple windows are

called frames. A file that specifies how the screen is divided into frames is called a frameset.Various tags that help in formation of frames are:

1. FRAME SET: Parent tag that defines characteristics of this frame page.2. FRAMESET COLS: “# %, *” cols(columns) defines the width that each frame will have.3. FRAMESET ROWS : ”# %, *” defines the height that each frame will have.

4. FRAME SRC: “URL” is the location of the web page to load into the frame.

EXAMPLE:<HTML>

<HEAD>

<TITLE> FRAME </TITLE><FRAMESET COLS ="20%,20%,20%">

<FRAME SRC="C:\Documents and Settings\All Users\Documents\My Pictures\Sample

Pictures\Blue hills.jpg"><FRAME SRC="C:\Documents and Settings\All Users\Documents\My Pictures\Sample

Pictures\Sunset.jpg">

<FRAME SRC="C:\Documents and Settings\All Users\Documents\My Pictures\Sample

Pictures\Water lilies.jpg">

</FRAME SET></HEAD>

</HTML>

OUTPUT: