外文翻译--HTML Tutorial - Preface 原文.doc
HTMLTutorial-PrefaceHtmlisoneoftheeasiestlanguagestolearn.ThistutorialwillexplainhowtowriteHtmlwebpages,whatHtmlis,andhowtoprograminHtml.HtmlstandsforHyperTextMarkupLaguage.TheonlyuseforHtmlisforwritingwebpages.Awebpageisreallyaprogram,onlyaverysimpleone.WhatiseasyaboutHTMListhat:1.Thereisnocompiling,and2.Itissimplecodingonly.Therearenofunctions,loops."Bugs"arealmostimpossibletomakeandeasytofix.TouseHtml,youcanofcourseuseanHtmlwizardprogramwhichwoulddefeatthewholepurposeofthistutorial,oryoucanuseasimpletexteditor,savethetextasan.htmfile(or.htmlforaMacintosh),andviewitwithyourbrowser,suchasNetscapeorMicrosoftInternetExplorer.ThistutorialisbeingwritteninordinaryNotepad,soyoudontneedanythingspecial.Ifyoudonotalreadyhaveawebbrowser,youcandownload:Netscapeatwww.netscape.comMSIEatwww.microsoft.comHTMLTutorial-Chapter1Tags,andtheSkeletonLayoutBeforeanything,HTMLiswrittenintags.Tagsarelikethecommandwordsthatmakeupthelanguage.Atagiswrittenlikethis:<tag>.Anexampletagwouldbe<bold>,<html>,<title>,<hr>andothers.Theentirecodeismadeupmostlyoftags,tagstellthewebpagewhattodo.Sometimesatagstartssomething,likeforinstance<bold>willmakeallthetextafteritturnbold.Or<title>willmakeanythingafteritbecomethetitle.Butinsomeinstances,likesectiontags,youwillneedtoendatag.Forexample,sayyouusea<bold>tagbeforeatext.Thatsallfineandwell,buteverythingaftertheboldtagwillbecomebold.Theentirepage.Youmayonlywanttomakeoneworldbold.Thereforyoumust"end"atagwhichwillstopitsactions.Tostopatagyouusethisformat:<tag>Forexample:<bold>Thisisbold!</bold>Thisisnt!Youlllearnmoreaboutothertagsinthechapterstocome.OnegoodthingaboutHTMListhatitalwaysfollowsonelayout.ThefollowinglayoutisanentireHtmlwebpage:<html><head><title>ThisistheTitle!</title></head><body>WelcometomyWeb-Page!</body></html>Thisisthebasiccode,calledaskeletonlayout.YoushouldalwaysstartyourHtmlcodeinthatway.Nowletsexplainsomeofthetags.Thetagsyousawintheexampleareusedonlyonceusually.Hereisjustanexplanationofthelayouttags.Eachtagintheskeletonlayoutstartsorendsasection.AsectioninHtmldeclareswhenacertainpartoftheHtmlcodeisbeginning.<html>-StartstheHtmlsection.(Beginsthepage)<head>-StartstheHeadersection.<title>ThisistheTitle!</title>-Starts(andends)thetitlesection.<body>-StartstheBodysection.(Mainpartofpage)</body>-EndstheBodysection.</html>-Endsthepage.TheHtmlsectioncontainstheentirecode.TheHeadersectioncontainstheTitlesection,andsomeotherstuff.Thetitlesectioncontainsthetextthatgoesinthetitlebaratthetopofthebrowserwindow,like"WelcometoMyPage!-Netscape."Thebodysectionisthemainpartofthepagethatcontainsallthetextthatappearsinthepage.HTMLTutorial-Chapter2BodyAttributesTheBodytaghasmoretoitthanjust<body>.The<body>tagalsocontrolsthecolorofthepagetext,thebackgroundofthepage,andothers.Anattributetoanytag(inthisinstance,itwillbethe<body>tag)isanextrakeywordthatcanbesetinsidethetagthatallowsforcertainthingstobeset.Tosetabodyattribute,likethebackgroundofthepage,yousimplyincludetheoptioninthe<body>tagandwhatitissetto.Example:<bodyBGCOLOR="blue"text="black"link="yellow"alink="green"vlink="white">Thereareafewbodyattributesthatyouwilllearnfornow.Background,text,link,andactivelink.TheBackgroundiscontrolledwitheitherBGCOLOR="color"orBACKGROUND="http:/www.examplesite.com/background.gif"IftheBackgroundyouwantisasolidcolor,likeblack,blue,white,red,etc,youusetheBGCOLORoption.BGCOLORacceptsBGCOLOR="blue"(acolorname),orBGCOLOR="Hexadecimalnumber."AHexnumbercandomorevariantcolors,suchasgold,turquoise,navyblue,andmostothercolors,whilejusttypingacolornamelikeblueorwhiteislimitedtosimplecolors.Afewsimplecolorsareblue,white,black,green,yellow,orange.Mostlyfirst,secondary,andtertiarycolors.TheBACKGROUNDoptionisforifyouwanttouseapictureasabackground.YoumustusetheURLofthepicture,like:<bodyBACKGROUND="http:/www.testsite.com/puppy.jpg">GraphicsinanywebpagemustbeineitherGIF(.gif)orJPEG(.jpg)format.Thenextoptionistext.Textisthecolorofallnormaltextinthepage.Itfollowsthisformat:text="color"ortext="hexnumber."ThisfollowsthesameroutineasinBackground;acolornamewillacceptsimplecolors,ahexnumbercandomoreexoticcolors.Thenextoptionislink.Thisisthecolorofalllinksonthepage.Itsformatisthesameasthetextoption.Thenextisalink.Thisisthecolorofalinkthatisbeingclickedon.Forexample,ifthereisalinktowww.microsoft.comandyouclickonit,untilyouletgo,thatlinkwillturntothealinkcolor.Itfollowsthesameformatasthetextoption.Thelastoptionyouwilllearnisvlink.Vlinksetsthecolorofalllinksthathavebeenvisitedinthepast.Itfollowsthesameformatasthetextoption.NOTE:IfyouleaveoutanoptionintheBodytag,itwillbesettoadefaultcolor.HTMLTutorial-Chapter3TextTagsNowthatyouvelearnedbodyoptions,youcannowlearnhowtoaddtexttothebodysection,andhowtomakeitlookFuNkY!Before,youlearnedalittleabouttagsandhowtheywork.Tagsareimportanttotextbecausetheycanchangethewaytextlooks,andacts.Letstakealookatanexampletolearnafewbasictags.<html><head><title>TextExample</title></head><bodyBGCOLOR="black"text="white"><p>Thisismyfirst,ordinaryparagraph.<p><b>Thisismysecond,boldparagraph.</b><p><i>Thisismythird,italicsparagraph.</i><p><u>Thisismyfourth,underlinedparagraph.</u><p><blink>Thisismyfifth,BlInKiNgparagraph.</blink><center>Thisismylast,centeredparagraph.</center></body></html>The<p>tagstandsforparagraph.Itstartstextonanewline.Without<p>,allthetextwouldbeinonelineandwrappedaround,anditwouldlookprettymessedup.Inthesecondparagraph,therewasa<b>(or<bold>forfull)tag.Boldmakesalltextinsideofitbecomebolder.Asyoulearnedbefore,sometagsneedtobeended.Thisisoneofthem.Ifyoudidntendaboldtag,everythingafterthe<b>wouldbebold,eventextthatyoudidntwanttobebold.Toendatag(stopwhatatagisgoing,usethisformat:</tagname>.Thus,toendaboldtag,youuse</bold>(orforshort,</b>).<i>standsforItalics.Anythingafter<i>andbefore</i>willbecomeitalic,orslanted.<u>standsforunderlined.Anythingafter<u>andbefore<u>isunderlined.<center>setsthealignmentfortext.Youcouldalsocentertextbyusing<palign="center">CenteredText</p>,but<center>isaloteasier.Centermakestextgointhecenterofthescreen.Youcanalsouse:<palign="left">Thissetsalignmenttotheleft.</p><palign="right">Thissetsalignmenttotherightofthescreen.</p>NOTE:Ifyouuse<p>option,liketosetalignment,inordertostopitseffectyoumustendit,byusing</p>.<blink>makestextblinkrepeatedly.Becarefulnottooverdotheblinktag,asitcantendtogetveryannoying.Hereareafewmoretexttagswithbriefexplanations.Youcanexperimentwiththem:<tt>-Teletype<pre>-Predefined.HTMLusuallyignoresextraspaceswhichcanbebadfordocumentswhichdependonindependentformatting.<big>-Makestextgenerallybig.<small>-Hm.<s>-Strikethrough,makesahorizontallinethroughthecenteroftheselection.<su>-Superscript.<font>-Controlsfont,andcanalsomaketextbiggerthanpossiblewithjust<h1>.I.e.<fontface="Fontname">or<fontsize="7"><fontcolor="color"><fontcolor="#hexcol">.<fontface="">meanstheactualfont,likeCourier.Itisalsopossibletocombinetagsontext.Forexample:<i><b><u>Thisisslanted,bold,andunderlined!</i></b></u>Nowyouwilllearnhowtochangethesizeoftext.Itfollowsthesameformatof<bold>or<italics>;<tag>Modifiedtext</endtag>,andtheytoocanbecombinedwith<bold><italics>orwhateverasacombination:<html><head><title>TextSizes</title></head><bodyBGCOLOR="black"text="white"><p><h1>ThisisHUGE!</h1><p><h2>Thisisbig.</h2><p><h3>Thisisalittlelarge.</h3><p><h4>Thisisnormal.</h3><p><h5>Thisisquitesmall.</h5><p><h6>ThisisTINY.</h6>Tomodifytextsize,asyousaw,thetagis<h(1-6)>Text</h(1-6).Textsizesrangefrom1to6,1huge,6tiny.Thesetagscanbecombinedwith<bold>or<italic>orwhathaveyou,sothatyoucouldgetahuge,bold,italic,andunderlinedtext.Afewtagsdontmodifytext,buttheydoputsomethingintothebody,suchasaline.Toputaline,whichcannicelyseperateasectiononyourpage,likeifyouhadatableofcontentsandastoryparagraph.Toputinaline,use<hr>anywhereyouwant.Example: