Teach Yourself HTML 2 PDF

3/1/2016
TeachYourselfHTML3.2in24Hours
Hour2
TagsThatEveryHTMLPageMustHave
Figure2.1.
Figure2.2.
ParagraphsandLineBreaks
Figure2.3.
Figure2.4.
Figure2.5.
Figure2.6.
Headings
Figure2.7.
Figure2.8.
PeekingatOtherPeoplesPages
Summary
Q&A
Quiz
Questions
Answers
Activities
Hour2
CreatingaWebPage
ThischapterwillguideyouthroughthecreationofyourfirstWebpage.Thebestwaytofollowalong
withthischapteristoactuallycreateaWebpageasyouread,usingthesamplepagedevelopedherein
thebookasamodel.Ifyou'realittlenervousaboutjumpingrightin,youmightwanttoreadthischapter
oncetogetthegeneralidea,andthengothroughitagainatyourcomputerwhileyouworkonyourown
page.
AsmentionedinChapter1,"WelcometoHTML,"youcanuseanytexteditororwordprocessorto
createHTMLWebpages.Thoughyou'lleventuallywanttouseaneditorspeciallydesignedforHTML,
forthischapterIrecommendyouusetheeditororwordprocessoryou'remostfamiliarwith.Thatway
youwon'thavetolearnanewsoftwareprogramatthesametimeyou'restartingtolearnHTML.Evena
simpletexteditorlikeWindowsNotepadwillworkjustfine.ToDo:Beforeyoubeginworkingwiththis
chapter,youshouldstartwithsometextthatyouwanttoputonaWebpage.
1.Find(orwrite)afewparagraphsoftextaboutyourself,yourcompany,ortheintendedsubjectof
yourWebpages.
2.Besuretosaveitasplain,standardASCIItext.Notepadandmostsimpletexteditorsalways
savefilesasplaintext,butyoumayneedtochooseitasanoptionifyou'reusingawordprocessor.
Formostwordprocessors,you'llseeacheckboxlabeledplaintextorASCIItextwhenyouselect
File|SaveAs....
https://akmb7t5w56jcfgwf.onion.cab/books/sorted/Macmillan/Teach%20Yourself%20HTML%203.2%20in%2024%20Hours/html/ch02.htm
1/8
3/1/2016
3.Asyougothroughthischapter,youwilladdHTMLcommands(calledtags)tothetextfile,
makingitintoaWebpage.Youcandothiswiththesametexteditororwordprocessoryouused
totypethetextinthefirstplace.
4.AlwaysgivefilescontainingHTMLtagsanameendingin.htmor.htmlwhenyousavethem.
TagsThatEveryHTMLPageMustHave
Figure2.1showsthetextyouwouldtypeandsavetocreatethesimplestpossibleHTMLpage.Ifyou
openedthisfilewithaWebbrowsersuchasNetscapeNavigator,youwouldseethepageinFigure2.2.
InFigure2.1,asineveryHTMLpage,thewordsstartingwith<andendingwith>areactuallycoded
commands.ThesecodedcommandsarecalledHTMLtagsbecausethey"tag"piecesoftextandtellthe
Webbrowserwhatkindoftextitis.ThisallowstheWebbrowsertodisplaythetextappropriately.
NewTerm:AnHTMLtagisacodedcommandusedtoindicatehowpartofaWebpageshouldbe
displayed.
JustAMinute:InFigure2.1,andmostotherfiguresinthisbook,HTMLtagsareprinted
darkerthantherestofthetextsoyoucaneasilyspotthem.WhenyoutypeyourownHTML
files,allthetextwillbethesamecolor(unlessyouareusingaspecialHTMLediting
programthatusescolortohighlighttags,asHTMLEDdoes).
Figure2.1.EveryWebpageyoucreatemustincludethe<HTML>,<HEAD>,<TITLE>,and<BODY>tags.
Figure2.2.WhenyouviewtheWebpageinFigure2.1withaWebbrowser,onlytheactualtitleand
bodytextshowup.
MostHTMLtagshavetwoparts:anopeningtag,toindicatewhereapieceoftextbegins,andaclosing
tag,toshowwherethepieceoftextends.Closingtagsstartwitha/(forwardslash)justafterthe<
symbol.
Forexample,the<BODY>taginFigure2.1tellstheWebbrowserwheretheactualbodytextofthepage
begins,and</BODY>indicateswhereitends.Everythingbetweenthe<BODY>and</BODY>tagswillappear
inthemaindisplayareaoftheWebbrowserwindow,whereyousee"Helloworld!"inFigure2.2.
NetscapeNavigatordisplaysanytextbetween<TITLE>and</TITLE>attheverytopoftheNetscape
window,asinFigure2.2.(SomeolderWebbrowsersdisplaythetitleinitsownspeciallittlebox
instead.)ThetitletextwillalsobeusedtoidentifythepageontheNetscapeNavigatorBookmarksmenu,
ortheMicrosoftInternetExplorerFavoritesmenu,wheneversomeoneselectsAddBookmarkorAddto
Favorites.
Youwillusethe<BODY>and<TITLE>tagsineveryHTMLpageyoucreatebecauseeveryWebpageneeds
atitleandsomebodytext.YouwillalsousetheothertwotagsshowninFigure2.1,<HTML>and<HEAD>.
Putting<HTML>attheverybeginningofadocumentsimplyindicatesthatthisisaWebpage.The</HTML>
attheendindicatesthattheWebpageisover.
Don'taskmetoexplainwhyyouhavetoput<HEAD>infrontofthe<TITLE>tagand</HEAD>afterthe
</TITLE>tag.Youjustdo.(Chapter22,"HTMLTagsforSiteManagement,"revealssomeother
2/8
3/1/2016
advancedheaderinformationthatcangobetween<HEAD>and</HEAD>,butnoneofitisnecessaryfor
mostWebpages.)
TimeSaver:Youmayfinditconvenienttocreateandsavea"barebones"pagewithjust
theopeningandclosing<HTML>,<HEAD>,<TITLE>,and<BODY>tags,similartothedocumentin
Figure2.1.Youcanthenopenthatdocumentasastartingpointwheneveryouwanttomake
anewWebpageandsaveyourselffromtypingoutallthose"obligatory"tagseverytime.
(Thiswon'tbenecessaryifyouuseadedicatedHTMLeditingprogram,whichwillusually
putthesetagsinautomaticallywhenyoubeginanewpage.)
ParagraphsandLineBreaks
WhenaWebbrowserdisplaysHTMLpages,itpaysnoattentiontolineendingsorthenumberofspaces
betweenwords.Forexample,thetwoversesinFigure2.3arebothdisplayedexactlythesameby
NetscapeNavigatorinFigure2.4,withasinglespacebetweenallwords.Whenthetextreachestheedge
oftheNetscapewindow,itautomaticallywrapsdowntothenextline,nomatterwherethelinebreaks
wereintheoriginalHTMLfile.
Figure2.3.InHTML,itmakesnodifferencehowmanyspacesorlinesyouusewhentypingyourtext.
Tocontrolwherelineandparagraphbreaksactuallyappear,youmustuseHTMLtags.The<BR>tag
forcesalinebreak,andthe<P>tagcreatesaparagraphbreak.Theonlypracticaldifferencebetweenthese
twotagsisthat<P>insertsanextrablanklinebetweenparagraphs,and<BR>doesnot.
Figure2.4.ThetwoversesinFigure2.3appearidenticalinaWebbrowser.
Youmighthavealsonoticedthe<HR>taginFigure2.3,whichcausesahorizontal"rule"linetoappearin
Figure2.4.Insertingahorizontalrulewiththe<HR>tagalsocausesalinebreak,evenifyoudon'tinclude
a<BR>tagalongwithit.Foralittleextrablankspaceaboveorbelowahorizontalrule,youcanputa<P>
tagbeforeorafterthe<HR>tag.
Neitherthe<BR>linebreaktagnorthe<HR>horizontalruletagneedsaclosing</BR>or</HR>tag.
TimeSaver:The<P>paragraphtagdoesn'trequireaclosing</P>tagattheendofthe
paragraphbecauseaparagraphobviouslyendswheneverthenextonebegins.Youmay
occasionallyseeWebpageswhichdousethe</P>tagtocloseparagraphs,butthisisnever
necessary.
Figure2.5showsthe<BR>and<P>tagsbeingusedtoseparatethelinesandversesofanurseryrhymeand
toseparatetwoparagraphsoftextcommentingontherhyme.Figure2.6istheresultingWebpage.
Figure2.5.Usethe<BR>tagforlinebreaks,andthe<P>tagtoskipalinebetweenparagraphs.
Figure2.6.The<BR>and<P>tagsinFigure2.5becomelineandparagraphbreaksonthisWebpage.
ToDo:TakeapassageoftextyouhaveonhandandtryyourhandatformattingitasproperHTML.
3/8
3/1/2016
1.Add<HTML><HEAD><TITLE>MyTitle</TITLE></HEAD><BODY>tothebeginningofthetext(using
yourowntitleforyourpageInsteadofMyTitle).
2.Add</BODY></HTML>totheveryendofthetext.
3.Add<P>tagsbetweenparagraphs,and<BR>tagsanywhereyouwantsinglespacedlinebreaks.
4.Use<HR>todrawhorizontalrulesseparatingmajorsectionsoftext,orwhereveryou'dliketosee
alineacrossthepage.
5.Savethefileasmypage.htm(usingyourownfilenameinsteadofmypage).Ifyouareusingaword
processor,besuretoalwayssaveHTMLfilesinplaintextorASCIIformat.
6.OpenthefilewithNetscapeNavigatororMicrosoftInternetExplorertoseeyourWebpage!
7.Ifsomethingdoesn'tlookright,gobacktothetexteditororwordprocessortomakecorrections
andsavethefileagain.YouwillthenneedtoclickonReload(inNetscapeNavigator)orRefresh
(inMicrosoftInternetExplorer)toseethechangesyoumadetotheWebpage.
Headings
WhenyoubrowsethroughWebpagesontheInternet,youcan'thelpbutnoticethatmostofthemhavea
headingatthetopwhichappearslargerandbolderthantherestofthetext.Figure2.8isasimpleWeb
page,containingexamplesofthethreelargestheadingsizesthatyoucanmakewithHTML.
AsyoucanseeinFigure2.7,theHTMLtocreateheadingscouldn'tbesimpler.Forabiglevel1heading,
putan<H1>tagatthebeginningandan</H1>tagattheend.Foraslightlysmallerlevel2heading,use
<H2>and</H2>instead,andforalittlelevel3heading,use<H3>and</H3>.
Theoretically,youcanalsouse<H4>,<H5>,and<H6>tomakeprogressivelylessimportantheadings,but
nobodyusestheseverymuchafterall,what'sthepointofaheadingifit'snotbigandbold?Besides,
mostWebbrowsersdon'tshowanoticeabledifferencebetweentheseandthealreadysmall<H3>
headingsanyway.
JustAMinute:OnmanyWebpagesthesedays,graphicalimagesofornatelyrendered
lettersandlogosareoftenusedinplaceoftheordinarytextheadingsdiscussedinthis
chapter.You'lldiscoverhowtocreategraphicsandputthemonyourpagesinPartIII,"Web
PageGraphics."However,oldfashionedtextheadingsarestillwidelyused,andhavetwo
majoradvantagesovergraphicsheadings:nTextheadingstransferanddisplayalmost
instantly,nomatterhowfastorslowthereader'sconnectiontotheInternetis.nText
headingscanbeseeninallWebbrowsersandHTMLcompatiblesoftware,evenoldDOS
andUNIXprogramsthatdon'tshowgraphics.
Figure2.7.Anytextbetweenthe<H1>and</H1>tagswillappearasalargeheading.<H2>and<H3>make
smallerheadings.
Figure2.8.The<H1>,<H2>,and<H3>tagsinFigure2.7makethethreeprogressivelysmallerheadings
shownhere.
4/8
3/1/2016
It'simportanttorememberthedifferencebetweenatitleandaheading.Thesetwowordsareoften
interchangeableindaytodayEnglish,butwhenyou'retalkingHTML,<TITLE>givestheentirepagean
identifyingnamewhichisn'tdisplayedonthepageitself.Theheadingtags,ontheotherhand,cause
sometextonthepagetobedisplayedwithvisualemphasis.Therecanonlybeone<TITLE>perpage,but
youcanhaveasmany<H1>,<H2>,and<H3>headingsasyouwant,inanyorderthatsuitsyourfancy.
You'lllearntotakecompletecontrolovertheappearanceoftextonyourWebpagesinPartII,"Web
PageText."Yetheadingsprovidetheeasiestandmostpopularwaytodrawextraattentiontosome
importanttext.
PeekingatOtherPeoplesPages
Ifyou'veeventakenaquickpeekattheWorldWideWeb,youknowthatthesimpletextpagesdescribed
inthischapterareonlythetipoftheHTMLiceberg.Nowthatyouknowthebasics,youmaysurprise
yourselfwithhowmuchoftherestyoucanpickupjustbylookingatotherpeople'spagesonthe
Internet.AsmentionedinChapter1,youcanseetheHTMLforanypagebyselectingView|Document
SourceinNetscapeNavigator,orView|SourceinMicrosoftInternetExplorer.
Don'tworryifyouaren'tyetabletodecipherwhatsomeHTMLtagsdo,orexactlyhowtousethem
yourself.You'llfindoutallthatinthenextfewchapters.However,sneakingapreviewnowwillshow
youthetagsyoudoknowinaction,andgiveyouatasteofwhatyou'llsoonbeabletodowithyourWeb
pages.
CoffeeBreak:TheHTMLgoodiesatmy24HourHTMLCafarespeciallydesignedtobe
intuitiveandeasytounderstand.
TheHTMLusedinthemainentrancepageathttp://www.mcp.com/sams/books/2358maylookabit
intimidatingnow,butyou'llseehowIdevelopedthissophisticatedsitestepbystepasyouworkthrough
eachchapterofthisbook.
Youcanuncoverthehumblebeginningsofthe24HourHTMLCafat
http://www.mcp.com/sams/books/2358/cafe2.htmwhichusesonlythetagsintroducedinthischapter.
Summary
Inthischapter,you'vebeenintroducedtothemostbasicandimportantHTMLtags.Byaddingthese
codedcommandstoanyplaintextdocument,youcanquicklytransformitintoabonafideWebpage.
ThefirststepincreatingaWebpageistoputafewobligatoryHTMLtagsatthebeginningandend,
includingatitleforthepage.Youthenmarkwhereparagraphsandlinesend,andaddhorizontalrules
andheadingsifyouwant.Table2.1summarizesallthetagsintroducedinthischapter.
Table2.1.HTMLtagscoveredinChapter2.
Tag
<HTML>...</HTML>
<HEAD>...</HEAD>
Function
EnclosestheentireHTMLdocument.
EnclosestheheadoftheHTMLdocument.
<TITLE>...
</TITLE>
Indicatesthetitleofthedocument.Usedwithin<HEAD>.
<BODY>...</BODY>
EnclosesthebodyoftheHTMLdocument.
5/8
3/1/2016
<P>...</P>
<BR>
<HR>
<H1>...</H1>
<H2>...</H2>
<H3>...</H3>
<H4>...</H4>
<H5>...</H5>
<H6>...</H6>
Aparagraph.Theclosingtag(</P>)isoptional.
Alinebreak.
Ahorizontalruleline.
Afirstlevelheading.
Asecondlevelheading.
Athirdlevelheading.
Afourthlevelheading(seldomused).
Afifthlevelheading(seldomused).
Asixthlevelheading(seldomused).
Q&A
QOkay,soI'vegotthisHTMLWebpageonmycomputernow.HowdoIgetitonthe
Internetsoeveryoneelsecanseeit?
AChapter4,"PublishingYourHTMLPages,"explainshowtoputyourpagesontheInternetas
wellashowtogetthemreadyforpublishingonalocalnetworkorCDROM.
QIwant"Fred'sFreshFish"toappearbothatthetopofmypageandonpeople'sbookmark
(orfavorites)listswhentheybookmarkmypage.HowcanIgetittoappearbothplaces?
AMakeaheadingatthetopofyourpagewiththesametextasthetitle,likethis:
<HTML><HEAD><TITLE>Fred'sFreshFish</TITLE></HEAD>
<BODY><H1>Fred'sFreshFish</H1>
...therestofthepagegoeshere...
</BODY></HTML>
QI'veseenWebpagesontheInternetthatdon'thave<HTML>tagsatthebeginning.I've
alsoseenpageswithsomeotherweirdtagsinfrontofthe<HTML>tag.Yousaidpages
alwayshavetostartwith<HTML>.What'sthedeal?
AManyWebbrowserswillforgiveyouifyouforgettoputinthe<HTML>tag,anddisplaythepage
correctlyanyway.Yetit'saverygoodideatoincludeitbecausesomesoftwaredoesneeditto
identifythepageasvalidHTML.
Infact,theofficialstandardgoesonestepfurtherandrecommendsthatyouputatagatthe
beginningthatlookslikethis:<!DOCTYPEHTMLPUBLIC"//IETF//DTDHTML//EN//3.2">toindicate
thatyourdocumentconformstotheHTML3.2standard.NosoftwarethatI'veeverheardofpays
anyattentiontothistag,however.Itisnotlikelytoberequiredinthenearfuture,sincesofewof
themillionsofWebpagesintheworldincludeit.
QuizQuestions
1.WhatfourtagsarerequiredineveryHTMLpage?
6/8
3/1/2016
2.Inserttheappropriatelinebreakandparagraphbreaktagstoformatthefollowingpoemswitha
blanklinebetweenthem:
Goodnight,Godblessyou,Gotobedandundressyou.
Goodnight,sweetrepose,Halfthebedandalltheclothes.
3.WritetheHTMLforthefollowingtoappearoneaftertheother:
Asmallheadingwiththewords,"WeareProudtoPresent"
Ahorizontalruleacrossthepage
Alargeheadingwiththeoneword"Orbit"
Amediumsizedheadingwiththewords,"TheGeometricJuggler"
Anotherhorizontalrule
4.WriteacompleteHTMLWebpagewiththetitle"FooBarHomePage"andaheadingatthetop
whichreads"HappyHourattheFooBar,"followedbythewords,"Comeondown!"inregular
type.
Answers
1.<HTML>,<HEAD>,<TITLE>,and<BODY>(alongwiththeirclosingtags,</HTML>,</HEAD>,</TITLE>,
and</BODY>).
2.Goodnight,Godblessyou,<BR>
Gotobedandundressyou.
<P>
Goodnight,sweetrepose,<BR>
Halfthebedandalltheclothes.
3.<H3>WeareProudtoPresent</H3>
<HR><H1>Orbit</H1>
<H2>TheGeometricJuggler</H2><HR>
4.<HTML><HEAD><TITLE>FooBarHomePage</TITLE></HEAD>
<BODY><H1>HappyHourattheFooBar</H1>
Comeondown!
</B></BODY></HTML>
Activities
EvenifyourmaingoalinreadingthisbookistocreateWebpagesforyourbusiness,youmight
wanttomakeapersonalWebpagejustforpractice.Typeafewparagraphstointroduceyourselfto
theworld,andusetheHTMLtagsyou'velearnedinthischaptertomakethemintoaWebpage.
You'llbeusingtheHTMLtagscoveredinthischaptersooftenthatyou'llwanttocommitthemto
7/8
3/1/2016
memory.ThebestwaytodothatistotakesometimenowandcreateseveralWebpagesbefore
yougoon.Youcantrycreatingsomebasicpageswithseriousinformationyouwanttopostonthe
Internet,orjustuseyourimaginationandmakesomefun"joke"pages.
8/8

Teach Yourself HTML 2 PDF

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Teach Yourself HTML 2 PDF

Загружено:

Авторское право:

Доступные форматы

3/1/2016

Вам также может понравиться