ÿWPC ~b"Žø=Ÿ¹J‹}‚]Îï‹3ý&­î%vÍ4Ö´ËìD;lrcÛPc`p’T®&šÕjvCREoWyNpé+3¸ožÏ^4ý $¯Íͧu’ÃÄð¦ãtXq$öÒ>³¡¶§*Œ×Übl"¶ÓŠjïi—ëo2,Ý(¨+)î?§û±1¡•ªBû,Rª«×:íŸXº«dþ?¬«”ân¿ƒ¾¸u6/Þ ‰n_`åŸa5ÅäR ò Ü>˜”êÓǨBµæW¯7âdâ¹ÂßN0¿Lx (Žù¦™¿Æk—%|«94çó|Y³´Å±å ñº9ãÇóPËÚß|z*pùéB«CíüÝÕ肋;ðô>м+4À–È…Rëd›Â‚šܳl°(’95‰YâÕèB 1'µ~¬S׶dz9©(w¾è?Ë}(¸¾Ý\é¸XŽCݲ£ª­Ö«¹ìù÷l~›NIÛP;iÈ°ñ)GjÈUÜeÖ½¿æqr±‚ïý<£mVãü¾½:[ÄP/5Çèo'>+ïövÍ=ñÚÏ3[—Š¥féÐ15"‡e𖸯n½„ؘ”qM/‰Ržg#uo³›F`[Ür¨ OAÒTš÷ÞpUN€ %ÎÔ 0(Ôwü4#|x(  Z ‹6Times New Roman RegularX($¡¡ Rur_G8ÔŒÝ ƒ!ÝÝ  ÝÓ  ÓÌ€€€€€€€€€€€€€€€€€€€€€€€€€€A€BEGINNER'S€GUIDE€TO€HTMLÌ€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€Ì€€€Ì€€€Ì€€€This€is€a€primer€for€producing€documents€in€HTML,€the€markup€languageÌ€€€used€by€the€World€Wide€Web.Ì€€€€€*€Acronym€ExpansionÌ€€€€€*€What€This€Primer€Doesn't€CoverÌ€€€€€*€Creating€HTML€DocumentsÌ€€€€€€€€€€+€The€Minimal€HTML€DocumentÌ€€€€€€€€€€+€Basic€Markup€TagsÌ€€€€€€€€€€€€€€€o€TitlesÌ€€€€€€€€€€€€€€€o€HeadingsÌ€€€€€€€€€€€€€€€o€ParagraphsÌ€€€€€€€€€€+€Linking€to€Other€DocumentsÌ€€€€€€€€€€€€€€€o€Relative€Links€Versus€Absolute€PathnamesÌ€€€€€€€€€€€€€€€o€Uniform€Resource€LocatorÌ€€€€€€€€€€€€€€€o€Anchors€to€Specific€Sections€in€Other€DocumentsÌ€€€€€€€€€€€€€€€o€Anchors€to€Specific€Sections€Within€the€Current€DocumentÌ€€€€€*€Additional€Markup€TagsÌ€€€€€€€€€€+€ListsÌ€€€€€€€€€€€€€€€o€Unnumbered€ListsÌ€€€€€€€€€€€€€€€o€Numbered€ListsÌ€€€€€€€€€€€€€€€o€Definition€ListsÌ€€€€€€€€€€€€€€€o€Nested€ListsÌ€€€€€€€€€€+€Preformatted€TextÌ€€€€€€€€€€+€Extended€QuotesÌ€€€€€€€€€€+€AddressesÌ€€€€€*€Character€FormattingÌ€€€€€€€€€€+€Physical€Versus€Logical:€Use€Logical€Tags€When€PossibleÌ€€€€€€€€€€€€€€€o€Logical€StylesÌ€€€€€€€€€€€€€€€o€Physical€StylesÌ€€€€€€€€€€+€Using€Character€TagsÌ€€€€€€€€€€+€Special€CharactersÌ€€€€€€€€€€€€€€€o€Escape€SequencesÌ€€€€€€€€€€€€€€€o€Forced€Line€BreaksÌ€€€€€€€€€€€€€€€o€Horizontal€RulesÌ€€€€€*€In-line€ImagesÌ€€€€€€€€€€+€Alternate€Text€for€Viewers€That€Can't€Display€ImagesÌ€€€€€*€External€Images,€Sounds,€and€AnimationsÌ€€€€€*€TroubleshootingÌ€€€€€€€€€€+€Avoid€Overlapping€TagsÌ€€€€€€€€€€+€Embed€Anchors€and€Character€Tags,€But€Not€Anything€ElseÌ€€€€€€€€€€+€Check€Your€LinksÐ l-¼(, Ѐ€€€€*€A€Longer€ExampleÌ€€€€€*€For€More€InformationÌ€€€€€€€€€€+€Fill-out€FormsÌ€€€€€€€€€€+€Style€GuidesÌ€€€€€€€€€€+€Other€Introductory€DocumentsÌ€€€€€€€€€€+€Additional€ReferencesÌ€€€€€€€€€€€€ÌAcronym€ExpansionÌÌ€€€WWW€€World€Wide€Web€(or€Web,€for€short).Ì€€€SGMLÌ€€€€€€€€€€Standard€Generalized€Markup€Language€--€this€is€a€standard€forÌ€€€€€€€€€€describing€markup€languages.Ì€€€DTDÌ€€€€€€€€€€Document€Type€Definition€--€this€is€a€specific€markup€language,Ì€€€€€€€€€€written€using€SGML.Ì€€€HTMLÌ€€€€€€€€€€HyperText€Markup€Language€--€HTML€is€a€SGML€DTD.€In€practicalÌ€€€€€€€€€€terms,€HTML€is€a€collection€of€styles€(indicated€by€markupÌ€€€€€€€€€€tags)€that€define€the€various€components€of€a€World€Wide€WebÌ€€€€€€€€€€document.Ì€€€€€€€€€€ÌWhat€This€Primer€Doesn't€CoverÌÌ€€€Ì€€€Ì€€€This€primer€assumes€that€you€have:Ì€€€€€*€at€least€a€passing€knowledge€of€how€to€use€NCSA€Mosaic€or€someÌ€€€€€€€other€Web€browserÌ€€€€€*€a€general€understanding€of€how€Web€servers€and€client€browsersÌ€€€€€€€workÌ€€€€€*€access€to€a€Web€server€for€which€you€would€like€to€produce€HTMLÌ€€€€€€€documents,€or€that€you€wish€to€produce€HTML€documents€for€personalÌ€€€€€€€useÌ€€€€€€€ÌCreating€HTML€DocumentsÌÌ€€€Ì€€€Ì€€€HTML€documents€are€in€plain€(also€known€as€ASCII)€text€format€and€canÌ€€€be€created€using€any€text€editor€(e.g.,€Emacs€or€vi€on€UNIX€machines).Ì€€€A€couple€of€Web€browsers€(tkWWW€for€X€Window€System€machines€andÌ€€€CERN's€Web€browser€for€NeXT€computers)€include€rudimentary€HTMLÌ€€€editors€in€a€WYSIWYG€environment.€There€are€also€some€WYSIWIG€editorsÌ€€€available€now€(e.g.€HotMetal€for€Sun€Sparcstations,€HTML€Edit€forÌ€€€Macintoshes).€You€may€wish€to€try€one€of€them€first€before€delvingÌ€€€into€the€details€of€HTML.€Ì€€€Ì€€€€€You€can€preview€a€document€in€progress€with€NCSA€Mosaic€(and€someÌ€€€€€other€Web€browsers).€Open€it€with€the€Open€Local€commandÌ€€€€€under€the€File€menu.€Ì€€€€€Ì€€€€€After€you€edit€the€source€HTML€file,€save€the€changes.€Return€toÌ€€€€€NCSA€Mosaic€and€Reload€the€document.€The€changes€areÌ€€€€€reflected€in€the€on-screen€display.Ì€€€€€Ì€€THE€MINIMAL€HTML€DOCUMENTÌ€€Ì€€€Ì€€€Ì€€€Here€is€a€bare-bones€example€of€HTML:ÌÌ€€€€The€simplest€HTML€exampleÌ€€€€

This€is€a€level-one€heading

Ì€€€€Welcome€to€the€world€of€HTML.Ì€€€€This€is€one€paragraph.

Ì€€€€And€this€is€a€second.

ÌÌ€€€Click€here€to€see€the€formatted€version€of€the€example.Ì€€€Ì€€€HTML€uses€markup€tags€to€tell€the€Web€browser€how€to€display€the€text.Ì€€€The€above€example€uses:Ì€€€€€*€the€€tag€(and€corresponding€€tag),€which€specifiesÌ€€€€€€€the€title€of€the€documentÌ€€€€€*€the€

€header€tag€(and€corresponding€

)Ì€€€€€*€the€

€paragraph-separator€tagÌ€€€€€€€Ì€€€Ì€€€Ì€€€HTML€tags€consist€of€a€left€angle€bracket€(<),€(a€``less€than''€symbolÌ€€€to€mathematicians),€followed€by€name€of€the€tag€and€closed€by€a€rightÌ€€€angular€bracket€(>).€Tags€are€usually€paired,€e.g.€

€and€

.€TheÌ€€€ending€tag€looks€just€like€the€starting€tag€except€a€slash€(/)Ì€€€precedes€the€text€within€the€brackets.€In€the€example,€

€tells€theÌ€€€Web€browser€to€start€formatting€a€level-one€heading;€

€tells€theÌ€€€browser€that€the€heading€is€complete.Ì€€€Ì€€€The€primary€exception€to€the€pairing€rule€is€the€

€tag.€There€is€noÌ€€€such€thing€as€

.Ì€€€Ì€€€NOTE:€HTML€is€not€case€sensitive.€€is€equivalent€toÌ€€€<TITLE>€or€<TiTlE>.€Ì€€€Ì€€€Not€all€tags€are€supported€by€all€World€Wide€Web€browsers.€If€aÌ€€€browser€does€not€support€a€tag,€it€just€ignores€it.Ì€€€Ì€€BASIC€MARKUP€TAGSÌ€€Ì€€€€TitleÌ€€€€Ì€€€Ì€€€Ì€€€Every€HTML€document€should€have€a€title.€A€title€is€generallyÌ€€€displayed€separately€from€the€document€and€is€used€primarily€forÌ€€€document€identification€in€other€contexts€(e.g.,€a€WAIS€search).Ì€€€Choose€about€half€a€dozen€words€that€describe€the€document's€purpose.€Ì€€€Ì€€€€€In€the€X€Window€System€and€Microsoft€Windows€versions€of€NCSAÌ€€€€€Mosaic,€the€Document€Title€field€is€at€the€top€of€the€screenÌ€€€€€just€below€the€pulldown€menus.€In€NCSA€Mosaic€for€Macintosh,€textÌ€€€€€tagged€as€<TITLE>€appears€as€the€window€title.Ì€€€€€Ì€€€€HeadingsÌ€€€€Ì€€€Ì€€€Ì€€€HTML€has€six€levels€of€headings,€numbered€1€through€6,€with€1€beingÌ€€€the€most€prominent.€Headings€are€displayed€in€larger€and/or€bolderÌ€€€fonts€than€normal€body€text.€The€first€heading€in€each€document€shouldÌ€€€be€tagged€<H1>.€The€syntax€of€the€heading€tag€is:Ì€€€Ì€€€<Hy>Text€of€heading€</Hy€>Ì€€€Ì€€€where€y€is€a€number€between€1€and€6€specifying€the€level€of€theÌ€€€heading.Ì€€€Ì€€€For€example,€the€coding€for€the€``Headings''€section€heading€above€isÌÌ€€€€<H3>Headings</H3>ÌÌ€€€€€€Title€versus€first€headingÌ€€€€€€Ì€€€Ì€€€Ì€€€In€many€documents,€the€first€heading€is€identical€to€the€title.€ForÌ€€€multipart€documents,€the€text€of€the€first€heading€should€be€suitableÌ€€€for€a€reader€who€is€already€browsing€related€information€(e.g.,€aÌ€€€chapter€title),€while€the€title€tag€should€identify€the€document€in€aÌ€€€wider€context€(e.g.,€include€both€the€book€title€and€the€chapterÌ€€€title,€although€this€can€sometimes€become€overly€long).Ì€€€Ì€€€€ParagraphsÌ€€€€Ì€€€Ì€€€Ì€€€Unlike€documents€in€most€word€processors,€carriage€returns€in€HTMLÌ€€€files€aren't€significant.€Word€wrapping€can€occur€at€any€point€in€yourÌ€€€source€file,€and€multiple€spaces€are€collapsed€into€a€single€space.Ì€€€(There€are€couple€of€exceptions;€space€following€a€<P>€or€<Hy>€tag,Ì€€€for€example,€is€ignored.)€Notice€that€in€the€bare-bones€example,€theÌ€€€first€paragraph€is€coded€asÌÌ€€€€Welcome€to€HTML.Ì€€€€This€is€the€first€paragraph.€<P>ÌÌ€€€Ì€€€Ì€€€In€the€source€file,€there€is€a€line€break€between€the€sentences.€A€WebÌ€€€browser€ignores€this€line€break€and€starts€a€new€paragraph€only€whenÌ€€€it€reaches€a€<P>€tag.Ì€€€Ì€€€Important:€You€must€separate€paragraphs€with€<P>.€The€browserÌ€€€ignores€any€indentations€or€blank€lines€in€the€source€text.€HTMLÌ€€€relies€almost€entirely€on€the€tags€for€formatting€instructions,€andÌ€€€without€the€<P>€tags,€the€document€becomes€one€large€paragraph.€(TheÌ€€€exception€is€text€tagged€as€``preformatted,''€which€is€explainedÌ€€€below.)€For€instance,€the€following€would€produce€identical€output€asÌ€€€the€first€bare-bones€HTML€example:ÌÌ€€€€<TITLE>The€simplest€HTML€example

This€is€a€levelÌ€€€€one€heading

Welcome€to€the€world€of€HTML.€This€is€oneÌ€€€€paragraph.

And€this€is€a€second.

ÌÌ€€€Ì€€€Ì€€€However,€to€preserve€readability€in€HTML€files,€headings€should€be€onÌ€€€separate€lines,€and€paragraphs€should€be€separated€by€blank€lines€(inÌ€€€addition€to€the€

€tags).€Ì€€€Ì€€€€€NCSA€Mosaic€handles€

€by€ending€the€current€paragraph€andÌ€€€€€inserting€a€blank€line.€Ì€€€€€Ì€€€Ì€€€Ì€€€In€HTML+,€a€successor€to€HTML€currently€in€development,€

€becomes€aÌ€€€``container''€of€text,€just€as€the€text€of€a€level-one€heading€isÌ€€€``contained''€within

€...€

:ÌÌ€€€€

Ì€€€€This€is€a€paragraph€in€HTML+.Ì€€€€

ÌÌ€€€Ì€€€Ì€€€The€difference€is€that€the€

€closing€tag€can€always€be€omitted.Ì€€€(That€is,€if€a€browser€sees€a€

,€it€knows€that€there€must€be€anÌ€€€implied€

€to€end€the€previous€paragraph.)€In€other€words,€in€HTML+,Ì€€€

€is€a€beginning-of-paragraph€marker.Ì€€€Ì€€€The€advantage€of€this€change€is€that€you€will€be€able€to€specifyÌ€€€formatting€options€for€a€paragraph.€For€example,€in€HTML+,€you€will€beÌ€€€able€to€center€a€paragraph€by€codingÌÌ€€€€Ì€€€€This€is€a€centered€paragraph.€This€is€HTML+,€so€you€can't€do€it€yet.ÌÌ€€€Ì€€€Ì€€€This€change€won't€effect€any€documents€you€write€now,€and€they€willÌ€€€continue€to€look€just€the€same€with€HTML+€browsers.Ì€€€Ì€€LINKING€TO€OTHER€DOCUMENTSÌ€€Ì€€€Ì€€€Ì€€€The€chief€power€of€HTML€comes€from€its€ability€to€link€regions€of€textÌ€€€(and€also€images)€to€another€document.€The€browser€highlights€theseÌ€€€regions€(usually€with€color€and/or€underlines)€to€indicate€that€theyÌ€€€are€hypertext€links€(often€shortened€to€hyperlinks€or€simply€links).Ì€€€Ì€€€HTML's€single€hypertext-related€tag€is€,€which€stands€for€anchor.Ì€€€To€include€an€anchor€in€your€document:Ì€€€€1.€Start€the€anchor€with€Ì€€€€3.€Enter€the€text€that€will€serve€as€the€hypertext€link€in€theÌ€€€€€€€current€document.Ì€€€€4.€Enter€the€ending€anchor€tag:€.Ì€€€€€€€Ì€€€Ì€€€Ì€€€Here€is€an€sample€hypertext€reference:ÌÌ€€€€MaineÌÌ€€€Ì€€€Ì€€€This€entry€makes€the€word€``Maine''€the€hyperlink€to€the€documentÌ€€€MaineStats.html,€which€is€in€the€same€directory€as€the€first€document.Ì€€€You€can€link€to€documents€in€other€directories€by€specifying€theÌ€€€relative€path€from€the€current€document€to€the€linked€document.€ForÌ€€€example,€a€link€to€a€file€NJStats.html€located€in€the€subdirectoryÌ€€€AtlanticStates€would€be:ÌÌ€€€€New€JerseyÌÌ€€€Ì€€€Ì€€€These€are€called€relative€links.€You€can€also€use€the€absoluteÌ€€€pathname€of€the€file€if€you€wish.€Pathnames€use€the€standard€UNIXÌ€€€syntax.Ì€€€Ì€€€€Relative€Links€Versus€Absolute€PathnamesÌ€€€€Ì€€€Ì€€€Ì€€€In€general,€you€should€use€relative€links,€becauseÌ€€€€1.€You€have€less€to€type.Ì€€€€2.€It's€easier€to€move€a€group€of€documents€to€another€location,Ì€€€€€€€because€the€relative€path€names€will€still€be€valid.Ì€€€€€€€Ì€€€Ì€€€Ì€€€However,€use€absolute€pathnames€when€linking€to€documents€that€are€notÌ€€€directly€related.€For€example,€consider€a€group€of€documents€thatÌ€€€comprise€a€user€manual.€Links€within€this€group€should€be€relativeÌ€€€links.€Links€to€other€documents€(perhaps€a€reference€to€relatedÌ€€€software)€should€use€full€path€names.€This€way,€if€you€move€the€userÌ€€€manual€to€a€different€directory,€none€of€the€links€would€have€to€beÌ€€€updated.Ì€€€Ì€€€€Uniform€Resource€LocatorÌ€€€€Ì€€€Ì€€€Ì€€€The€World€Wide€Web€uses€Uniform€Resource€Locators€(URLs)€to€specifyÌ€€€the€location€of€files€on€other€servers.€A€URL€includes€the€type€ofÌ€€€resource€being€accessed€(e.g.,€gopher,€WAIS),€the€address€of€theÌ€€€server,€and€the€location€of€the€file.€The€syntax€is:Ì€€€Ì€€€scheme://host.domain[:port]/path/filenameÌ€€€Ì€€€where€scheme€is€one€ofÌ€€€fileÌ€€€€€€€€€€a€file€on€your€local€system,€or€a€file€on€an€anonymous€FTPÌ€€€€€€€€€€serverÌ€€€http€€€a€file€on€a€World€Wide€Web€serverÌ€€€gopherÌ€€€€€€€€€€a€file€on€a€Gopher€serverÌ€€€WAIS€€€a€file€on€a€WAIS€serverÌ€€€news€€€an€Usenet€newsgroupÌ€€€telnetÌ€€€€€€€€€€a€connection€to€a€Telnet-based€serviceÌ€€€€€€€€€€Ì€€€Ì€€€Ì€€€The€port€number€can€generally€be€omitted.€(That€means€unless€someoneÌ€€€tells€you€otherwise,€leave€it€out.)Ì€€€Ì€€€For€example,€to€include€a€link€to€this€primer€in€your€document,€youÌ€€€would€useÌÌ€€€€Ì€€€€NCSA's€Beginner's€Guide€to€HTMLÌÌ€€€Ì€€€Ì€€€This€would€make€the€text€``NCSA's€Beginner's€Guide€to€HTML''€aÌ€€€hyperlink€to€this€document.Ì€€€Ì€€€For€more€information€on€URLs,€look€atÌ€€€€€*€WWW€Names€and€Addresses,€URIs,€URLs,€URNs,€written€by€people€atÌ€€€€€€€CERNÌ€€€€€*€A€Beginner's€Guide€to€URLs,€located€on€the€NCSA€Mosaic€Help€menuÌ€€€€€€€Ì€€€€Links€to€Specific€Sections€in€Other€DocumentsÌ€€€€Ì€€€Ì€€€Ì€€€Anchors€can€also€be€used€to€move€to€a€particular€section€in€aÌ€€€document.€Suppose€you€wish€to€set€a€link€from€document€A€and€aÌ€€€specific€section€in€document€B.€(Call€this€file€documentB.html.)€FirstÌ€€€you€need€to€set€up€a€named€anchor€in€document€B.€For€example,€to€setÌ€€€up€an€anchor€named€``Jabberwocky''€to€document€B,€enterÌÌ€€€€Here's€some€textÌÌ€€€Ì€€€Ì€€€Now€when€you€create€the€link€in€document€A,€include€not€only€theÌ€€€filename,€but€also€the€named€anchor,€separated€by€a€hash€mark€(#).ÌÌ€€€€This€is€my€link€to€document€B.ÌÌ€€€Ì€€€Ì€€€Now€clicking€on€the€word€``link''€in€document€A€sends€the€readerÌ€€€directly€to€the€words€``some€text''€in€document€B.Ì€€€Ì€€€€Links€to€Specific€Sections€Within€the€Current€DocumentÌ€€€€Ì€€€Ì€€€Ì€€€The€technique€is€exactly€the€same€except€the€filename€is€omitted.Ì€€€Ì€€€For€example,€to€link€to€the€Jabberwocky€anchor€from€within€the€sameÌ€€€file€(Document€B),€useÌÌ€€€€This€is€Jabberwocky€link€from€within€DocumentÌB.ÌÌAdditional€Markup€TagsÌÌ€€€Ì€€€Ì€€€The€preceding€is€sufficient€to€produce€simple€HTML€documents.€For€moreÌ€€€complex€documents,€HTML€has€tags€for€several€types€of€lists,Ì€€€preformatted€sections,€extended€quotations,€character€formatting,€andÌ€€€other€items.Ì€€€Ì€€LISTSÌ€€Ì€€€Ì€€€Ì€€€HTML€supports€unnumbered,€numbered,€and€definition€lists.Ì€€€Ì€€€€Unnumbered€ListsÌ€€€€Ì€€€Ì€€€Ì€€€To€make€an€unnumbered€list,Ì€€€€1.€Start€with€an€opening€list€

€tag.Ì€€€€€€€Ì€€€Ì€€€Ì€€€Below€an€example€two-item€list:ÌÌ€€€€ÌÌ€€€Ì€€€Ì€€€The€output€is:Ì€€€€€*€applesÌ€€€€€*€bananasÌ€€€€€€€Ì€€€Ì€€€Ì€€€The€
  • €items€can€contain€multiple€paragraphs.€Just€separate€theÌ€€€paragraphs€with€the€

    €paragraph€tags.Ì€€€Ì€€€€Numbered€ListsÌ€€€€Ì€€€Ì€€€Ì€€€A€numbered€list€(also€called€an€ordered€list,€from€which€the€tag€nameÌ€€€derives)€is€identical€to€an€unnumbered€list,€except€it€uses€

      Ì€€€instead€of€