Webbkoda - HTML

HTML är grunden i för att skapa hemsidor, det är den koden som vi skriver för att webbläsaren skall förstå vilket innehåll vi vill skall presenteras på vår webbsida.
Här har vi samlat de HTML taggar som är mest relevanta och användbara när man kodar hemsidor. För varje tagg finns en text som beskriver vad taggen gör och du får också ett kodexempel som visar hur koden skrivs.

Startkod HTML

De taggar du behöver från start

<!DOCTYPE html>

Märkspråket HTML finns i flera olika versioner. Beroende lite på vilken version man använder så finns det olika element som kan användas. För varje generation har det tillkommit element men det har också försvunnit vissa funktioner som dels blivit överflödiga eller ej ses som korrekta. Det är viktigt att vara tydlig för webbläsaren vilken version man använder. Därför börjar hela HTML dokumentet med en DOCTYPE.

Kodexempel

<!DOCTYPE html>

<HTML>

Förkortningen HTML står för Hyper Text Markup Language och är det märkspråk som webbsidor är konstruerade med. När en webbläsare läser in en hemsida som innehåller en starttagg med HTML så förstår den hur dokumentet skall renderas upp. Därför är det viktigt att varje dokument startar och avslutas med taggen HTML.

Kodexempel

<!--- HTML --->
<html lang="sv">

</html>

<HEAD>

Om man ser en hemsida som en människa så finns det flera namn som har lånats. Till exempel head, body och footer. I head taggen så skriver vi kod och funktioner som inte direkt kommer vara visuellt synligt på hemsidan. Om man skall ladda in externa css-dokument eller javascript kod som exempel. Eller vilken uppsättning täcken som skall finnas på hemsidan. Element som skall finnas representerade innanför head taggen är följande. Title, Meta, Link. Title Title är precis som det låter titeln på hemsidan. Den sys inte direkt på hemsidan men är viktigare än man tror. Det direkt synliga av title taggen är det som står i fliken på webbläsaren. Se bild nedan. Men kanske än viktigare är det det som står i titletaggen som blir den klickbara länken när får sökresultatet på google / bing eller annan sökmotor. Titel taggen är även viktigt när man talar om SEO eller sökmotoropptimering.

Kodexempel

<!--- Head --->
<head>

</head>

<title>

Title är precis som det låter titeln på hemsidan. Den är inte visuellt synlig på själva webbsidan men styr texten i fliken i din webbläsare. <title>-taggen skall finnas i <head>-taggen för att fungera korrekt. Det är viktigt att titeln stämmer överens med innehållet på HTML dokumentet då det är den titeln som syns när du söker på sökmotorer så som Google och Bing.

Kodexempel

<!--- Title --->
<head>
   <title>Webbkoda.se</title>
</head>

<META>

Meta taggen är inte synlig på hemsidan men den innehåller information om informationen på hemsidan. Meta taggen läs av webbläsaren och sökmotorer för att förstå vad det är för information som kommer att presenteras. Det finns några viktiga värden som är viktiga att känna till. Description – Vad den aktuella hemsidan handlar om. Keywords – Vissa viktiga nyckelord för sökmotorerna att förklarar innehållet. Author – Vem det är som har skapat innehållet. Även attributet charset är viktigt då det hjälper webbläsaren att läsa in rätt teckenuppsättning. Den svenska språket innehåller som känt är ÅÄÖ och för att dessa skall visas upp på ett rätt sätt så anger man UTF-8 som teckenuppsättning.

Kodexempel

<!--- Meta --->
<head>
   <meta charset="UTF-8">
   <meta name="description" content="Webbskola">
   <meta name="keywords" content="HTML,CSS,Webbkoda">
   <meta name="author" content="Erik Malmsköld">
</head>

<style>

Om du vill skriva CSS kod i HTML dokumentet så kan du använda taggen <style>. Style taggen skall sätta in i <head>-taggen i HTML-dokumentet. Tänk på att den CSS koden du skriver lokalt i HTML- dokumentet kommer bara påverka just detta dokumentet. Om du skapar webbsidor med fler HTML-dokument är det bättre att skriva CSS-koden i ett separat dokument.

Kodexempel

<!--- style --->
<style type="text/css">

    h1 { 
        color:red
    }    

</style>

<link>

För att länka samman ditt HTML-dokument med andra typer av dokument så skall du använda <link>-taggen. Om du vill länka in externa formatmallar (css-kod) och bokmärkesbilder (favicon) så kan du göra det med <link>.

Kodexempel

<!--- Link --->

    <link rel="stylesheet" href="css/main.css" type="text/css">
          
    <link href="favicon.ico" rel="icon" type="image/x-icon">

<BODY>

Efter vi nu klarat av head taggen så kommer vi in på body taggen. Innan för start och sluttaggen för body så skall du placera allt innehåll som besökaren skall kunna se på hemsidan. Det är navigation, länkar, text, bilder, video och mycket mer. Det är också body-taggen som kan styra allt utseende på hemsidan. Med hjälp av CSS så kan du lägga upp de generella reglerna som påverkar allt gällande utseende. Läs mer på CSS-kapitlet

Kodexempel

<!--- Body --->
<body>
  <!--- Här kommer innehållet ---->
</body>

<!— kommentar —>

Kommentarskod hjälper dig som utvecklare att strukturera upp din kod och skriva förklaringar och minnesanteckningar direkt i koden. Det man skriver innanför <!— och —> kommer inte läsas av webbläsaren och visas inte upp på själva webbsidan men när man tittar i källkoden så syns det i klartext.

Kodexempel

<!--- kommentarskod --->

  <!— Skriv din kommentar här —>

Kodexempel

<!---- Startkod HTML ----->
<!DOCTYPE html>
<html lang="sv">
    <head>
        <title>Startkod</title>
        <meta charset="utf-8">
        <link href="css/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <!--- Här kommer innehållet på webbsidan ---->

    </body>
</html>

Text & Rubriker

Skapa rubriker och brödtext i HTML

<H1> – <H6>

För att hjälpa läsaren är det viktigt att rätta bra rubrik. Med hjälp av taggarna H1 till H6 så kan du förtydliga för läsaren vad som är huvudrubrik och underrubrik. Dessa taggar har en standardutseende som man enkelt kan ändra med hjälp av CSS.

Vad man skriver innanför dessa rubriktaggar har också en betydelse när man tittar på SEO eller sökmotoroptimering. Google och Bing värderar det du har skrivit inom H1 taggen högre än det du skrivit med H6 taggen. Så fundera igenom vad som är viktigast och skriv denna text inom H1. Läs mer om SEO.

See the Pen BNmPYm by Webbkoda (@webbkoda) on CodePen.

<P>

P taggen står för stycke, mycket vanlig när du skall sätta in brödtext på din hemsida. För att markera att du skall börja på nytt stycke så sätter du den aktuella texten runt <p> </p> tagggar och då får du ett antal blank rader ner till nästa stycke.

För att skapa ett enkelt radbrytning se BR

Kodexempel / Resultat

See the Pen XbzBZw by Webbkoda (@webbkoda) on CodePen.

<B>

För att betona ett stycke i texten kan man använda sig av <b> taggen. Standard utseendet gör att texten blir fet men du kan förändra detta med hjälp av CSS.

Resultat / Kodexempel

See the Pen YXEjaG by Webbkoda (@webbkoda) on CodePen.

<STRONG>

För att förstärka och betona ord eller strycken i din text så kan man göra texten fet respektive kursiv. <strong> hjälper också sökmotorer att förstå ett det markerade ordet är av större viktigt.

En fråga som ofta kommer vad det är för skillnad mellan och svaret på frågan är helt enkelt att båda taggarna gör den visuella effekten att texten blir fet. Men det är bara som också difengerar för talsynterser och sökmotorer att den markerade texten är just viktigt.

 

Resultat / Kodexempel

See the Pen YXEjaG by Webbkoda (@webbkoda) on CodePen.

<Q>

När du skall skapa ett vanligt citat i texten så använder du taggen <q>. Förutom att du förklarar för skämläsare och sökmotorer att detta stycke är ett citat så får du automatiskt citattecken.

Resultat / Kodexempel

See the Pen MwOBGL by Webbkoda (@webbkoda) on CodePen.

<blockquote>

När vi vill rama in ett längre citat i en text så är det ett bra verktyg. Citatet delas av från resten av texten och får ett indrag från höger och vänster. Kanon om du vill lyfta fram något speciellt i en text.

Resultat / Kodexempel

See the Pen oXoMGj by Webbkoda (@webbkoda) on CodePen.

<SUB> & <SUP>

SUB är taggen använder du när du skall skapa nedsänkt text så som H2O.

SUP är taggen du använder när du skapar upphöjt text som m2

Resultat / Kodexempel

See the Pen rVYrYR by Webbkoda (@webbkoda) on CodePen.

<I>

<I> taggen är också ett sätt att betona text på Webbsidan men till sillnad på <b>-taggen så blir resultatet att texten blir kursiverad med <I>-taggen.

Resultat / Kodexempel

See the Pen WvXKXz by Webbkoda (@webbkoda) on CodePen.

Länkar och Navigering

Länka ihop din webbsida med världen

<A>

När du skall skapa en länk på din webbsida så behöver du använda taggen <A>. A betyder (Anchor) eller ankare på svenska. Förutom start och sluttagg för <A></A> så behöver också attributet HREF som betyger Hyperlink Reference och bestämmer var man skall komma när man klickat på länken.

Intern länk

Är länkar till andra dokument på din webbsida. Om besökaren klickar på kontakt så kommer den till dokumentet kontakt.html

Intern länk

<!--- Intern länk --->
<a href="kontakt.html">Kontakt</a>

Externa länkar

De länkar som pekar bort från din webbsida till en annan webbsida kallas för externa länkar. Om besökaren klickar på länken källa wikipedia så kommer besökaren lämna din webbsida och hamna på wikipedia webbsida istället.

Tänk på att du skriver ut den fullständiga URL adressen inklusive HTTP

Extern länk

<!--- Extern länk --->
<a href="https://sv.wikipedia.org/">Wikipedia</a>

Ankare / Bokmärke

Om du har ett stort dokument med mycket information eller om du konstruerar en webbsida som man behöver scrolla mycket kan det bara bra att skapa lokala länkar för dokumentet.

Ankare / Bokmärke

<!--- Ankare / Bokmärke --->
<a href="#kontakt">Kontakt</a>

Bilder

Berika din webbsida med bilder

<IMG />

För att sätta in bilder på din webbsida så skall du använda taggen <img />. Taggen är en förkortning på engelskans images och är en av de taggar som inte har någon sluttag. Om som ni ser i kodexemplet till höger så avslutat starttaggen med ett /.

Läs mer
Ändra storleken på bilder med CSS
Filformat för bilder på webbsidor.

Attribut

src=”macbook.jpg”
src är en förkortning på ”source” och används för att ange sökvägen till bilden. Om ditt html dokument och bilden ligger i samma mapp behöver du bara skriva bildfilens namn.

alt=””
Alt attributet används för att förklara bilden innehåll. Om bilen visar upp en laptop så kan man då beskriva den som följande. Alt=”Här är min laptop”. Denna text använder skärmläsare som personer med synnedsättning använder. Sökmotorer så som Google och Bing använder denna text för att tolka innehållet.

Kodexempel

<!--- Sätta in bild --->
<img src="macbook.jpg" alt="min laptop">
d

Listor

Strukturera din information med listor

<ul>

Använd taggen <ul> för att skapa en punktlista. Varje del i punktlistan skall vara uppmärkt med en <li> tagg.

Resultat / Kodexempel

See the Pen RPjEQy by Webbkoda (@webbkoda) on CodePen.

<ol>

OL står för (ordered list) och är den tagg du skall använda för att skapa en numerisk lista. Varje del i din lista skall vara uppmärkt med <li> taggen.

Resultat / Kodexempel

See the Pen MwOZVw by Webbkoda (@webbkoda) on CodePen.

<li>

Är taggen för list innehåll (list item). Oberoende om du skapar en punktlista eller en numerisk lista så skall de olika punkterna i listan vara uppmärka med <li> taggen.

Enkla Strukturtaggar

Enkla lösningar för att skapa struktur på webbsidan

<BR>

BR står för Break Row och betyder radbrytning. Du kan sätta fler <BR> efter varandra för att skapa ett vertikalt tomrum men det är rekommenderat att du istället använder CSS för att lösa detta.

Resultat / Kodexempel

See the Pen oXoMJL by Webbkoda (@webbkoda) on CodePen.

<HR>

HR står för Horizontal Rule och skapar ett visuellt synligt sträck över webbsidan. Om du istället vill använda CSS för att skapa ett likande sträck fungerar regeln Border som ett alternativ.

Resultat / Kodexempel

See the Pen waPxRm by Webbkoda (@webbkoda) on CodePen.

HTML5 Strukturtaggar

Strukturera din information korrekt

För att strukturera upp innehållet få finns det html-taggar som hjälper oss att gruppera innehållet. En sådan tag är <div>-taggen. Innan HTML5 introduserades så var <div> den vanligaste taggen för att grupper innehållet. Problemet var att man har ett stort antal <div> taggar och det var svårt som utvecklare att hålla koll på vilken <div>-tagg som gjorde vad.

I och med HTML5 så introducerades en uppsättning nya taggar som gav förutsättningar att skapa mer semantisk kod.

<header>

<header>-taggen märket ut sidhuvudet på på webbsidan. Header taggen kan också användas för att marketa ett sidhuvud på en nyhet eller en artikel. Innanför header taggen så kan man placera information som rubiken för nyheten eller logon för hela webbsidan. Det är också vanligt att man har webbsidans navigation i <header>-taggen.

Kodexempel

<!---- header  ---->
<header>
    
    <h1>Välkommen till Webbkoda</h1>
    <h3>Lär dig koda med HTML</h3>

</header>

<nav>

<nav>-taggen skall användas för att rama in webbsidans huvudsakliga navigering. <nav>-taggen får bara användas en gång per html-dokument.

Kodexempel

<!---- NAV  ---->
<nav>
    <a href="#">hem</a>
    <a href="#">om oss</a>
    <a href="#">produkter</a>
    <a href="#">kontakt</a>
</nav>

<main>

<main>-taggen är en relativt ny tagg och skall användas för att rama in det aktuella html-dokumentets huvudsakliga innehåll. Om du har en html dokument som heter “ommig.html” så skall du sätta in den text som är unik, det vill säga informationen om dig själv.

Kodexempel

<!---- MAIN  ---->
<main>
    <h2>Om oss</h2>
    <p> Information om oss</p>    
</main>

<section>

<section> används för att dela upp informationen i tydliga avdelningar. Om du presenterar både kontaktinformation och nyheter skall dessa delas in i olika <section> Ett annat tydligt användningsområde för <section>-taggen kan vara att delar in information i kapitel

Kodexempel

<!---- Section ---->
<section>
    <h2>Kapitel 2</h2>
    <h3>Lär dig om SEO</h3>    
</section>

<article>

Om du har en innehåll på webbsidan som i sig kan vara fungera oberoende vilken webbsida det ligger på så är <article> taggen du skall använda. En givet exempel på användning är förstås en nyhet eller en artikel men kan också ha andra användningsområden

Kodexempel

<!---- Article ---->
<article>
    <h2>Webbkoda är online</h2>
    <date>2015-06-12</date>
    <p>Nu är webbkoda online...</p>    
</article>

<aside>

Man vill ofta publicera relaterande innehåll till det man skriver i <main>-taggen. Det kan vara relevanta länkar eller en biografitext om författaren till texten. Det är vanligt att man länkar till sociala medier och likande innehåll. Innehållet i <aside> kan vara samma på hela webbsidan.

Kodexempel

<!---- Aside ---->
<aside>
    <h3>Om författaren</h3>
    <p>Erik Malmsköld är skaparen 
       av webbkoda..</p>

    <h3>Gillar du oss?</h3>
    <a href="#">Facebook</a>
    <a href="#">Twitter</a>
    <a href="#">Instagram</a>
</aside>

<footer>

<footer>-taggen markerar sidfoten på webbsidan. Information som kan vara bra att sätta i sidfoten är copyright information och kontaktinformation till skaparen av webbsidan.

Kodexempel

<!---- footer ---->
<footer>
    © Webbkoda 2015 - Erik Malmsköld 
</footer>

Audio & Video

Berika användarupplevelsen

<video>

Tidigare har det varit svårt att publicera video på webbsidor utan att behöva använda ett tredjeparts tillägg. Vanligast har varit att använda sig flash, men i och med HTML5 så har man introducerat <video>-taggen som låter dig bädda in en videofil på ett mycket enkelt sätt.

Du är begränsad till tre olika videoformat.

Videoformat

MP4 – video/mp4
WebM – video/webm
Ogg – video/ogg

Resultat / Kodexempel

See the Pen ZGaVoQ by Webbkoda (@webbkoda) on CodePen.

<audio>

När HTML5 introducerades så kom det även ett standardiserat sätt att bädda in ljud på webbsidor. Innan så använde man en rad olika tredjepart program som löste detta men nu har vi en tagg som löser problemet.

Du är begränsad till tre olika ljudformat.

Ljudformat

MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Resultat / Kodexemepl

See the Pen WvXLJq by Webbkoda (@webbkoda) on CodePen.

<iframe>

Iframe
Med hjälp av iframe så har du möjlighet att visa upp innehåll från en annan webbsida. När man bäddar in videoklipp från Youtube så använder man just iframe för att visa upp videoinnehållet från Youtube på din webbsida.

Attribut

src=””
Med hjälp av SRC så sätter du adressen till det innehållet du vill visa upp i din iframe-ruta.

Resultat / Kodexemepl

See the Pen qdVvNe by Webbkoda (@webbkoda) on CodePen.