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.
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 musikfil och kodningen type="audio/mpeg" talar om att det är en mp3-fil.
Koden </audio> betyder att musikfilens 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>
<p><a href="komplett internetadress">Hemsidesnamn</a><br>
Kommentar</p>
</div>
</body>
</html>

Exempel på hemsida, huvudrubrik

Skrivet av Lars Bobeck 2017

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 2011

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

Procol Harum
Den bästa versionen av A Whiter Shade of Pale?