Download - 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.
*
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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.
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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/12/2019 HTML Report
8/32
9HG:"H$I E!D2$/ #L7T;0H&I0 0LL$E; /$&ED!D9=HG:
9="27:
9=HTML:
TAG9"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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
*
-
8/12/2019 HTML Report
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
**
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
*
-
8/12/2019 HTML Report
14/32
5. This is another line
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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':
*
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
*
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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:
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
26/32
9option:&ov9=option:
9option:2ec9=option:
9=select:
9select:
9option:*9=option:
9option:59=option:
9option:
-
8/12/2019 HTML Report
27/32
9option:59=option:
9option:5J9=option:
9option:59=option:
9option:
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
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
-
8/12/2019 HTML Report
30/32
The code would be6
91rameset: 9frameset rowsC8FU,FU8:
9frameset colsC8FU,FU8:
9frame srcC88:
9frame srcC88:
9=frameset:
9frameset colsC8
-
8/12/2019 HTML Report
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.
-
8/12/2019 HTML Report
32/32
S1),2' 21+':
9html:
9head: 9title:My page9=title:
9style typeC8text=css8:
h*Xfont4family6comic sans ms8Vfont4si%e6FptVcolor6blackVY
h5Xfont4family6impactVfont4si%e6