HTML Fundermentals
-
Upload
dana-popescu -
Category
Documents
-
view
217 -
download
0
Transcript of HTML Fundermentals
-
8/9/2019 HTML Fundermentals
1/27
HTML FUNDAMENTALS
SAMPSON
1
-
8/9/2019 HTML Fundermentals
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
(
-
8/9/2019 HTML Fundermentals
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
/
-
8/9/2019 HTML Fundermentals
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$
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
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/9/2019 HTML Fundermentals
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!
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
11/27
TDO3T=PE '"&l,
+'"&l,
+bod#,
+'1,M# Firs" Heading+-'1,
+,M# firs" aragra'!+-,
+-bod#,
+-'"&l,
11
-
8/9/2019 HTML Fundermentals
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(
-
8/9/2019 HTML Fundermentals
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/
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
15/27
-
8/9/2019 HTML Fundermentals
16/27
H
-
8/9/2019 HTML Fundermentals
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,
-
8/9/2019 HTML Fundermentals
18/27
2&ages )(*
Main a""ribu"e9 S
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
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,
((
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
24/27
+'"&l,
+bod#,
+>:: rin" na&e "o "'e screen ::,
o'n
+-bod#, +-'"&l,
(
-
8/9/2019 HTML Fundermentals
25/27
Prin" "'e nu&bers 1 : 1I. eac' nu&ber
being a differen" color
(J
-
8/9/2019 HTML Fundermentals
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
-
8/9/2019 HTML Fundermentals
27/27
EE