Scribd Logo
Upload

Welcome to Scribd!

  • How To HTML

    Uploaded by

    Chan Kuan Foo
    51 views26 pages
    This booklet is intended fo or people, who want to get th he basic knowledge of k f "what goes o on behind the e a web page" this booklet is written in an easy to und derstand lang guage and illu ustrated with images. It explains the set tting up of a web Pag ge from scratch h.

    Original Description:

    Original Title

    How to HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This booklet is intended fo or people, who want to get th he basic knowledge of k f "what goes o on behind the e a web page" this booklet is written in an easy to und derstand lang guage and illu ustrated with images. It explains the set tting up of a web Pag ge from scratch h.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    51 views26 pages

    How To HTML

    Uploaded by

    Chan Kuan Foo
    This booklet is intended fo or people, who want to get th he basic knowledge of k f "what goes o on behind the e a web page" this booklet is written in an easy to und derstand lang guage and illu ustrated with images. It explains the set tting up of a web Pag ge from scratch h.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 26

    Fromww ww.basic ccompu uterskills s.com/ nkyoufo ordown nloadingthisfree eBookle et.

    Than
    Thisbookletis T sintendedfo orpeople,whowanttosta artoutwithth heirownweb bsiteorjustw wanttogetth hebasic knowledgeof k fwhatgoeso onbehindthe eawebpage. Thesedaysitisalmostexp T pectedthatev veryonehasa atleastapers sonalwebpag ge.Ifyouhav vebeenconsi idering havingawebsiteforperso h onaluseorfo oryoursmallb businessan ndneverreallyhadanyhtm mltraining,th hisjust mightbeallth m hetrainingyo oullneed. Thisbookletis T swritteninaneasytound derstandlang guageandillu ustratedwithimages.Itexplainstheset ttingup ofawebpage o efromscratch h.Youmayor rmaynotkno owsomeofit talready,soItriedtomak keiteasyfory youto findwhatyou f uneedtoknowbyusingth heIndex. Numerouswe N ebhostsouttherewillofferyousmal llprogramsfo orcreatinga clickbyclick keditedweb bsite,so youdontNEE y EDtoknowhowtoworkw withhtml.Itis smyexperien nce,however r,thatwheny youfirststartyour personalorsm p mallbusinesswebsite,you uwillwanttobeabletope ersonalizeyoursite,sothe esitegetsyou urideaof therightlookandfeel.Mo t ostofthesew webhostprog gramswillallo owyoutocho oosebetween ndifferenteff fectsor features,butitisalwaysni f icetoknowthebasicsofh howyouachie evesimplech hanges. Youarewelco Y ometomakecommentsorsuggestions stothisEbook.Justsendm meanotethroughthecon ntactform onmywebsit o te.Youcanfin nditHERE. If fyouwantto ostartasmall lbusinessontheweb,Iwo ouldliketore ecommendth heworldsbe estwebhost toyou. ThenameisS T SiteSell,andcallingitaweb bhostisreall lynottherigh htwordforit t! SiteSelloffers S shosting,sitebuildingmad deveryeasy,submissiont tothesearchenginesisinc cluded,acom mmunity ofpeopletoh o helpwithanythingyoufind ddifficult,lot tsandlotsofeasytofollo owtutorials.. ...andLOTSm moreall includedinthesubscription. Y YoucanreadmoreaboutitHERE

    Introduction

    Page1

    Tableof T fcontent t
    Pag ge1............... .............. Pag ge2............... .............. Pag ge34........................ Pag ge5............... ............. Pag ge6............... .............. Pag ge7............... .............. Pag ge89........................ Pag ge1011.................... Pag ge1213.................... Pag ge14............. ............. Pag ge15............. ............. Pag ge16............. ............. Pag ge17............. ............. Pag ge1819..................... Pag ge20............. ............. Pag ge2123.................... Pag ge24............. ............. TOC Buildinga apage Addingte ext Formattin ngtext Addinglin nebreaks Yourfirst twebpage! Aligningt text/content Formattin ngfont Fontcolo or Backgrou undcolor Insertingimage Insertingtextlink Creatingimagelinks Creatingalist CreatingaTable L&Foftable gtextaround danimage Wrapping

    Copy yright2007 www.basicc computerskil lls.com Thisd documentisp protectedund derthegener rallawofCop pyright. Perm missionisgran ntedtoprintt thisdocumen ntforeducatio onalpurposes sand/ortolin nktotheorig gin ofthisdocumentwithaclearr referencetoth heauthorandwebsiteitb belongsto.

    Page2 Thehtmlcodesarecalled"tags",andeverytaghasastartandanendingsymbolizedwiththe"<"andthe">" Alsocalled'startingatag"and"closingatag". Everywebsite/webpageconsistsofanotepadtextfilewiththeinformationforeverycommandeverything youseeonthepage: <html> <head> </head> <body> </body> </html> tellsthebrowser,thatherecomesawebsite/page insidetheheadtagyouwillfindthetagsforkeywordsoptimizationfortheseachengines,IFthe pageyou'relookingatiskeywordsoptimized,thatis.Youmayalsofindthepage"Title" Markstheendoftheheadtag tellsthebrowserthatherestartstheactualcontentofthepage tellsthebrowserthathereendstheactualcontentsofthepage tellsthebrowserthathereendsthewebsite/page

    WhatIjustmentionedisthebasicsbehindanywebpage,ifleftlikethisthepagewillbeawhitepageinthe browserwithnocontent,butjustapage. Textfileforthebasicwebpage Andthewebsitewilllooklikethis <html> <head> </head> <body> </body> </html>

    Page3

    Give eitatry...
    Createatextf C filewithNote epadwiththe etext: <html> < <head> < </head> < <body> < </body> < </html> < Savethetextfileastest.ht S tml(saveitto oyourdeskto op).... Doubleclickt D theicon...and dthefilewillo openwithyourbrowser..

    Cont tent
    Nowwewant N ttoactuallyw writesomethi ingonthatpa age... Wealreadykn W nowthatcontentgoesbet tweenthe<body>andthe e</body>tags s,sotrytowr riteasentenc ce betweenthes b setwotagsinthetextfile.. Openthetext O tfiletest.htm mlfilewithno otepad...(righ htclick....ope enwith....Not tepad) Savethefile,a S andopenitb bydoubleclic ckingitagain...

    Page4 Andnowyouactuallywroteapagewith A t htextonit!

    Page5

    Formattingthetext
    <b> </b> <i> </i> <u> </u> OpenyourtextfileagainTypeinthe sameline3timeslikethisbetween thebodytags.: StartBoldtext Endboldtext StartItalictext EndItalictext Startunderlinedtext Endunderlinedtext


    Linenumber1youwrapintheBOLD tags Linenumber2youwrapintheitalictags Linenumber3youwrapintheunderline tags Nowyourtextfileshouldlooklikethis:

    Page6 Nowsavethetextfileagainastext.htmlandopenitbydoubleclickingit.Itwillagainopeninyourbrowser, onlynowyouhaveformattedthetextandyourwebpagewilllooklikethis: Noticehowthe3linesyoutypedareNOT3lines,butactually1line. Thatisbecausewehaventactuallytoldthebrowsertoseethemas3lines.Inordertodothatweneedtoinsert anothertagthelinebreaktag: <br> Tellsthebrowserthathereisalinebreak ThistagdoesNOThaveanendtag,asalinebreakreallydoesnthaveastartandanend! Tryaddingitlikethistoyourtextfile

    Page7 Nowyoutoldthebrowsertoseetheselinesas3line N esinarow.

    Cong gratulation ns!Youha avecreated dyourfirstwebpage. t e


    Page8 NowImsureyouwouldliketobeabletodomorethanjustaddingrandomtext.. Readytogoontonextstep?

    Aligningyourtext/content
    <p> </p> <palign=right> <palign=left> <palign=center> Startofparagraph Endofparagraph DescribesthealignmentoftheparagraphasRIGHT DescribesthealignmentoftheparagraphasLEFT DescribesthealignmentoftheparagraphasCENTERED

    Giveitatry..
    OpenNotepadagainandcreateafile thatlookslikethis: Saveitlikebeforeastest.htlm (overwritetheoneyouhave)

    Page9 Doubleclickyourtext.htmlfileandnowyouhaveawebpagelikethis: D y m o i

    Page10

    Formattingfont
    WedontalwayswanttowriteinTimesNewRoman,whichistheusualdefaultfont,soweneedtobeableto changethat.However,youwillhavetochoosebetweenthewebsafefontsthefontsthatmostbrowserswill allowyoutouse. WebSafefontsinclude: Arial sansserif Verdana TimesNewRoman Courier CourierNew Impact Otherfontsthatworkonamajorityofbrowsers include: Chicago Helvetica MicrosoftInternetExplorer(nowabout75%ofthe market)alsoaccepts: Georgia Trebuchet <fontface=verdana> Startoftextwithaspecialfontface </font> Endoftextwithaspecialfontface Soletstrychangingthefontinour test.htmlfile:

    Page11 Openthetest O t.htmlbydoubleclicking,a andyoullsee etheresult: Trythesamewithyouroth T herlinesinth hetextfileanduseotherfonts. o Noticehowthefont tof einsidetheta aghas theline change ed...

    Page12

    Addingcolortofonts
    Nextstepistobeabletochangethecolorofthefont.. Colorsarechangedbyaddingthehexnumberforthecoloryouwantyourtexttohave. Herearesomeexamplesofhexnumbersforthemostusualcolors: Color Color Color Color Code Code Red #FF0000 White #FFFFFF Turquoise #00FFFF Light Grey #C0C0C0 Light Blue #0000FF Dark Grey #808080 Dark Blue #0000A0 Black #000000 Light Purple #FF0080 Orange #FF8040 Dark Purple #800080 Brown #804000 Yellow #FFFF00 Burgundy #800000 Pastel Green #00FF00 Forest Green #808000 Pink #FF00FF Grass Green #408080 <fontcolor=ff0000> Startsthecolorofthefont </font> Endsthecolorofthefont

    Page13

    Giveitatry..
    Writeyourtextwiththecodeslikethis: Andtheresult:

    Noticehowthefontof thelineinsidethetaghas changed...

    Page14

    Pagecolor/backgroundcolor
    Youcanchangethebackgroundcolorfortheentirepage... <bodybgcolor=hexnumber> Noendtagneeded,itappliestotheentirepage Letstrythecodeforthatinthetextfile:


    Openittheusualwayandtheresultswillbe...

    Page15

    Insertinganimage
    <imgsrc=nameofimage.jpg> </img> Startofimageshowsthesourceofthefiledisplayed Endofimage

    Toinsertanimage,youwillneedtopointtothesourceoftheimage,meaningthelocationwhereitisstored.In thiscasewepointtoanimagesourcelocatedonthiscomputer. Ifthiswebpagewastogoliveonthenet,thesourcewouldhavetobesomewhereonlineyouwouldneed touploadyourimagestoafolderatanonlinestorage. Letswritethecodeintothetextfile: Openthefiletheusualway.. andtheresultwouldbethis:

    Page16

    Insertingatextlink
    WewanttolinktoYahoofromourwebpage,sowewillhavetoreferrencetoaURL: <ahref=http://www.something.com> Startoflink/reference </a> Endoflink/reference Putthiscodeintoyour textfile: Andnowyouhaveatextwithalink..

    Page17

    Makeanimagelink
    Insteadofthetextyoucanalsomakeanimagelinktoanotherpage.. <ahref=urlofwebsite/page.com><imgscr=nameofimage.jpg> Referstowebpageandimagesource </a> Closesthetag Backtoyourtextfile...andwriteinthecodeandsavethefileastest.html nowyouhavealinkedimage. Noticehowthelinkshowsasa handandintheprocesslinewhen pointedatwiththemouse

    Page18

    Creatingalist
    Thereareseveraldifferentkindsoflsts,buttisbookletwillconcentrateonetwokindsoflists: Theunorderedlistalistswithbullets Theorderedlistanumberedliststartingwiththenumber1 Yourtextfileforalistwithbullets... Yourwebpage...withanunorderedlistwithbullets.

    Page19 Yourtextfilef Y foralistwithnumbers... Noticetheonlythingchangefrombefo N ore is sthestartandendtag... Saveandopenyourwebp S pagefileandy youllseethedifference..

    Page20

    Addingatable
    <tablecellpaddingxxcellspacingxxwidth=xxx> <td> <tr> </table> Sothecodefora2column1 rowtablewillbe: Startstableandgivesinfoondimensions Tabledata Tablerow Endoftable


    Andtheresultwilllooklikethis:

    Page21

    Lookandfeelofthetable
    YoucanalsochangetheL&Fofthetablebyaddingalittlemoreinfoinsidethattabletag.Youcanchangethe numberforcellspaceandpaddingandaddthehexnumberforthecolor,youwouldlike. bordercolor=hexnumber cellspadding=xxx cellspace=xx Toaddsomecolortothe borders, inthiscasered: Andhereistheresult: Inside<table>tag Inside<table>tag Inside<table>tag

    Page22 Ofcourseinsidethetabletagyoucanaddtheotherformatingsnippetslikebold,Italic,underlined,changethe font,insertimagesorcreatelinks. Inthisnextexamplewewanttocreateatableforsmallimages.. Youcanaddasmanyasyoulike. Remembertodeinethewidthof yourtablesuitableforthenumber ofimagesyouwanttoplaceinside thetable. Whenonerowisfilledupandyou wanttoaddanotherro,youuse the</tr>andstartthenextrow withanew<tr> Thiscodewouldresultinonerowoftwocolumns:

    Page23 Hereisanexampleofatablewithtworowsandthreecolumns: andonthewebpage...

    Page24 Wrappingtextaroundanimage Tomakethetextwrapnicelyaroundanimage,youllneedtouseadivtag.Thedivtagdefinesa division/sectionofthedocument. <div> Insidethedivtagtheinformationofthatsectionwillhavetobeplaced. Heresanexample: Inthisexamplethe imagefloatstothe rigthofthesection. Youcanchangethatto leftorcenteras well. Thewebpageofthisexamplelookslikethis:

    Page25

    Basic chtmlove erview Startoftag


    <html> < <head> <

    Wh hatthetag gdoes..
    tel llsthebrowse er,thatherestartsandendsa web bsite/page ins sidethehead dtagyouwillf findthetagsfor keyw wordsoptimi izationforthe esearchengines,IF thepageyou'rel lookingatisk keywordsopt timized, that tis.Youmayalsofindthepage"Title" tel llsthebrowse erthatheres startsandend dsthe actu ualcontentof fthepage Star rtandendsBoldtext Star rtandendsIt talictext Star rtandendsunderlinedtex xt Tells sthebrowserthathereisalinebreak noend tag! ! Star rtandendofparagraph Describesthealignmentofth heparagraphas RIGHTendwith h... Describesthealignmentofth heparagraphasLEFT endwith... Describesthealignmentofth heparagraphas CEN NTEREDend dwith... Star rtandendoftextwithasp pecialfontface Star rtandendoffontcolor Star rtandendofimageshow wsthesource eofthe filedisplayed Star rtandendoflinktag Unnumberedlis st Num mberedlist Star rtseveryelem mentofthelis stinsidethe< <ol>and <ul> >tags. Star rtstableands shouldhavet thesnippetsf for dimensionsinsid dethe<> Defi inesthebord derofthetableplacedin nsidethe <tab ble> Defi inesthecellp paddingplacedinsidethe<table > Defi inesthecells spaceplacedinsidethe< <table> Defi inescoloroft tableborderplacedinsid dethe <tab ble> Defi inesadivision n/sectionofa adocument

    Endoftag
    </ /html> </ /head>

    <body> < <b> < <i> < <u> < <br> < <p> < <palign=righ < ht> <palign=left < t> <palign=cen < nter> <fontface=n < nameoffont> <fontcolor=hexnumber < > <imgsrc=nam < meofimage.jpg> <ahref=URL < L> <ul> < <ol> < <li> < <table> < border=xx b cellpadding= c xxx cellspace=xx c xx Bordercolor= B =hexnumber r <div> <

    </ /body> </ /b> </ /i> </ /u> </ /p> </ /p> </ /p> </ /p> </ /font> </ /font> </ /img> </ /a> </ /ul> </ /ol> </ /table> Noend Noend Noend Noend </ /div>

    You might also like