HTML5_Part1

9/2/2015 HTMLTutorial

http://www.w3schools.com/html/default.asp 1/3

W3SchoolsHome(/default.asp) NextChapter(html_intro.asp)

PrintPage

HTML(5)Tutorial

WithHTMLyoucancreateyourownWebsite.

ThistutorialteachesyoueverythingaboutHTML.

HTMLiseasytolearnYouwillenjoyit.

ExamplesinEveryChapterThisHTMLtutorialcontainshundredsofHTMLexamples.

WithouronlineHTMLeditor,youcanedittheHTML,andclickonabuttontoviewtheresult.

Example

PageTitle

ThisisaHeadingThisisaparagraph.

TryitYourself(tryit.asp?filename=tryhtml_default)

Clickonthe"TryitYourself"buttontoseehowitworks.

StartlearningHTMLnow!(html_intro.asp)

HTMLExamplesAttheendoftheHTMLtutorial,youcanfindmorethan200examples.



W3SchoolsHome(/default.asp) NextChapter(html_intro.asp)

Withouronlineeditor,youcaneditandtesteachexampleyourself.

GotoHTMLExamples!(html_examples.asp)

HTMLQuizTestTestyourHTMLskillsatW3Schools!

StartHTMLQuiz!(html_quiz.asp)

HTMLReferencesAtW3Schoolsyouwillfindcompletereferencesabouttags,attributes,events,colornames,entities,charactersets,URLencoding,languagecodes,HTTPmessages,andmore.

HTMLTagReference(/tags/default.asp)

HTMLExamGetYourDiploma!(/cert/default.asp)

W3Schools'OnlineCertificationTheperfectsolutionforprofessionalswhoneedtobalancework,family,andcareerbuilding.

Morethan10000certificatesalreadyissued!

GetYourCertificate(/cert/default.asp)

TheHTMLCertificate(/cert/default.asp)documentsyourknowledgeofHTML.

TheHTML5Certificate(/cert/default.asp)documentsyourknowledgeofadvancedHTML5.

TheCSSCertificate(/cert/default.asp)documentsyourknowledgeofadvancedCSS.

TheJavaScriptCertificate(/cert/default.asp)documentsyourknowledgeofJavaScriptandHTMLDOM.

ThejQueryCertificate(/cert/default.asp)documentsyourknowledgeofjQuery.

ThePHPCertificate(/cert/default.asp)documentsyourknowledgeofPHPandSQL(MySQL).

TheXMLCertificate(/cert/default.asp)documentsyourknowledgeofXML,XMLDOMandXSLT.

9/2/2015 IntroductiontoHTML

http://www.w3schools.com/html/html_intro.asp 1/4

Previous(default.asp) NextChapter(html_editors.asp)

PrintPage

HTMLIntroduction

WhatisHTML?HTMLisamarkuplanguagefordescribingwebdocuments(webpages).

HTMLstandsforHyperTextMarkupLanguageAmarkuplanguageisasetofmarkuptagsHTMLdocumentsaredescribedbyHTMLtagsEachHTMLtagdescribesdifferentdocumentcontent

HTMLExampleAsmallHTMLdocument:

PageTitle

MyFirstHeadingMyfirstparagraph.

TryitYourself(tryit.asp?filename=tryhtml_intro)

ExampleExplainedTheDOCTYPEdeclarationdefinesthedocumenttypetobeHTMLThetextbetweenanddescribesanHTMLdocumentThetextbetweenandprovidesinformationaboutthedocumentThetextbetweenandprovidesatitleforthedocumentThetextbetweenanddescribesthevisiblepagecontentThetextbetweenanddescribesaheadingThetextbetweenanddescribesaparagraph



Usingthisdescription,awebbrowsercandisplayadocumentwithaheadingandaparagraph.

HTMLTagsHTMLtagsarekeywords(tagnames)surroundedbyanglebrackets:

content

HTMLtagsnormallycomeinpairslikeandThefirsttaginapairisthestarttag,thesecondtagistheendtagTheendtagiswrittenlikethestarttag,butwithaslashbeforethetagname

Thestarttagisoftencalledtheopeningtag.Theendtagisoftencalledtheclosingtag.

WebBrowsersThepurposeofawebbrowser(Chrome,IE,Firefox,Safari)istoreadHTMLdocumentsanddisplaythem.

ThebrowserdoesnotdisplaytheHTMLtags,butusesthemtodeterminehowtodisplaythedocument:

HTMLPageStructureBelowisavisualizationofanHTMLpagestructure:



Pagetitle

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Onlythearea(thewhitearea)isdisplayedbythebrowser.

TheDeclarationThedeclarationhelpsthebrowsertodisplayawebpagecorrectly.

Therearedifferentdocumenttypesontheweb.

Todisplayadocumentcorrectly,thebrowsermustknowbothtypeandversion.

Thedoctypedeclarationisnotcasesensitive.Allcasesareacceptable:

CommonDeclarations



Previous(default.asp) NextChapter(html_editors.asp)

HTML5

HTML4.01

XHTML1.0

AlltutorialsandexamplesatW3SchoolsuseHTML5.

HTMLVersionsSincetheearlydaysoftheweb,therehavebeenmanyversionsofHTML:

Version Year

HTML 1991

HTML2.0 1995

HTML3.2 1997

HTML4.01 1999

XHTML 2000

HTML5 2014


9/2/2015 HTMLEditors

http://www.w3schools.com/html/html_editors.asp 1/3

Previous(html_intro.asp) NextChapter(html_basic.asp)

PrintPage

HTMLEditors

WriteHTMLUsingNotepadorTextEditHTMLcanbeeditedbyusingprofessionalHTMLeditorslike:

MicrosoftWebMatrixSublimeText

However,forlearningHTMLwerecommendatexteditorlikeNotepad(PC)orTextEdit(Mac).

WebelieveusingasimpletexteditorisagoodwaytolearnHTML.

Followthe4stepsbelowtocreateyourfirstwebpagewithNotepad.

Step1:OpenNotepadToopenNotepadinWindows7orearlier:

ClickStart(bottomleftonyourscreen).ClickAllPrograms.ClickAccessories.ClickNotepad.

ToopenNotepadinWindows8orlater:

OpentheStartScreen(thewindowsymbolatthebottomleftonyourscreen).TypeNotepad.

Step2:WriteSomeHTMLWriteorcopysomeHTMLintoNotepad.

MyFirstHeading

Myfirstparagraph.



Step3:SavetheHTMLPageSavethefileonyourcomputer.

SelectFile>SaveasintheNotepadmenu.

Namethefile"index.html"oranyothernameendingwithhtmlorhtm.

UTF8isthepreferredencodingforHTMLfiles.

ANSIencodingcoversUSandWesternEuropeancharactersonly.

Youcanuseeither.htmor.htmlasfileextension.Thereisnodifference,itisuptoyou.

Step4:ViewHTMLPageinYourBrowserOpenthesavedHTMLfileinyourfavoritebrowser.Theresultwilllookmuchlikethis:



Previous(html_intro.asp) NextChapter(html_basic.asp)

Toopenafileinabrowser,doubleclickonthefile,orrightclick,andchooseopenwith.


9/2/2015 HTMLBasic

http://www.w3schools.com/html/html_basic.asp 1/3

Previous(html_editors.asp) NextChapter(html_elements.asp)

PrintPage

HTMLBasicExamples

Don'tworryiftheseexamplesusetagsyouhavenotlearned.

Youwilllearnabouttheminthenextchapters.

HTMLDocumentsAllHTMLdocumentsmuststartwithatypedeclaration:.

TheHTMLdocumentitselfbeginswithandendswith.

ThevisiblepartoftheHTMLdocumentisbetweenand.

Example

MyFirstHeading

Myfirstparagraph.

TryitYourself(tryit.asp?filename=tryhtml_basic_document)

HTMLHeadingsHTMLheadingsaredefinedwiththetotags:

ExampleThisisaheadingThisisaheadingThisisaheading

TryitYourself(tryit.asp?filename=tryhtml_basic_headings)

9/2/2015 HTMLBasic


HTMLParagraphsHTMLparagraphsaredefinedwiththetag:

ExampleThisisaparagraph.Thisisanotherparagraph.

TryitYourself(tryit.asp?filename=tryhtml_basic_paragraphs)

HTMLLinksHTMLlinksaredefinedwiththetag:

ExampleThisisalink

TryitYourself(tryit.asp?filename=tryhtml_basic_link)

Thelink'sdestinationisspecifiedinthehrefattribute.

AttributesareusedtoprovideadditionalinformationaboutHTMLelements.

HTMLImagesHTMLimagesaredefinedwiththetag.

Thesourcefile(src),alternativetext(alt),andsize(widthandheight)areprovidedasattributes:

Example

TryitYourself(tryit.asp?filename=tryhtml_basic_img)

Youwilllearnmoreaboutattributesinalaterchapter.

9/2/2015 HTMLBasic


Previous(html_editors.asp) NextChapter(html_elements.asp)


9/2/2015 HTMLElements

http://www.w3schools.com/html/html_elements.asp 1/4

Previous(html_basic.asp) NextChapter(html_attributes.asp)

PrintPage

HTMLElements

HTMLdocumentsaremadeupbyHTMLelements.

HTMLElementsHTMLelementsarewrittenwithastarttag,withanendtag,withthecontentinbetween:

content

TheHTMLelementiseverythingfromthestarttagtotheendtag:

MyfirstHTMLparagraph.

Starttag Elementcontent Endtag

MyFirstHeading

Myfirstparagraph.

SomeHTMLelementsdonothaveanendtag.

NestedHTMLElementsHTMLelementscanbenested(elementscancontainelements).

AllHTMLdocumentsconsistofnestedHTMLelements.

Thisexamplecontains4HTMLelements:

Example




Tryityourself(tryit.asp?filename=tryhtml_elements)

HTMLExampleExplainedTheelementdefinesthewholedocument.

Ithasastarttagandanendtag.

TheelementcontentisanotherHTMLelement(theelement).


Theelementdefinesthedocumentbody.


TheelementcontentistwootherHTMLelements(and).


Theelementdefinesaheading.


Theelementcontentis:MyFirstHeading.

MyFirstHeading

Theelementdefinesaparagraph.




Theelementcontentis:Myfirstparagraph.

Myfirstparagraph.

Don'tForgettheEndTagSomeHTMLelementswilldisplaycorrectly,evenifyouforgettheendtag:

Example

ThisisaparagraphThisisaparagraph

Tryityourself(tryit.asp?filename=tryhtml_no_endtag)

Theexampleaboveworksinallbrowsers,becausetheclosingtagisconsideredoptional.

Neverrelyonthis.Itmightproduceunexpectedresultsand/orerrorsifyouforgettheendtag.

EmptyHTMLElementsHTMLelementswithnocontentarecalledemptyelements.

isanemptyelementwithoutaclosingtag(thetagdefinesalinebreak).

Emptyelementscanbe"closed"intheopeningtaglikethis:.

HTML5doesnotrequireemptyelementstobeclosed.Butifyouwantstrictervalidation,oryouneedtomakeyourdocumentreadablebyXMLparsers,youshouldcloseallHTMLelements.

HTMLTip:UseLowercaseTagsHTMLtagsarenotcasesensitive:meansthesameas.

TheHTML5standarddoesnotrequirelowercasetags,butW3CrecommendslowercaseinHTML4,anddemandslowercaseforstricterdocumenttypeslikeXHTML.

AtW3Schoolswealwaysuselowercasetags.



Previous(html_basic.asp) NextChapter(html_attributes.asp)


9/2/2015 HTMLAttributes

http://www.w3schools.com/html/html_attributes.asp 1/5

Previous(html_elements.asp) NextChapter(html_headings.asp)

PrintPage

HTMLAttributes

AttributesprovideadditionalinformationaboutHTMLelements.

HTMLAttributesHTMLelementscanhaveattributesAttributesprovideadditionalinformationaboutanelementAttributesarealwaysspecifiedinthestarttagAttributescomeinname/valuepairslike:name="value"

ThelangAttributeThedocumentlanguagecanbedeclaredinthetag.

Thelanguageisdeclaredinthelangattribute.

Declaringalanguageisimportantforaccessibilityapplications(screenreaders)andsearchengines:


Thefirsttwolettersspecifythelanguage(en).Ifthereisadialect,usetwomoreletters(US).

ThetitleAttributeHTMLparagraphsaredefinedwiththetag.

Inthisexample,theelementhasatitleattribute.Thevalueoftheattributeis"AboutW3Schools":

Example



W3Schoolsisawebdeveloper'ssite.Itprovidestutorialsandreferencescoveringmanyaspectsofwebprogramming,includingHTML,CSS,JavaScript,XML,SQL,PHP,ASP,etc.

TryitYourself(tryit.asp?filename=tryhtml_attributes_title)

Whenyoumovethemouseovertheelement,thetitlewillbedisplayedasatooltip.

ThehrefAttributeHTMLlinksaredefinedwiththetag.Thelinkaddressisspecifiedinthehrefattribute:

ExampleThisisalink

TryitYourself(tryit.asp?filename=tryhtml_attributes_link)

Youwilllearnmoreaboutlinksandthetaglaterinthistutorial.

SizeAttributesHTMLimagesaredefinedwiththetag.

Thefilenameofthesource(src),andthesizeoftheimage(widthandheight)areallprovidedasattributes:

Example

TryitYourself(tryit.asp?filename=tryhtml_attributes_img)

Theimagesizeisspecifiedinpixels:width="104"means104screenpixelswide.

Youwilllearnmoreaboutimagesandthetaglaterinthistutorial.

ThealtAttribute



Thealtattributespecifiesanalternativetexttobeused,whenanHTMLelementcannotbedisplayed.

Thevalueoftheattributecanbereadby"screenreaders".Thisway,someone"listening"tothewebpage,i.e.ablindperson,can"hear"theelement.

Example

TryitYourself(tryit.asp?filename=tryhtml_attributes_alt)

WeSuggest:AlwaysUseLowercaseAttributesTheHTML5standarddoesnotrequirelowercaseattributenames.

ThetitleattributecanbewrittenwithupperorlowercaselikeTitleand/orTITLE.

W3CrecommendslowercaseinHTML4,anddemandslowercaseforstricterdocumenttypeslikeXHTML.

Lowercaseisthemostcommon.Lowercaseiseasiertotype.AtW3Schoolswealwaysuselowercaseattributenames.

WeSuggest:AlwaysQuoteAttributeValuesTheHTML5standarddoesnotrequirequotesaroundattributevalues.

Thehrefattribute,demonstratedabove,canbewrittenas:

Example

TryitYourself(tryit.asp?filename=tryhtml_attributes_noquotes)

W3CrecommendsquotesinHTML4,anddemandsquotesforstricterdocumenttypeslikeXHTML.

Sometimesitisnecessarytousequotes.Thiswillnotdisplaycorrectly,becauseitcontainsaspace:

Example

TryitYourself(tryit.asp?filename=tryhtml_attributes_error)



Usingquotesarethemostcommon.Omittingquotescanproduceerrors.AtW3Schoolswealwaysusequotesaroundattributevalues.

SingleorDoubleQuotes?DoublestylequotesarethemostcommoninHTML,butsinglestylecanalsobeused.

Insomesituations,whentheattributevalueitselfcontainsdoublequotes,itisnecessarytousesinglequotes:

Orviceversa:

ChapterSummaryAllHTMLelementscanhaveattributesTheHTMLtitleattributeprovidesadditional"tooltip"informationTheHTMLhrefattributeprovidesaddressinformationforlinksTheHTMLwidthandheightattributesprovidesizeinformationforimagesTheHTMLaltattributeprovidestextforscreenreadersAtW3SchoolswealwaysuselowercaseHTMLattributenamesAtW3Schoolswealwaysquoteattributeswithdoublequotes

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_attributes1)

Exercise2(exercise.asp?filename=exercise_attributes2)






Previous(html_elements.asp) NextChapter(html_headings.asp)

HTMLAttributesBelowisanalphabeticallistofsomeattributesoftenusedinHTML:

Attribute Description

alt Specifiesanalternativetextforanimage

disabled Specifiesthataninputelementshouldbedisabled

href SpecifiestheURL(webaddress)foralink

id Specifiesauniqueidforanelement

src SpecifiestheURL(webaddress)foranimage

style SpecifiesaninlineCSSstyleforanelement

title Specifiesextrainformationaboutanelement(displayedasatooltip)

value Specifiesthevalue(textcontent)foraninputelement.

AcompletelistofallattributesforeachHTMLelement,islistedinour:HTMLTagReference(/tags/default.asp).


9/2/2015 Exercisev1.3

http://www.w3schools.com/html/exercise.asp?filename=exercise_attributes1 1/1

Exercise:Addatooltiptotheparagraphbelowwiththetext"AboutW3Schools".

Exercisew3schools.com

Hint

SeeResultEditThisCode:

W3Schoolsisawebdeveloper'ssite.

ShowAnswerResult:

W3Schoolsisawebdeveloper'ssite.



Exercise:Changethesizeoftheimageto250pixelswideand400pixelstall.


Hint


ShowAnswerResult:



Exercise:Transformthetextbelowintoalinkthatgoesto"www.w3schools.com".


Hint


Thisisalink

ShowAnswerResult:

Thisisalink



Exercise:Changethedestinationofthelinkbelowto"www.wwf.org.uk".


Hint


Thisisalink

ShowAnswerResult:

Thisisalink



Exercise:Theimagebelowisunavailableonpurpose.Specifyanalternatetextof"w3schools.com"tobeused,soitcanbereadby"screenreaders".


Hint


ShowAnswerResult:

9/2/2015 HTMLHeadings

http://www.w3schools.com/html/html_headings.asp 1/4

Previous(html_attributes.asp) NextChapter(html_paragraphs.asp)

PrintPage

HTMLHeadings

HeadingsareimportantinHTMLdocuments.

HTMLHeadingsHeadingsaredefinedwiththetotags.

definesthemostimportantheading.definestheleastimportantheading.

ExampleThisisaheadingThisisaheadingThisisaheading

TryitYourself(tryit.asp?filename=tryhtml_headings)

Note:Browsersautomaticallyaddsomeemptyspace(amargin)beforeandaftereachheading.

HeadingsAreImportantUseHTMLheadingsforheadingsonly.Don'tuseheadingstomaketextBIGorbold.

Searchenginesuseyourheadingstoindexthestructureandcontentofyourwebpages.

Usersskimyourpagesbyitsheadings.Itisimportanttouseheadingstoshowthedocumentstructure.

h1headingsshouldbemainheadings,followedbyh2headings,thenthelessimportanth3,andsoon.

HTMLHorizontalRulesThetagcreatesahorizontallineinanHTMLpage.

Thehrelementcanbeusedtoseparatecontent:

Example



Thisisaparagraph.

Thisisaparagraph.

Thisisaparagraph.

TryitYourself(tryit.asp?filename=tryhtml_headings_hr)

TheHTMLElementTheHTMLelementhasnothingtodowithHTMLheadings.

TheHTMLelementcontainsmetadata.Metadataarenotdisplayed.

TheHTMLelementisplacedbetweenthetagandthetag:

Example

MyFirstHTML

...

TryitYourself(tryit.asp?filename=tryhtml_headings_head)

Metadatameansdataaboutdata.HTMLmetadataisdataabouttheHTMLdocument.

TheHTMLElementTheHTMLelementismetadata.ItdefinestheHTMLdocument'stitle.

Thetitlewillnotbedisplayedinthedocument,butmightbedisplayedinthebrowsertab.

TheHTMLElementTheHTMLelementisalsometadata.



Itcanbeusedtodefinethecharacterset,andotherinformationabouttheHTMLdocument.

MoreMetaElementsInthechapteraboutHTMLstylesyoudiscovermoremetaelements:

TheHTMLelementisusedtodefineinternalCSSstylesheets.

TheHTMLelementisusedtodefineexternalCSSstylesheets.

HTMLTipHowtoViewHTMLSourceHaveyoueverseenaWebpageandwondered"Hey!Howdidtheydothat?"

Tofindout,rightclickinthepageandselect"ViewPageSource"(inChrome)or"ViewSource"(inIE),orsimilarinanotherbrowser.ThiswillopenawindowcontainingtheHTMLcodeofthepage.

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_headings1)

Exercise2(exercise.asp?filename=exercise_headings2)



HTMLTagReferenceW3Schools'tagreferencecontainsadditionalinformationaboutthesetagsandtheirattributes.

YouwilllearnmoreaboutHTMLtagsandattributesinthenextchaptersofthistutorial.

Tag Description

(/tags/tag_html.asp) DefinesanHTMLdocument

(/tags/tag_body.asp) Definesthedocument'sbody

(/tags/tag_head.asp) Definesthedocument'sheadelement

to(/tags/tag_hn.asp) DefinesHTMLheadings

(/tags/tag_hr.asp) Definesahorizontalline



Previous(html_attributes.asp) NextChapter(html_paragraphs.asp)



http://www.w3schools.com/html/exercise.asp?filename=exercise_headings2 1/1

Exercise:Addahorizontalrulebetweentheheadingandtheparagraph.


Hint


London

LondonisthecapitalcityofEngland.ItisthemostpopulouscityintheUnitedKingdom,withametropolitanareaofover13millioninhabitants.

ShowAnswerResult:

LondonLondonisthecapitalcityofEngland.ItisthemostpopulouscityintheUnitedKingdom,withametropolitanareaofover13millioninhabitants.



Exercise:Addsixheadingstothedocumentwiththetext"Hello".

Startwiththemostimportantheadingandendwiththeleastimportantheading.


Hint


ShowAnswerResult:



Exercise:Markupthefollowingtextwithappropriatetags:"UniversalStudios"isthemostimportantcontent."JurassicPark"isthenextmostimportantcontent."About"isoflesserimportancethanJurassicPark.Thelastsentenceisjustaparagraph.


Hint


UniversalStudiosPresents

JurassicPark

About

OntheIslandofIslaNublar,anewparkhasbeenbuilt:JurassicParkisathemeparkofcloneddinosaurs!!

ShowAnswerResult:

UniversalStudiosPresentsJurassicParkAboutOntheIslandofIslaNublar,anewparkhasbeenbuilt:JurassicParkisathemeparkofcloneddinosaurs!!

9/2/2015 HTMLParagraphs

http://www.w3schools.com/html/html_paragraphs.asp 1/4

Previous(html_headings.asp) NextChapter(html_styles.asp)

PrintPage

HTMLParagraphs

HTMLdocumentsaredividedintoparagraphs.

HTMLParagraphsTheHTMLelementdefinesaparagraph.

ExampleThisisaparagraphThisisanotherparagraph

TryitYourself(tryit.asp?filename=tryhtml_paragraphs1)

Browsersautomaticallyaddanemptylinebeforeandafteraparagraph.

HTMLDisplayYoucannotbesurehowHTMLwillbedisplayed.

Largeorsmallscreens,andresizedwindowswillcreatedifferentresults.

WithHTML,youcannotchangetheoutputbyaddingextraspacesorextralinesinyourHTMLcode.

Thebrowserwillremoveextraspacesandextralineswhenthepageisdisplayed.

Anynumberofspaces,andanynumberofnewlines,countasonlyonespace.

Example

Thisparagraphcontainsalotoflinesinthesourcecode,butthebrowserignoresit.



Thisparagraphcontainsalotofspacesinthesourcecode,butthebrowserignoresit.


Don'tForgettheEndTagMostbrowserswilldisplayHTMLcorrectlyevenifyouforgettheendtag:

ExampleThisisaparagraphThisisanotherparagraph


Theexampleabovewillworkinmostbrowsers,butdonotrelyonit.

Forgettingtheendtagcanproduceunexpectedresultsorerrors.

StricterversionsofHTML,likeXHTML,donotallowyoutoskiptheendtag.

HTMLLineBreaksTheHTMLelementdefinesalinebreak.

Useifyouwantalinebreak(anewline)withoutstartinganewparagraph:

ExampleThisisaparagraphwithlinebreaks

TryitYourself(tryit.asp?filename=tryhtml_paragraphs)

TheelementisanemptyHTMLelement.Ithasnoendtag.

ThePoemProblem



ExampleThispoemwilldisplayasoneline:

MyBonnieliesovertheocean.

MyBonnieliesoverthesea.


Oh,bringbackmyBonnietome.

TryitYourself(tryit.asp?filename=tryhtml_poem)

TheHTMLElementTheHTMLelementdefinespreformattedtext.

Thetextinsideaelementisdisplayedinafixedwidthfont(usuallyCourier),anditpreservesbothspacesandlinebreaks:

Example


MyBonnieliesoverthesea.


Oh,bringbackmyBonnietome.

TryitYourself(tryit.asp?filename=tryhtml_pre)

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_paragraphs)

Exercise2(exercise.asp?filename=exercise_paragraphs1)





Previous(html_headings.asp) NextChapter(html_styles.asp)

HTMLTagReferenceW3Schools'tagreferencecontainsadditionalinformationaboutHTMLelementsandtheirattributes.

Tag Description

(/tags/tag_p.asp) Definesaparagraph

(/tags/tag_br.asp) Insertsasinglelinebreak

(/tags/tag_pre.asp) Definespreformattedtext



http://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs 1/1

Exercise:Addaparagraphtothisdocumentwiththetext"HelloWorld!".


Hint


ShowAnswerResult:


http://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs2 1/1

Exercise:Fixthedisplayofthepoembelow.Displaythepoemover4lines.


Hint


MyBonnieliesovertheocean.MyBonnieliesoverthesea.MyBonnieliesovertheocean.Oh,bringbackmyBonnietome.

ShowAnswerResult:

MyBonnieliesovertheocean.MyBonnieliesoverthesea.MyBonnieliesovertheocean.Oh,bringbackmyBonnietome.

Previous(html_paragraphs.asp) NextChapter(html_formatting.asp)

PrintPage

HTMLStyles

IamRedIamBlue

TryitYourself(tryit.asp?filename=tryhtml_styles_intro)

HTMLStylingEveryHTMLelementhasadefaultstyle(backgroundcoloriswhiteandtextcolorisblack).

ChangingthedefaultstyleofanHTMLelement,canbedonewiththestyleattribute.

Thisexamplechangesthedefaultbackgroundcolorfromwhitetolightgrey:

Example

ThisisaheadingThisisaparagraph.

TryitYourself(tryit.asp?filename=tryhtml_styles_backgroundcolor)

Thebgcolorattribute,supportedinolderversionsofHTML,isnotvalidinHTML5.

TheHTMLStyleAttributeTheHTMLstyleattributehasthefollowingsyntax:

style="property:value"

ThepropertyisaCSSproperty.ThevalueisaCSSvalue.

YouwilllearnmoreaboutCSSlaterinthistutorial.

HTMLTextColorThecolorpropertydefinesthetextcolortobeusedforanHTMLelement:

ExampleThisisaheadingThisisaparagraph.

TryitYourself(tryit.asp?filename=tryhtml_styles_color)

HTMLFontsThefontfamilypropertydefinesthefonttobeusedforanHTMLelement:


TryitYourself(tryit.asp?filename=tryhtml_styles_fontfamily)

Thetag,supportedinolderversionsofHTML,isnotvalidinHTML5.

HTMLTextSizeThefontsizepropertydefinesthetextsizetobeusedforanHTMLelement:


Previous(html_paragraphs.asp) NextChapter(html_formatting.asp)

TryitYourself(tryit.asp?filename=tryhtml_styles_fontsize)

HTMLTextAlignmentThetextalignpropertydefinesthehorizontaltextalignmentforanHTMLelement:

ExampleCenteredHeadingThisisaparagraph.

TryitYourself(tryit.asp?filename=tryhtml_styles_textalign)

Thetag,supportedinolderversionsofHTML,isnotvalidinHTML5.

ChapterSummaryUsethestyleattributeforstylingHTMLelementsUsebackgroundcolorforbackgroundcolorUsecolorfortextcolorsUsefontfamilyfortextfontsUsefontsizefortextsizesUsetextalignfortextalignment

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_styles1)

Exercise2(exercise.asp?filename=exercise_styles2)





Exercise:Changethetextcoloroftheparagraphto"blue".


Hint


Thisisaparagraph.

ShowAnswerResult:

Thisisaparagraph.

Exercise:Changethefontoftheparagraphto"courier".


Hint


Thisisaparagraph.

ShowAnswerResult:

Thisisaparagraph.

Exercise:Centeraligntheparagraph.


Hint


Thisisaparagraph.

ShowAnswerResult:

Thisisaparagraph.

Exercise:Changethetextsizeoftheparagraphto200%.


Hint

CorrectCode:

Thisisaparagraph.

HideAnswerCorrectResult:

Thisisaparagraph.

Exercise:Changethebackgroundcolorofthepagebelowtoyellow.


Hint


Thisisaheading

Thisisaparagraph.

ShowAnswerResult:

ThisisaheadingThisisaparagraph.

Exercise:Centeralignallcontentonthepage.


Hint


Thisisaheading

Thisisalsoaheading

Thisisaparagraph.

Thisisalsoparagraph.

ShowAnswerResult:

ThisisaheadingThisisalsoaheading

Thisisaparagraph.

Thisisalsoparagraph.

Previous(html_styles.asp) NextChapter(html_quotation_elements.asp)

PrintPage

HTMLTextFormattingElements

TextFormattingThistextisbold

Thistextisitalic

Thisis

HTMLFormattingElementsInthepreviouschapter,youlearnedaboutHTMLstyling,usingtheHTMLstyleattribute.

HTMLalsodefinesspecialelements,fordefiningtextwithaspecialmeaning.

HTMLuseselementslikeandforformattingoutput,likeboldoritalictext.

Formattingelementsweredesignedtodisplayspecialtypesoftext:

BoldtextImportanttextItalictextEmphasizedtextMarkedtextSmalltextDeletedtextInsertedtextSubscriptsSuperscripts

HTMLBoldandStrongFormattingTheHTMLelementdefinesboldtext,withoutanyextraimportance.

ExampleThistextisnormal.

Thistextisbold.

superscript

TryitYourself(tryit.asp?filename=tryhtml_formatting_b)

TheHTMLelementdefinesstrongtext,withaddedsemantic"strong"importance.


Thistextisstrong.

TryitYourself(tryit.asp?filename=tryhtml_formatting_strong)

HTMLItalicandEmphasizedFormattingTheHTMLelementdefinesitalictext,withoutanyextraimportance.


Thistextisitalic.

TryitYourself(tryit.asp?filename=tryhtml_formatting_i)

TheHTMLelementdefinesemphasizedtext,withaddedsemanticimportance.


Thistextisemphasized.

TryitYourself(tryit.asp?filename=tryhtml_formatting_em)

Browsersdisplayas,andas.

However,thereisadifferenceinthemeaningofthesetags:anddefinesboldanditalictext,butandmeansthatthetextis"important".

HTMLSmallFormatting

TheHTMLelementdefinessmalltext:

ExampleHTMLSmallFormatting

TryitYourself(tryit.asp?filename=tryhtml_formatting_small)

HTML Marked FormattingTheHTMLelementdefinesmarkedorhighlightedtext:

ExampleHTMLMarkedFormatting

TryitYourself(tryit.asp?filename=tryhtml_formatting_mark)

HTMLDeletedFormattingTheHTMLelementdefinesdeleted(removed)oftext.

ExampleMyfavoritecolorisbluered.

TryitYourself(tryit.asp?filename=tryhtml_formatting_del)

HTMLInsertedFormattingTheHTMLelementdefinesinserted(added)text.

ExampleMyfavoritecolorisred.

TryitYourself(tryit.asp?filename=tryhtml_formatting_ins)

HTML FormattingTheHTMLelementdefinessubscriptedtext.

ExampleThisissubscriptedtext.

TryitYourself(tryit.asp?filename=tryhtml_formatting_sub)

HTML FormattingTheHTMLelementdefinessuperscriptedtext.

ExampleThisissuperscriptedtext.

TryitYourself(tryit.asp?filename=tryhtml_formatting_sup)

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_formatting1)

Exercise2(exercise.asp?filename=exercise_formatting2)




HTMLTextFormattingElementsTag Description

(/tags/tag_b.asp) Definesboldtext

(/tags/tag_em.asp)

Definesemphasizedtext

Subscript

Superscript

Previous(html_styles.asp) NextChapter(html_quotation_elements.asp)

(/tags/tag_i.asp) Definesitalictext

(/tags/tag_small.asp)

Definessmallertext

(/tags/tag_strong.asp)

Definesimportanttext

(/tags/tag_sub.asp)

Definessubscriptedtext

(/tags/tag_sup.asp)

Definessuperscriptedtext

(/tags/tag_ins.asp)

Definesinsertedtext

(/tags/tag_del.asp)

Definesdeletedtext

(/tags/tag_mark.asp)

Definesmarked/highlightedtext


Exercise:Addextraimportancetotheword"degradation"intheparagraphbelow.


Hint


WhatDoesWWFDo?

WWF'smissionistostopthedegradationofourplanet'snaturalenvironment.

ShowAnswerResult:

WhatDoesWWFDo?WWF'smissionistostopthedegradationofourplanet'snaturalenvironment.

Exercise:Emphasizetheword"metropolitan"inthetextbelow.


Hint


Tokyo

TokyoisthecapitalofJapan,thecenteroftheGreaterTokyoArea,andthemostpopulousmetropolitanareaintheworld.

ShowAnswerResult:

TokyoTokyoisthecapitalofJapan,thecenteroftheGreaterTokyoArea,andthemostpopulousmetropolitanareaintheworld.

Exercise:Highlighttheword"FUN!"inthetextbelow.


Hint


HTMLisFUNtolearn!

ShowAnswerResult:

HTMLisFUNtolearn!

Hiring 50 Java ArchitectsEarn $100k USD & Work From Home! Apply now through Crossover.

Exercise:Applysubscriptformattingtothenumber"2"inthetextbelow.


Hint


H2Oisthescientifictermforwater.

ShowAnswerResult:

H2Oisthescientifictermforwater.

Senior Frontend DeveloperEarn $60k USD & Work From Home! Apply now through Crossover.

Exercise:Addalinethrough(strikeout)theletters"blue"inthetextbelow.


Hint


Myfavoritecolorisbluered.

ShowAnswerResult:

Myfavoritecolorisbluered.

Previous(html_formatting.asp) NextChapter(html_computercode_elements.asp)

PrintPage

HTMLQuotationandCitationElements

Quotation

HereisaquotefromWWF'swebsite:

For50years,WWFhasbeenprotectingthefutureofnature.Theworld'sleadingconservationorganization,WWFworksin100countriesandissupportedby1.2millionmembersintheUnitedStatesandcloseto5millionglobally.

HTMLforShortQuotationsTheHTMLelementdefinesashortquotation.

Browsersusuallyinsertquotationmarksaroundtheelement.

ExampleWWF'sgoalisto:Buildafuturewherepeopleliveinharmonywithnature.

TryitYourself(tryit.asp?filename=tryhtml_formatting_q)

HTMLforLongQuotationsTheHTMLelementdefinesaquotedsection.

Browsersusuallyindentelements.

ExampleHereisaquotefromWWF'swebsite:


TryitYourself(tryit.asp?filename=tryhtml_formatting_blockquote)

HTMLforAbbreviationsTheHTMLelementdefinesanabbreviationoranacronym.

Markingabbreviationscangiveusefulinformationtobrowsers,translationsystemsandsearchengines.

ExampleTheWHOwasfoundedin1948.

TryitYourself(tryit.asp?filename=tryhtml_formatting_abbr)

HTMLforContactInformationTheHTMLelementdefinescontactinformation(author/owner)ofadocumentorarticle.

Theelementisusuallydisplayedinitalic.Mostbrowserswilladdalinebreakbeforeandaftertheelement.

Example

WrittenbyJonDoe.Visitusat:Example.comBox564,DisneylandUSA

TryitYourself(tryit.asp?filename=tryhtml_formatting_address)

HTMLforWorkTitleTheHTMLelementdefinesthetitleofawork.

Browsersusuallydisplayelementsinitalic.

Example

TheScreambyEdwardMunch.Paintedin1893.

TryitYourself(tryit.asp?filename=tryhtml_formatting_cite)

HTMLforBiDirectionalOverrideTheHTMLelementdefinesbidirectionaloverride.

Theelementisusedtooverridethecurrenttextdirection:

ExampleThistextwillbewrittenfromrighttoleft

TryitYourself(tryit.asp?filename=tryhtml_formatting_bdo)

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_quotations1)

Exercise2(exercise.asp?filename=exercise_quotations2)



HTMLQuotationandCitationElementsTag Description

(/tags/tag_abbr.asp)

Definesanabbreviationoracronym

(/tags/tag_address.asp)

Definescontactinformationfortheauthor/ownerofadocument

(/tags/tag_bdo.asp) Definesthetextdirection

(/tags/tag_blockquote.asp)

Definesasectionthatisquotedfromanothersource

Previous(html_formatting.asp) NextChapter(html_computercode_elements.asp)

(/tags/tag_cite.asp) Definesthetitleofawork

(/tags/tag_q.asp) Definesashortinlinequotation


Exercise:UseanHTMLelementtoaddquotationmarksaroundtheletters"cool".


Hint


Iamsocool.

ShowAnswerResult:

Iamsocool.

Exercise:Thetextbelowshouldbeaquotedsection.AddtheproperHTMLelementtoit,andspecifythatitisquotedfromthefollowingURL:http://www.worldwildlife.org/who/index.html.


Hint



ShowAnswerResult:


Exercise:Makethetextbelowgorighttoleft.


Hint

CorrectCode:

Whatabeautifulday!


!yadlufituaebatahW

Exercise:Theletters"WHO"inthetextbelowisanabbreviationof"WorldHealthOrganization".UseanHTMLelementtoprovidethespecifiedabbreviationof"WHO".


Hint

CorrectCode:

TheWHOwasfoundedin1948.


TheWHOwasfoundedin1948.

Previous(html_quotation_elements.asp)NextChapter(html_comments.asp)

PrintPage

HTMLComputerCodeElements

ComputerCodevarperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"}

HTMLComputerCodeFormattingNormally,HTMLusesvariablelettersize,andvariableletterspacing.

Thisisnotwantedwhendisplayingexamplesofcomputercode.

The,,andelementsallsupportfixedlettersizeandspacing.

HTMLKeyboardFormattingTheHTMLelementdefineskeyboardinput:

ExampleToopenafile,select:

File|Open...

TryitYourself(tryit.asp?filename=tryhtml_formatting_kbd)

HTMLSampleFormattingTheHTMLelementdefinesacomputeroutput:

Example

demo.example.comlogin:Apr1209:10:17Linux2.6.10grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2breslogv6.189

TryitYourself(tryit.asp?filename=tryhtml_formatting_samp)

HTMLCodeFormattingTheHTMLelementdefinesprogrammingcode:

Example

varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"}

TryitYourself(tryit.asp?filename=tryhtml_formatting_code)

Theelementdoesnotpreserveextrawhitespaceandlinebreaks:

ExampleCodingExample:

varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"}

TryitYourself(tryit.asp?filename=tryhtml_formatting_codelines)

Tofixthis,youmustwrapthecodeinaelement:

ExampleCodingExample:

varperson={firstName:"John",lastName:"Doe",

age:50,eyeColor:"blue"}

TryitYourself(tryit.asp?filename=tryhtml_formatting_codepre)

HTMLVariableFormattingTheHTMLelementdefinesamathematicalvariable:

ExampleEinsteinwrote:

E=mc2

TryitYourself(tryit.asp?filename=tryhtml_formatting_var)

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_computercode_elements1)

Exercise2(exercise.asp?filename=exercise_computercode_elements2)

Exercise3(exercise.asp?filename=exercise_computercode_elements3)

HTMLComputerCodeElementsTag Description

(/tags/tag_code.asp)

Definesprogrammingcode

(/tags/tag_kbd.asp)

Defineskeyboardinput

(/tags/tag_samp.asp)

Definescomputeroutput

Definesamathematicalvariable

Previous(html_quotation_elements.asp)NextChapter(html_comments.asp)

(/tags/tag_var.asp)

(/tags/tag_pre.asp)

Definespreformattedtext


Previous(html_computercode_elements.asp)NextChapter(html_css.asp)

PrintPage

HTMLComments

CommenttagsareusedtoinsertcommentsinHTML.

HTMLCommentTagsYoucanaddcommentstoyourHTMLsourcebyusingthefollowingsyntax:

Note:Thereisanexclamationpoint(!)intheopeningtag,butnotintheclosingtag.

Commentsarenotdisplayedbythebrowser,buttheycanhelpdocumentyourHTML.

WithcommentsyoucanplacenotificationsandremindersinyourHTML:

Example

Thisisaparagraph.

TryitYourself(tryit.asp?filename=tryhtml_comment)

CommentsarealsogreatfordebuggingHTML,becauseyoucancommentoutHTMLlinesofcode,oneatatime,tosearchforerrors:

Example

>

TryitYourself(tryit.asp?filename=tryhtml_comment_out)

Previous(html_computercode_elements.asp)NextChapter(html_css.asp)

ConditionalCommentsYoumightstumbleuponconditionalcommentsinHTML:

....someHTMLhere....

ConditionalcommentsdefinesHTMLtagstobeexecutedbyInternetExploreronly.

SoftwareProgramTagsHTMLcommentstagscanalsobegeneratedbyvariousHTMLsoftwareprograms.

ForexampletagswrappedinsideHTMLcommentsbyFrontPageandExpressionWeb.

Asarule,letthesetagsstay,tohelpsupportthesoftwarethatcreatedthem.

TestYourselfwithExercises!Exercise1(exercise.asp?filename=exercise_comments1)

Exercise2(exercise.asp?filename=exercise_comments2)


01 HTML Tutorial02 Introduction to HTML03 HTML Editors04 HTML Basic05 HTML Elements06-0 HTML Attributes06-1 HTML Attributes06-2 HTML Attributes06-3 HTML Attributes06-4 HTML Attributes06-5 HTML Attributes07-0 HTML Headings07-1 HTML Headings07-2 HTML Headings07-3 HTML Headings08 HTML Paragraphs08-1 HTML Paragraphs08-2 HTML Paragraphs09 HTML Styles09-1 HTML Styles09-2 HTML Styles09-3 HTML Styles09-4 HTML Styles09-5 HTML Styles09-6 HTML Styles10 HTML Text Formatting10-1 HTML Text Formatting10-2 HTML Text Formatting10-3 HTML Text Formatting10-4 HTML Text Formatting10-5 HTML Text Formatting11 HTML Quotation Elements11-1 HTML Quotation Elements11-2 HTML Quotation Elements11-3 HTML Quotation Elements11-4 HTML Quotation Elements12 HTML Computer Code Elements13 HTML Comments

HTML5_Part1

Documents

Transcript of HTML5_Part1