To Change Background

ACKNOWLEDGEMENT I express my sincere thanks and deep gratitude to MISS IRAM IRFAN (Computer faculty Member 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
TOPIC
1. INTRODUCTION TO HTML 2. BASIC TAGS OF HTML 3. LIST OF PRACTICALS 4. CHANGING BACKGROUND 5. OUTPUT 6. FORMATTING STYLES 7. ORDERED LIST 8. UNORDERED LISTS 9. INSERTING IMAGE 10. OUTPUT 11. DESIGNING TABLES WITH DIFFERENT STYLES 12. ANCHOR TAG 13. SOME OTHER TAGS : FONT TAG 14. HEADING TAG 15. FRAMES PAGE 2 PAGE 3 PAGE 4 PAGE 5 PAGE 6 PAGE 7-10 PAGE 10 PAGE 11 PAGE 11 PAGE 12 PAGE 12-16 PAGE 16 PAGE 18 PAGE 20 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 editors markup symbols. HTML is just a series of tags that are integrated 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 to Find 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 TAGS OF 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 when displayed 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 the document. 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 background color 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 Office\Templates\1033\Pages\2cstagr.tem\FISH.JPG"> <H1> MY FIRST HTML CODE </H1> </BODY> </HTML>
Files\Microsoft
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 also underlined. 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 FORMULA CO2 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 Worlds 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 Worlds 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 empty element 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 readers 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 displays the 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> <TITLE> BLS </TITLE> <BODY> <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 OF MANAGEMENT</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, files, websites, 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> FUTURE PLAN </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 largest. EXAMPLE: <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. The color 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 font for 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 to give 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> <TITLE> BLS </TITLE> <BODY> <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 Pictures\Blue hills.jpg"> <FRAME SRC="C:\Documents and Pictures\Sunset.jpg"> <FRAME SRC="C:\Documents and Pictures\Water lilies.jpg"> </FRAME SET> </HEAD> </HTML>
Settings\All Settings\All Settings\All
Users\Documents\My Users\Documents\My Users\Documents\My
Pictures\Sample Pictures\Sample Pictures\Sample
OUTPUT:

To Change Background

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

To Change Background

Transféré par

Droits d'auteur :

Formats disponibles

ACKNOWLEDGEMENT I express my sincere thanks and deep gratitude to MISS IRAM IRFAN (Computer faculty Member for giving

PRIYANKA ARORA BBA (B & I) ROLL NO: 0831171806

BASIC TAGS OF HTML

THE MOST SENSATIONAL EVENT

FOURTH TABLE WITH AN IMAGE

Settings\All Settings\All Settings\All

Users\Documents\My Users\Documents\My Users\Documents\My

Pictures\Sample Pictures\Sample Pictures\Sample

Vous aimerez peut-être aussi