Startsidan

Inledning

Detta är startsidan i en snabbkurs i HTML-kodning. I ett vanligt ordbehandlingsprogram kan man formatera texten och göra en mängd olika inställningar. Alla sådana formateringar och inställningar görs i ett HTML-dokument (en Web-sida) med hjälp av märken. På engelska kallas märkena "tags". Märkena (tags) skiljs från vanlig text med hjälp av vänster och höger vinkelparenteser (dvs tecknen för mindre än och större än). Ett HTML-dokument innehåller bara vanlig text och märken (tags) och är därför oberoende av vilken dator och vilket operativsystem som används.

Man säger Web-sida (World Wide Web page) men man menar inte en vanlig A4-sida utan egentligen ett dokument som kan vara hur kort eller långt som helst.

Arbetsredskap

För att kunna arbeta med den här kursen måste man ha en Web-läsare (browser) i vilken man kan se Web-sidan (HTML-dokumentet) i presentationsform utan koder. Den mest kända Web-läsaren är Netscape. Netscape finns att hämta på Internet för utvärdering. Efter utvärderingstiden måste man betala för programmet. Svensk leverantör är Nocom i Uppsala. De flesta sidorna i den här kursen kan ses i Netscape 1.1 men sidorna 12 och 13 kräver tillgång till Netscape 2.0. Sidan 12 kan också ses i Internet Explorer 3.0 eller i Oracles Power Browser.

Det finns gratis Web-läsare att hämta på Internet t.ex. Microsofts Internet Explorer 2.0, som också finns på svenska med namnet Internet Utforskaren 2.0. Internet Utforskaren 1.0 ingår i Plus-versionen av Windows 95. Sidan 14 i kursen har gjorts speciellt för Internet Explorer 2.0. Något av det nya i Internet Explorer 3.0 visas också här. Ett alternativ finns till sidan 14 för dem som har Netscape Atlas 3.0.

I Netscape kan man genom att välja "View" och sedan "Document Source", se hur dokumentet ser ut i redigerbart skick med alla koder. I den här kursen kallas det att titta i "dokumentkällan". Den här funktionen finns på liknande sätt i de flesta Web-läsare.

Man bör emellertid också ha en HTML-editor för att göra och redigera dokument. Man kan göra ett fullständigt HTML-dokument i en enkel ordbehandlare t ex i "Anteckningar" i Windows. Emellertid underlättas arbetet om man har en särskild "HTML-editor". Det finns mängder av sådana program och flera kan hämtas helt gratis på Internet med hjälp av en Web-läsare.

Tanken är att man i den här kursen ska använda en HTML-editor där man kan se och justera dokumentkällan och alla koderna där.

Det finns en del HTML-editorer som bygger på att man inte ser koderna när man ändrar på dem. Dessa brukar kallas WYSIWYG-editorer dvs What You See Is What You Get eller Vad Du Ser Är Vad Du Får. En del sådana program är bra men i en del WYSIWYG-editorer kan man inte manuellt ändra på koderna. En nackdel med sådana program är att det blir väldigt besvärligt om editorn inte klarar en viss kod. En annan nackdel med WYSIWYG-editorer är att de gärna vill ändra på koder som man inte själv hade tänkt ändra på.

En del program är både Web-läsare och HTML-editorer t.ex. Netscape Gold. Det finns också program som översätter från andra filformat till HTML-kod. Emellertid fungerar dessa program inte i alla situationer och därför bör man kunna grundläggande HTML-editering om man inte ska känna sig som bilisten som bara kunde svänga åt ena hållet eller som inte kunde använda alla växlarna. Det finns en särskild sida i kursen om olika HTML-editorer och Web-läsare.

Definitioner

Ofta finns det både ett startmärke (start-tag) och ett slutmärke (end-tag) som omringar sitt innehåll. Slutmärket skiljer sig från startmärket genom att det har ett snedstreck (divisionstecken) efter första vinkelparentesen (mindre än-tecknet). Märkena (tags) tillsammans med sitt innehåll kallas ett HTML-element. Ett märke utan vinkelparenteser är i enkare fall egentligen elementets namn men vanligen skriver man bara elementet.

En del märken påverkar inget särskilt innehåll. Då behövs inte något slutmärke. Man säger att elementet är tomt. T.ex. kan man ange ny rad med märket <BR> dvs med elementet (elementnamnet) BR. Vanligen och likaså i fortsättningen i den här kursen skrivs ej "elementnamnet" utan enbart "elementet". Det är inte ovanligt att man istället också skriver märke (tag) utan att vinkelparenteserna är med. En del märken kan förekomma både med start- och slutmärke och som enbart startmärke. Detta gäller t.ex. elementet P som ger nytt stycke.

Ett element kan ha ett eller flera attribut. Namnen "element, elementnamn, tag, märke, kodnamn" kan i olika skrifter betyda samma sak. Även när man talar om attribut menar man ofta attributets namn. Ibland används i kursen ordet kod istället för märke (tag) när det som står mellan vinkelparenteserna är ganska omfattande.

Exempel

Element (Elementnamn) (tomt element)
BR
Märke (tag)
<BR>
Element (Elementnamn)
BODY
Startmärke (Start-tag)
<BODY>
Slutmärke (End-tag)
</BODY>
Element (Elementnamn)
A
Attribut
HREF
Element och attribut
A HREF
Kod bestående av elementet "A", attributet "HREF" och attributets värde "sidan.htm"
<A HREF="sidan1.htm">

De vanligaste elementen

Grundelementen är: HTML, HEAD, TITLE, BODY.
Vanliga element är: H1, H2...H6, BR, P, B, I.

HTML omringar hela dokumentet som är uppdelat i ett huvud HEAD och en kropp BODY. I huvudet finns oftast bara en titel TITLE som inte syns i dokumentet.

Det är trots det mycket viktigt att titeln ger en bra upplysning om innehållet i dokumentet. Titeln är nämligen det enda som syns beträffande sidan när någon i sin Web-läsare väljer att göra ett bokmärke till sidan. Genom att klicka på bokmärket kommer man snabbt till sidan för bokmärket.

Kroppen BODY innehåller allt som syns på sidan t.ex. rubriken som här har högsta graden (av 6) H1.

HTML-editorer fungerar ofta så att om man vill ha start- och slutmärken på var sin sida om någonting t.ex. en text så markerar man det som skall omringas och klickar sedan på namnet på märket som man finner som text i någon rullgardinsmeny eller som en knapp i någon verktygsrad. Ibland finner man flera märken under rubriken "Tags". Om det gäller ett tomt element så klickar man fram märket efter att ha markerat mellanrummet där det ska hamna.

Titta nu på en minimall till en sida genom att klicka på den här länken.

Nytt stycke i HTML-editorn betyder inte nytt stycke i Web-läsaren. Detsamma gäller ny rad som fås genom elementet BR. Det kommer en ny rad här.
Det spelar alltså ingen roll hur korta eller långa raderna är i ditt HTML-verktyg. Ny rad i Web-läsaren blir det när det inte finns mer plats. Du kan göra Web-läsaren bredare och smalare. Då anpassar sig texten så att den blir lika stor som sidan. Om man vill framtvinga ny rad så måste man använda elementet BR. Nytt stycke i Web-läsaren får man med hjälp av elementet P. Det är emellertid lämpligt att göra raderna snygga och lagom långa också i HTML-verktyget. Man kanske t.ex. vill skriva ut sin sida visande alla koder från en HTML-editor (visande dokumentkällan). Om man byter editor så kan ibland tyvärr dock samma dokument se annorlunda ut i den nya editorn just när det gäller radbrytningar. Det kan ockå vara lämpligt att också i editorn ta nytt stycke efter elementet P.

URL-adresser och länkar

Man kan snabbt gå vidare från ett dokument (en sida) på World Wide Web (som förkortas WWW men uttalas Web) till ett annat dokument med hjälp av en hyperlänk. Hyperlänkar är just det utmärkande för en Web-sida. Att snabbt klicka vidare från den ena sidan till den andra från den ena platsen på jorden till den andra kallas att "surfa på nätet".

Man skiljer på en vanlig e-mail-adress som ju innehåller det berömda "at"-tecknet @ och en s.k. URL-adress till en Web-sida. URL står för Uniform Resource Locator.

Den första delen av URL:en talar om vilket protokoll som skall användas. Normalt är det "http" men andra protokoll förekommer t.ex. "ftp" när man skall hämta filer och "news" när man skall till en s.k. nyhetsgrupp.

Andra delen är själva adressen (IP-adressen) till den dator eller server som man ska hämta informationen på. Mycket vanligt i Sverige är att denna adress börjar med "www" och slutar med huvuddomännamnet "se". Däremellan står vanligen ett företags domännamn. Det är samma domännamn som står på slutet framför "se" när man skickar e-mail till någon på detta företag. "se" står för landet Sverige. "fi" för Finland osv. I USA finns istället olika huvuddomännamn beroende på vad det gäller. För kommersiella sidor gäller "com". Ofta har företagen ett domännamn som är identiskt med företagets eget namn. T.ex. har
Microsoft URL-adressen http://www.microsoft.com/
Volvo URL-adressen http://www.volvo.se/
Adobe i Sverige URL-adressen http://www.adobe.se/
Adobe i USA URL-adressen http://www.adobe.com/
IDG i Sverige URL-adressen http://www.idg.se/
IDG i USA URL-adressen http://www.idg.com/

Man kan alltså ofta gissa URL-adressen till ett visst företags sidor.

Den tredje delen i URL-adressen är de kataloger (mappar) och till slut den fil som man skall till. Efter första delen skrivs när det gäller http och ftp "://" och efter andra delen "/". I exemplet nedan är "lemes" domännamnet och "renju" den mapp vari filen "index.html" ligger.

Det kan finnas flera undermappar. Mellan varje mapp och till slut själva filen finns ett snedstreck "/". Mer information om mappar finns på sidan 2.

Egentligen är bokstavsformen av en URL-adress en översättning av en siffergrupp t.ex. (126.231.158.2). Ibland ser man länkar till URL-adresser angivna med hjälp av en siffergrupp. Nedan finns också ett exempel på en sådan adress. Ibland står det ":80" i slutet av första delen av en adress. Det är standard att det ska stå så för att rätt "port" skall hittas men om man inte skriver något, vilket man vanligtvis inte gör, så fungerar det ändå. Om man emellertid inte använder standardtalet 80 så måste man skriva dit talet. Det är dock mycket ovanligt att man inte använder 80. Tilde-tecknet "~" hittar man ibland i början av tredje delen av en adress. Detta tecken ersätter en hel rad med mappar och undermappar fram till den slutliga mappen. Man slipper alltså skriva dit alla mapparna på vägen.

Om man döper sitt huvuddokument till index.html så kan man normalt hoppa över filnamnet i en fullständig URL-adress. Ibland kan filnamnet som kan uteslutas vara något annat än standarden index.html.

Om man hoppar över filnamnet och om det inte finns någon index.html-fil så kan man som standard när man använder Netscape se ett register över filerna i den mapp (katalog) som man har angivit. Emellertid har man ibland generellt tagit bort möjligheten för en besökare att använda sig av detta standardsätt att orientera sig i katalogernas (mapparnas) innehåll. Om standardfunktionen fungerar och om man inte vill att en besökare skall kunna se innehållet i en katalog så måste man alltså där lägga en fil med namnet index.html. Denna fil kan t.ex. innehålla texten att besökare inte har tillträde till mappens innehåll.

När man inte har fast uppkoppling till internet så har man ingen fast IP-adress. När man ringer upp sin Internet-leverantör så tilldelas man istället en tillfällig IP-adress.

En hypertextlänk till en fullständig s.k. URL-adress på Internet kan se ut så här:

<A HREF=" http://www.lemes.se/renju/index.html"> Renju International Federation</A>

eller så här:

<A HREF=" http://140.188.198.26:8080/~pbmserv/"> Richard W. Rognlies play by mail server </A>

A är elementnamnet och HREF är attributets namn. Efter ett attribut följer ofta ett "är lika med-tecken" samt citationstecken på båda sidorna om attributets "värde" (value). Här är URL-adressen attributets värde. För vissa attribut och värden behövs ej citationstecknen.

För att visa koden (märket) ovan korrekt i en Web-läsare måste man använda en teckenkod för vinkelparenterna (mindre än och större än tecknen) som avgränsar HTML-märkena. Även för vissa bokstäver och andra specialtecken fordras en särskild teckenkod (text entity).

Om dokumentet man skall länka till ligger i samma katalog som dokumentet man just är i behöver man bara göra en s.k. relativ länk dvs bara skriva filnamnet:

<A HREF="allasid.htm"> Denna länk går till registret visande alla sidorna</A>

Man kan göra länkar också till en viss plats på en viss sida. Man måste då först ge ett namn åt den plats dit man vill att länken skall gå. Det gör man med hjälp av A NAME. Överst på denna sidan finns koden <A NAME="topp">. I länken skall sedan efter filnamnet stå tecknet # följt av namnet på platsen. Om länken är till en plats på samma sida räcker det med enbart tecknet # följt av namnet på platsen.

<A HREF="#topp"> Denna länk går till toppen av dena sidan</A>

<A HREF="koderna.htm#0"> Denna länk går till en viss plats på sidan om elementen </A>

Om man inte skriver någonting som länk så leder länken i Netscape till en lista över innehållet i den aktuella mappen (katalogen). Man kan sedan härifrån leta bland filerna och även gå till andra mappar och sedan öppna något HTML-dokument eller någon bild. Om man t.ex. har flera bilder att välja på för ett dokument så är det smidigt att använda den här vägen. I registret som nämns nedan finns sådana länkar från varje mapp. I Windows- och MacIntoshversionerna av den här kursen har alla HTML-dokument filändelsen "htm" och alla bilder filändelserna "gif" eller "jpg".

<A HREF=""> Innehållet i den aktuella mappen </A>

Allmänt om den här kursen

Varje sida i den här kursen innehåller en upplysning om den här kursen och en rad som med ett specialtecken visar vem som har copyright.

Varje "vanlig" sida innehåller också en länk vidare till nästa sida samt till registret dvs en sida med en förteckning över de flesta sidorna i kursen. Här kan man se att det finns en huvudmapp (huvudkatalog) i vilken bl.a. denna startsida ligger. Huvudmappen har 4 undermappar (underkataloger): mapp1, mapp2, mapp3 och mapp4. Mapp1 har undermappen mapp11 och mapp3 har undermappen 31. Nästa sida som är sidan 1 ligger i mapp1.

Det finns också två alternativa register. Det ena är en innehållsförteckning samtidigt som det är ett register för dem som inte kan se tabeller i sin Web-läsare och det andra är "Stora Registret" som innehåller länkar till alla HTML-dokumenten i kursen.

Den här snabbkursen innehåller korta förklaringar och sidorna är hela tiden uppbyggda med enbart enkla grundläggande märken utan särskilt snygg design för att en nybörjare skall kunna sätta sig in i hur enkla men fungerande sidor är uppbyggda.

I kursen finns en sida med länkar till sidor på Internet med mer information om HTML och om Internet och till dokument med mera komplicerad uppbygnad och snygg design.

Allt om HTML finns naturligtvis inte i denna kursen som i huvudsak är en en nybörjarkurs. Om det emellertid hittas sådant som borde ha varit med i den här kursen men som inte är med så kommer sådan information att erbjudas på Internet på en ny "sidan 16". Information om var man hittar sådana uppdateringar finns på länksidan. En länk till sidan 16 finns redan i registret.

Normalt ska man använda den här kursen med hjälp av de vanliga Web-sidorna i kursen. De är små och därför enkla att handskas med. Om man emellertid vill skriva ut hela kursen på papper så kan det bli lite jobbigt med alla sidorna. Det är inte ovanligt att man erbjuder en samlingssida för utskrift. En sådan samlingssida finns också till den här kursen. Den kallas "Hela kursen" och det finns en länk från registret till denna sidan. Observera att på en sådan samlingssida är det flera av länkarna som inte fungerar eftersom sidorna är flyttade från sin egentliga mapp. Alla sidor har dessutom samma bakgrund. En del bearbetningar har dock gjorts när det gäller "Hela kursen" för att bilderna skall kunna skrivas ut.

När man skriver så kan man ofta välja vänster- och högermarginaler. I Netscape 2.0 kan man under "File" välja "Page Setup". Där är ofta normalinställningarna ungefär följande: För Left (vänstermarginalen) 1.25 cm och för Right (högermarginalen) 1.25 cm. Vill man spara papper så behåller man dessa inställningar. Kontrollera bara så att det går att använda papper med hål i med de inställningar du har. Det rekommenderas dock att man inte gör raderna bredare än 13 cm eftersom det annars inte blir så lätt att läsa texten.

Det finns en risk att en del sidor innehållande tabeller inte kommer med i sin helhet vid utskrift om man gör en Web-sida mindre på bredden. Därför finns en del sidor i kursen inte med i samlingssidan. I början av samlingssidan finns upplysningar om vilka sidor som finns med och vilka som inte finns med.

Även sidor med ganska breda bilder med text vid sidan om bilden är kritiska sidor t.ex. sidan 6. Om man väljer inställningarna Left 2.0 och Right 4.0 så fungerar det dock bra. Komplettera gärna en utskrift av samlingssidan med en separat utskrift av Stora Registret med inställningarna Left 1.25 och Right 1.25. Man kan i Netscape innan man skriver ut en sida under "File" välja "Print Preview". Där kan man förhandsgranska hur utskriften kommer att se ut.

Web-sidan "Hela kursen" innehåller inte riktigt alla sidorna. Vilka sidor som inte ingår är angivet överst på sidan "Hela kursen".

Man kan också använda sidan "Hela kursen" om man letar efter något t.ex. ett attribut som man inte kan hitta. Det blir ju jobbigt att söka i alla sidorna. I Netscape kan man söka efter text i ett dokument genom att trycka på knappen "Find". Sedan anger man bara vad man letar efter samt om man vill söka uppåt eller nedåt i dokumentet.

Den här kursen finns ursprunglingen på en diskett. Den disketten bör du inte använda under kursen eftersom det är lätt att av misstag ta bort den ursprungliga informationen. Om du inte redan har gjort det - kopiera över hela mappen "htmlkurs" till hårddisken och gör övningarna där. Disketten använder du som en säkerhetskopia.

Gå nu vidare till nästa sida och gör så hela tiden tills snabbkursen är slut med sidan 15 och länksidan för vidare studier.

Praktisk snabbkurs i HTML. Version 96.4 - April-96.
© 1996 Tommy Maltell