Вы находитесь на странице: 1из 5

BasicHTMLCheatSheet

HTMLTags HTMLworksinaverysimple,verylogical,format.Itreadslikeyoudo,toptobottom,lefttoright.That's importanttoremember.HTMLiswrittenwithTEXT.Whatyouusetosetcertainsectionsapartas headings,subtitles,boldtext,underlinedtext,etcisaseriesoftags. TagFormat HTMLtagsareusedtomarkupHTMLelements HTMLtagsaresurroundedbythetwocharacters<and> Thesurroundingcharactersarecalledanglebrackets HTMLtagsnormallycomeinpairslike<b>and</b> Thefirsttaginapairisthestarttag,thesecondtagistheendtag Thetextbetweenthestartandendtagsistheelementcontent HTMLtagsarenotcasesensitive,<b>meansthesameas<B>

Alltagformatsarethesame.Theybeginwithalessthansign:<andendwithagreaterthansign:>. Always.Noexceptions.Whatgoesinsidethe<and>isthetag.LearningHTMLislearningthetagto performwhatevercommandyouwanttodo.Here'sanexample: Thetagforaparagraphis"p".Thatmakessense. Forexample: <p>Thisisaparagraph.</p> ThemajorityofHTMLtagsdorequirebothanopenandaclosetag(abeginandendtag).Mostarevery easytounderstandbecausethetagisobvious.Hereareafewandwhattheydototext: <strong>Thistextwillappearbold</strong> <em>Thistextwillappearinitalics</em> <u>Thistextwillappearunderlined<u> Followthisrule: Alwayssetthebeginningandendtagsatthesametime,alwaysplacingthemonthefarthestendofthe itembeingaffected.Inotherwords,thefirsttaginisthelasttagout.Forexample: <strong><em>Strongandemphasis</em></strong> The<strong>tagisthefirstonein,and</strong>isthelasttagout.

BasicHTMLCheatSheet

SingleTags TheopenandclosetagformatdominatesthemajorityoftheavailableHTMLtags,buttherearetags thatstandalone. Herearetwousefulones: <hr>Thiscommandgivesyoualineacrossthepage.(HRstandsforHorizontalReference.) The<hr>tagcanalsobemodifiedusingthefollowingasaguide: <hrcolor="#FF3300"width="50%"align="center">Whichwillgivethefollowingresults: <br>ThisBreaksthetextandstartsitagainonthenextline.Rememberyousavedyourdocumentas TEXTsowhereyouhitENTERtojumptothenextlinewasnotsaved.InanHTMLdocument,youneedto denotewhereyouwantevery Carriagereturnwitha<BR>. YoucanwriteyourHTMLbyhandwithalmostanyavailabletexteditor,includingnotepadthatcomesas astandardprogramwithWindows. Allyouneedtodoistypeinthecode,thensavethedocument,makingsuretoputan.htmlextensionor an.htmextensiontothefile(forinstance"mypage.html").OpenNotepadandtypeinthefollowing: <html> <head> <title>Titleofpage</title> </head> <body> <h1>Thislineisaheader</h1><br> <p>thislineisaparagraphoftext.</p> <b>Thistextisbold</b> </body> </html> Savethefileas"mypage.htm". StartyourInternetbrowser.Select"File>Open"(or"OpenPage")intheFilemenuofyourbrowser.A dialogboxwillappear.Select"Browse"(or"ChooseFile")andlocatetheHTMLfileyoujustcreated

BasicHTMLCheatSheet

"mypage.htm"selectitandclick"Open".Nowyoushouldseeanaddressinthedialogbox,forexample "C:MyDocumentsmypage.htm".ClickOK,andthebrowserwilldisplaythepage. TagAttributes Tagscanhaveattributes.AttributesprovideadditionalinformationtoanHTMLelement. ThefollowingtagdefinesanHTMLtable:<table>.Withanaddedborderattribute,youcantellthe browserthatthetableshouldhavenoborders:<tableborder="0"> Attributesalwayscomeinname/valuepairslikethis:name="value". AttributesarealwaysspecifiedinthestarttagofanHTMLelement. Attributesandattributevaluesarealsocaseinsensitive.However,theWorldWideWebConsortium (W3C)recommendslowercaseattributes/attributevaluesintheirHTML4recommendation,andXHTML demandslowercaseattributes/attributevalues. Thisisabasictablewithtwocolumnsandtworows: <tablewidth="200"border="1"cellpadding="3"cellspacing="0"> <tr> <tdbgcolor="#FF0000"><fontcolor="#0099FF">Cell1</font></td> <td>Cell2</td> </tr> <tr> <td>Cell3</td> <td>Cell4</td> </tr> </table> Thiswillproducethetablebelow. Cell1 Cell3 Cell2 Cell4

Notethetagattributes,width="200"andborder="1".Theseattributesdefinethetableswidth,200 pixels,andborderthickness,1px.Thecellpaddingistheamountofdistanceinpixelsfromthetexttothe insideofthecellborder.Thecellspacingistheamountofdistancebetweentheindividualcells,inthis case0pixels.Thebgcolor="#FF0000"isahexadecimalnumberthatdefinesthebackgroundcolorofthe cell,inthiscasered.The<fontcolor="#0099FF">setsthefontcolor,inthiscaseblue. The<tr>standsforTableRow,the<td>standsforTableData.

BasicHTMLCheatSheet

Headings Headingsaredefinedwiththe<h1>to<h6>tags.<h1>definesthelargestheading.<h6>definesthe smallestheading. <h1>Thisisaheading</h1> <h2>Thisisaheading</h2> <h3>Thisisaheading</h3> <h4>Thisisaheading</h4> <h5>Thisisaheading</h5> <h6>Thisisaheading</h6> CommentsinHTML ThecommenttagisusedtoinsertacommentintheHTMLsourcecode.Acommentwillbeignoredby thebrowser.Youcanusecommentstoexplainyourcode,whichcanhelpyouwhenyoueditthesource codeatalaterdate. <!Thisisacomment> Notethatyouneedanexclamationpointaftertheopeningbracket,butnotbeforetheclosingbracket. Thefollowingexampleshowstheuseofacommenttag. <html> <head> <title>Titleofpage</title> </head> <body> <!thisisacommentthatwillnotbeseen.ItiswhereIamputtingtheH1tag> <h1>Thislineisaheader</h1><br> <p>thislineisaparagraphoftext.</p> <b>Thistextisbold</b> </body> </html> Theabovecodewilllooklikethis:

BasicHTMLCheatSheet

Thislineisaheader Thislineisaparagraphoftext. Thistextisbold WhatisaHypertextlink? Ahypertextlinkisaspecialtagthatlinksonepagetoanotherpageorresource.Ifyouclickthelink,the browserjumpstothelink'sdestination. Therearetwopartstoalink:


Oneparttellsthehumanwhattodo. Theotherparttellsthebrowserwhattodo. Hereisanexample:

<ahref=http://www.tccd.edu>ClickheretogotoourHomePage</a>willproducealinkthatlooks likethis: ClickheretogotoourHomePage

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