Grunderna i HTML5

HTML står för Hyper Text Markup Language och är ett märkspråk för hypertext. Hypertext kan enkelt beskrivas som länkade dokument, läsaren kan fritt följa ett spår efter eget intresse.

För att skapa ett HTML5 dokument måste man först deklarera dokumenttypen (!DOCTYPE html), vilket talar om för webbläsaren vad det är för typ av dokument den läser in. Därefter definierar man <html>-taggen, som representerar kärnan/taket av HTML dokumentet. Alla andra HTML element (förutom !DOCTYPE) skall befinna sig inom HTML-taggarna.

I HTML-taggen kan man definiera ett antal attribut, varav en är "lang". Med hjälp utav "lang" attrubutet kan man specificera vilket språk innehållet av elementen skall ha. Man bör även specificera vilken teckenkod som skall användas. Detta gör man med charset attributet i meta-taggen. Meta-taggen är ett tomt element (behöver inte stängas) och skall definieras inom head-taggarna. I head-elementet kan man även inkludera en title för dokumentet, vilka scripts som skall användas samt vilka CSS filer som skall användas.

Efter att man definierat dokumenttyp, språk och teckenkod kan man börja med själva innehållet av sidan. Detta gör man inom body-taggarna. När man väl känner sig nöjd med sidan bör man validera den med w3c Markup Validation Service. Denna tjänst scannar igenom HTML-dokumentet och avgör om programmeringsspråket följer bestämda syntaxregler. Detta är ett bra verktyg för att höja kvalitén av webbplatsen och se till att olika webbläsaren inte blir förvirrade när de läser dokumentet.

Det var lite kort om hur ett HTML-dokument är uppbyggt. Nedan kan du läsa mer om viktiga HTML-element.

Struktur

Element Beskrivning Exempel
<body>

Definierar kroppen av ett dokument, där själva innehållet realiseras.

<body>Innehållet av dokumentet...</body>
<head>

Här anger man all meta data.

<head> <meta charset="UTF-8"> <title>Grunderna i HTML5</title> <link rel="stylesheet" href="style.css"> </head>
<html>

Representerar kärnan av HTML dokumentet, alla andra HTML element (förutom !DOCTYPE) skall befinna sig inom HTML-taggarna.

<html> <head> <title>Titeln</title> </head> <body> Inehållet..... </body> </html>
<title>

Definerar namnet (eller titeln) av HTML dokumentet.

<title>Grunderna i HTML5</title>

Metainformation

Element Beskrivning Exempel
<meta>

Definierar metadata (information om data) om HTML dokumentet. Metadata anges alltid med namn/värde. Content atrributet måste definieras om name eller http-equiv attributen defineras.

<meta name="" content="">
author-värde

Definierar vem som är skaparen av webbplatsen.

<meta name="author" content="Reza Rohani">
description-värde

Definierar en beskrivning av webbplatsen.

<meta name="description" content="Grunderna i HTML5">
generator-värde

Specificerar mjukvarupaketet som används för att generera dokumentet.

<meta name="generator" content="Frontweaver 8.2">
http-equiv-värde

Med http-equiv attributet kan webbsidan kommunicera inledande information med webbläsaren.

<meta http-equiv="content-type|default-style|refresh" content="">
keywords-värde

Definierar nyckelord för sökmotorer

<meta name="keywords" content="HTML5, Grunder, Hemsida">
robots-värde

Med detta attribut kan man kontrollera hur indexeringen av individuella webbsidor skall ske, samt vad som skall visas för användare i sökresultat.

<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW"> <META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

Text

Element Beskrivning Exempel
<abbr>

Ett beskrivande element som definierar förkortningar.

<abbr title="Hypertext Preprocessor">PHP</abbr>
PHP
<address>

Används för att ange kontakt informationen till skaparen av dokumentet.

<address> Skapad av <a href="mailto:sulle@example.com">Sulle Sullejman</a>.<br> Besök oss på<br> sulle.com<br> 192 58, Sollentuna<br> Stockholm </address>
Skapad av Sulle Sullejman. Besök oss på sulle.com 192 58, Sollentuna Stockholm
<blockquote>

Används för att citera text från andra källor.

<blockquote cite="http://www.brainyquote.com/"> Keep your face to the sunshine and you cannot see a shadow. </blockquote>
Keep your face to the sunshine and you cannot see a shadow.
<br>

Skapar en radbrytning.

Hej<br>Jag heter Sulle<br>Vad heter du?
Hej
Jag heter Sulle
Vad heter du?
<cite>

Används för att definiera/betona titeln av ett verk.

<p><cite>Sulles muskler</cite> av Sulle Sullejman.</p>
Sulles muskler av Sulle Sullejman.
<code>

Definierar/betonar ett stycke programmering språk.

<code>if(1>0) {echo "Sulles muskler";}</code>
<dfn>

Definierar en term i HTML dokumentet. Vill man kan man använda title attributet och liknande resultat som abbr-taggen. Man kan dessutom integrera abbr-taggen i dfn-taggen.

<p><dfn>CSS</dfn> definierar hur HTML-elementen skall presenteras. </p>

CSS (Cascading Style Sheet) definierar hur HTML-elementen skall presenteras.

<div>

Definierar en avdelning eller en sektion i ett HTML dokument.

<div> <h3>Rubrik</h3> <p>Text</p> </div>
<em>

Betonar text, skapar en kursiv effekt på texten.

<em>Betonad text</em>
Betonad text
<h1>,<h2>...<h6>

h1 till h6 används för att definiera rubriker i HTML dokumentet. Dessa har olika standardstorlekar (typsnittet) men går även att konfigureras med hjälp av CSS.

<h1>Rubrik 1</h1> <h2>Rubrik 2</h2> <h3>Rubrik 3</h3> <h4>Rubrik 4</h4> <h5>Rubrik 5</h5> <h6>Rubrik 6</h6>

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5
Rubrik 6
<kbd>

Precis som em och code är kbd en stil-tagg, vilket betonar inmatning av tangenter.

<kbd>Ctrl+V</kbd>
Tryck in följande tangenter: Ctrl+V
<p>

Definerar ett stycke text.

<p>Definerar ett stycke text.</p>
<pre>

Bevarar textformateringen från ursprungsinmatningen.

<pre> 20 years ago we had Johnny Cash, Bob Hope and Steve Jobs. Now we have no Cash, no Hope and no Please dont let Kevin Bacon die! </pre>
	20 years ago we had Johnny Cash,
	    Bob Hope and Steve Jobs. Now we have no Cash, no Hope and no Jobs. 


	Please dont let Kevin Bacon die!
	
<q>

Definierar ett kortare citat.

<q>If you change the way you look at things, the things you look at change</q>
If you change the way you look at things, the things you look at change
<span>

Ger en speciell egenskap till en viss utvald text. Taggen i sig medför ingen visuell ändring, men kan göra det med hjälp av CSS.

<p>If you change the way you look at things, <span>the things you look at change</span></p>

Hypertext

Element Beskrivning Exempel
<a>

Definierar en hyperlänk, vilket används för att länka en sida till en annan. Viktigaste attributet i a-taggen är href, vilket indikerar länkdestinationen.

<a href="http://www.veetle.com">Besök Veetle</a>
Relativ och absolut länk

En absolut URL innehåller kommunikationsprotokollet HTTP och följs av ett domännamn.

En relativ URL används inom en webbplats och anger sökvägen mellan mappar och dokument. Inget kommunikationsprotokoll HTTP eller domännamn behöver anges.

Absolut: <a href="http://www.veetle.com">Hem</a> Relativ: <a href="../index.html">Hem</a>
Länk till ankare

Ett ankare som placeras någonstans i koden kan användas för att länka till avsnitt inom samma dokument eller till ett avsnitt i ett annat dokument. I HTML5 skall man använda sig av attributet id för att definiera ett ankare (inte name attributet).

<p id="ett_ankare">Hej jag heter Sulle Sullejman</p> <a href="#ett_ankare">Gå till mitt namn</a>
Bild-länk

Mellan start- och slutmärket av a-taggen kan man infoga en bild och på så sätt få en bild-länk. Det är viktigt att alltid använda ALT attributet när man infogar en bild, då målgruppen kanske inte kan se själva bilden. I sånna fall dyker ALT-informationen upp.

<a href="http://sulle.se"> <img src="sulle.gif" alt="Bild på Sulle"> </a>
Don't push button
Länk till olika protokoll

Det går även att länka till andra protokoll än HTTP. Exempel på andra protokoll är HTTPS (Hypertext Transfer Protocol over Secure Socket Layer) och FTP (File Transfer Protocol).

<a href="ftp://user:password@ftpserver_url/path">FTP server</a>
<a href="https://www.facebook.com/">Facebook</a>
Mailto-länk

Ett enkelt sätt att starta en användarens mailklient för att skicka ett mail.

<a href="mailto:Sulle@gmail.com">Maila mig</a>

Oordnad, ordnad och beskriven lista

Element Beskrivning Exempel
<dl>, <dt>, <dd>

<dl> är en definitionslista som man med hjälp utav kan lista olika termer. <dt> och <dd> används i konjunktion med <dl> där <dt> definierar namnet på termen och <dd> definierar beskrivningen.

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Coffee
Black hot drink
Milk
White cold drink
<ol>

<ol> skapar en ordnad lista som antingen är numrerad eller i bokstavsordning. Varje artikel (item) som är med i listan skapas med <li>.

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
  1. Coffee
  2. Tea
  3. Milk
<ul>

<ul> skapar en oordnad lista som vanligtvis är markerade med punkter. Varje artikel (item) som är med i listan skapas med <li>.

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
  • Coffee
  • Tea
  • Milk

Tabell

Element Beskrivning Exempel
<table>, <tr>, <th>,<td>

För att skapa en tabell använder vi oss utav <table>. En tabell i HTML består utav tre viktiga taggar i konjunktion med <table>. Dessa är följande: tabellrader (<tr>), tabellrubriker (<th>) samt tabelldata (<td>).

<table> <tr> <th>Element</th> <th>Beskrivning</th> <th>Exempel</th> </tr> <tr> <td>Namn på element</td> <td> <p> För att skapa en tabell använder vi oss utav... </p> </td> <td> <p> Exempel här </p> </td> </tr> </table>
Element Beskrivning Exempel
Namn på element

För att skapa en tabell använder vi oss utav...

Exempel här

<caption>

Ett valfritt element i en tabell som fungerar som en rubrik för hela tabellen.

table> <caption>Viktiga utgifter</caption> <tr> <th>Utgift</th> <th>Belopp</th> </tr> <tr> <td>Sugrör</td> <td>20kr</td> </tr> <tr> <td>Ny bil</td> <td>100 000kr</td> </tr> </table>
Viktiga utgifter
Utgift Belopp
Sugrör 20kr
Ny bil 100 000kr

Bild

Element Beskrivning Exempel
<img>

Definierar en bild i en HTML sida. Består av bl.a. två viktiga attributer: SRC och ALT. SRC är källan (URL:n) till bilden och ALT är den alternativa texten som man specificerar om bilden inte kan visas.

<img src="sulle.gif" alt="Bild på Sulle">
Bild på Sulle

Bildkartor

Element Beskrivning Exempel
<map>, <area>

Med <map> och <area> kan man skapa klickbara områden på en bild. För att åstadkomma detta måste man associera <img> attrubitet "usemap" med "name" attributet i <map> för att skapa en relation mellan dem. Därefter använder man <area> för att definiera de klickbara platserna. Attributen som används i <area> elementet är: "SHAPE" = vilken form det klickbara området skall ha, "COORDS" = koordinaterna för det klickbara området, "HREF" = länken som användaren ska skickas till när användaren klickar på området samt "ALT" = den alternativa texten som dyker upp om länken inte skulle fungera.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>