html report

8/12/2019 HTML Report

1/32

INTRODUCTION TO HTML

Html means Hyper Text Markup Language. It is a web language, which provides the

ability to design the web based pages. It is text based language used for

writing programs to create web sites. This is easy to understand, written

implement. There is no need of any compiler or anything else like it.

!ser can easily create any type of web page by using Html. It provides

the ability to create headings, title, "ackgrounds, #aragraphs settings,

font attributes and table attributes etc. $ll the coding written under or

between tags. Html is the base language of web pages. It has no fix si%e

or layout. $ single piece of Html code is called a tag. There is no need

of any special software to use Html. The user can type all Html coding

in a &otepad.

Html code is the ma'or language of the internet(s )orld

)ide )eb. )eb sites and web pages are written in Html code. )ith Html code and the)orld )ide )eb, you have the ability to bring together text, pictures, sounds and links

all in one place.Html code files are plain text files, so they can be composed and edited

on any type of computer. Html files are 'ust normal text file, they usually have the

extension of .htm or .html .Html documents have two parts

Head

"ody

The Head of the document contains the document(s title and similar

information and the "ody contains most everything else. It is the larger part of

the document.

SOME RULES OF HTML

$ll Html programs type under or between tags.

$ll Html files save with .htm or .html extension.

*


2/32

$ll Html file(s output will display on the web browser.

Html stands for Hyper Text Markup Language. Let(s break this down a little further+

HYPER

Hyper means all over the place-. Hyper as part of Html is similar as context.

It means when the user on the internet using a web browser, the user can go all over the

place-. n the internet of the user wants to see something, the user can see immediatelyto it. There is no set order to do things.

TEXT

)e are working with text only files. $ll Html codes write with text.

MARKUP

Markup- means set the web pages in tags. Tags are used for setup the Html

text. )ith the help of tags the user can say the browser, what he wants and how. Thus

the markup means set the text in tags.

LANGUAGE

Language- means that we are using a language with all its syntax. &ote

that Html is not a programming language such as "$/I0 or 0. These are linearprogramming languages and are based on different set of rules and are far more

complicated to learn and understand.

/ome of the most popular Html editors, such as 1ront#age or

2reamweaver will let you create pages more or less as you write

documents in &otepad or whatever text editor you3re using. However,

there are some very good reasons to create your own pages or parts of

them 4 by hand...

5


3/32

WHY LEARN HTML?

It is possible to create )eb#ages without knowing anything about the Html source

behind the page. There are excellent editors on the market that will take care of the Html

parts. $ll you need to do is layout the page. However, if you want to make it above

average in web design, it is strongly recommended that you understand these tags.

The most important benefits are6

7ou can use tags the editor does not support.

7ou can read the code of other people3s pages, and 8borrow8 the cool effects.

7ou can do the work yourself, when the editor simply refuses to create the

effects you want.

7ou can write your HTML by hand with almost any available text editor,

including notepad that comes as a standard program with )indows.

$ll you need to do is type in the code, then save the document, making sure to

put an .html extension or an .htm extension to the file.

TAGS

"asically, a computer sees an 8$8 as simply an 8$8 4 whether it is bold, italic, big or

small. To tell the browser that an 8$8 should be bold we need to put a markup in front of

the $. /uch a markup is called a Tag.

$ll Html tags are enclosed in 9 and :.

;xample6 a piece of text as it appears on the screen.


4/32

This is an example of bold text.

HTML6 the HTML for the above example6

This is an example of 9b:bold9=b: text.

$s you can see, the start tag 9b: indicates that whatever follows should be written in

bold. The corresponding end tag 9=b: indicates that the browser should stop writing text

in bold.

OPENING TAG

9html: is the opening tag that kicks things off and tells the browser that everything

between that and the 9=html: closing tag is an Html document. The stuff between

9body: and 9=body: is the main content of the document that will appear in the browser

window.

CLOSING TAG

The 9=body: and 9=html: close their respective tags. $LL HTML tags should be closed.

$lthough older versions of Html la%ily allowed some tags not to be closed, lateststandards re>uire all tags to be closed. This is a good habit to get into anyway.

&ot all tags have closing tags like this ?9html:9=html:@ some tags, which do not wrap

around content will close themselves. )e will come across these examples later. $ll you

A


5/32

need to remember is that all tags must be closed and most ?those with content between

them@ are in the format of opening tag B content B closing tag.

ATTRIBUTES

Tags can also have attributes, which are extra bits of information. $ttributes appear

inside the opening tag and their value is always inside >uotation marks. They look

something like 9tag attributeC8value8:Margarine9=tag:.

ELEMENTS

Tags tend not to do much more than mark the beginning and end of an element.

;lements are the bits that make up web pages. 7ou would say, for example, that

everything that is in4between and includes the 9body: and 9=body: tags is the body

element. $s another example, whereas 39title:3 and 39=title:3 are tags,

39title:;ntertainment.com9=title:3 is a title element.

AND TAGS

;very web page must have the H;$2 element. Tags that provide

information such to a person visiting your website, or information such as those needed

for a /;$D0H ;&EI&; are placed between the 9H;$2: and 9=H;$2: tags. It means

the H;$2 part of a document provides information about the document.

AND TAGS

ne of the statement that must be included between the 9H;$2:

and 9=H;$2: tags is the TITL; of your web page. The Title of your web page must

F


6/32

place between the 9TITL;: and 9=TITL;: tags and you can allowed only one Title per

page. The information you provide in the title is also used to label the bookmark entry of

your web page. )hen a visitor bookmarks your web site, adds it to their favorite list , it

is the Title that appears in the list. Most /earch ;ngines also use the title in search

engine results. The 9TITL;: and 9=TITL;: tags must be placed the 9H;$2: and

9=H;$2: tags.

HEADER TAGS

H;$2;D tags control headings. H;$2;D tags are logical tags and used

extensively in Html document to display headings. H;$2;D tags not only make your

headings large or smaller, they also bold the headings at the same time.

There are only six H;$2;D tags and arrange from

H* to HG. H* produces the largest si%e heading and is called the level * heading. HG

produces the smallest si%e heading and is called level G heading.

$ll headings store a si%e like simple text. The largest Heading 9H*: stores 5pt. si%e

and smallest Heading 9HG: stores *5pt. si%e.

TAGS SIZE

H* 5pt

H5 Gpt

H< AJpt

HA


7/32

SOURCE CODE:

9HTML:

9H;$2:

9TITL;:)DKI&E )ITH H;$2I&E/9=TITL;:

9=H;$2:

9"27:

9H*:"H$I E!D2$/ #L7T;0H&I0 0LL$E; /$&ED!D9=H*:

9H5:"H$I E!D2$/ #L7T;0H&I0 0LL$E; /$&ED!D9=H5:

9H


8/32

9HG:"H$I E!D2$/ #L7T;0H&I0 0LL$E; /$&ED!D9=HG:

9="27:

9=HTML:

TAG

9"D: tells your browser to go to the beginning of the next line. "D

stands for line "reak. 9"D: acts in the same way as the ;&T;D key on your keyboard.

)hen you press ;&T;D key, the cursor goes to the beginning of the next line.

TAG

9#: is paragraph tag. It tells your browser to insert a blank or empty line and

then begin a new line ?a new paragraph@. 9"D: tells the browser when a line has ended

while 9#: tells the browser to leave a blank line and begin a new paragraph.

TAG

9HD: puts a line across the page. HD stands for Hori%ontal Dule.

WORKING WITH TEXT FORMATTING

$ll computer users know very well about text formatting. !sing this method the user

makes the text more presentable by making it bold, italic, underline. The user can alsochange the style, color, si%e of the text. "y changing the si%e, style and color of the text,

the web pages display more attractive. The user has the liberty to load any number of

fonts in your system.

J


9/32

7ou do this by using the 9font:9=font: tags. Inside these tags you can

specify the color style and si%e of the font like this64

9font faceC-times new roman- si%eCF colorC-red-:)e can specify the maximum si%e of .

E(".!': +is!"#i$% &'(& )si$% &'(& 01,."&&i$%-

S1),2' 21+':

9html:

9head:9title:working with text formatting9=title:

9=head:

9body:9font faceC8comic sans ms8 si%eCF colorC8black8:

9b:9i:9u:"H$I E!D2$/ #L7T;0H&I0 0LL$E; /$&ED!D9=b:9=i:9=u:9=font:9=body:

9=html:

MAR3UEE TAG


10/32

This tag is used to animate the text or graphic. Most of users like

animated )eb#ages because mar>uee animation makes web pages more attractive. 7ou

can move or animate your text or graphic from left to right, right to left, up to down anddown to up. 9M$D!;;: tag indicates the beginning of the tag and 9=M$D!;;:

tag indicates the end of the tag. )e can use this tag like this64

9Mar>uee:Thapar !niversity patiala

9=mar>uee:

MAR3UEE ATTRIBUTES

BEHA4IOR ATTRIBUTE Mar>uee tag makes the animated text. 7ou can animate text or

graphic with different ways, different styles. 7ou can use the behavior tag to set thestyle of animation. There are three main styles of mar>uee64 /croll, $lternate and /lide.

S2,1!!Nto move text simply from one end to other end again and again.

S!i+'Nto move the text from one end and stop at the other end. The text move at onlyne time.

A!&',$"&'Nto move text from one end, struck the other end and came back.

SCROLLAMOUNT ATTRIBUTEThis attribute is used to set the scrollamount of mar>uee

tag. It increases the speed of animation. )e can use this attribute like this64

9mar>uee behaviorC-scroll- scrollamountC*:

Thapar !niversity #atiala

9=mar>uee:

SCROLLDELAT ATTRIBUTE This attribute is used to set the scrolldelay of mar>uee tag. It

decreases the speed of your animation. 7ou can use this attribute like this64

9mar>uee behaviorC-scroll- scrolldelayCF:Eeneration4x computers

9=mar>uee:

BGCOLOR ATTRIBUTE

*


11/32

This attribute is used to set the background color of your animation. Itis also used in 9"27: tag in same meaning but in 9"27: tag, it changes the

background color of the whole body. "ut in 9M$D!;;: tag, this attribute changedonly animation(s background color. )e can use this tag like this64

9mar>uee behaviorC-alternate- bgcolorC-blue-:Thapar !niversity #atiala

9=mar>uee:

DIRECTION ATTRIBUTE This attribute is used to set the moving direction of your animation.7ou

0an move your data in different directions like64 !#, 2)&, L;1T, DIEHT. )e can

use this attribute like this64

9mar>uee behaviorC-alternate- directionC-left-:Thapar !niversity #atiala

9=mar>uee:

LISTS

To create a bulleted list you need to add a 9ul: and a 9=ul: tag at the beginning and the

end of the list. &umbered lists have 9ol: tags instead of 9ul: tags.

To separate single list items use 9li: and 9=li: tags.

There are special settings that you can use to customi%e the lists on your page.

1ollowing is detail of numbered and bulleted lists644

BULLETED LISTS

7ou have the following bullet options6

2isc

0ircle

**


12/32

s>uare

Look at these examples to see the detailed syntax.

NUMBERED LISTS

7ou have the following number options6

#lain numbers

0apital Letters

/mall Letters

0apital Doman &umbers

/mall Doman &umbers

In addition to these options you can specify at which number the list should start. The

default start value for numbered lists is at number one ?or the letter $@.

Look at these examples to see the detailed syntax.

HTML402; ;O#L$&$TI& = ;O$M#L;

9ol:

9li:text9=li:9li:text9=li:

9li:text9=li:

9=ol:

Makes a numbered list using the default

number type6

*. text

5. text


13/32

F. This is one line

G. This is another line

. $nd this is the final line

9ol typeC8$8:

/tarts a numbered list, using capital letters.

$. This is one line

". This is another line

0. $nd this is the final line

9ol typeC8a8:

/tarts a numbered list, using small letters.

a. This is one line

b. This is another line

c. $nd this is the final line

9ol typeC8I8:

/tarts a numbered list, using capital roman

numbers.

I. This is one line

II. This is another line

III. $nd this is the final line

9ol typeC8i8:

/tarts a numbered list, using small roman

numbers.

i. This is one line

ii. This is another line

iii. $nd this is the final line

9ol typeC8*.8: /tarts a numbered list, using normal numbers.

*. This is one line

*


14/32

5. This is another line


15/32

"elow are numbers from to *F in both systems6

2;0 * 5 < A F G J * ** *5 *< *A *F

H;O * 5 < A F G J $ " 0 2 ; 1

The highest hexadecimal number you can specify using one figure is 1 e>ualing *F.

)ith two figures the highest value is 11 e>ualing 5FF.

To prevent confusion on numbers higher than hexadecimal colors are often entered

withP in front of them. In Html, color codes have G digits, like P11


16/32

9body bg0olorC8P11J0G8:

The color is defined to be 8P11J0G8.

The P simply states that the following numbers are hexadecimal.

The first two digits are the amount of red ?11@.

2igits < and A specify the amount of green ?J0@.

2igits F and G specify the amount of blue ?G@.

/ince there are two hexadecimal figures for each color you can specify 5FG gradients of

each basic color. This gives a total of 5FGR5FGR5FG C *G,,5*G different

combinations. However, not all of these colors will look the same on all browsers and

operating systems.

HYPERLINKS

The tags used to produce links are the 9a: and 9=a:. The 9a: tells where the link should

start and the 9=a: indicates where the link ends.;verything between these two will work

as a link.The target of the link is added to the 9a: tag using the

hrefC8http6==www.whateverpage.com8 setting.

The example below shows how to make the word here work as a link to yahoo.

0lick 9a hrefC8http6==www.yahoo.com8:here9=a: to go to yahoo.

7ou simply6

*G


17/32

/pecify the target in the 9a hrefC8 8:.

Then add the text that should work as a link.

1inally add an 9=a: tag to indicate where the link ends.

HTML BACKGROUNDS

In Html we can set background by using following two methods64

!sing bgcolor attribute

!sing background attribute

USING BGCOLOR ATTRIBUTE

"gcolor stands for background color. This attribute is used to set

the background color of your web browser(s page. 7ou can set the value of this tag

normally in text like this64

9body bgcolorC-blue-:

USING BACKGROUND ATTRIBUTE

"ackground attribute is used to set the background picture

of your web page. )ith the graphic background your web page looks more attractive,

much better. 7ou can set the path of the graphic as background attribute(s value like

this64

9body backgroundC-16SwallpapersStarunSk.'pg-:

1or example644

S1),2':

*


18/32

9html:

9body backgroundC816SwallpapersStarunSk.'pg8:

9=body:

9=html:

O)&)&:

INTRODUCTION TO TABLES

Tables are great for abbreviation large amounts of information and for

structure data. Tables allow viewers to find what they need >uickly and easily. Tables

are a way of representing the information in tabular form which not only attractive to

look at but it also easy to understand when read by the user. The tables are divided into

hori%ontal rows and vertical columns. If we create a table of


19/32

The table must be declared with table tag. Therefore 9T$"L;:

denotes the beginning of a table and 9=T$"L;: denotes the end of a table. If you leave

off the closing tag, your table would not work. Table is a container element and so

everything contained between the opening and closing T$"L; tags.

AND TAGS

7ou start each row a 9TD: tag. TD stands for Table Dow. Tables

are always constructed as se>uence of rows. Thus 9TD: tells the browser that a new row

is now beginning. If you do not use the TD tag for each new row, the web browser

assumes the cells will keep going to the right. 9TD: tag denotes the beginning of the

row and 9=TD: denotes the end of the row.

AND TAGS

TH stands for Table Heading. The 9TH: tag is used to make table

heading. It displays the data some bold from other data. The 9TH: tag denotes the

beginning of the table heading and 9=TH: tag denotes the end of the table heading.

AND TAGS

T2 stands for Table 2ata. The 9T2: tag denotes the beginning of

the table data and 9=T2: tag denotes the end of the table data. The T2 cell can contains

almost anything such as text, images etc.

ATTRIBUTES OF TAG

BORDER ATTRIBUTE

"order attribute is used to set the border of the table. If the user

wants to make border around the each cell of the table then the user will use the "order

*


20/32

attribute. )ith the setting of border, your table looks better than without border. 7ou

can give the value of the border attribute in pixels. Like64

9table borderCF: it means the border si%e is F pixels(

BGCOLOR ATTRIBUTE

"gcolor $ttribute is used to set the background color of the entire

table. This attribute makes the table more attractive. It is very easy to use. To make the

table more attractive, the user can set this property. 7ou can set the value of "gcolor

attribute like this644

9Table "gcolorC-red-: it means the background color is red(

CELLSPACING ATTRIBUTE

To set the space between the cells, the cellspacing attribute is

used. 0ellspacing attribute affects the amount of spacing between cells. That is, the

value in the cellspacing attribute indicates how many pixels of white space there should

be between individual cells. If you do not set a value, default cellspacing value is 5

pixels. 7ou can use this attribute like this644

9Table "orderCF cellspacingCF:

CELLPADDING ATTRIBUTE

To set the space between the text and cells border, the cellpadding

attribute is used. 0ellpadding affects the amount of spacing between text and cell(s

border. That is the value in the cellpadding indicates how many pixels of white space

there should be between text and cell(s border. 7ou can use this attribute like this644

9Table "orderCF cellpaddingC*:

BORDERCOLOR ATTRIBUTE

To set the color of table(s border lines, the bordercolor attribute is

used. "ordercolor attribute changes the color of the table(s border with simple color

5


21/32

value. That is the value of the bordercolor attribute indicates what the color will apply

on the table(s border. 7ou can use this attribute like this644

9Table borderCF "ordercolorC-blue-:

F1, '(".!':

To make table containing name, roll no and branch attributes and displaying data in this

table-

SOURCE

9html:

9head:

9title:tables9=title:

9=head:

9body:

92IQ $LIE&C80;&T;D8:

9table borderCF "D2;D0LDC8D;28 0;LL/#$0I&EC* 0;LL#$22I&EC*:

9tr:

9th:&$M;9=TH:

9TH:DLL&9=TH:

9TH:"D$&0H9=TH:

9=TD:

9TD:

9T2:$&!D$E E!#T$9=T2:

9T2:


22/32

9T2:5FG9=T2:

9T2:;0;9=T2:

9=TD:

9=T$"L;:

9=2IQ:

9="27:

9=HTML:

OUTPUT

FORMS

$ form is simply an area that can contain form fields.1orm fields are ob'ects that allow

the visitor to enter information 4 for example text boxes, drop4down menus or radiobuttons.)hen the visitor clicks a submit button, the content of the form is usually sent to

a program that runs on the server. However, there are exceptions.

$ typical form example would be a search engine.

55


23/32

SEARCH!

/;$D0H THI/ /IT;

This is what happens when the form is submitted6 The search words are sent to a

program on the server. The program will search a database for matches. The program

creates a webpage with the results. The results webpage is sent back to the visitor.

This is what happens when the form is submitted6

The I2 and password are sent to a program on the server.

The program will search a database for valid entries.

If the entry is valid the visitor is sent to the protected page.

If the entry is invalid the visitor is sent to a 8failure8 page.

"oth examples send the contents of the form fields to programs running on the server.

E(".!' 01,.:

5


24/32

SOURCE CODE:

9html:

9head:

9title:Degistration 1orm9=title:

9=head:

9body bgcolorC8white8:

9table bgcolorC8white8 borderCA alignCcenter widthCGFU

cellspacingC:

9tr:

9td bgcolorC8Pffcc8:

9center:

9b:9h* alignCcenter:Degistration 1orm9=h*:9=b:

5A


25/32

9mar>uee directionC8left8 bgcolorC8pink8:

This )ebpage is designed by $nurag Eupta

9=mar>uee:

9font faceC8times new roman8 si%eCF colorC8ffee8:

9br:;nter your &amenbspVnbspVnbspVnbspVnbspVnbspV9input

typeC8text8 si%eC5F valueC88:

9br:9br:;nter your $ddressnbspVnbspVnbspV9input typeC8text8 si%eC5F

valueC88:

9br:9br:;nter your #hone no.9input typeC8text8 si%eC5F valueC88:

9br:9br:nbspVnbspVnbspVnbspVnbspVnbspVnbspVnbspVnbspVnbspVnbs

pVnbspV0ity6

9select:

9option:&abha9=option:

9option:#atiala9=option:

9option:Ludhiana9=option:

9option:/angrur9=option:

9option:"athinda9=option:

9=select:

9br:9br:;nter 7our #incode9input typeC8text8 si%eC5F valueC88:9br:9br:9br:;nter 7our 2..".

9select:

9option:Wan9=option:

9option:1eb9=option:

9option:Mar9=option:

9option:$pr9=option:

9option:May9=option:

9option:Wun9=option:

9option:Wul9=option:

9option:$ug9=option:

9option:/ep9=option:

9option:ct9=option:

5F


26/32

9option:&ov9=option:

9option:2ec9=option:

9=select:

9select:

9option:*9=option:

9option:59=option:

9option:


27/32

9option:59=option:

9option:5J9=option:

9option:59=option:

9option:


28/32

9option:2iploma9=option:

9option:".Tech9=option:

9option:M.tech9=option:

9option:"0$9=option:

9option:M0$9=option:

9=select:

9br:9br:9input typeC8submit8 valueC8/ubmit8:9br:

9=center:

9=select:

9=head:

9=body:

9=font:

9=html:

FRAMES

1rames can divide the screen into separate windows. ;ach of these windows can contain

an HTML document. $ file that specifies how the screen is divided into frames is called

a frameset.

If you want to make a homepage that uses frames you should6

make an HTML document with the frameset

Make the normal HTML documents that should be loaded into each of these

frames.

)hen a frameset page is loaded, the browser automatically loads each of the pages

associated with the frames.$ frameset are simply an HTML document that tells the

browser how to divide the screen into split windows.

$s stated on the previous page, a frameset is simply an HTML document that tells the

browser how to divide the screen into split windows.

5J


29/32

If the frameset looked like this6

The code would be6

9frameset colsC-5U,JU-:

9=frameset:

The screen is divided into two columns.

The frame windows would have no names, so the frameset really couldn3t be used for

any purpose. #roceed to learn how to add names and default pages that load into your

frame windows...7ou can add default pages to frame windows with the src setting.

2efault pages are the pages that will be loaded when the frameset is opened the first

time.

1urthermore, we can add names to each frame window using the name setting. This will

allow us to make a link in one frame window, open a page in another frame window.

If the frameset looked like this6

5


30/32

The code would be6

91rameset: 9frameset rowsC8FU,FU8:

9frameset colsC8FU,FU8:

9frame srcC88:

9frame srcC88:

9=frameset:

9frameset colsC8


31/32

2HTML is 2ynamic Hyper Text Markup Language. In

HTML we have to write 91&T: tag again and again when we have to change font

face, color or si%e. "ut in 2HTML we declare the font tag with its attributes and calls it

when need. /o there is no need to write code again and again, so we can save our time

by using 2HTML. The functions are declared in 9H;$2: tag. It is called 0// i.e.

0ascade /tyle /heets.

DIFFERENCE BETWEEN DHTML AND HTML

In HTML we use C sign, but in 2HTML we use:?colon@ sign.

In HTML we use , ?comma@, but in 2HTML we use V ?semicolon@ sign.

In HTML we use font face, but in 2HTML we use font4family.

In 2HTML we declare functions in header tags.

E(".!': displaying text using 2HTML.


32/32

S1),2' 21+':

9html:

9head: 9title:My page9=title:

9style typeC8text=css8:

h*Xfont4family6comic sans ms8Vfont4si%e6FptVcolor6blackVY

h5Xfont4family6impactVfont4si%e6

html report

Documents