How to Code a Website (Using HTML & CSS) | websitesetup.org

How to Code a Website · Learn the basics of HTML · Understand HTML document structure · Get to know CSS selectors · Put a CSS stylesheet together ... KarolKrolStaffWriterTwitterFacebookLastupdated:Dec28,20208Comments WanttolearnhowtocreateawebsitewithHTMLandCSS?You’reintherightplace.Inthisguide,weshowyouallthestepstogetfromablankscreentoaworkingwebsitethat’soptimizedandquitegood-lookingatthesametime.Butfirst,whatisHTMLandCSS?Well,youcouldjustlookupbothtermsinWikipedia,butthosedefinitionsaren’tveryreader-friendly.Let’ssimplifythingsabit:HTML(HypertextMarkupLanguage)definesthestructureandcontentsofawebpage–wherethingsgo,howtheyarelaidout,andwhat’sonthepageCSS(CascadingStyleSheets)definesthestyling/presentationofawebpageandtheelementsonitYoucan’treallyhaveonewithouttheother–thetwoworktogethertomakeupthefinalwebpage,itsdesign,andthecontentthat’sonit.Note;whenwesay“awebpage,”whatwemeanisasingleHTMLdocument–asinglepagethat’spartofyourwebsite.Whereas,“awebsite”isthecompletething–yourwholesitewithallitsindividualwebpages.TableofcontentsLearnthebasicsofHTMLUnderstandHTMLdocumentstructureGettoknowCSSselectorsPutaCSSstylesheettogetherGetBootstrapPickadesignCustomizeyourwebsitewithHTMLandCSSAddcontentandimagesFine-tunecolorsandfontsCreateadditionalpagesIfyouthinkthisistoocomplicated,werecommendeithercreatingawebsiteusingWordPressorchoosingoneofthewebsitebuilders.BeforeYouStart,GatherYourResources:So,thefirstthingyouneedevenbeforecreatingawebsitewithHTMLandCSSisawebserver(hosting).Don’tworry,though;youdon’thavetobuyyourownmachine.Manywebhostingcompanieswillsellyouasimplehostingserviceontheirmachines.Justgooglefor“webhosting”andpicksomethingthatisn’ttooexpensiveorcheckourwebhostingreviews.Withtheserversorted,thenextthingyouneedisadomainname.Thedomainnameiswhatthewebsiteisidentifiedontheweb.Forexample,thissite’sdomainnameiswebsitesetup.org.Whenyouhavebothadomainnameandaserver,youcanconnectthetwotogether.Tohavethissortedoutwithnopainonyourend,werecommendsigningupwithacompanylikeBluehost.Theywillhandleallthesetupforyou.Meaningthattheywill:(a)setupahostingaccountforyou,(b)registeradomainnameonyourbehalf,(c)configureeverythingtoworktogether,and(d)giveyouaccesstoaneasy-to-usedashboard.Goaheadandsignupwithanyofthewebhostingservices, we’llwait.Whenyou’rebackandhaveyourwebserverconfiguredandreadytogo,scrolltothenextstep.P.S.IfyoujustwanttoexperimentwithanHTMLwebsiteonyourcomputer,anddon’tintendtomakeitpublic,usealocalwebserversoftware.TheonewerecommendandliketouseiscalledXAMPP.IthasversionsforbothMacandPC,andit’seasytouse.Here’saguideonhowtoinstallitonyourcomputer.1.LearntheBasicsofHTMLIfyouareanewtoHTML,youmayfindthisHTMLforBeginners(UltimateGuide)useful.ThemainelementofanHTMLstructureisanHTMLtag.Atag,forexample,lookslikethis:SOMETHINGHere,we’redealingwithatag.Thisonewillboldapieceoftextthat’sbetweentheopeningtag()andtheclosingtag().Inthiscase,thatpieceoftextisSOMETHING.Butthereareothertags,justtonameafew:...willitalicizethetextbetweentheopeningandclosingtags...willunderlineit

...

isaparagraphoftext

...

isthemainheaderonthepageApartfromthosesimpletags,therearealsomorecomplextags.Forexample,ifyouwanttobuildalistlikethefollowing:Item1Item2Item3…youcandothatwiththefollowingHTMLcode:

• Item1
• Item2
• Item3

Or,ifyouwanttoaddalinktoanotherpage,likethisone:Thisisalinktoourhomepage…youcandothatwiththispieceofcode:ThisisalinktomyhomepageReadthistogetthefulllistofHTMLtags.It’llbecomeusefulasyou’recreatingawebsitewithHTMLandCSS.2.UnderstandHTMLDocumentStructureThinkofyourHTMLpageasifitwasbuiltofLegos.Youputdifferentbricksontopofoneanothertoendupwithagivenbiggerstructure.ButinsteadofLegobricks,yougetHTMLtags…Here’sthesimplestHTMLdocumentstructure:

Hello,world!

Myfirstwebpage.

Youcantakethecodeabove,copyandpasteittoanewfile,savethedocumentasindex.html,andit’sgoingtobeaperfectlyvalidHTMLpage.Let’sexplaintheindividualpartsofthiscode:–theinitialdeclarationofthedocument–anotherdeclaration;saysthatwhat’stocomenextisanHTMLdocumentwritteninEnglish–marksthestartoftheheadsection;theheadsectioniswhereallthebasicparametersofthepagego;mostofthosearenotgoingtobeshownonthescreen;theyjustdefinewhat’sgoingonunderthehood–defineswhatcharactersetisusedtowritethedocument;noneedtospendtoomuchtimeonthis;justusethisdeclarationasis–thetitleofthepage;thisiswhatpeoplewillseeinthetitlebaroftheirbrowsers,e.g.:–marksthestartofthebodysection;thisiswhereallthecontentofthepagegoes;it’sthemainpartofanHTMLdocument;letusemphasizethis,thissectioniswhereyou’regoingtobeincludingallthecontentthat’smeanttoappearonthepage

Hello,world!

–themainheaderonthepage

Myfirstwebpage.

–asimpleparagraphoftext–theclosingtagofthewholeHTMLdocumentAnimportantnotehere.WorkingonanHTMLfileinabasictextapporacomplextextprocessorlikeMSWordisnotagoodexperience.Tomakethingseasyonyourself,installaHTMLeditorcalledSublimeText.IthasversionsforbothMacandPC,anditisfree.Whyisitbetter?Amongotherthings,itwillcolorizethesyntaxofanHTMLfile.Meaning,it’llvisuallydistinguishyourHTMLtagsfromtextcontent,tagparameters,andothervalues.Basically,it’llallbecomereadable.Here’swhatoursimpleHTMLstructurelookslikeinSublimeText:Okay,backontopic.Youcantakethatnewindex.htmlfileofyours,copyittowherethemaindirectoryofyourwebserveris,andthenseethatpagebynavigatingtoitthroughawebbrowser.Don’tgettooexcited,though;thispagewillberatherugly(seebelow).Okay,sothepageisugly,howtomakeitnotso?3.GettoKnowCSSSelectorsJustlikeHTMLhasitstags,CSShasselectors.Selectorsdescribehowagivenelementshouldbehaveappearance-wise. Here’sanexampleofaCSSselector:p{ font-size:18px; } ThisselectorindicatesthatallHTML

tagswithinthedocumentwillhaveafontsizeof18px.However,amorepracticalwayofusingCSSselectorsisnottorestrictalltagsofagiventypetoacertainstyling,butrathercreatedifferent“classes”andassignthemtotagsonebyone.Forexample,aclassselectorinCSSlookslikethis:.normal-text{ font-size:18px; } Noticethedot(.)beforethenameoftheclass(normal-text).Withthe“normal-text”classdefined,wecannowassignthatclasstothosespecificHTMLtagsthatwewanttomake18pxinsize.Forexample:Thistextisgoingtobe18px.

Let’stakeonemoreminutetoexplainalltheelementsofthatpieceofCSScodeabove:.normal-text–classdefinition;everythingafterthenameoftheclassandbetweentheopeningandclosingbrackets{}defineswhattheelementsassignedtothisclasswilllooklikefont-size–anexampleCSSproperty18px–avalueassignedtothepropertyThere’satonofCSSpropertiesapartfromtheabovefont-size.Here’sthecompletelistifyou’recurious.4.PutTogetheraCSSStylesheetAnHTMLdocumentisverystructural–everyelementhasitsplace,andtheorderofelementsiscrucialforthefinalconstructionandappearanceofthewebpageinquestion.ACSSdocumentisalotlessso.CSSdocumentsareoftenreferredtoasstylesheets.Basically,aCSSstylesheetisalistofalltheclassdefinitionsthatarebeingusedinthecorrespondingHTMLdocument.Theorderoftheclassdefinitionsisnotthatcrucialmostofthetime(atleastforsimpledesigns).ThewayyouputaCSSstylesheettogetherisbydefiningeachclassonebyone,andthentestingiftheoutcomeinyourpagedesigniswhatyouwanted.Thissoundsliketediouswork,anditis.Butwe’llmakethingseasieronyou,andnotforceyoutolearnHTMLandCSSdesignbyhand.Insteadofteachingyoueverythingfromscratch,we’lltakealivingorganismanddissectitselements.ThisiswhereathingcalledBootstrapcomesintoplay.5.Download/InstallBootstrapBootstrapisanopen-sourcetoolkitforcreatingawebsitewithHTMLandCSS.InplainEnglish,BootstraptakescareofthebasicstructureofanHTMLdocumentandCSSstylesheetforyou.Itdeliversaframeworkthatmakessurethatthemainscaffoldingofyourwebpageisreadyandoptimizedforfurtherdevelopment.Basically,Bootstrapletsyounotstartfromscratch,andinsteadgorightintothefunpart.Withit,youdon’thavetoworkontheoftenboringearlystagesofcreatingawebsitewithHTMLandCSS.Therearetwopathsyoucantake:Option(a):learnBootstrap–gototheBootstraphomepage,downloadthemainBootstrappackageandstartbuildingontopofit.Option(b):takeashortcut–getastarterpackforBootstrapwithagood-lookingdesignandademowebpagealreadybuilt.Option(a)mighthavesomelearningcurveatthebeginning,butit’snotinanywaytheworsewaytoapproachcreatingawebsitewithHTMLandCSS.OnceyoumasterthecoreBootstrapstructure,itmightbeeasierforyoutobuildnewpagesandmakethemlookexactlyasyouwantthem.TheBootstrapdocumentationisagreatplacetogetstartedwiththispath.We’regoingtogowithOption(b)forthisguide.We’redoingthisforacoupleofreasons,chiefofthem:Startingwithaready-madestructuresavesalotofpainintryingtofigureoutthebasicnecessitiesofanHTMLdocument.Thisletsyoufocusontheinterestingstuff–likelayingoutcontentandmakingitlookgood.Inshort,learningthingsthiswaywillgiveyouabetter-lookingresultquicker,whichweguessiswhatyouwant.6.PickaDesignWhenyou’recreatingawebsitewithHTMLandCSS,youarefreetouseanyBootstraptemplateyoulike.Theyshouldallworksimilarlyenough.However,forthisguide,we’regoingtouseoneofthetemplatesbyStartBootstrap.Theyhaveaniceselectionoffreetemplatesthatareoptimized,worktrouble-free,andarealsoverywelldesigned.Thethemewe’regoingtouseiscalledCreative.Thefinaleffectwe’regoingforwilllooksomethinglikethis:Tobeginwith,theCreativetemplate,clickontheFreeDownloadbuttonthat’sontheright(onthispage)andsavethezippackagetoyourdesktop.Unzipthepackageandmoveitscontentstothemaindirectoryofyourlocalwebserveroryourwebhostingaccount.Nowopenthatlocationthroughyourwebbrowser.You’llseethestockversionofthetemplate:It’salreadyquitegood-looking,butnowit’stimetolearnhowtouseHTMLandCSStomakeitintoexactlywhatyouwantittobe.7.CustomizeYourWebsiteWithHTMLandCSSLet’sworkonthehomepageofthedesignfirst.Thisisgoingtoshowushowtoreplacethegraphics,texts,andtuneeverythingupingeneral.We’vetalkedabouttheheadsectionofanHTMLdocumentbrieflyabove.Let’shaveamorein-depthlookintoithere.Whenyouopentheindex.htmlfileofyourBootstrapsiteinSublimeText,you’llseeaheadsectionlikethis(weremovedallthenon-crucialthingsfromthiscodeforclarity*): *Apartfromtheabove,therewasalsocodetoloadGoogleFonts,FontAwesomeiconsandalightboxmodulefortheimagesdisplayedonthepage.Mostofthedeclarationsherewealreadyknow,butthereareacoupleofnewones:Firstoff,everythingbetweenthebracketsisanHTMLcomment.Itdoesn’tshowuponthefinalpage.–it’soneofBootstrap’sowndeclarationtags.Itdefinesthesizeofthewebsite’sviewport.–thislineloadstheCSSstylesheetoftheCreativetemplateanditalsohousesthedefaultstylesheetofBootstrap.Let’smodifythatlastdeclaration–thelineloadingtheCSS–tomakeiteasiertoworkwithlateron.Changethatlineto: Thisisjustasmalldifference–it’llloadthenon-shortenedversionofthesameCSSsheet.Thisversionisjusteasiertomodify.Nowscrolldowntotheverybottomoftheindex.htmlfile.You’llseethefollowinglinesrightbeforetheclosingbodytag: They’reresponsibleforloadingJavaScript filesthathandlesomeofthemorevisualinteractionsofthedesign.Forinstance,whenyouclickontheAboutlinkinthetopmenu,you’llbetakensmoothlytotheaboutblockonthesamepage–this,amongotherthings,isdoneviaJavaScript.Wedon’tneedtotroubleourselvesunderstandingthiscoderightnow.Let’sleavethisforanothertime.Instead,let’sworkonaddingourowncontenttothepage:8.AddContentandImagesThefirstthingyou’llwanttodoischangethetitleofthepage.1.ChangetheTitleFindthetitletagintheheadsectionandreplacethetextbetweenthetagstosomethingofyourown:2.CustomizetheHeroSectionTheherosectioniswhatwecallthisblock:Itwouldbecooltohaveourowncontentinsideofit.Tomodifythisblock,gobacktoyourindex.htmlfileandfindthissection: ... ... FindOutMore Thiswholeblockofcodecontrolswhat’sintheherosection.Therearesomenewtagshere:

–thisisatagdefiningthatthiswholesectionistheheaderofthepage;thistaghasacoupleofbrothersandsistersintheformofthe

tagand

Thethingthatwe’remissinghereisthemaincontentsection.Tobuildit,we’regoingtoreusetheaboutsection.Goaheadandmakeacopyoftheaboutsection.Thisone: ... ...

Nowchangethefirsttwolinestothis: Sincewedon’tneedthe

headerthereandthe

---

element,let’sjustremovethem.Theonlythingleftinsidethiswholeblockisgoingtobeaparagraphoftext.Likeso:

Aparagraphoftext.

Whenyousavethefileandnavigatetoitviayourbrowser,you’llseethatyoubasicallyhavetwoverysimilarblocksonebelowtheother,withthesamecolorbackground:It’dbebettertohaveawhitebackgroundinthemaincontentsection.Tochangeit,theonlythingweneedtodoisremovethebg-primaryclassfromthemain

tag.Inotherwords,makethetagintothis: That’sbetter:Let’saddsomedummyparagraphstothepagetopopulateitsomemore,plusmaybeasub-head:

Loremipsumdolorsitamet,consecteturadipiscingelit...

Proinfermentum,felistemporpharetralobortis,magnaquamhendreritdolor...

Subhead

Loremipsumdolorsitamet,consecteturadipiscingelit...

Here’swhatthislookslikeonthepage:Ifyoudon’tlikethetexttobecenteredthenjustremovethetext-centerclassfromoneofthe

tags.Ifyouwanttoputsomemoreflairontheseblocksoftext,youcancreatenewCSSclasses(likebefore)andassignthemtotheparagraphsintheblock.Or,youcanhaveapeekintothecurrentstylesheetandseewhatclassesarealreadythereforthispurpose.Herearetheonesweassignedtothe

and

tags:Loremipsumdolorsitamet... Proinfermentum,felistemporpharetralobortis,magnaquamhendreritdolor... Subhead

Andhere’stheeffect:Onemorethingwe’regoingtodohereisaddanimagesomewhereonthepage.Here’swhatanexampleimagetaginHTMLlookslike: Fairlysimple,right?Theonlyparameterthereisthepathtotheimagefile.Tokeepthingsnicelyorganized,youcanputyourimageintheimgdirectoryagain(justlikeyoudidwiththatbackgroundawhileago).Insuchacase,theimagetagwillbe: Thatbeingsaid,theimagetaginthisparticularconfigurationisfairlylimited.Tomakeitabitmorerefined,let’sassignsomeBootstrapclassestoit.Particularly: Thesetwoclasseswillgiveyourimageroundedcornersandwillalsomakesurethatthesizeoftheimagedoesn’texceedthesizeoftheblockwhereitsits.Youcannowaddataglikethissomewhereinthemaincontentsectionofyouraboutpage.Forexample,here:Loremipsumdolorsitamet... Proinfermentum,felistemporpharetralobortis,magnaquamhendreritdolor... Subhead Andhere’sthefinaleffectonthepage:Here’souraboutpageinallitsglory:3.LinktotheNewPageWiththenewpagedone,let’snowlinkitfromthehomepage(theindex.htmlfile).Naturally,thebestplacetoaddthislinkisinthenavigationmenu(below).Inparticular,lookforthisline:About We’regoingtochangeittothis:About Thisissomethingwehaven’ttalkedaboutyet,butthetagisalinktaginHTML.Usingit,youcanlinktoanywebpagebyprovidingtheaddressofthatpageinthehrefparameter.Thetextofthelink–theclickablepartofthelink–willbethetextbetweentheopeningandclosingtags.Whenyourefreshthehomepagenow,you’llseeyournewlinkpointingtotheaboutpage.FurtherReadingAtthisstage,you’vebasicallybuiltyourselfasimplewebsiteconsistingoftwopages–ahomepageandanaboutpage.Whatyoushoulddonowisrinseandrepeatbycreatingnewpages,tuningthemup,addingcontenttothem,andthenlinkingeverythingfromthenavigationmenu.Otherthingsworthdoingasyou’regoingthroughthesestepsisfurtherlearningHTMLandCSSprinciples,goingthroughthechecklist,andalsolearningBootstrapanditsstructuresandclasses.Someresourcesforthat:HTML5cheatsheetCSScheatsheetJavascriptcheatsheetHTMLtutorialBootstraptutorialBootstrapcheatsheetMasteringBootstrap,highlylikelythebestpathcurrentlyavailabletobuildingoptimizedandbeautifulwebsiteswithHTMLandCSS.IfyouhaveanyquestionsaboutcreatingawebsitewithHTMLandCSS,don’thesitatetosubmittheminthecomments.Relatedcontent:HowtoMakeaWebsiteHowtoStartanOnlineStoreHowtoBuildanOnlinePortfolioShouldYouCreateaBlogoraWebsite10BestWebsiteBuilders(Reviewed)HowtoMakeaForumWebsiteMorecategories:WebsiteBuildingWebsiteBuildersWebsiteHosting';ClicktoLoadCommentsClosesearchform✕