7/26/2019 Webpage Designing With HTML5

1/14

WebpageDesigning with

HTMLBY: CHRISTIAN M. RAGUS

C"n#ept

M"bi$e Apps.Web Apps.

7/26/2019 Webpage Designing With HTML5

2/14

What is HTML&

HTML is a markup$ang(age)"r describingweb *"#(%ents +web pages,.

HTML stan*s )"r H!per Te-t Mar(p Lang(age

A %ar(p $ang(age is a set ") markup tagsHTML *"#(%ents are *es#ribe* b! HTML tags

/a#h HTML tag describes*i0erent *"#(%ent#"ntent

http://var/www/apps/conversion/tmp/scratch_3/Facebook_sincensurar_inverso.pnghttp://var/www/apps/conversion/tmp/scratch_3/html-tags-list.jpghttp://var/www/apps/conversion/tmp/scratch_3/html-tags-list.jpghttp://var/www/apps/conversion/tmp/scratch_3/Facebook_sincensurar_inverso.png

7/26/2019 Webpage Designing With HTML5

3/14

Sh"rt Hist"r! ") HTML

HTML was #reate* b! Berners1Lee in $ate 2332b(t 4HTML 5.64 was the 7rst stan*ar* HTMLspe#i7#ati"n whi#h was p(b$ishe* in 2338.HTML 9.62 was a %a"r ersi"n ") HTML an* itwas p(b$ishe* in $ate 2333. Th"(gh HTML 9.62ersi"n is wi*e$! (se* b(t #(rrent$! we arehaing HTML18 ersi"n whi#h is an e-tensi"nt" HTML 9.62; an* this ersi"n was p(b$ishe*in 5625.

7/26/2019 Webpage Designing With HTML5

4/14

R"$e ") HTML in WebDee$"p%ent

www.)a#eb"".#"%

Internet

HTML D"#(%ent

HTT= Re>(est

Christian?s =C

R"$e ") HTML in Web Dee$"p%entHTML is the $ang(age; "r #"*e; (se* t"

e*it an* p"siti"n the te-t; i%ages; )ra%es an*"ther web page e$e%ents.

7/26/2019 Webpage Designing With HTML5

5/14

D"#(%ent t!pes

Web br"wsers #an *isp$a! seera$ t!pes ") *"#(%ents; n"tHTML; s" when #reating a web *"#(%ent the 7rst thing !"( *" is tebr"wser what t!pe ") *"#(%ent is #"%ing. Y"( *e#$are the t!*"#(%ent with a spe#ia$ $ine ") HTML at the t"p ") the *"#(%ent.

Web br"wsers #an (s(a$$! rea* *"#(%ents in %an! )"rin#$(*ing HTML; @ML; @HTML; SG; an* "thers. /a#h ") these *"#(%$ies b! *i0erent r($es an* is set (p *i0erent$!. The *"#(%ent t!pethe br"wser what r($es t" )"$$"w when *isp$a!ing the *"#(%ent.

In te#hni#a$ ter%s; the *"#(%ent t!pe is #a$$e* the D"#(%ent T!

De#$arati"n; "r DTD )"r sh"rt.

7/26/2019 Webpage Designing With HTML5

6/14

D"#(%ent T!pe De#$arati"n

DCTY=/ HTMLE

HTML 9.62 Stri#t DCTY=/ HTML =UBLIC F1WCDTD HTML9.62/N Fhttp:www.w."rgTRht%$9stri#t.*t*E

HTML 9.62 Transiti"na$ DCTY=/ HTML =UBLIC F1WCDTDHTML 9.62 Transiti"na$/NFhttp:www.w."rgTRht%$9$""se.*t*E

@HTML 2.6 Stri#t DCTY=/ ht%$ =UBLIC F1WCDTD @HTML2.6 Stri#t/N Fhttp:www.w."rgTR-ht%$2DTD-ht%$21stri#t.*t*E

@HTML 2.2 DTD DCTY=/ ht%$ =UBLIC F1WCDTD @HTML

2.2 /N Fhttp:www.w."rgTR-ht%$22DTD-ht%$22.*t*E

HTML8 L

7/26/2019 Webpage Designing With HTML5

7/14

HTML/L/M/NTS The root element

Th"(gh n"t a se#ti"n ") an HTML *"#(%ent; the r""t e$e%ent is what wraps

ar"(n* the entire *"#(%ent; appearing as the 7rst thing a)ter the *"#t!pe

an* the $ast thing in the *"#(%ent.

The r""t e$e%ent is "pene* with:

ht%$E

The r""t e$e%ent is #$"se* with:

ht%$E

The head sectionThe hea* se#ti"n ") a *"#(%ent #"ntains in)"r%ati"n ab"(t the *"#(%ent

itse$).

The hea* se#ti"n is "pene* with:

hea*E

The hea* se#ti"n is #$"se* with:

hea*E

7/26/2019 Webpage Designing With HTML5

8/14

The Title Element

The tit$e e$e%ent is where !"( p$a#e the tit$e ") the entire webpage.

The tit$e e$e%ent "pens with:

tit$eE

The tit$e e$e%ent #$"se* with:

tit$eE

The body section

The b"*! se#ti"n is the heart ") a web page. It?s where !"( p$a#e a$$ the

an* i%ages )"r the page. /ssentia$$! eer!thing that !"( see when !"(

a page +with the e-#epti"n ") the tit$e, is )"(n* within the b"*! se#ti"n.

The b"*! se#ti"n "pens with:

b"*!E

The b"*! se#ti"n #$"ses with:

b"*!E

7/26/2019 Webpage Designing With HTML5

9/14

HTML/-a%p$e

/-a%p$e /-p$aine*

The DOCTYPE*e#$arati"n *e7nes the *"#(%ent t!pe t" be HTML

The te-t between

The te-t between

The te-t between DCTY=ht%$Ehea*Etit$eE=aghea*Eb"*!E

h2EM! (en

)"(n* in the hea* se#ti"n.

HTML /*it

7/26/2019 Webpage Designing With HTML5

12/14

HTML /*it"rs

N"tepa* N"tepa* A*"beDrea%weaer

STe-

7/26/2019 Webpage Designing With HTML5

13/14

A#tiities 2. Hea*ing

5. =aragraph

. B"$*; Ita$i#; Str"ng an* Centere*

9. r*ere* List an* Un"r*ere* List

8. Tab$es

J. Sa%p$e Website

http://var/www/apps/conversion/tmp/scratch_3/activities/heading.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/paragraph.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/bold-italic-strong-centered.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/unordered-list.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/table.htmlhttp://var/www/apps/conversion/tmp/scratch_3/my%20first%20website/index.htmlhttp://var/www/apps/conversion/tmp/scratch_3/my%20first%20website/index.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/table.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/unordered-list.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/bold-italic-strong-centered.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/bold-italic-strong-centered.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/paragraph.htmlhttp://var/www/apps/conversion/tmp/scratch_3/activities/heading.html

7/26/2019 Webpage Designing With HTML5

14/14

/n