Unit-1 HTML Common Tags

8/9/2019 Unit-1 HTML Common Tags

1/45

HTML COMMON TAGSUNIT - 1


2/45

Topics

1. History

2. List

3. Tables

4. Images

5. Forms

6. Frames

7. Cascading tyle s!eets

L

earning"b#ecti$e

s


3/45

History

H

istoryo%

Internet&'eedo

%HT(L


4/45

HT(L

A network is a structure linking computerstogether for the purpose of sharing information

and services.

In its early days, the Internet was called

ARPANET and consisted of two network nodeslocated at !"A and #tanford, connected $y a

phone line.

Today the Internet has grown to include an

uncounta$le num$er of nodes involving

computers, cell phones, P%As, &P' players,

gaming systems, and television stations

H

istoryo%

Internet&'eedo

%HT(L


5/45

HT(L

Timothy (erners)"ee and other researchers at the!ERN nuclear research facility near *eneva,

#wit+erland laid the foundations for the orld

ide e$, or the e$, in -/

They developed a system of interconnectedhyperte0t documents that allowed their users to

easily navigate from one topic to another

1yperte0t is a method of organi+ing information

that gives the reader control over the order in

which the information is presented

Itsalla

bo)tpresen

tation*HT(L


6/45

HT(L

T!e +ey to !yperte,t is t!e )se o% lin+s-!ic! are t!e elements in a !yperte,t

doc)ment t!at allo yo) to #)mp %rom one

topic or doc)ment to anot!er

/ lin+ may point to anot!er section o% t!esame doc)ment- or to anot!er doc)ment

entirely

/ lin+ can open a doc)ment on yo)r

comp)ter- or t!ro)g! t!e Internet- a

doc)ment on a comp)ter any!ere in t!e

orld

Itsalla

bo)tpresen

tation*H

T(L


7/45

HT(L

1yperte0t &arkup "anguage is the official language ofthe orld ide e$ and was first conceived in -2.

1T&" is a product of #*&" 3#tandard *enerali+ed

&arkup "anguage4 Time line of 1T&"

1T&" 1T&"5 !##- 6 7ava#cript

-- -8 -9

1T&"8 !## 5:TT&"--; -/ 5222

Ta$le less we$ %esignA7A:1T&" bordercolor:=orange> cellspacing:=2>

cellpadding:=3> idt!:=5EE> caption(y

c!ed)lecaption

trt!eriodt!t!Classt!tr

trtd align:=center>1sttd td0eb esigntdtr

trtd align:=center>2ndtdtdocial t)diestdtr

trtd colspan:=2>L)nc!tdtr

trtd align:=center>3rdtdtd8nglis!tdtr

table


19/45

HT(L * I(/@8

H

tmltags

? Images are em$edded within a we$ page using the I&* tag.

?img [email protected] width@-22 height@-22 alt@flowersB hspace@52C

? Attri$utes supported for I&* tag areD

src R" of the image source file

alt ) alternative te0t

Align how image aligns, deprecated

1eight height to reserve for image, deprecated

idth ) width to reserve for image, deprecated

(order ) si+e of $order surrounding image, deprecated

1space hori+ontal white space on either side of image, deprecated

Fspace ) vertical white space on either side of image, deprecated

Id ) image name

!lass ) style sheet class

#tyle ) style sheet information

Title ) element title


20/45

I(/@8 * 8,ample

H

tmltags

code?img [email protected] width@-22 height@-22C

?img [email protected] width@


21/45

HT(L * F"D(

H

tmltags

? An 1T&" form is not a visual element.

? It is a container and can contain one or more $uttons, te0t$o0es or

other form elements.

? The form elements can $e used to access information from the

reader and then process that information within the we$page.

? The information can also $e sent to a !*I or we$ server

application for further processing.

?A form is created using the $egin and end form tags ?H=R&C and?H=R&C.

? H=R& contains different attri$ute like -. action 5. method '. name

..etc.


22/45

Forms

H

tmltags

#ynta0 for !reating Horm

?Horm name@mailHormB

action @ urlB &ethod@postC

JJ

?HormC

? E0ample D

?htmlC

?headC ?titleC form demo?titleC?headC

?$odyC

?form name@userKregistration [email protected]

&ethod@postC

inp)t type:te,t name:%irstname

inp)t type:s)bmit= $al)e:)bmit

?formC?$odyC

?htmlC
http://www.mgit.ac.in/register.phphttp://www.mgit.ac.in/register.php


23/45

Form * attrib)tes

H

tmltags

Horm attri$utes areD

-. Name Horm name.

5. Target "ocation of window where from responses are sent.

'. Action R" of we$ server application that process form

information.

8. Enctype (y default this attri$ute has a value of application

0www) form)url encoded, $ut can $e set to multipartform)data

if the file upload element is used. Not all $rowsers support thelatter encoding type.


24/45

Form * 8lements

H

tmltags

()!* +or,s.ht,l

C di l !


25/45

Cascading tyle !eets

9css;

H

tmltags

hat was the term cascading style sheet meanL

(ut how does the $rowser decide which style wins out if

two !## rules conflict with each otherL

ho wins when thereMs a conflictL &ore than one style can apply to a

given tag. Hor e0ample, thereMs always the default $rowser)defined

style, such as $lack as the default te0t color. If you specify some other

color in a !## rule, the cascade allows your rule to dominate, to have

precedence over the $uilt)in style.

!o)ld t!e con%licting styles be combinedG 0!at i% t!e styles are

completely incompatible s)c! as one style speci%ying italic and

t!e ot!er nonBitalicG


26/45

H

tmltags

Pro$a$ly the most easily understood collision rule

involves where the style was defined.

? Oour !## styles can $e defined in four maGor locations

-. (rowser %efault #tyle

5. E0ternal #tyle #heet 3.css file4

'. Em$edded #tyle #heet 3specified in head4

8. inline #tyle sheet 3specified in the tag itself4

? *enerally the style closest to the element wins.

?Hirst the inline style wins and if inline is not defined ne0tEm$edded style wins, if it is also not specified E0ternal

style wins and last priority goes to (rowser %efault style.


27/45

H

tmltags


28/45


29/45


30/45

C 8/(L8

8lement elector


31/45


32/45

C 8/(L8

Id elector


33/45


34/45

C 8/(L8

Class elector


35/45


36/45

C 8/(L8

8lement Class elector


37/45


38/45

C 8/(L8

@ro)ping electors


39/45


40/45

C 8L8CT"D

T!e element elector

T!e element selector selects elements based on t!e element

name.

Jo) can select all p elements on a page li+e t!is* 9all p

elements ill be centerBaligned- it! a red te,t color;

T!e id elector

T!e id selector )ses t!e id attrib)te o% an HT(L tag to %ind t!e

speci%ic element.? /n id s!o)ld be )ni


41/45

T!e class elector

? T!e class selector %inds elements it! t!e speci%ic class.

? T!e class selector )ses t!e HT(L class attrib)te.

? To %ind elements it! a speci%ic class- rite a period

c!aracter- %olloed by t!e name o% t!e class*

? o NOTstart a class name it! a n)mberK

For tyle !eet attrib)tes $isit *

!ttp*.3sc!ools.comcsscsse,amples.asp


42/45

Frames

HT(L %rames are )sed to di$ide yo)r broser

indo into m)ltiple sections !ere eac!

section can load a separate HT(L doc)ment.

/ collection o% %rames in t!e broser indo is

+non as a %rameset.

T!e indo is di$ided into %rames in a similar

ay t!e tables are organiMed* into ros and

col)mns.


43/45

Creating Frames

To create a %rame )se %rameset tag instead o%

body tag.

T!e $o"sattrib)te o% %rameset tag de%ines

!oriMontal %rames and ,olsattrib)te de%ines

$ertical %rames.

8ac! %rame is indicated by %rame tag and it

de%ines !ic! HT(L doc)ment s!all open into

t!e %rame.


44/45

Frame 8,ample!tml

!ead

titleHT(L Framestitle

!ead

%ramesetros:1EN-OEN-1EN

%ramename:topsrc:!tmltop%rame.!tm%rame name:mainsrc:!tmlmain%rame.!tm

%ramename:bottomsrc:!tmlbottom%rame.!tm

no%rames

bodyJo)r broser does not s)pport %rames. body

no%rames

%rameset

!tml


45/45

Frames * isad$antagesT!ere are %e drabac+s it! )sing %rames- so itPs ne$er

recommended to )se %rames in yo)r 0ebages*

ome smaller de$ices cannot cope it! %rames o%ten

beca)se t!eir screen is not big eno)g! to be di$ided )p.

ometimes yo)r page ill be displayed di%%erently on

di%%erent comp)ters d)e to di%%erent screen resol)tion.

T!e broserPs back buttonmig!t not or+ as t!e )ser

!opes. T!ere are still %e brosers t!at do not s)pport %rame

tec!nology.

Date post:	01-Jun-2018
Category:	Documents
Upload:	ravi-kumar
View:	237 times
Download:	0 times

Unit-1 HTML Common Tags

Documents