7/2/2012

WhatisHTML? Gettingyoustarted

HTML standsfor.

Hyper Text Markup Language

7/2/2012

HTMLspecification
TheofficialtechnicalrulesofHTML

Definitions Usageparametersofcompletetagset Tagattributeset Characterreferenceentities

Evolvedfromversion1.02.03.2 4.04.1

WhatDoWebBrowsersDo?
InterpretHTMLdocuments DisplayHTMLdocuments

7/2/2012

WhydosomeWebpageslook differentindifferentbrowser?
Publishedextensions(unofficialadditions)

areproducedbyotherspartiesotherthanthe W3C
Becausetheextensionsdeviateawayfromthe

officialHTMLstandardtheycreatealackof conformityandareinterpretedbydifferent browsersdifferently.

HTMLs4PrimaryConcepts
Publishinginformationviahypertextand

hypermedia
Ascriptinglanguage(HTMLfamilytag) Asoftwareapplicationtolocate,download,

interpretanddisplaydataviatheWWW.
Awebspecificdatatransferprotocol(HTTP:

HyperTextTransferProtocol)

7/2/2012

WhatisHypertext?
A way documents, files and multimedia data are organized, navigated and referenced through the Internet.
Tell the browser what to do, and what props to use. A series of tags that are integrated into a text document.

Whyuseit?
Tomakealotofinformationavailableinone

place
Makeinformationeasytolocate Allowsmultiplywaystonavigatetowanted

informationviahyperlinks.

7/2/2012

WhatisaHyperlink?
Avisiblenavigationalanchorthatpointsto

(linksto)anothersourceofinformation (document,multimediaobject)
NOLimittoamountofhyperlinksinagiven place Hyperlinkcanonlylinktoonedocumentor multimediafile

NonlinearInformation???
Youdonthavetoreadfromstarttofinishfor

theinformationtomakesense.
Youcanreadtheinformationyoudesireand

clicklinkstobringyoutodifferentlocationsto learnaboutsomethingelse.
Nonlinear

Nonhierarchical borderless: NOpredeterminedorder

7/2/2012

WhatisHypermedia?
Hypertext+Multimediafiles(audio,videoand

animation)
Linkstostreameddata

HTMLisaScriptinglanguage?
Madeupoftagsthattellthebrowserwhat

informationtodisplay(content)andhowto displayit(format).
HTMLdocument=Webpage

Includescontent(wordsorpicturesonpage) Includesinstructionsonhowtodisplayinfo.

7/2/2012

Scriptinglanguagevs. Programming language

Programminglanguages(C++,Pascal,orJava)

haveapplicationfilesandassociateddatafiles
ScriptingLanguage(a.k.a.markuplanguage,

HTML)haveinstructions(HTMLtags)anddata (nontagHTMLdocumentcontent)are containedwithinasinglefile.

HTTPHypertextTransfer Protocol
ItprovidesastandardforWebbrowsersand

serverstocommunicate. TransferProtocolisamethodbywhichinfois transferredbetweenaservercomputeranda clientcomputeracrosstheinternet. Thetransferprotocolyouspecifyinthelinkin anHTMLdocumentdeterminesthetypeof servertowhichyouarereferring

7/2/2012

MajorTransferProtocols
Thetransferprotocolyouspecifyinthelink inanHTMLdocumentdeterminesthetype ofservertowhichyouarereferring
Transfer Protocol FTP HTTP MailTo News Server Type URL Syntax FTP Web E-mail Newsgroup ftp://ftp.domain.com http://www.domain.com mailto: username@domain.com News://news.domain.com nntp://news.domain.com

WhatsanHTMLDocument?

Filesarchived(saved)onWebservers MustbeASCIIfileformat(a.k.a.plaintextorDOS) Maybeanybytecountsize Mayassumeeitherportrait,landscape,acombinationof both,orothernontraditionallayoutschemes; Mayincludetwochiefelements: 1.HTMLscript(tags,tagattributesandcharacter entities) 2.nonHTMLcontent(text,images,ormultimedia)

7/2/2012

HowtoCreateHTML Document
Useanystandardtexteditor,wordprocessor

orHTMLeditor(MSFrontPage)
***MUSTsaveasASCIItext(plaintextorDOS

text)

StructureofHTMLDocument
HTMLdocumentcontains2sections

HeadSection BodySection

7/2/2012

HeadSection
Providesbrowserswithspecificlogicaldata

relatedtotheWebpagesuchas:
Documenttitle
InformationinHeadsectiondoesNOTappear

onWebpage.

BodySection
Containsalltheinfo.Thatisdisplayedinthe

browser. Browserdoesnotrecognizeanymorethana singlespacebetweencontentwords. Browserwillignorethefollowing:

Linebreaks Paragraphbreaks Multiplenonbreakinghorizontalspaces

10

7/2/2012

HTMLBasics
HTML,Text,Images,Tables,Forms

TableofContents
1.

IntroductiontoHTML
HowtheWebWorks? WhatisaWebPage? MyFirstHTMLPage BasicTags:Hyperlinks,Images,Formatting HeadingsandParagraphs

2.

HTMLinDetails
The<!DOCTYPE>Declaration The<head>Section:Title,Meta,Script,Style
22

11

7/2/2012

TableofContents(2)
The<body>Section TextStylingandFormattingTags Hyperlinks:<a> HyperlinksandSections Images:<img> Lists:<ol>,<ul>and<dl> HTMLSpecialCharacters
3.

The<div>and<span>elements
23

HowtheWebWorks?
WWWuseclassicalclient/serverarchitecture

HTTPistextbasedrequestresponseprotocol
HTTP
Pagerequest HTTP Serverresponse

Clientrunninga WebBrowser

ServerrunningWeb ServerSoftware (IIS,Apache,etc.)

24

12

7/2/2012

WhatisaWebPage?
Webpages aretextfilescontainingHTML HTML HyperTextMarkupLanguage

Anotationfordescribing
documentstructure (semanticmarkup) formatting (presentationmarkup)

Looks(looked?)like:
AMicrosoftWorddocument
Themarkuptagsprovideinformationabout

thepagecontentstructure
25

CreatingHTMLPages
AnHTMLfilemusthavean.htm or.html file

extension
HTMLfilescanbecreatedwithtexteditors:

NotePad,NotePad++,PSPad
OrHTMLeditors(WYSIWYGEditors):

MicrosoftFrontPage MacromediaDreamweaver NetscapeComposer MicrosoftWord

26

13

7/2/2012

HTMLBasics
Text,Images,Tables,Forms

HTMLStructure

HTMLiscomprisedofelementsandtags
Beginswith<html> andendswith</html> WhenwritingXHTML,mustdefineanamespace
<htmlxmlns="http://www.w3.org/1999/xhtml">

Elements(tags)arenestedoneinsideanother:
<html><head></head><body></body></html>

Tagshaveattributes:
<imgsrc="logo.jpg"alt="logo"/>

HTMLdescribesstructureusingtwomainsections: <head> and<body>

28

14

7/2/2012

HTMLCodeFormatting

TheHTMLsourcecodeshouldbeformattedto increasereadabilityandfacilitatedebugging.
Everyblockelementshouldstartonanewline. Everynested(block)elementshouldbeindented. Browsersignoremultiplewhitespacesinthepage source,soformattingisharmless.

Forperformancereasons,formattingcanbe

sacrificed.

29

FirstHTMLPage
test.html
<!DOCTYPEHTML> <html> <head> <title>MyFirstHTMLPage</title> </head> <body> <p>Thisissometext...</p> </body> </html>

30

15

7/2/2012

FirstHTMLPage:Tags
<!DOCTYPEHTML> Openingtag <html> <head> <title>MyFirstHTMLPage</title> </head> Closingtag <body> <p>Thisissometext...</p> </body> </html>

AnHTMLelementconsistsofanopeningtag,aclosingtag andthecontentinside.
31

FirstHTMLPage:Header
<!DOCTYPEHTML> <html> <head> <title>MyFirstHTMLPage</title> </head> <body> <p>Thisissometext...</p> </body> </html>

HTMLheader

32

16

7/2/2012

FirstHTMLPage:Body
<!DOCTYPEHTML> <html> <head> <title>MyFirstHTMLPage</title> </head> <body> <p>Thisissometext...</p> </body> </html>

HTMLbody

33

SomeHTMLTags

17

7/2/2012

SomeSimpleTags
HyperlinkTags

<ahref="http://www.telerik.com/" title="Telerik">LinktoTelerikWebsite</a>
ImageTags

<imgsrc="logo.gif"alt="logo"/>
Textformattingtags

Thistextis<em>emphasized.</em> <br/>newline<br/> Thisoneis<strong>moreemphasized.</strong>

35

SomeSimpleTags Example
sometags.html
<!DOCTYPEHTML>

<html>
<head> <title>SimpleTagsDemo</title>

</head> <body> <ahref="http://www.telerik.com/"title= "Teleriksite">Thisisalink.</a> <br/> <imgsrc="logo.gif"alt="logo"/> <br/> <strong>Bold</strong>and<em>italic</em>text. </body> </html>
36

18

7/2/2012

SomeSimpleTags Example(2)
sometags.html
<!DOCTYPEHTML>

<html>
<head> <title>SimpleTagsDemo</title>

</head> <body> <ahref="http://www.telerik.com/"title= "Teleriksite">Thisisalink.</a> <br/> <imgsrc="logo.gif"alt="logo"/> <br/> <strong>Bold</strong>and<em>italic</em>text. </body> </html>

37

TagsAttributes
Tagscanhaveattributes

Attributesspecifypropertiesandbehavior Example:
Attributealt withvalue"logo"
<imgsrc="logo.gif"alt="logo"/>

Fewattributescanapplytoeveryelement:
id,style,class,title Theid isuniqueinthedocument Contentoftitle attributeisdisplayedashint whentheelementishoveredwiththemouse Someelementshaveobligatoryattributes
38

19

7/2/2012

SomeSimpleTags

39

HeadingsandParagraphs

20

7/2/2012

HeadingsandParagraphs
HeadingTags(h1 h6)

<h1>Heading1</h1> <h2>Subheading2</h2> <h3>Subheading3</h3>

ParagraphTags

<p>Thisismyfirstparagraph</p> <p>Thisismysecondparagraph</p>
Sections:div andspan

<divstyle="background:skyblue;"> Thisisadiv</div>
41

headings.html

HeadingsandParagraphs Example

<!DOCTYPEHTML> <html> <head><title>Headingsandparagraphs</title></head> <body> <h1>Heading1</h1> <h2>Subheading2</h2> <h3>Subheading3</h3> <p>Thisismyfirstparagraph</p> <p>Thisismysecondparagraph</p> <divstyle="background:skyblue"> Thisisadiv</div> </body> </html>
42

21

7/2/2012

headings.html

HeadingsandParagraphs Example(2)

<!DOCTYPEHTML> <html> <head><title>Headingsandparagraphs</title></head> <body> <h1>Heading1</h1> <h2>Subheading2</h2> <h3>Subheading3</h3> <p>Thisismyfirstparagraph</p> <p>Thisismysecondparagraph</p> <divstyle="background:skyblue"> Thisisadiv</div> </body> </html>
43

IntroductiontoHTML
HTMLDocumentStructureinDepth

22

7/2/2012

Preface
Itisimportanttohavethecorrectvisionand

attitudetowardsHTML
HTMLisonlyaboutstructure,notappearance BrowserstolerateinvalidHTMLcodeandparse errors youshouldnot.

45

The<!DOCTYPE> Declaration

HTMLdocumentsmuststartwithadocument typedefinition(DTD)
Ittellswebbrowserswhattypeistheservedcode Possibleversions:HTML4.01,XHTML1.0 (TransitionalorStrict),XHTML1.1,HTML5

Example:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Seehttp://w3.org/QA/2002/04/validdtdlist.html foralist ofpossibledoctypes

46

23

7/2/2012

HTMLvs.XHTML
XHTMLismorestrictthanHTML

Tagsandattributenamesmustbeinlowercase Alltagsmustbeclosed(<br/>,<img/>)while HTMLallows<br> and<img> andimplies missingclosingtags(<p>par1<p>par2) XHTMLallowsonlyoneroot<html> element (HTMLallowsmorethanone)

47

XHTMLvs.HTML(2)
Manyelementattributesaredeprecatedin

XHTML,mostaremovedtoCSS
Attributeminimizationisforbidden,e.g.

<inputtype="checkbox"checked> <inputtype="checkbox"checked="checked"/>
Note:WebbrowsersloadXHTMLfasterthan

HTMLandvalidcodefasterthaninvalid!
48

24

7/2/2012

The<head> Section
Containsinformationthatdoesntshow

directlyontheviewablepage Startsafterthe<!doctype> declaration Beginswith<head> andendswith</head> Containsmandatorysingle<title> tag Cancontainsomeothertags,e.g.

<meta> <script> <style> <! comments>
49

<head>Section:<title>tag

Titleshouldbeplacedbetween<head> and </head> tags

<title>TelerikAcademy WinterSeason2009/2010 </title>

Usedtospecifyatitleinthewindowtitlebar Searchenginesandpeoplerelyontitles
50

25

7/2/2012

<head>Section:<meta>
Metatagsadditionallydescribethecontent

containedwithinthepage
<metaname="description"content="HTML tutorial"/> <metaname="keywords"content="html,web design,styles"/> <metaname="author"content="ChrisBrewer"/> <metahttpequiv="refresh"content="5; url=http://www.telerik.com"/>

51

UsingScripts

26

7/2/2012

<head>Section:<script>
The<script> elementisusedtoembed

scriptsintoanHTMLdocument
Scriptareexecutedintheclient'sWebbrowser Scriptscanliveinthe<head> andinthe<body> sections
Supportedclientsidescriptinglanguages:

JavaScript(itisnotJava!) VBScript JScript

53

The<script>Tag Example
<!DOCTYPEHTML>
<html> <head> <title>JavaScriptExample</title> <scripttype="text/javascript"> functionsayHello(){ document.write("<p>HelloWorld!<\/p>"); } </script> </head> <body> <scripttype= "text/javascript"> sayHello(); </script> </body> </html>

scriptsexample.html

54

27

7/2/2012

EmbeddingCSSStyles

<head>Section:<style>

The<style> elementembedsformatting information(CSSstyles)intoanHTMLpage

<html> styleexample.html <head> <styletype="text/css"> p{fontsize:12pt;lineheight:12pt;} p:firstletter{fontsize:200%;} span{texttransform:uppercase;} </style> </head> <body> <p>Stylesdemo.<br/> <span>Testuppercase</span>. </p> </body> </html>
56

28

7/2/2012

Comments:<! >Tag
Commentscanexistanywherebetweenthe

<html></html> tags
Commentsstartwith<! andendwith>

<! TelerikLogo(aJPGfile)> <imgsrc="logo.jpg"alt=TelerikLogo"> <! Hyperlinktothewebsite> <ahref="http://telerik.com/">Telerik</a> <! Showthenewstable> <tableclass="newstable"> ...

57

<body>Section:Introduction
The<body> sectiondescribestheviewable

portionofthepage
Startsafterthe<head> </head> section Beginswith<body> andendswith</body>

<html> <head><title>Testpage</title></head> <body> <! ThisistheWebpagebody> </body> </html>

58

29

7/2/2012

TextFormatting

TextFormatting

Textformattingtagsmodifythetextbetween theopeningtagandtheclosingtag
Ex.<b>Hello</b> makesHellobold
<b></b> <i></i> <u></u>   <strong></strong> <em></em> <pre></pre> <blockquote></blockquote> <del></del> bold italicized underlined Samplesuperscript Samplesubscript strong emphasized Preformatted text Quoted text block Deleted text strike through
60

30

7/2/2012

TextFormatting Example
textformatting.html
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <title>PageTitle</title> </head> <body> <h1>Notice</h1> <p>Thisisa<em>sample</em>Webpage.</p> <p><pre>Nextparagraph: preformatted.</pre></p> <h2>MoreInfo</h2> <p>Specifically,wereusingXHMTL1.0transitional.<br/> Nextline.</p> </body> </html>
61

TextFormatting Example(2)
textformatting.html
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <title>PageTitle</title> </head> <body> <h1>Notice</h1> <p>Thisisa<em>sample</em>Webpage.</p> <p><pre>Nextparagraph: preformatted.</pre></p> <h2>MoreInfo</h2> <p>Specifically,wereusingXHMTL1.0transitional.<br/> Nextline.</p> </body> </html>
62

31

7/2/2012

Hyperlinks

Hyperlinks:<a>Tag
Linktoadocumentcalledform.html onthe

sameserverinthesamedirectory:
<ahref="form.html">FillOurForm</a>
Linktoadocumentcalledparent.html on

thesameserverintheparentdirectory:
<ahref="../parent.html">Parent</a>
Linktoadocumentcalledcat.html onthe

sameserverinthesubdirectorystuff:
<ahref="stuff/cat.html">Catalog</a>
64

32

7/2/2012

Hyperlinks:<a>Tag(2)
LinktoanexternalWebsite:
<ahref="http://www.devbg.org"target="_blank">BASD</a>

AlwaysuseafullURL,including"http://",not just"www.somesite.com" Usingthetarget="_blank" attributeopens thelinkinanewwindow

Linktoanemailaddress:
<ahref="mailto:bugs@example.com?subject=Bug+Report"> Pleasereportbugshere(byemailonly)</a>
65

Hyperlinks:<a>Tag(3)
Linktoadocumentcalledapplynow.html

Onthesameserver,insamedirectory Usinganimageasalinkbutton:
<ahref="applynow.html"><img src="applynowbutton.jpg"/></a>
Linktoadocumentcalledindex.html

Onthesameserver,inthesubdirectoryenglish of theparentdirectory:
<ahref="../english/index.html">Switchto Englishversion</a>
66

33

7/2/2012

HyperlinksandSections

Linktoanotherlocationinthesamedocument:
<ahref="#section1">GotoIntroduction</a> ... <h2id="section1">Introduction</h2>

Linktoaspecificlocationinanotherdocument:
<ahref="chapter3.html#section3.1.1">GotoSection 3.1.1</a> <! Inchapter3.html> ... <divid="section3.1.1"> <h3>3.1.1.TechnicalBackground</h3> </div>
67

Hyperlinks Example
hyperlinks.html
<ahref="form.html">FillOurForm</a><br/> <ahref="../parent.html">Parent</a><br/> <ahref="stuff/cat.html">Catalog</a><br/> <ahref="http://www.devbg.org"target="_blank">BASD</a> <br/> <ahref="mailto:bugs@example.com?subject=Bug Report">Pleasereportbugshere(byemailonly)</a> <br/> <ahref="applynow.html"><imgsrc="applynowbutton.jpg /></a><br/> <ahref="../english/index.html">SwitchtoEnglish version</a><br/>

68

34

7/2/2012

Hyperlinks Example(2)
hyperlinks.html
<ahref="form.html">FillOurForm</a><br/> <ahref="../parent.html">Parent</a><br/> <ahref="stuff/cat.html">Catalog</a><br/> <ahref="http://www.devbg.org"target="_blank">BASD</a> <br/> <ahref="mailto:bugs@example.com?subject=Bug Report">Pleasereportbugshere(byemailonly)</a> <br/> <ahref="applynow.html"><imgsrc="applynowbutton.jpg /></a><br/> <ahref="../english/index.html">SwitchtoEnglish version</a><br/>

69

LinkstotheSameDocument

35

7/2/2012

LinkstotheSameDocument Example
linkstosamedocument.html
<h1>TableofContents</h1> <p><ahref="#section1">Introduction</a><br/> <ahref="#section2">Somebackground</A><br/> <ahref="#section2.1">ProjectHistory</a><br/> ...therestofthetableofcontents... <! Thedocumenttextfollowshere> <h2id="section1">Introduction</h2> ...Section1followshere... <h2id="section2">Somebackground</h2> ...Section2followshere... <h3id="section2.1">ProjectHistory</h3> ...Section2.1followshere...
71

LinkstotheSameDocument Example(2)
linkstosamedocument.html
<h1>TableofContents</h1> <p><ahref="#section1">Introduction</a><br/> <ahref="#section2">Somebackground</A><br/> <ahref="#section2.1">ProjectHistory</a><br/> ...therestofthetableofcontents... <! Thedocumenttextfollowshere> <h2id="section1">Introduction</h2> ...Section1followshere... <h2id="section2">Somebackground</h2> ...Section2followshere... <h3id="section2.1">ProjectHistory</h3> ...Section2.1followshere...
72

36

7/2/2012

MiscellaneousTags

Images:<img> tag
Insertinganimagewith<img> tag:
<imgsrc="/img/basdlogo.png">

Imageattributes:
src alt height width border Location of image file (relative or absolute) Substitute text for display (e.g. in text mode) Number of pixels of the height Number of pixels of the width Size of border, 0 for no border

Example:
<imgsrc="./php.png"alt="PHPLogo"/>
74

37

7/2/2012

MiscellaneousTags
<hr />:Drawsahorizontalrule(line):
<hrsize="5"width="70%"/>

<center></center>:Deprecated!
<center>HelloWorld!</center>

<font></font>:Deprecated!
<fontsize="3"color="blue">Font3</font> <fontsize="+4"color="blue">Font+4</font>

75

MiscellaneousTags Example
misc.html
<html> <head> <title>MiscellaneousTagsExample</title> </head> <body> <hrsize="5"width="70%"/> <center>HelloWorld!</center> <fontsize="3"color="blue">Font3</font> <fontsize="+4"color="blue">Font+4</font> </body> </html>
76

38

7/2/2012

Howtomakecolorschanges?

Hexadecimalnumber : Colornames:<Fontcolor=white> ChangingtheBackgroundcolor

<BODYBGCOLOR=#19378a>

ChangingTextcolor
<BODYBGCOLOR=#19378aTEXT=#ffffff LINK=#ffff66VLINK=#66ffff>

Spotcolor
<FONTCOLOR=#66ffcc>WENT'99</FONT>

ImageBackground <BODYBACKGROUND=bgimg.gif>

MiscellaneousTags

78

39

7/2/2012

MiscellaneousTags

79

CreatingLists

40

7/2/2012

OrderedLists:<ol> Tag

CreateanOrderedListusing<ol></ol>:
<oltype="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol>

Attributevaluesfortype are1,A,a,I,ori
1. Apple 2. Orange 3. Grapefruit i. Apple ii. Orange iii. Grapefruit a. Apple I. Apple b. Orange A. Apple c. Grapefruit II. Orange B. Orange III. Grapefruit C. Grapefruit
81

UnorderedLists:<ul> Tag
CreateanUnorderedListusing<ul></ul>:
<ultype="disk"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul>

Attributevaluesfortype are:

disc,circle orsquare
Apple Orange Pear o Apple o Orange o Pear Apple Orange Pear
82

41

7/2/2012

Definitionlists:<dl>tag
Createdefinitionlistsusing<dl>

Pairsoftextandassociateddefinition;textisin <dt> tag,definitionin<dd> tag

<dl> <dt>HTML</dt> <dd>Amarkuplanguage</dd> <dt>CSS</dt> <dd>Languageusedto</dd> </dl>

Renderswithoutbullets Definitionisindented
83

Lists Example
<oltype="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> <ultype="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> <dl> <dt>HTML</dt> <dd>Amarkuplang</dd> </dl>

lists.html

84

42

7/2/2012

HTMLSpecialCharacters

HTMLSpecialCharacters
SymbolName
CopyrightSign RegisteredTrademarkSign TrademarkSign LessThan GreaterThan Ampersand NonbreakingSpace EmDash QuotationMark Euro BritishPound JapaneseYen

HTMLEntity
&copy; &reg; &trade; &lt; &gt; &amp; &nbsp; &mdash; &quot; &#8364; &pound; &yen;

Symbol
< > & "
86

43

7/2/2012

SpecialCharacters Example
<p>[&gt;&gt;&nbsp;&nbsp;Welcome specialchars.html &nbsp;&nbsp;&lt;&lt;]</p> <p>&#9658;Ihavefollowingcards: A&#9827;,K&#9830;and9&#9829;.</p> <p>&#9658;Ipreferhardrock&#9835; music&#9835;</p> <p>&copy;2006bySvetlinNakov&amp;his team</p> <p>TelerikAcademy</p>

87

SpecialChars Example(2)
<p>[&gt;&gt;&nbsp;&nbsp;Welcome specialchars.html &nbsp;&nbsp;&lt;&lt;]</p> <p>&#9658;Ihavefollowingcards: A&#9827;,K&#9830;and9&#9829;.</p> <p>&#9658;Ipreferhardrock&#9835; music&#9835;</p> <p>&copy;2006bySvetlinNakov&amp;his team</p> <p>TelerikAcademy</p>

88

44

7/2/2012

Using<DIV> and<SPAN> BlockandInlineElements

<DIV>

45

7/2/2012

BlockandInlineElements
Blockelementsaddalinebreakbeforeand

afterthem
<div> isablockelement Otherblockelementsare<table>,<hr>, headings,lists,<p> andetc.
Inlineelementsdontbreakthetextbefore

andafterthem
<span> isaninlineelement MostHTMLelementsareinline,e.g.<a>
91

The<div>Tag
<div> createslogicaldivisionswithinapage Blockstyleelement UsedwithCSS Example:

divandspan.html
<divstyle="fontsize:24px;color:red">DIV example</div> <p>Thisoneis<spanstyle="color:red;font weight:bold">onlyatest</span>.</p>
92

46

7/2/2012

<SPAN>

The<span>Tag
Inlinestyleelement Usefulformodifyingaspecificportionoftext

Don'tcreateaseparatearea (paragraph)inthedocument
VeryusefulwithCSS

span.html
<p>Thisoneis<spanstyle="color:red;font weight:bold">onlyatest</span>.</p> <p>Thisoneisanother<spanstyle="fontsize:32px; fontweight:bold">TEST</span>.</p>
94

47

7/2/2012

HTMLBasics

Questions?

Exercises
1.

WriteanHTMLpagelikethefollowing: *Useheadingsanddivs

96

48

7/2/2012

Exercises(2)
2.

WriteanHTMLpagelikethefollowing:

97

Exercises(3)
4.

CreateanuserprofileWeb pageProfile.html,friends pagenamedFriends.html andinfopagenamed Info.html. Linkthemto oneanotherusing<a>tag.

98

49