html + css reference

8/19/2019 HTML + CSS Reference

http://slidepdf.com/reader/full/html-css-reference 1/5

1) Heading Tags

2) Paragraph Tags

3) Anchor Tags

4) Adding Image

5) List Tags

6) Doctype

7) Horionta! "#!e

$) %eta Tag

&) Ta'!es

1() orms

11) *sing the span tag

12) +rea, tag

13) Pre-ormatted te.t tag /pre0

14) Adding a to a HT%L -i!e

15) #'script tag

16) #perscript tag

17) De!ete tag

1$) Adding ideo

1&) Adding a#dio

2() Di--erent attri'#tes o- inp#t tag

21) A''reiation tag



22) ome 'asic and important entities

23) irames

24) Targetting an anchor tag to open in an irame

25) %ar#ee

26) +o!d/strong0 Ita!ics/em08emphasied) *nder!ine/#0

27) ie!dset and Legend tags

1) Te.tDecoration te.tdecoration9none 8To remoe the #nder!ine #nder a !in,) oer!ine !ine

thro#gh #nder!ine

2) o!or

3) ontsie

4) ont:eight ; <orma! +o!d

5) ont-ami!y

6) +ac,gro#ndco!or

7) +ac,gro#ndimage

$) Padding

&) +order +orderco!!apse9co!!apse

1() %argin margin!e-t9a#to marginright9a#to

11) Te.ttrans-orm Te.ttrans-orm9#ppercase !o:ercase or capita!ie

12) Disp!ay disp!ay9in!ine '!oc, none8Hides #p the e!ement :itho#t cons#ming any space)

13) !oat -!oat9!e-t right 8This property -!oats o-- the e!ement -ar to the !e-t or right)8omp!eted)

14) +ac,gro#ndrepeat 'ac,gro#ndrepeat9 repeat. 8"epeats an image many times a!ong the .

a.is) repeaty norepeat



15) target = >?'!an,@ ; This opens the !in, in a ne: ta' or :indo:

16) Liststy!etype and !iststy!eimage -or ordered !ists

17) +o.hado:

1$) Te.thado:

1&) ertica!A!ign ; Te.ttop te.t'ottom midd!e

2() aption tag to ta'!es ; This caption tag is added a-ter the /ta'!e0 tag

21) ro:span co!span -or ta'!es

22) Position

Things I hae !earned9

1) P!aceho!der9 *sed in -orms so that :hen something is typed the te.t disappears a#tomatica!!y

B.9 /inp#t type= >te.t@ p!aceho!der= >Type hereC@0

2) Inp#t types ; "adio +#ttons hec,'o. Te.t Pass:ord #'mit

3) The te.t area created 'y the /te.tarea0 tag can 'e edited

4) To hae a dropdo:n !ist :e #se the /se!ect0 and /option0 tags

5) Ee can target an anchor !in, to open in an irame or e.amp!e /a hre- = >:::goog!ecom@

target = >ne:?-rame@0 !ic, here /a0 +#t :e sho#!d notice that the target is to ne:?-rame o

the -rame that is present sho#!d a!so 'e gien the same name 'y /i-rame name = >ne:?-rame@

src = >F@ :idth = >5((@ height = >5((@0

6) The main attri'#tes o- mar#ee that are to 'e remem'ered are !oop scro!!amo#nt and

direction Loop determines ho: many times the te.t hae to repeat 8i- it is set to ( then its an

in-inite !oop) scro!!amo#nt determines the speed o- the te.t that is to 'e moed and direction

may'e !e-t or right 'ased on ho: :e :ant it :hether -rom right to !e-t o- !e-t to right respectie!y

7) HT%L Bntities9 The genera! code -or #sing an entity is Gentity?name

http://www.google.com/

http://www.google.com/



ome o- the 'asic and important entity names are9 n'sp8non'rea,ing space ie space) !t8Less

Than) gt8reater Than) amp8Ampersand G) cent po#nd e#ro yen copy8opyrights)

reg8"egistered Trademar,) etc

$) There are 3 :ays to insert a sty!e sheet into a HT%L doc#ment They are 1) B.terna! ty!e

heet 2) Interna! ty!e heet 3) In!ine ty!e heet

1) B.terna! ty!e heet9 This is to 'e done in the /head0 tag o- the HT%L -i!e

<link rel="stylesheet" type="text/css" href="mystyle.css">

2) Interna! ty!e heet9 In this case the sty!e sheet is direct!y added to the HT%L -i!e in the head

section #nder the /sty!e0 tag

3) In!ine ty!e heet9 In this the code is added direct!y to the tags itse!- :ith the sty!e attri'#te

JIn these 3 :ays the -irst one is most!y pre-erred

The order o- priorities i- more than one sty!e sheet is aai!a'!e is9 In!ine ty!e heet 0 Interna! or

B.terna! ty!e heet 0 +ro:ser De-ined ty!e

&) A-ter starting a ideo tag :e m#st hae to ideo contro!s so :e add Kcontro!s as an attri'#te

to it and :e can a!so speci-y the height and :idth Then :e can a!so add Ka#top!ay :hich is

#se-#! -or p!aying the ideo as soon as its !oaded

Then :e add the so#rce o- the ideo 'y #sing the /so#rce0 tag and src attri'#te in it and -ina!!y

c!ose the so#rce tag

1() Ee add a a#dio c!ip M#st !i,e :e hae added a ideo c!ip +#t the di--erence is on!y that the

height and :idth are not speci-ied as they are not re#ired and the remaining part remains same



• Ee add a a!#e that is set to the type o- -i!e :hether its an a#dio or ideo This ma,e the

:e'site recognie 'etter Li,e a#diompeg ideomp4 etc

11) +o.siing9 +order'o.Cenera!!y e!ements are arranged according to the sie o- the

content <o: i- :e add this to a di e!ement then this inc!#des the sie o- content 'order and

the padding o the 'o.es :idth and height :hich are speci-ied :i!! remain the same no matter

:hat the padding 'order and content sies are

12) Its 'etter to speci-y the height and :idth o- the e!ements as a percentage so that they :i!!

occ#py the same space on eery deice

13) A!:ays speci-y the :idth and height o- an image I- they are not speci-ied the page :i!!-!ic,er :hi!e the image !oads

14) Ehen yo# speci-y the height and :idth o- an e!ement in percentage 1((N occ#pies the -#!!

screen

15) +ac,gro#ndco!or can 'e set to transparent

16) Hiding an e!ement can 'e done 'y setting the disp!ay property to OnoneO or the isi'i!ity

property to OhiddenO Ho:eer notice that these t:o methods prod#ce di--erent res#!ts9

isi'i!ity9hidden hides an e!ement '#t it :i!! sti!! ta,e #p the same space as 'e-ore The e!ement

:i!! 'e hidden '#t sti!! a--ect the !ayo#t

disp!ay9none hides an e!ement and it :i!! not ta,e #p any space The e!ement :i!! 'e hidden and

the page :i!! 'e disp!ayed as i- the e!ement is not there

17) In inp#t tag -or type e#a!s to te.t the -o!!o:ing properties can 'e #sed readon!y disa'!ed

sie ma.!ength

html + css reference

Documents