Doctype används överst i ett HTML dokument för att berätta för browsern vad för typ av dokument det är som den läser in.
För att berätta för en browser att det är HTML5 som dokumentet är skrivet i så skriver man "doctype html".
Teckenkod är koden som beskriver vilka tecken som används i html texten. ASCII(American Standar for code Information Interchange)
har olika standarder,
t ex är UTF-8 en teckenkod.
Teckenkodning är ett sätt att representera symboler så att datorn kan förstå dem, det datorn gör tillslut är att bryta ned teckenkoderna till binära 1:or och 0:or.
Så teckenkoden finns där för att datorn ska förstå symbolerna som man skriver i ett html dokument.
Det finns olika teckenkodningar pga att det finns tecken som inte alla språk använder t ex det engelska språket som inte använder åäö.
För att specificera vilken teckenkod man vill ha i sin html kod så kan man skriva t ex så här ifall man vill ha UTF-8, "meta charset="UTF-8"".
Näst högst upp kan man skriva "< html lang="sv-se"">" för att deklarera vilket språk html:en är skriven på, i det här exemplet skrev jag "sv-se" vilket betyder "svenska-sverige" för att visa vilket land det är skrivet i, informationen är intressant för sökmotorer.
Valdering används för att analysera koden som man har skrivit och se eventuella brister såsom att man inte följer HTML5 standard.
När XHTMl "ersattes" av HTML5 så blev fick man möjligheten att väldigt fritt skriva HTML kod som Webbläsare kan läsa och visa så som man har tänkt trots misstag och att man blandar olika sätt att skriva på, så som att blanda XHTML stil och HTML. För att validera sin HTML5 kod så kan man gå in på < a href = "http://validator.w3.org"> W3C validator </a> . Genom att ladda upp, klistra in eller länka till sin hemsida kan man få varningar och noteringar om brister i sin kod.
Första raden i ett HTML dokument deklarerar vad det är för typ av dokument, det är <!doctype html> för ett vanligt html dokument.
Den andra raden är html taggen som öppnas där och som man sedan kommer skriva imellan, den sista raden i dokumentet stänger html dokumentet genom att skriva </html> inom vinkelparanteser.
I html taggen kan man även deklarera vilket språk och vilket land hemsidan kommer ifrån genom att skriva <html lang = "sv-se">
Därefter kommer huvud strukturen, den deklarerar man genom att skriva
<head< och sedan stänger man med "</head>
I huvudet kommer rubriken för hemsidan att finnas, det som kommer synas högst upp ovanför adressfältet i webbläsaren.
Även teckenkoden ska man lägga i huvudet.
Sen kommer body delen av html:en den deklareras "<body>". Det är här allt innehåll kommer ligga, ett väldigt enkelt exempel är att ha några rubriker följt av paragrafer med text.
Här lägger man texten eller innehållet i sin hemsida, exemplevis kan man lägga en uppsats med rubriker och text här
Head används för att deklarera teckenkoden(och annan metainformation) som används, och för hemsidans rubrik som kommer att synas ovanför addressfältet, exemplevis om man går in på
< a href ="http://google.com"> Google </a> så ser man "Google" ovanför adressfältet.
Html definierar början och slutet av ett html dokument.
Här skriver man titeln för dokumentet, exemplevis har < a href ="http://facebook.com"> facebook </a> titeln facebook som syns högst upp i broswern.
Meta används för att skriva in metadata om html dokumentet(i head), informationen kommer inte att synas för besökare endast för webbläsaren eller en sökmotor. Exemplevis att sidan ska uppdateras i ett visst intervall för besökaren.
Name används för initiera en meta tag, name används tillsammans med "content" som beskriver innehållet , så om man t ex ska använda description skriver man < meta name = "description" content ="Min första hemsida">
author taggen används för att berätta vem som är författaren bakom hemsidan t ex < meta name = "author" content = "Alexander Nordkvist">
description används för att beskriva hemsidan, sökmotorer kan läsa av den här informationen. <meta name = "description" content ="Min första hemsida">
generator används för att visa vilket verktyg som användes för att skapa hemsidan, <meta name = "generator" content ="Wordpress 3.00">
http-equiv kan användas exempelvis för att updatera hemsidan på ett givet intervall, exemplevis <meta http-equiv="refresh" content="15" >
Keywords används för att skriva nyckelord som beskriver hemsidan, nyckelorden gör det lättare för en sökmotorer att hitta ens hemsida.
Robots använder man för att styra över hur vad man vill att en sökmotor ska läsa ens sida och indexera den, t ex så kan man < meta name = "robots" content = "all" > för att en sökmotor ska indexera huvudsidan, eller så kan man styra lite mer över hur indexeringen ska ske t ex < meta name = "robots" content = "index, follow"> då kommer indexeringen styras till resten av sidorna som länkas från huvudsidan.
abbr kan man använda till förkortningar t ex förkortningen UFO står för "unidentified flying object" genom att använda abbr så kan man skriva in hela namnet som kommer synas när man för muspekaren över förkortningen.
address används för kontaktuppgifter till skaparen av html dokumentet eller t ex en artikel.
blockquote används när man citerar ett stycke, inom blockquot vinkelparanteserna kan man ha länka till källan man citerar.
br används för att göra en radbrytning, br kan sättas in överallt i body:n och behöver ingen sluttagg.
cite används för namnen på böcker, filmer etc.
code använder man när man ska skriva exempelvis programmeringskod i sitt dokument. formatteringen på texten kommer då att anpassas så att koden visas på ett lämpligt sätt.
dfn används för att definiera en term, stilen kommer bli kursiv.
div används för att definera en del av html dokumente t ex så kan man använda CSS på den delen man definierar.
em används för att betona en del av texten, betoningen ändrar stil på den texten som man väljer att betona.
h1- h6 är rubriker, den första är den största den sista är den minsta.
Kan exempelvis används för att definiera det en användare ska skriva in i ett programm, ungefär som code taggen.
Används för att skriva text.
pre använder man för att formattera texten så att den ser ut som den gör inom pre-taggen.
q används för korta citat, texten inom q-taggen kommer få citattecken.
samp används när man ska definiera output från ett programm
span används för att "fånga upp" en del i en text, inom span kan man t ex färglägga den uppfångade delen med CSS.
strong används för att markera viktig text
var används för att markera en variabel, den markerade variabeln kommer bli snedskriven
a taggen använder man när man ska länka, inom den första a taggen använder man "href=" där lägger man länken och sluter första vinkelparantesen, sen skriver man den texten som det ska gå att klicka på och sluter sen a-taggen.
en absolut länk är när man skriver en hel länk t ex. till en annan hemsida
en relativ länk används inom den egna hemsidan för att navigera till olika delar av den. Navigationen kommer att ske inom mapphierarkin som hemsidan ligger i. Om man vill länka till en sida som ligger i samma mapp som sidan som man är på så behöver man endast skriva in filens namn i href t ex "a href= sida2.html". Om man vill länka till en sida som ligger utanför mappen som den nuvarande sidan är på exempelvis neråt i mapphierarkin så skriver man mappens namn och "/" och sedan filens namn i href. För att gå uppåt i mapphierarkin skriver man två punkter och "/" sedan filens namn.
För att skapa ett ankare på en html sida så skriver man "name= " istället för href i a taggen och där skriver man ankarets namn, det kan t ex vara en rubrik som man vill ankra. För att länka till det här ankaret från en annan del av hemsidan, exempelvis ett annat html dokument så skriver man a taggen och i href så skriver man html filens namn följt av "#" och ankarets namn.
Först behöver man deklarera en bild med img-taggen, i img-taggen så använder man #usemap ="minBild" . Sen använder man map-taggen där man pekar på namnet som man deklarerade i #usemap , det kommer då se ut som följande:
map name="minBild" area shape="rect" coords="0,0,68,114" href="http://google.com" alt="Google"
Det klickbara området är en rektangel(som även kan vara cirkel och polygon) med koordinaterna"0,0,68,114" och sidan som det länkas till är google.com, beskrivningen av länken är endast "Google".
För att länka till en hemsida använder man http protokollet men det går att använda andra protokoll såsom FTP t ex. < a href= "ftp://adressen" > beskrivning </a> .
För att göra en Mailto-länk så kan man t ex skriva såhär < a href="mailto: namn@företag.com?Subject"Möte"> Maila!</a> .
Först så skriver man mejladress i href samt ämnet för mejlet sen så anger man texten som det ska gå att klicka på.
dl taggen startar en lista, dt används som en rubrik i listan medan dd används för att förklara det som står i rubriken(dt). t ex < dl > <dt> Choklad <dt > < dd > Huvudingrediensen är kakao bönor <dd >
< /dl >
ol används för en ordnad lista, li-taggen används för att skapa listelement som kommer få en siffra från i vilken ordning de ligger i (1 och uppåt om inte en startsiffra anges). Exempelvis kan en kort ordnad lista skapas såhär:
<ol> < li > Friidrott </li > <li> Hockey </li>
<li> Fotboll </li> </ol>
ul används för att skappa en oordnad lista, listelementen kommer att få en svart cirkel framför sig då, listan skapas på samma sätt som med ol-taggen fast givetvis med ul-tagg istället.
Med "table" skapar man en tabell, i tabellen skapar man en rad med
< tr> , och med
< th > gör man en rubrik i tabellen,
<td> skapar en cell i tabellen. En enkel tabell kan se ut såhär:
<table border = "1">
<tr>
<th> Placering </th>
< th> Namn </th>
</tr>
< tr>
<td> 1 < /td>
< tdl> Usain Bolt </td>
</tr>
</table>
Caption används för att sätta en rubrik på en tabell. För att ge det förra exemplet en rubrik så sätter man in <caption> Resultat </caption> direkt efter att tabellen är initierad.
colgroup används för att att bestämma egenskaper för kolumner i en tabell, exemplevis så kan man färglägga utvalda kolumne:
<table border="1">
<colgroup span="2" style="background-color:red">
</colgroup>
<tr>
<td>Första kolumnen </td>
<td>Andra kolumnen </td>
<td>Tredje kolumnen </td>
</tr>
</table>
Eftersom span är satt till 2 så kommmer de första två kolumnerna att vara röda.
I colgroup kan man använda col för att bestämma en enskild kolumnens egenskaper, exempelvis kan man ändra storleken på en kolumn som annars anpassas efter längden på kolumnens rubrik. Det kan se ut såhär:
<table border="1">
<colgroup span="2" style="background-color:red">
<col width = "100"> </col>
<col widht ="150" > </col>
</colgroup>
<tr>
<td>Första kolumnen </td>
<td>Andra kolumnen </td>
<td>Tredje kolumnen </td>
</tr>
</table> De första 2 kolumnerna får sin bredd bestämd medan den 3e och sista kolumnens bredd sätts automatiskt utifrån rubrikens längd.
tbody, tfoot, thead används i respektive del av en tabell (huvud,kropp, fot) för att att formatteringen ska bli rätt framförallt när man skapar större tabeller. tfoot kan användas t ex för att summera summor från celler.
Med img länkar man en bild till sitt html dokument. Img har två atttribut ""src" och "alt". Src tar adressen där bilden ligger och alt beskriver bilden(ifall bilden inte laddas korrekt kommer beskrivningen upp). Img tar även attributen
"height" och
"width" för att styra storleken på bilden. Exempelvis:
<img src ="fotboll.gif" alt ="En fotboll" height="50" width ="50">
En img-map gör att man kan klicka på en del av en bild och komma åt en länk. Det som styra vilken del av bilden man kan klicka på är "area", area kan utformas som en "rect","circel" och "polygon". I area lägger man till koordinater(coords), "href" med en länk och en "alt" med beskrivning på området som man täcker.
Map knyter samman med en bild genom att använda det namn som man deklarerat i usemap attributet på en bild. Exempelvis:
<img src ="fotboll.gif" alt ="En fotboll" height="50" width ="50" usemap="#fotboll">
<map name="fotboll">
<area shape= "circle" coords ="0,0,0" href ="http//:fifa.com" alt =fifa>
</map>