Lecture 02 HTML Basics.pptx

8/17/2019 Lecture 02 HTML Basics.pptx

http://slidepdf.com/reader/full/lecture-02-html-basicspptx 1/42

Introduction to HTML



Introduction Markup Languages Editing HTML Common Tags Headers Text Styling Linking Images Formatting Text With Special Characters, Horizontal Rules and More Line Breaks

Outline



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



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



($( )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



Common Tags

+l"ays include t!e <HTML> </HTML> tags

Comments placed inside 

2 

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>

 We ha=e dei"ned thi ite t tea#h

2a%$t the nder , HTML . We ha=e %een $in"

5 HTML 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

 HTML 8 %. &n 3$ ill n a%$t man3 , the "reat ne,eat$re9, HTML 2.:. 

:

<H ALI+( ; #enter> Ha=e 0$n With the &ite! </H>

</BODY>

2 </HTML>



/tyliing text on *eb pages



/tyliing text on *eb pages

Tag Description

 Defines bold text

 Defines emphasized text

 Defines a part of text in italic

 Defines smaller text

 Defines important text

 Defines subscripted text

 Defines superscripted text<ins> Defines inserted text

<del> Defines deleted text

 Defines marked/highlighted text

http://www.w3schools.com/tags/tag_b.asp

http://www.w3schools.com/tags/tag_em.asp

http://www.w3schools.com/tags/tag_i.asp

http://www.w3schools.com/tags/tag_small.asp

http://www.w3schools.com/tags/tag_strong.asp

http://www.w3schools.com/tags/tag_sub.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_mark.asp

http://www.w3schools.com/tags/tag_mark.asp

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_sub.asp

http://www.w3schools.com/tags/tag_strong.asp

http://www.w3schools.com/tags/tag_small.asp

http://www.w3schools.com/tags/tag_i.asp

http://www.w3schools.com/tags/tag_em.asp

http://www.w3schools.com/tags/tag_b.asp



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



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



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



Linking to ot!er *eb pages



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



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$



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



T!e HTML 6base7 )lement

T!e 6base7 tag speciies t!e base %?L9target or allrelati#e %?Ls in a page&



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&



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&



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$



6meta7 Tags 8 )xamples o %se



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# ::::::



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>



<HTML>



2 

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)>

 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>



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



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



%sing images as link anc!ors



Formatting Text *it! 

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



Formatting Text *it! -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>





2 

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 

5 <0O(T 'OLO) ; red &IE ; 0A'E ; Arial> We ha=e

6dei"ned thi ite t tea#h a%$t the nder ,7 HTML . </0O(T>

8

9 <0O(T 'OLO) ; F$rFle &IE ; 0A'E ; Jerdana> We ha=e %een

:$in" HTML 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 HTML 

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>

9

: <H ALI+( ; #enter> Ha=e 0$n With the &ite! </H>

</BODY>

< HTML>



%sing t!e FONT element to ormat text



/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>





2 

5

6 <HEAD>

7 <TITLE> Internet and WWW H t Pr"ram - 'nta#t Pa"e </TITLE>

8 </HEAD> 9

: <BODY>



 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. 

7

8 All in,rmatin n thi ite i <&T)O(+> K#F3 </&T)O(+>

9 Deitel <&T)O(+> KamF </&T)O(+> A#iate? 999. 

:





 2 <DEL> 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 ( Fermiin i needed i, 3$ nl3 need t $e <&T)O(+>

9 Klt K,ra#2 </&T)O(+> , the in,rmatin Freented here. 

:

</BODY>

</HTML>



Inserting special c!aracters into HTML



/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>





2 

5

6 <HEAD>

7 <TITLE> Internet and WWW H t Pr"ram - Hri4ntal

)$le </TITLE> 8 </HEAD> 9

: <BODY>





<H) WIDTH ; 5 &IE ; >

2 <H) WIDTH ; 5 &IE ; >

5 <H) WIDTH ; 5 &IE ; > 6

7 <&T)O(+> &i4e1 </&T)O(+> 2

8 <&T)O(+> Width1 </&T)O(+> 75

9 <H) WIDTH ; 75 &IE ; 2 ALI+( ; le,t>

:

<&T)O(+> &i4e1 </&T)O(+>

<&T)O(+> Width1 </&T)O(+> 5

<H) WIDTH ; 5 &IE ; ALI+( ; ri"ht>

2

5 <&T)O(+> &i4e1 </&T)O(+> 8

6 <&T)O(+> Width1 </&T)O(+> 5:

7 <&T)O(+> ( hade... </&T)O(+>

8 <H) (O&HADE WIDTH ; 5: &IE ; 8 ALI+( ; #enter>

9

: </BODY>

</HTML>



%sing !oriontal rules

Date post:	06-Jul-2018
Category:	Documents
Upload:	lokesh-sharma
View:	216 times
Download:	0 times

Lecture 02 HTML Basics.pptx

Documents