HTML Fundermentals

8/9/2019 HTML Fundermentals

1/27

HTML FUNDAMENTALS

SAMPSON

1


2/27

What is HTML?

HTML is a language for describing web ages!

HTML s"ands for H#er Te$" Mar%u Language

HTML is a markup language

A &ar%u language is a se" of &ar%utags

T'e "ags describedocu&en" con"en"

HTML docu&en"s con"ainHTMLtagsand lain text

HTML docu&en"s are also calledweb pages

HTML Tags

(


3/27

HTML &ar%u "ags are usuall# called HTML "ags

HTML "ags are %e#words )"ag na&es* surrounded b# angle

brackets li%e +'"&l,

HTML "ags nor&all# come in pairsli%e +b, and +-b,

T'e firs" "ag in a air is "'e start tag,"'e second "ag is"'e end tag

T'e end "ag is wri""en li%e "'e s"ar" "ag. wi"' a forward

slashbefore "'e "ag na&e

S"ar" and end "ags are also called opening tagsand closingtags

/


4/27

Basics of HTML

2 ways to iew a webpage

0Web iew is 'ow "'e browser in"erru"s #our code )'ow #ounor&all# iew web ages*! T'e urose of a web browser )li%e

2n"erne" E$lorer. Firefo$. 3'ro&e. e"c* is "o read HTML

docu&en"s and disla# "'e& as web ages!

0!ource code iew is "'e wri""en "e$" "'a" is crea"ed b# "'e webdesigner! T'e source code for an# webage can be iewed !

HTML tags are written between angle brackets

"# $% and &os" "ags will usuall# co&e in airs li%e

#i$ and #&i$


5/27

Basics of HTML cont.

The first tag in a pair is called the openingtag )+i, * and the second is called the closing

tag )+-i, 44no"e "'e 5-6*

The browser does not display the HTMLtags,bu" uses "'e "ags "o in"erre" "'e con"en" of "'e

age!

Tags order matters' 2f #ou oen "'e "ags one wa#"'en i" &us" reerse w'en closed!

(xample) +b,+i,Hello 7orld+-i,+-b,

Tags are not case sensitie


6/27

Basics of HTML cont.

*ll HTML documents start with #HTML$

and end with #&HTML$

(ery HTML webpage has 2 sections w'ic'are deno"ed b# HTML "ags

0 +Head,

0 +8od#,

The Head section will always open + close

before the ody section opens


7/27

Basics of HTML HeadSection

Head section

0T'is sec"ion alwa#s begins wi"' +'ead, and

ends wi"' +-'ead,

0T'is sec"ion will no" be isible in "'e bod# of

"'e web browser

0T'e na&e of "'e webage "'a" aears in "'e

"i"le bar is laced in "'is sec"ion

E$a&le9 +"i"le,M# Firs" Page+-"i"le,


8/27

Basics of HTML BodySection

ody !ection

02nfor&a"ion disla#ed in "'is sec"ion will be disla#ed in

"'e bod# of "'e web browser

0T'e closing bod# "ag will alwa#s roceed "'e closing

HTML "ag!


9/27

Basics of HTML Saving

How to sae as HTML

0File :, Sae As :, )"'e na&e #ou wan" "'e file "o

be*!'"&l

07'en #ou sae as -html "'is "ells "'e co&u"er "'a""'is file s'ould be opened by a browser

02f using a si&le "e$" edi"or. "#ing !'"&l &anuall# is

re;uired

0(xample)M#Firs"Page!'"&l

M#Firs"Page!doc

: 7ill oen as a webage

: 7ill no" oen as a webage


10/27

Basics of HTML

REVIEW#html$

#head$

+"i"le,7ebage "i"le

+-"i"le,

#&head$

#body$M# firs" webage

#&body$

#&html$

Starts every HTMLpage

Info in thissection will notappear in thebody of the webbrowser

Info in this sectionwillappear in thebody of the webbrowser

Ends every HTML

page


11/27

TDO3T=PE '"&l,

+'"&l,

+bod#,

+'1,M# Firs" Heading+-'1,

+,M# firs" aragra'!+-,

+-bod#,

+-'"&l,

11


12/27

E$a&le E$lained

T'e DO3T=PE declara"ion defines "'e docu&en" "#e

T'e "e$" be"ween +'"&l, and +-'"&l, describes "'e web

age

T'e "e$" be"ween +bod#, and +-bod#, is "'e isible age

con"en"

T'e "e$" be"ween +'1, and +-'1, is disla#ed as a

'eading

T'e "e$" be"ween +, and +-, is disla#ed as a aragra'

1(


13/27

Flas' 8ac% 7'a" is HTML?

HTML is a language for describing web ages!

HTML s"ands for H#er Te$" Mar%u Language HTML is a markup language

A &ar%u language is a se" of &ar%utags

T'e "ags describedocu&en" con"en"

HTML docu&en"s con"ainHTMLtagsand lain text

HTML docu&en"s are also calledweb pages

HTML Tags

HTML &ar%u "ags are usuall# called HTML "ags

HTML "ags are %e#words )"ag na&es* surrounded b# angle brackets li%e

+'"&l,

HTML "ags nor&all# come in pairsli%e +b, and +-b,

T'e firs" "ag in a air is "'e start tag,"'e second "ag is "'e end tag

T'e end "ag is wri""en li%e "'e s"ar" "ag. wi"' a forward slashbefore "'e "ag

na&e

S"ar" and end "ags are also called opening tagsand closing tags1/


14/27

7eb 8rowsers T'e urose of a web browser )suc' as @oogle 3'ro&e.

2n"erne" E$lorer. Firefo$. Safari* is "o read HTMLdocu&en"s and disla# "'e& as web ages!

T'e browser does no" disla# "'e HTML "ags. bu" uses "'e

"ags "o de"er&ine 'ow "'e con"en" of "'e HTML age is "o

be resen"ed-disla#ed "o "'e user9

1


15/27


16/27

H


17/27

2&ages

Used in ages for arious reasons

03larifica"ion. naiga"ion. eri'eral "raining

2&ages no" inage referencedb# age0@ra'ics are seara"e. re;uired files

0Usuall# @2Fs or P@s. so&e"i&es o"'ers

03an be an#w'ere in docu&en" bod#9 in aragra's.

'eadings. lis"s. anc'ors. e"c!

Place i&age wi"' +i&g, "ag

0Li%e +a,. +i&g,


18/27

2&ages )(*

Main a""ribu"e9 S


19/27

HTML ersions

Since "'e earl# da#s of "'e web. "'ere 'ae been &an#

ersions of HTML9

ersion =ear

HTML 1GG1

HTML 1GG/ HTML (!I 1GGJ

HTML /!( 1GGK

HTML !I1 1GGG

HTML 1!I (III

HTMLJ (I1(

HTMLJ (I1/

1G


20/27

HTML E$a&les

+>DO3T=PE '"&l,

+'"&l,

+bod# s"#lebac%ground:color9#ellow,+'( s"#lebac%ground:color9red,T'is is a 'eading+-'(,

+ s"#lebac%ground:color9green,T'is is a

aragra'!+-,

+-bod#,

+-'"&l,

(I


21/27

+>DO3T=PE '"&l,

+'"&l,

+bod#,+'1 s"#lefon":fa&il#9erdana,A 'eading+-'1,

+ s"#lefon":fa&il#9arialcolor9redfon":sie9(I$,A

aragra'!+-,

+-bod#,

+-'"&l,

(1


22/27

+>DO3T=PE '"&l,

+'"&l,

+bod#,+'1 s"#le"e$":align9cen"er,3en"er:aligned 'eading+-'1,

+,T'is is a aragra'!+-,

+-bod#,

+-'"&l,

((


23/27

E$ercise 3rea"e a webage "'a" rin"s #our na&e "o "'e screen! !ee solutionQ

3rea"e a webage "'a" rin"s "'e nu&bers 1 : 1I "o "'e screen! !eesolutionQ

3rea"e a webage and se" i"s "i"le "o T'is is a webage! !ee

solutionQ

3rea"e a webage "'a" rin"s "'e &essage 7'en was "'is webage

crea"ed? 3'ec% ageRs "i"le for "'e answer! "o "'e screen. and se" "'e

"i"le of "'e age "o "'e curren" da"e!!ee solutionQ

3rea"e a webage "'a" rin"s an# "e$" of #our c'oosing "o "'e screen.

do no" include a 'ead sec"ion in "'e code! !ee solutionQ


24/27

+'"&l,

+bod#,

+>:: rin" na&e "o "'e screen ::,

o'n

+-bod#, +-'"&l,

(


25/27

Prin" "'e nu&bers 1 : 1I. eac' nu&ber

being a differen" color

(J


26/27

+'"&l,

+bod#,

+fon" colorgreen,1+-fon",

+fon" colorblue,(+-fon",

+fon" colorgra#,/+-fon",

+fon" colorIIII,+-fon",

+fon" colorIII8,J+-fon",

+fon" colorbrown,C+-fon",

+fon" colordcdcdc,K+-fon",

+fon" colorIIIII,+-fon",

+fon" colorurle,G+-fon",

+fon" colorCe(/,1I+-fon",

+-bod#,

+-'"&l,

(C

EE


27/27

EE

HTML Fundermentals

Documents