lecture 02 html basics.pptx
Post on 06-Jul-2018
219 Views
Preview:
TRANSCRIPT
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 1/42
Introduction to HTML
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 2/42
Introduction Markup Languages Editing HTML Common Tags Headers Text Styling Linking Images Formatting Text With <FONT> Special Characters, Horizontal Rules and More Line Breaks
Outline
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 3/42
1 Introduction
HTML HyperText Markup Language Not a procedural programming language like C, Fortran, Cobol
or Pascal Markup language
Identiy elements o a page so t!at a bro"ser can render t!at pageon your computer screen
Presentation o a document #s$ structure
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 4/42
Markup Languages
Markup language %sed to ormat text and inormation
HTML
Marked up "it! elements, delineated by tags Tags& key"ords contained in pairs o angle brackets
HTML tags Not case sensiti#e
'ood practice to keep all t!e letters in one caseForgetting to close tags is a syntax error
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 5/42
($( )diting HTML
HTML files or documents *ritten in source-code form using text editor
HTML iles
.htm or .html extensions Name your iles to describe t!eir unctionality File name o your !ome page s!ould be index.html
)rrors in HTML
%sually not atal
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 6/42
Common Tags
+l"ays include t!e <HTML> </HTML> tags
Comments placed inside <!----!> tags
HTML documents HEAD section
Ino about t!e document
Ino in !eader not generally rendered in display "indo"
TITLE element names your *eb page
BODY section
Page content Includes text, images, links, orms, etc$
)lements include backgrounds, link colors and ont aces
P element orms a paragrap!, blank line beore and ater
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 7/42
Common Tags -cont$.
<HTML>
<HEAD> <TITLE> Internet and WWW H t Pr"ram -
Wel#me </TITLE> </HEAD>
<BODY>
<P> Wel#me t O$r We% &ite! </P>
</BODY> </HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 8/42
Headers
Headers /imple orm o text ormatting 0ary text sie based on t!e !eader2s 3le#el4 +ctual sie o text o !eader element is selected by bro"ser Can #ary signiicantly bet"een bro"sers
'E(TE) element Centers material !oriontally Most elements are let ad5usted by deault
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 9/42
6!tml7 6!ead7 6title7Internet and *** Ho" to Program 8 Headers69title7 69!ead7
6body7
6!17Le#el 1 Header69!176!:7Le#el : !eader69!:76!(7Le#el ( !eader69!(76!;7Le#el ; !eader69!;7
6!<7Le#el < !eader69!<76!=7Le#el = !eader69!=7
69body7 69!tml7
Headers
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 10/42
Header elements H1 t!roug! H6
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 11/42
Text /tyling
%nderline style <*> </*>
+lign elements "it! ALI+( attribute ri"ht, le,t or #enter
Close nested tags in t!e re#erse order rom "!ic! t!ey "ereopened
)mp!asis -italics. style <EM> </EM>
/trong -bold. style <&T)O(+> </&T)O(+>
<B> and <I> tags deprecated >#erstep boundary bet"een content and presentation
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 12/42
<HTML>
<!-- 0i". .1 main.html -->
2 <!-- &t3li4in" 3$r text -->
5
6 <HEAD> 7 <TITLE> Internet and WWW H t Pr"ram - Wel#me </TITLE>
8 </HEAD>
9
: <BODY>
<H ALI+( ; #enter><*> Wel#me t O$r We% &ite! </*></H>
<P> We ha=e dei"ned thi ite t tea#h
2a%$t the nder , <EM> HTML </EM> . We ha=e %een $in"
5 <EM> HTML </EM> in#e <*> =erin <&T)O(+> .: </&T)O(+></*> ?
6and e en@3 the ,eat$re that ha=e %een added re#entl3.
It7eem nl3 a hrt time a" that e read $r ,irt
<EM> HTML </EM> 8 %. &n 3$ ill n a%$t man3 , the "reat ne,eat$re9, HTML 2.:. </P>
:
<H ALI+( ; #enter> Ha=e 0$n With the &ite! </H>
</BODY>
2 </HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 13/42
/tyliing text on *eb pages
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 14/42
/tyliing text on *eb pages
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in italic
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 15/42
Linking
Links inserted using t!e A -anc!or. element ?e@uires H)E0 attribute
H)E0 speciies t!e %?L you "ould like to link to <A H)E0 ; addressC> </A>
Can link to email addresses, using
<A H)E0 ; mailt1 emailaddressC> </A> Note @uotation mark placement
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 16/42
Linking
+ !yperlink -or link. is a "ord, group o "ords, orimage t!at you can click on to 5ump to anot!erdocument$
*!en you mo#e t!e cursor o#er a link in a *eb page,t!e arro" "ill turn into a little !and$
Ay deault, links "ill appear as ollo"s in all bro"sers&
+n un#isited link is underlined and blue + #isited link is underlined and purple +n acti#e link is underlined and red
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 17/42
6!tml7 6!ead7 6title7Internet and *** Ho" to Program 8 Links69title7
69!ead7 6body7 6!17Here are my a#orite sites69!17 6p76strong7Click a name to go to t!at page$69strong769p7
6B88 Create our text !yperlinks 887
6p76a !re D!ttp&99"""$deitel$comD7Eeitel69a769p7
6p76a !re D!ttp&99"""$pren!all$comD7Prentice Hall69a769p7
6p76a !re D!ttp&99"""$ya!oo$comD7a!ooB69a769p7
6p76a !re D!ttp&99"""$usatoday$comD7%/+ Today69a769p7
69body7 69!tml7
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 18/42
Linking to ot!er *eb pages
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 19/42
6!tml7 6!ead7
6title7Hyper Linking 69title7 69!ead7
6body7
6p7My email address is 6a !re Dmailto&lokes!$s!armaG5aipur$manipal$eduD7
lokes!$s!armaG5aipur$manipal$edu
69a7 $ Click t!e address and your bro"ser "illopen an e8mail message and address it to me$
69p7 69body7 69!tml7
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 20/42
T!e HTML 6!ead7 )lement
T!e 6!ead7 element is a container or all t!e !eadelements$ )lements inside 6!ead7 can includescripts, instruct t!e bro"ser "!ere to ind styles!eets, pro#ide meta inormation, and more$
T!e ollo"ing tags can be added to t!e !ead section&6title7, 6style7, 6meta7, 6link7, 6script7,
6noscript7, and 6base7$
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 21/42
T!e HTML 6title7 )lement
T!e 6title7 tag deines t!e title o t!e document$
T!e 6title7 element is re@uired in allHTML9HTML documents$
T!e 6title7 element& deines a title in t!e bro"ser toolbar pro#ides a title or t!e page "!en it is added to a#ourites displays a title or t!e page in searc!8engine results
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 22/42
T!e HTML 6base7 )lement
T!e 6base7 tag speciies t!e base %?L9target or allrelati#e %?Ls in a page&
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 23/42
T!e HTML 6link7 )lement
T!e 6link7 tag deines t!e relations!ip bet"een adocument and an external resource$
T!e 6link7 tag is most used to link to style s!eets&
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 24/42
T!e HTML 6style7 )lement
T!e 6style7 tag is used to deine style inormationor an HTML document$
Inside t!e 6style7 element you speciy !o" HTMLelements s!ould render in a bro"ser&
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 25/42
T!e HTML 6meta7 )lement
Metadata is data -inormation. about data$
T!e 6meta7 tag pro#ides metadata about t!e HTML document$Metadata "ill not be displayed on t!e page, but "ill be mac!ine
parsable$
Meta elements are typically used to speciy page description,key"ords, aut!or o t!e document, last modiied, and ot!ermetadata$
T!e metadata can be used by bro"sers -!o" to display content orreload page., searc! engines -key"ords., or ot!er "eb ser#ices$
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 26/42
6meta7 Tags 8 )xamples o %se
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 27/42
Images
Images as anc!ors
Aackground color Preset colors - hite, %la#, %l$e, red , etc$. Hexadecimal code
First t"o c!aracters or amount o red
/econd t"o c!aracters or amount o green
Last t"o c!aracters or amount o blue
:: is t!e "eakest a color can get
00 is t!e strongest a color can get )x$ %la# ::::::
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 28/42
Images
Image background <BODY BA'+)O*(D ; background C> Image does not need to be large as bro"ser tiles image across and do"n t!e
screen
Pixel
/tands or 3picture element4 )ac! pixel represents one addressable dot o color on t!e screen
Insert image into page %se <IM+> tag
+ttributes& &)' 3location4 HEI+HT -in pixels. WIDTH -in pixels. BO)DE) -black by deault. ALT -text description or bro"sers t!at !a#e images turned o or cannot #ie"
images.
<HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 29/42
<HTML>
<!-- 0i". .61 Fi#t$re.html -->
2 <!-- Addin" ima"e ith HTML -->
5
6 <HEAD>
7 <TITLE> Internet and WWW H t Pr"ram - Wel#me </TITLE>
8 </HEAD>
9
: <BODY BA'+)O*(D ; %a#"r$nd."i,>
<'E(TE)>
<!-- 0rmat ,r enterin" ima"e1 <IM+ &)' ; name> --> 2 <IM+ &)' ; deitel."i, BO)DE) ; HEI+HT ; 22
5 WIDTH ; :: ALT ; Har=e3 and Pa$l Deitel>
6 </'E(TE)>
7
8 </BODY>
9 </HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 30/42
6!tml7 6!ead7 6title7Internet and *** Ho" to Program 8 Na#igation Aar 69title7
69!ead7
6body7
6p7 6a !re Dlinks$!tmlD76img src Dbuttons9links$5pgD "idt! D=<D
!eig!t D<D alt DLinks PageD 97 69a76br 97
6a !re Dlist$!tmlD76img src Dbuttons9list$5pgD "idt! D=<D!eig!t D<D alt DList )xample PageD 97
69a76br 97
6a !re Dcontact$!tmlD76img src Dbuttons9contact$5pgD "idt! D=<D!eig!t D<D alt DContact PageD 97
69a76br 97
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 31/42
6a !re D!eader$!tmlD7 6img src Dbuttons9!eader$5pgD "idt! D=<D!eig!t D<D alt DHeader PageD 97
69a76br 97
6a !re Dtable$!tmlD76img src Dbuttons9table$5pgD "idt! D=<D!eig!t D<D alt DTable PageD 97
69a76br 97
6a !re Dorm$!tmlD76img src Dbuttons9orm$5pgD "idt! D=<D!eig!t D<D alt DFeedback FormD 97
69a76br 97 69p7
69body7 69!tml7
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 32/42
%sing images as link anc!ors
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 33/42
Formatting Text *it! <FONT>
0O(T element +dd color and ormatting to text 0O(T attributes&
'OLO)
Preset or !ex color code 0alue in @uotation marks Note& you can set ont color or "!ole document using TEGT
attribute in BODY element
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 34/42
Formatting Text *it! <FONT> -II.
&IE To make text larger, set &IE ; x C To make text smaller, set &IE ; -x C x is t!e number o ont point sies
0A'E Font o t!e text you are ormatting Ae careul to use common onts like Times, +rial, Courier and
Hel#etica
Aro"ser "ill display deault i unable to display speciied ont
)xample <0O(T 'OLO) ; redC &IE ; C 0A'E ; ArialC> </0O(T>
<HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 35/42
<!-- 0i". .81 main.html -->
2 <!-- 0rmattin" text i4e and #lr -->
5
6 <HEAD>
7 <TITLE> Internet and WWW H t Pr"ram - Wel#me </TITLE>
8 </HEAD> 9
: <BODY>
<H ALI+( ; #enter><*> Wel#me t O$r We% &ite! </*></H>
2 <!-- 0nt ta" #han"e the ,rmattin" , text the3 en#le -->
5 <P><0O(T 'OLO) ; red &IE ; 0A'E ; Arial> We ha=e
6dei"ned thi ite t tea#h a%$t the nder ,7 <EM> HTML </EM> . </0O(T>
8
9 <0O(T 'OLO) ; F$rFle &IE ; 0A'E ; Jerdana> We ha=e %een
:$in" <EM> HTML </EM> in#e <*> =erin <&T)O(+> .: </&T)O(+></*> ?
and e en@3 the ,eat$re that ha=e %een added re#entl3. </0O(T>
<0O(T 'OLO) ; %l$e &IE ; 0A'E ; Hel=eti#a> It
2eem nl3 a hrt time a" that e read $r ,irt <EM> HTML </EM>
5 %. </0O(T>
6
7 <0O(T 'OLO) ; "reen &IE ; 0A'E ; Time> &n 3$ ill
8n a%$t man3 , the "reat ne ,eat$re , HTML 2.:. </0O(T></P>
9
: <H ALI+( ; #enter> Ha=e 0$n With the &ite! </H></P>
</BODY>
< HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 36/42
%sing t!e FONT element to ormat text
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 37/42
/pecial C!aracters, Horiontal ?ules and More Line Areaks
/pecial c!aracters Inserted in code orm Format al"ays Kcode
)x$ KamF
Insert an ampersand Codes oten abbre#iated orms o t!e c!aracter Codes can be in !ex orm
)x$ K8 to insert an ampersand
/triket!roug! "it! DEL element/uperscript& &*P element
/ubscript& &*B element
<HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 38/42
<!-- 0i". .91 #nta#t.html -->
2 <!-- Inertin" Fe#ial #hara#ter -->
5
6 <HEAD>
7 <TITLE> Internet and WWW H t Pr"ram - 'nta#t Pa"e </TITLE>
8 </HEAD> 9
: <BODY>
<!-- &Fe#ial #hara#ter are entered $in" the ,rm K#de -->
<P> M3 email addre i <A H)E0 ; mailt1deiteldeitel.#m>
2 deiteldeitel.#m </A> . 'li# n the addre and 3$r %rer
5 ill a$tmati#all3 Fen an email mea"e and addre it t m3
6 addre. </P>
7
8 <P> All in,rmatin n thi ite i <&T)O(+> K#F3 </&T)O(+>
9 Deitel <&T)O(+> KamF </&T)O(+> A#iate? 999. </P>
:
<!-- Text #an %e tr$# $t ith a et , <DEL>...</DEL> -->
<!-- ta"? it #an %e et in $%#riFt ith <&*B>...</&*B>? -->
<!-- and it #an %e et int $Fer#riFt ith <&*P...</&*P> --> 2 <DEL><P> Y$ ma3 #F3 $F t .2 x : <&*P> </&*P> #hara#ter
5 rth , in,rmatin ,rm thi ite. </DEL><B)> N$t mae $re
6 3$ <&*B> d nt #F3 mre in,rmatin </&*B> than i alla%le.
7
8 <P> ( Fermiin i needed i, 3$ nl3 need t $e <&T)O(+>
9 Klt K,ra#2 </&T)O(+> , the in,rmatin Freented here. </P>
:
</BODY>
</HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 39/42
Inserting special c!aracters into HTML
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 40/42
/pecial C!aracters, Horiontal ?ules and More Line Areaks -II.
Horiontal rule <H)> tag Inserts a line break directly belo" it H) attributes&
WIDTH
+d5usts t!e "idt! o t!e rule )it!er a number -in pixels. or a percentage
&IE Eetermines t!e !eig!t o t!e !oriontal rule In pixels
ALI+( )it!er le,t, ri"ht or #enter
(O&HADE )liminates deault s!ading eect and displays !oriontal rule as a solid8
color bar
<HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 41/42
<!-- 0i". .:1 header.html -->
2 <!-- Line %rea and hri4ntal r$le -->
5
6 <HEAD>
7 <TITLE> Internet and WWW H t Pr"ram - Hri4ntal
)$le </TITLE> 8 </HEAD> 9
: <BODY>
<!-- Hri4ntal r$le a inerted $in" the ,rmat1 -->
<!-- <H) WIDTH ; .. &IE ; .. ALI+( ; ..> -->
<H) WIDTH ; 5 &IE ; >
2 <H) WIDTH ; 5 &IE ; >
5 <H) WIDTH ; 5 &IE ; > 6
7 <P ALI+( ; le,t><&T)O(+> &i4e1 </&T)O(+> 2
8 <&T)O(+> Width1 </&T)O(+> 75
9 <H) WIDTH ; 75 &IE ; 2 ALI+( ; le,t>
:
<P ALI+( ; ri"ht><&T)O(+> &i4e1 </&T)O(+>
<&T)O(+> Width1 </&T)O(+> 5
<H) WIDTH ; 5 &IE ; ALI+( ; ri"ht>
2
5 <P ALI+( ; #enter><&T)O(+> &i4e1 </&T)O(+> 8
6 <&T)O(+> Width1 </&T)O(+> 5:
7 <&T)O(+><EM> ( hade... </EM></&T)O(+>
8 <H) (O&HADE WIDTH ; 5: &IE ; 8 ALI+( ; #enter>
9
: </BODY>
</HTML>
8/17/2019 Lecture 02 HTML Basics.pptx
http://slidepdf.com/reader/full/lecture-02-html-basicspptx 42/42
%sing !oriontal rules
top related