Enkel hemsidesmall
Html är en programmering som talar om för webbläsaren hur den ska visa en hemsida.
En hemsidas förstasida ska döpas till index.html
Lägg bildfiler och musikfiler i samma mapp som index.html
Använd inga mellanslag i filnamn.
Skriv hemsidan som en enkel textfil till exempel i Anteckningar i Windows.
Man ändrar en enkel txt-sida till en html-sida genom att ändra filändelsen txt till html.
Spara även txt-sidan för att kunna ändra filen.
Spara med teckenkodningen utf-8
Jag har försökt att spara som utf-8 i Word 2016, det fungerade inte.
Om det krävs mer än grundläggande programmering så använd ett redigeringsprogram för hemsidor,
då behöver du inte kunna ett enda tecken html.
Hemsidor överförs normalt med ftp-program (till exempel FileZilla) till webbhotellet.
Ta bort de delar som inte behövs, till exempel länk till musikfil.
Ändra fritt teckenstorlekar och sidbredd.
Flerfaldiga hemsidans delar vid behov.
Förklaringar
Jag har använt koder för att visa programmeringen, som annars inte syns på skärmen.
Koderna <b> och </b> i hemsidestexten talar om var fetstil börjar och slutar.
Koden <br> i hemsidestexten betyder radbrytning.
Koderna <p> och </p> betyder början och slutet på ett textstycke.
Koden <p></p> kan användas för en extra tomrad.
Koden <!doctype html> betyder att dokumentet är kodat i html.
Koderna <html> och </html> står för början och slutet på html-kodningen.
Koderna <head> och </head> betyder början och slut på grundprogrammeringen.
Kodningen <meta charset="utf-8"> talar om vilken teckengrupp och teckenkodning som ska användas,
utf-8 innehåller det mesta.
Kodningen <style type="text/css"> talar om att det kommer en formatering av hemsidestexten i programmet css,
som fungerar ihop med html.
Tecknen { och } talar om att en formatprogrammering börjar och slutar.
Förkortningen h1 står för huvudrubrik i fetstil, h2 står för den första nivån i fetstil av upp till 5 underrubriknivåer.
Tecknet p står här för stycken.
Förkortningen pt står för punkter, det vanligaste måttet på stilstorlek.
De valda stilsorterna är raka alternativ.
Marginalerna räknas klockvis i ordningen 12, 3, 6 och 9.
Uttrycket 1em står för enkelt radavstånd, här på tomrad under ett stycke.
Kodningen text-align: justify innebär marginaljusterad text, kan tas bort om man så vill.
Uttrycket #page står för hela sidan och margin: auto ger mittställd text på skärmen.
Koden </style> talar om att textformatiringen i css-programmet slutar.
Koderna <body> och </body> talar om var själva hemsidan börjar och slutar.
Koderna <div id="page"> och </div> talar om början och slutet på det område som #page formaterar, hela sidan.
Kodningen <img src="bildfilens namn" talar om att den angivna bilden ska visas på detta ställe i texten,
procenttalen för höjd och bredd är valfria.
Koden <audio controls> talar om att webbläsaren ska visa uppspelningsfält för musik, Explorer har som standard
stort uppspelningsfält.
Koden <source src= talar om att det är en mediefil och kodningen type="audio/mpeg" talar om att det är en mp3-fil.
Koden </audio> betyder att musikfilens kodning är slut.
Koden <video controls> talar om att webbläsaren ska visa uppspelningsfält för film.
Koden poster="bildfilens namn.jpg" talar om att en stillbild i jpg-format ska visas innan man spelar upp filmen.
Klartexten width="400" och Height="225" talar om uppspelningsfältets storlek i skärmpunkter, kan ändras
Klartexten preload="none" betyder att webbläsaren börjar ladda ner filmen först när man väljer att visa den.
Koden <source src= talar om att det är en mediefil och kodningen type="video/mp4" talar om att det är en mp4-fil.
Koden </video> betyder att videofilens kodning är slut.
Kodningen <p><a href= talar om att sidan ska ha en länk till den efterföljande internetadressen,
det går även att skriva in filnamnet på en andra html-sida placerad i samma mapp.
Själva hemsidesmallen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hemsidans namn</title>
<style type="text/css">
h1 { font-size: 17pt; margin: 0pt 0pt 0pt 0pt; font-family: Arial, Helvetica, sans-serif; }
h2 { font-size: 14pt; margin: 0pt 0pt 0pt 0pt; font-family: Arial, Helvetica, sans-serif; }
p { font-size: 12pt; margin: 0pt 0pt 1em 0pt; font-family: Arial, Helvetica, sans-serif; text-align: justify; }
#page { margin: auto; width: 170mm; }
</style>
</head>
<body>
<div id="page">
<h1>Huvudrubrik</h1>
<p>Författare och datum</p>
<h2>Underrubrik</h2>
<p></p>
<p>Exempelrader med rabrytning inlagd.<br>
Exempelrad ett.<br>
Exempelrad två.<br>
Exempelrad tre.<br>
Exempelrad fyra.</p>
<p><img src="bildfilnamn.jpg" width="50%" height="50%"><br>
Beskrivande text till bild</p>
<p><b>Avsnittsrubrik</b></p>
<p>Ett avsnitt utan inlagda radbrytningar. Exempelrader.</p>
<p>Beskrivande text till musiklänk<br>
<audio controls>
<source src="musikfilens namn.mp3" type="audio/mpeg">
</audio></p>
<video controls poster="bildens namn.jpg" width="400" height="225" preload="none">
<source src="filmfilens namn.mp4" type="video/mp4">
</video></p>
<p><a href="komplett internetadress">Hemsidesnamn</a><br>
Kommentar</p>
</div>
</body>
</html>
Exempel på hemsida, huvudrubrik
Skrivet av Lars Bobeck 2019
Exempel på underrubrik
Exempelrader med rabrytning inlagd.
Jag förstår att man kan spela fyrhändigt piano, men hur spelar man 16-fotsbas?
Sveriges offentliga sektor betalar några hundra mljarder till sig själv varje år.
Det handlar främst om skatt på pensioner och offentliganställdas löner.
En del av budgeten är alltså bluff, det gäller både inkomster och utgifter.
Författaren 2016
Exempel på avsnittsrubrik
Ett avsnitt utan inlagda radbrytningar. Vi har i vår demokratiska grundlag en obegränsad åsiktsfrihet i Sverige. Ändå har storföretag och större myndigheter med självaktning en obligatorisk värdegrund för sina anställda. Detta går rimligtvis inte ihop, åsiktsfriheten är tydligen en impopulär grund i vår demokrati. Se § 21 i kapitel 2 av Regeringsformen, vår viktigaste grundlag. Se också § 1 i kapitel 1 i samma grundlag. Åsiktsfriheten innebär visserligen inte en rätt att få vilket jobb man vill, men det borde bara vara intresseorganisationer och speciellt skyddsvärda verksamheter som får ställa krav på de anställdas åsikter. Annars handlar det om diskriminering.
Hammondorgel med författaren
Grodfilm
Procol Harum
Den bästa versionen av A Whiter Shade of Pale?
Till sist ett tack till datakonsulten Torbjörn Nordlindh som bidragit med några html-koder.