Du kan titta på slutresultatet av ett HTML-dokument under redigering i NCSA Mosaic (och några andra Web-klienter). Välj Öppna lokalt dokument... under the Arkiv menyn.Efter det att du redigerat HTML-filen, spara ändringarna. Återgå till NCSA Mosaic och Återladda dokumentet. Ändringarna kommer nu att synas på skärmen.
<TITLE>Det enklaste HTML exemplet</TITLE> <H1>Detta är en rubrik av första nivån</H1> Välkommen till HTMLs värld. Detta är ett stycke.<P> Och detta är ett annat.<P>Det finns även en formaterad version av det minimala exemplet (se orginal PÅ ECSDG)
HTML använder HTML märkkommandon för att ge Web-klienten instruktioner om hur den skall visa texten. Ovanstående exempel använder:
HTML märken består av en vänster-vinkelparantes (<), (ett "mindre än" tecken för matematiker), följt av namnet på märket samt en avslutande höger-vinkelparantes (>). Märken förekommer i de allra flesta fall i par, t.ex. <H1> och </H1>. Det avslutande märket ser precis likadant ut som det påbörjande förutom att ett snedstreck (/) föregår märkets text. I examplet talar <H1> om för Web-klienten att börja formatera en rubrik av första nivån; </H1> talar om att formateringen skall avslutas.
Det grundläggande undantaget för "par-regeln" är <P> märket. Det finns inget märke som </P> i HTML.
NOTERA: HTML skiljer inte på gemener/versaler. <title> är helt ekvivalent med <TITLE> eller <TiTlE>.
Alla märken är tyvärr inte giltiga i alla Web-klienter. Om en klient inte känner till ett märke, skall den helt enkelt ignorera det.
Varje HTML-dokument bör ha en titel. En titel är normalt inte visad tillsammans med dokumentets text och används främst för identifiering av dokument i andra sammanhang (t.ex. vid WAIS-sökning). Välj normalt fem till tio ord för att beskriva dokumentets innehåll och syfte.
I X-Windows och Microsoft Windows versionerna av NCSA Mosaic, finns Dokument Titel fältet överst i fönstret, alldeles nedanför menyraden. I NCSA Mosaic för Macintosh, visas text märkt med <TITLE> som programrubrik längst upp på fönstret.
<Hy>Rubriktext </Hy >
där y är ett nummer mellan 1 och 6 som specificerar rubrikens nivå.
Till exempel, kodningen av "Rubriker" rubriken ovan är
<H3>Rubriker</H3>
Välkommen till HTMLs värld. Detta är ett stycke. <P>
I källkoden finns en radbrytning mitt i första stycket. En Web-klient ignorerar denna radbrytning och börjar ett nytt stycke först då den når en <P> märkning.
Viktigt: Du måste separera stycken med <P>. Klienten ignorerar alla indragningar eller blanka rader i källkoden. HTML litar nästan blint på HTML-märkningar för att formatera text, och utan <P> märkning, kommer dokumentet att se ut som ett enda stort stycke. (Undantaget är text märkt som "förformaterad", vilket är beskrivet nedan.) Till exempel kommer följande att rendera i ett identiskt utseende som det första minimala HTML-exemplet:
<TITLE>Det enklaste HTML exemplet</TITLE><H1>Detta är en rubrik av första nivån</H1>Välkommen till HTMLs värld. Detta är ett stycke.<P>Och detta är ett annat.<P>
För att erhålla bra läsbarhet av HTML filer bör rubriker finnas på egna rader och stycken separerade av blankrader (förutom <P> märkning...:-).
NCSA Mosaic hanterar <P> genom att avsluta det aktuella stycket och infoga en blankrad.
I HTML+, en efterträdare till HTML under utveckling, kommer <P> att bli en "textbehållare, precis som texten i en rubrik av första nivån är inhyst mellan <H1> ... </H1>:
<P> Detta är ett stycke i HTML+. </P>
Skillnaden är att </P> avslutande märket alltid utesluts. (D.v.s. om en klient ser en <P>, vet den att en </P> kommer att avsluta stycket.) Med andra ord, i HTML+ börjar <P> ett stycke.
Fördelen med denna förändring är att man kan specificera speciell formatering för ett stycke. I HTML+ kan du till exempel centrera ett stycke så här:
<P ALIGN=CENTER> Detta är ett centrerat stycke. Detta är HTML+ så du kan inte göra det än....:-(
Denna förändring kommer inte att påverka dina befintliga HTML-dokument och de kommer att se ut precis som vanligt med kommande HTML+ klienter.
HTMLs enda hypertext-relaterade märkning är <A>, vilket står för ankare. För att inkludera ett ankare i ditt dokument:
A
.)
Här är ett exempel på en hypertext-referens:
<A HREF="Stats.html">Statistik</A>
Denna sats gör "Statistik" till en hyperlänk till dokumentet Stats.html, vilket pekar på filen stats.html i samma bibliotek. Du kan länka till dokument i andra bibliotek genom att specificera relativ sökväg från det aktuella dokumentet till det länkade dokumentet. T.ex., en länk till en fil NJStats.html som befinner sig i underbiblioteket AtlanticStates kommer att bli:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Dessa kallas relativa länkar. Du kan även använda absoluta sökvägar till vilka filer du vill. Sökvägar anges med standard UN*X syntax.
Använd dock absoluta sökvägar när du länkar till dokument som inte är direkt relaterade. Ta som exempel en samling dokument som utgör en användarhandbok. Länkar i denna samling bör vara relativa. Länkar till andra dokument (kanske en referens till relaterad mjukvara) bör däremot vara absoluta, fullständiga sökvägar. Med detta förfaringssätt kan du flytta användarhandboken till ett annat bibliotek utan att behöva uppdatera en enda länk.
schema://värd.domän[:port]/sökväg/filnamn
där schema är en av
port numret kan normalt uteslutas. (Det betyder att om ingen sagt något annat - ange inte portnumret.)
För att inkludera en länk till detta introduktionsdokument i ditt eget dokument, kan du använda
<A HREF = "http://ecsdg.lu.se/HelpDocs/HTMLPrimer.html"> HTML Nybörjarguide</A>
Detta kommer att göra texten "HTML Nybörjarguide" till en hyperlänk till detta dokument.
För mer information om URLer, titta på
Här är <A NAME = "Jabberwocky">någon text</a>
Nu när du skall skapa länken i dokument A, räcker det inte med att du specificerar filnamnet - du måste även ange det namngivna ankaret, separerat med en "brädhög" (#).
Detta är min <A HREF = "dokumentB.html#Jabberwocky">länk</A> till dokument B.
Om du nu klickar på "länk" i dokument A blir du direkt kopplad till texten "någon text" i dokument B.
För att länka till Jabberwocky ankaret från samma dokumentfil (Dokument B), använd
Detta är <A HREF = "#Jabberwocky">Jabberwocky länk</A> från aktuellt Dokument B.
Nedan följer en sådan lista med två listobjekt:
<UL> <LI> äpplen <LI> bananer </UL>
Utseendet blir:
Ett listobjekt <LI> kan innehålla flera stycken. Separera bara styckena med <P> styckeseparatorn.
<OL> <LI> bapelsiner <LI> persikor <LI> vindruvor </OL>
får detta utseendet:
Här är ett exempel på en definitionslista:
<DL> <DT>ECSDG <DD>ECSDG (EkonomiCentrum Software Development Group), har sitt säte vid Ekonomihögskolan i Lund. ECSDG har som huvudsyfte att förenkla användningen och spridandet av informationsverktyg på Internet. <DT>Ekonomihögskolan i Lund <DD>Ekonomihögskolan i Lund ingår i Lunds Universitet och består i huvudsak av Institutionen för Ekonomisk Historia, Företagsekonomiska Institutionen, Nationalekonomiska Institutionen, Institutionen för Informatik, Institutionen för Statistik, Institutionen för Handelsrätt, Institutionen för Ekonomisk Geografi, Institutet för Ekonomisk Forskning och Stiftelsen EFL (Executive Foundation Lund). Här finns även Ekonomiska Biblioteket med bl.a. ett stort urval av litteratur för forskare och studenter. </DL>
Detta får utseendet:
<DT> och <DD> märkningarna kan innehålla flera stycken (separerade med <P> stycke märkningen), listor, eller annan definitionsinformation.
Ett exempel på listor i flera nivåer (nästlade listor):
<UL> <LI> Några institutioner vid Ekonomihögskolan: <UL> <LI> Institutionen för Ekonomisk Historia <LI> Företagsekonomiska Institutionen <LI> Nationalekonomiska Institutionen </UL> <LI> Några organisationer som inte är institutioner: <UL> <LI> Ekonomiska Biblioteket <LI> EFL (Executive Foundation Lund) <LI> Stiftelsen för Ekonomisk Forskning </UL> </UL>
Listorna kommer att se ut så här:
<PRE> #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE>
ser ut som
#!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm *
Hyperlänkar kan användas inuti <PRE> avsnitt. Du bör emellertid undvika HTML märkning inuti <PRE> avsnitt.
Notera att eftersom <, >, och & har speciella betydelser i HTML, måste du använda teckenkodningarna (<, > och & för respektive tecken) för att använda dessa tecken. Läs även avsnittet Speciella Tecken för mer information.
Ett exampel:
<BLOCKQUOTE> I still have a dream. It is a dream deeply rooted in the American dream. <P> I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.<P> </BLOCKQUOTE>
Resultatet blir:
I still have a dream. It is a dream deeply rooted in the American dream.I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.
De sista raderna av online-versionen av originalet till denna introduktion är
<ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS>
Resultatet blir
A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.eduNOTERA: <ADDRESS> används inte för postadresser. Se avsnittet Explicita radbrytningar om hur du formaterar postadresser.
I den ideala SGML-världen, är innehållet skiljt från presentationen. Således märks en rubrik av första nivån i SGML som en rubrik av första rang, men det specificerar inte att en rubrik av första nivån skall visas i, till exempel, 24-punkters fet Times centrerad överst på en sida. Fördelen med detta koncept (det liknar begreppet "formatmall" i många ordbehandlare) är att om du bestämmer dig för att ändra rubriker av första nivån att visas med 20-punkters vänsterjusterad Helvetica, är allt du behöver göra att ändra definitionen av rubrik av första nivån i din presentationsapparat (d.v.s. din Web-klient).
Den andra fördelen med logisk märkning är att den hjälper dig att hålla en övergripande layoutstandard på dina dokument. Det är lättare att märka någonting med <H1> än att komma ihåg att rubriker av första nivån är 24-punkters fet Times eller vad det nu skall vara. Samma sak gäller för teckenstilar. Ta till exempel <STRONG> märkningen. De flesta läsare visar sådan stil som fet text. Hursomhelst är det fullt möjligt att en läsare visar sådana avsnitt i röd text istället! Logiska stilar erbjuder denna flexibilitet.
För att använda ett av dessa tecken i ett HTML dokument, måste du skriva in dess tecken-kommandosekvens [escape] istället:
Övriga tecken-kommandosekvenser stödjer accenterade tecken. Exempel:
Du kan hitta mer information om detta samt en komplett lista på teckenkoder i dokumentet Special Characters hos ECSDG.
NOTERA: Till skillnad från resten av HTML, är tecken-kommandosekvenser känsliga för gemener/versaler. Du kan till exempel inte använda < istället för <.
En vanlig användning av <BR> är vid formatering av adresser:
ECSDG<BR> c/o Husdatornämnden vid Holger Crafoords Ekonomicentrum<BR> Box 7080<BR> 220 07 LUND<BR>
För att inkludera en infogad bild, använd
<IMG SRC=bild_URL>
där bild_URL är URLen på en bildfil. Syntaxen för IMG SRC URLer är identisk med den som man använder i en ankar HREF. Om bildfilen är en GIF fil, måste filnamnets del av bild_URL sluta med .gif. Filnamn till X Bitmap bilder måste sluta med .xbm.
Som standard är nederdelen av en bild justerad i förhållande till texten som visas med detta stycke.
Använd ALIGN=TOP valet om du vill att läsaren skall justera efterföljande text till överdelen av bilden som visas i detta stycke. Den fullständiga infoga-bild märkningen med topp-justering är:
<IMG ALIGN=top SRC=bild_URL>
ALIGN=MIDDLE justerar texten till mitten av bilden.
<IMG SRC = "/images/back.gif" ALT = "Bakåt">
där /images/back.gif är bilden av en pil som pekar åt vänster. Med NCSA Mosaic och andra grafiskt orienterade Web-klienter, kan användaren se denna grafik. Med en VT100-klient, som t.ex. lynx, ser användaren ordet "Bakåt" istället. Som du förstår bör du inte använda för många bilder med vital text-information i, om en inte försumbar del av användarna använder sig av teckenbaserade Web-klienter. Åtminstone bör du ange tillräcklig information i den alternativa texten för varje bild.
För att infoga en referens till en extern bild, använd
<A HREF = bild_URL>länk ankare</A>
Använd samma syntax för länkar till externa videos och ljud. Den enda skillnaden är filändelsen på den länkade filen. Till exempel,
<A HREF = "QuickTimeVideo.mov">länk ankare</A>
specificerar en länk till en QuickTime video. Några vanliga filtyper och deras ändelser är:
Förvissa dig om att den tilltänkta publiken har de nödiga externa programmen för visning av olika slags data. De flesta UN*X arbetsstationer kan t.ex. inte spela upp QuickTime videos, medan många Macintosh datorer kan.
<B>Detta är ett exempel på <DFN>överlappande</B> HTML märkning.</DFN>
Ordet "överlappande" befinner sig både inom <B> och <DFN> märkningarna. Hur skall en Web-klient tolka detta? Det vet du inte förrän du provat, och olika läsare kommer troligen att visa det olika. Generellt sett bör du undvika överlappande märkning.
<H1><A HREF = "Destination.html">Min rubrik</A></H1>
baka inte in en rubrik eller annat HTML element inuti ett ankare:
<A HREF = "Destination.html"> <H1>Min rubrik</H1> </A>
Fastän de flesta läsare för närvarande kan hantera detta exempel, är det "olagligt" enligt de officiella HTML och HTML+ specifikationerna, och kommer troligen inte att fungera i framtida klienter.
Teckenmärkningar modifierar utseendet på andra märkningar:
<UL><LI><B>Ett fett listobjekt</B> <UL> <LI><I>Ett kursivt listobjekt</I> </UL>
Hursomhelst bör du undvika att baka in andra typer av HTML element märkningar. Det kan t.ex. vara frestande att baka in en rubrik inuti en lista för att göra typsnittet större:
<UL><LI><H1>En stor rubrik</H1> <UL> <LI><H2>Något lite mindre</H2> </UL>
Fastän några läsare, t.ex. NCSA Mosaic för X Windows, formaterar detta exempel ganska elegant, är resultatet oförutsägbart (därför att det är odefinierat) i andra läsare. För att erhålla kompatibilitet med andra läsare bör du helt undvika sådana konstruktioner.
Vad är skillnaden mellan att baka in <B> inuti en <LI> märkning och att baka in <H1> inuti en <LI>? Detta är återigen en fråga om SGML. Den semantiska innebörden av <H1> är att det är huvudrubriken i ett dokument och att den bör följas av innehållet av dokumentet. Således finns ingen vettig anledning att hitta en <H1> inuti en lista.
Tecken-formaterings märkningar är generellt inte additativa. Du kan förvänta dig att
<B><I>lite text</I></B>
skulle bli fet och kursiv text. I vissa läsare blir det så; andra läsare tolkar bara den innersta märkningen (kursivt i detta exempel).
<HEAD> <TITLE>Ett längre exempel</TITLE> </HEAD> <BODY> <H1>Ett längre exempel</H1> Detta är ett enkelt HTML dokument. Detta är det första stycket. <P> Detta är det andra stycket, som innehåller några specialeffekter. Detta är ett ord i <I>kursiv</I> stil. Detta är ett ord i <B>fet</B> stil. Här är en infogad GIF-bild: <IMG SRC = "/images/ecsdg.gif">. <P> Detta är det tredje stycket, som demonstrerar länkar. Här är en hypertext länk från ordet <A HREF = "underbib/minfil.html">något</A> till ett dokument kallat "underbib/minfil.html". (Om du försöker följa denna länk, kommer du att få ett felmeddelande på skärmen.) <P> <H2>En rubrik av andra nivån</H2> Här kommer ett avsnitt som skall visas med ett typsnitt med fast breddsteg: <P> <PRE> On the stiff twig up there Hunches a wet black rook Arranging and rearranging its feathers in the rain ... </PRE> Här är en onumrerad lista med två listobjekt: <P> <UL> <LI> vinbär <LI> blåbär </UL> Detta är slutet på mitt exempeldokument. <P> <ADDRESS>Mig (Mig@mindator.domän.land)</ADDRESS> </BODY>Du kanske hellre vill se den formaterade versionen.(se orginal på ECSDG)
Förutom de märkningar som redan är diskuterade, visar detta exempel även <HEAD>... </HEAD> och <BODY> ... </BODY> märken, vilka separerar dokumentet i introducerande information om dokumentet och huvudtexten av dokumentet. Dessa märken ändrar inte utseendet av det formaterade dokumentet överhuvudtaget, men är användbart av flera andra orsaker (NCSA Mosaic för Macintosh 2.0 tillåter dig till exempel att läsa endast header delen av ett dokument innan du beslutar dig för att eventuellt ladda resten av dokumentet), och du rekommenderas att använda dessa märkningar.
Lokalt ansvarig <lwidmark@hh.umu.se>