HTML & CSS Tutorial

HTML


HTML står för Hyper Text Markup Language och är ett deklarativt språk som beskriver hur en hemsida är strukturerad. HTML består av element som beskriver för webbläsaren hur den skall visa innehållet.

En exempelsida:

<!DOCTYPE html>
<html>
 <head>
  <title> Sidans Titel </title>
 </head>
 <body>
   <h1> En Rubrik </h1>
   <p> En paragraf med text </p>
 </body>
</html>

En Rubrik

En paragraf med text

<!DOCTYPE html> definierar för webbläsaren att dokumentet är HTML5.

<html></html> är rotelementet för sidan och omsluter alla andra element.

<head></head> innehåller meta-information om sidan som sidans titel, språk och mer.

<title></title> är sidans titel och visas i sidfliken i webbläsaren.

<body></body> är dokumentets kropp och är en behållare för allt synligt innehåll.

Element


Ett element består vanligtvis av en startagg, innehåll och en sluttagg. Det finns dock vissa element som inte har en sluttagg.

<start-tagg> innehåll </slut-tagg>

Rubrik


Det finns sex olika fördefinierade rubriker h1 - h6, där h1 är viktigast och h6 är minst viktig.

<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

Paragraf


Paragrafelementet används för att visa ett stycke med vanlig text. Texten är oformaterad, för stilsättning används CSS vilket vi kommer till längre fram.

<p>En bit text</p>
<p>En bit text till</p>

En bit text

En bit text till

Länkar


För att länka till andra sidor så används elementet <a>. Inne i <a> taggen så används attributet "href" för att definierar en URL till sidan du vill länka till.

En absolut adress som pekar till en annan hemsida:

<a href="https://www.google.com/"> Länk till Google </a>

En relativ adress används när du vill länka till en annan fil på samma hemsida. I exemplet nedan så länkar vi till en fil i samma map som den nuvarande sidan.

<a href="sida2.html"> Länk till sida 2 </a>

För att länka till en fil i en undre folder.

<a href="folder/sida2.html"> Länk till sida 2 </a>

För att länka till en fil i en tidigare folder.

<a href="../sida2.html"> Länk till sida 2 </a>

När du länkar till andra filer i din hemsida så är det viktigt att använda relativa länkar. En länk som den nedan fungerar på din dator men om du flyttar hemsidans folder eller lägger upp den på en server så kommer länken inte längre fungera.

<a href= "C:/Users/Hemsida/sida2.html" > Länk till sida 2 </a>

Bilder


För att visa bilder används <img> elementet. Attributet "src" är adressen till bilden du vill visa. Attributet "alt" används för att beskriva bilden om den inte kan visas.

<img src="bild.png" alt="En Bild">
<img src="" alt="En bild på en astronaut">

En Bild
En bild på en astronaut

Formatering


HTML ignorerar extra mellanslag och radbrytningar.

Efter en paragraf så kommer det automatiskt en radbrytning men för flera radbrytningar så används elementet <br>.

<p>text<p/>
<br>
<br>
<br>
<br>
<p>text<p/>

text




text

För situationer som kräver mer än ett mellanslag kan "&nbsp;" användas.

<p>text    text<p/>
<p>text &nbsp; &nbsp; &nbsp; &nbsp; text<p/>

<p>text text<p/>
<p>text    text<p/>

Vissa tecken kan inte visas i text utan de tolkas som kod i HTML. För att visa dessa tecken används Escape-sekvenser. Mindre än "<" och större än ">" skrivs "&lt;" och "&gt;".

<p> mindre än &lt; större än &gt; </p>

mindre än < större än >

Kommentar


För att lägga in beskrivande text som inte skall visas på hemsidan så används kommentarer. Allt mellan kommentarens start-tagg "<!--" och kommentarens slut-tagg "-->" ignoreras av webbläsaren.

<!-- Denna text Ignoreras -->
<p>text<p/>

text

Listor


Oordnad Lista

En oordnad lista är en punktlista. Listan börjar med taggen <ul> och varje punkt börjar med taggen <li>

<p>Oordnad Lista</p>
<ul>
  <li>punkt</li>
  <li>punkt</li>
  <li>punkt</li>
</ul>

Oordnad Lista

  • punkt
  • punkt
  • punkt

Ordnad Lista

En ordnad lista är en numrerad lista. Listan börjar med taggen <ol> och varje punkt börjar med taggen <li>

<p>Ordnad Lista</p>
<ol>
  <li>Ett</li>
  <li>Två</li>
  <li>Tre</li>
</ol>

Ordnad Lista

  1. Ett
  2. Två
  3. Tre

Beskrivande Lista

En beskrivande lista är en lista med termer och beskrivningar. Listan börjar med taggen <dl>, varje term börjar med taggen <dt> och taggen <dd> beskriver varje term.

<p>Beskrivande Lista</p>
<dl>
  <dt>Term</dt>
    <dd>Beskrivning</dd>
  <dt>Term</dt>
    <dd>Beskrivning</dd>
</dl>

Beskrivande Lista

Term
Beskrivning
Term
Beskrivning

Tabell


Tabeller består av ett <table></table> element som omsluter tabellen. Inuti används <tr></tr> för att deklarera en rad. På en rad placeras tabellens celler och här kan <th></th> användas för rubriker eller <td></td> för vanliga celler. det går att ha så många rader du vill men se till att ha lika många celler på varje rad. En cell kan innehålla alla sorters HTML element som bilder, listor, tabeller mm.

<table>
<tr>
  <th>Rubrik1</th>
  <th>Rubrik2</th>
  <th>Rubrik3</th>
</tr>
<tr>
  <td>row2col1</td>
  <td>row2col2</td>
  <td>row2col3</td>
</tr>
<tr>
  <td>row3col1</td>
  <td>row3col2</td>
  <td>row3col3</td>
</tr>
</table>

Rubrik1 Rubrik2 Rubrik3
row2col1 row2col2 row2col3
row3col1
row3col2 row3col3

Formulär


Formulär används när du vill att användaren av hemsidan skall mata in data. nedan följer några vanliga exempel på vanliga former av datainmatning. För att kunna ta emot data så behöver websidan ha ett serverprogram för detta, vilket vi inte går igenom här.

Form

<form action=""></form>

Elementet <form> är en behållare för formuläret.

Attributet action="" används till att definiera en fil på servern som skall hantera den skickade datan.

Input

<input type="" id="" name="">

Vilken type av input vi använder deklareras i type="", det finns flera att välja på som radio, checkbox, date, color, text osv.

Attributet id="" används för att identifiera en specifik form för tex. koppla ihop den med en <label>.

Input behöver ha ett namn för att data skall kunna skickas, det definieras i "name=".

Label

<label for="">Etikett:</label>

<label> används som en etikett till en <input> och kopplas genom att sätta for="" attributet till vald <input> id="". Det går att välja en associerad <input> genom att klicka på <label>.

Text och Password

<form>
<label for="user">Användarnamn:</label>
<input type="text" id="user" name="user">
<label for="psw">Lösenord:</label>
<input type="password" id="psw" name="psw">
<input type="submit" value="Logga In">
</form>





Radioknappar

<form>
<input type="radio" id="musik" name="fav_media" value="Musik">
<label for="musik">Musik</label>
<input type="radio" id="film" name="fav_media" value="Film">
<label for="film">Film</label>
<input type="radio" id="böcker" name="fav_media" value="Böcker">
<label for="böcker">Böcker</label>
</form>



Checkboxar

<form>
<input type="checkbox" id="food1" name="food1" value="Pizza">
<label for="food1">Jag gillar Pizza</label>
<input type="checkbox" id="food2" name="food2" value="Hamburgare">
<label for="food2">Jag gillar Hamburgare</label>
<input type="checkbox" id="food3" name="food3" value="Kebab">
<label for="food3">Jag gillar Kebab</label>
</form>




Datum

<form>
<label for="bokning"> Välj datum</label>
<input type="date" id="bokning" name="bokning">
<input type="submit" value="Boka">
</form>


Number

<form>
<label for="biljett">Välj Antal Biljetter</label>
<input type="number" id="biljett" name="biljett">
<input type="submit" value="Boka">
</form>


CSS


CSS används för att formge hemsidan genom att ändra form, färger, storlek mm. på hemsidans olika element.

Det finns tre olika sätt att applicera CSS, extern, intern och inline

Inline

Inline CSS är en du ändrar still direkt i ett element genom att lägga till style="" attributet i starttaggen

<p style="color:red;">Text</p>

Text

Extern

Det är rekomenderat att använda sig av extern CSS. Du skapar då en fil, ex. "stil.css" och länkar till den i headern i ditt html-dokument. På så sätt så har du all din CSS samlad på ett ställe vilket underlättar när du behöver göra ändringar.

<head>
<link rel="stylesheet" href="stil.css">
</head>

Intern

Intern CSS definieras i headern på ditt html-dokument och omsluts av <style></style> taggar.

<head>
<style>

</style>
</head>

Class och ID

När det kommer till extern och intern CSS så måste du deklararer vilka element som skall stilsättas. om du vill ändra texten så att den är röd så kan du göra det såhär:

p {color: red;}

Då kommer texten vara röd för alla <p> element. Byter vi ut "p" mot "body" så kommer all text som ligger inom <body> och </body> taggarna färgas röd.

Så om vi bara vill stillsätta vissa element så kan vi använda oss av "class" och "id" attributen. Id är unikt så bara ett element på sidan kan det så om vi vill kunna återanvända stillsättning till fler element så är det bäst att använda class.

Id deklareras med "#" och class med ".":

CSS
#mittid {color:blue;}
.minClass {color:red}

<p id="mittid">texten är blå</p>
<p class="minclass">texten är röd</p>

texten är blå

texten är röd

DIV

Div är en ett block-element som är en tom behållare vilket kan användas till att omsluta flera element för stilsättning.

<div class="minClass">
<h1p>Röd Text</h1>
<p>för alla element inom div</p>
</div>

Röd Text

för alla element inom div

SPAN

Span är ett inline-element som är användbart när vi vill stillsätta en del av en text.

<p>Bara <span class="minClass">DETTA</span> ordet är rött.</p>

Bara DETTA ordet är rött.

CSS-Egenskaper


color

Sätter färgen på texten och värdet definieras med ett färgnamn, HEX-värde eller ett RGB-värde.

<p style="color:red;">text </p>

text


font

sätter typsnittet och storlken på texten

<p style="font: 30px Arial;">text </p>

text


text-align

Väljer om texten är vänster, höger, center eller marginaljusterad.

<p style="text-align: left;">text </p>
<p style="text-align: right;">text </p>
<p style="text-align: center;">text </p>
<p style="text-align: justify;">text </p>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo consequuntur assumenda porro odio culpa enim minus sit nostrum excepturi velit, esse sequi expedita. Saepe consectetur necessitatibus accusamus perspiciatis accusantium dignissimos!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo consequuntur assumenda porro odio culpa enim minus sit nostrum excepturi velit, esse sequi expedita. Saepe consectetur necessitatibus accusamus perspiciatis accusantium dignissimos!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo consequuntur assumenda porro odio culpa enim minus sit nostrum excepturi velit, esse sequi expedita. Saepe consectetur necessitatibus accusamus perspiciatis accusantium dignissimos!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo consequuntur assumenda porro odio culpa enim minus sit nostrum excepturi velit, esse sequi expedita. Saepe consectetur necessitatibus accusamus perspiciatis accusantium dignissimos!


text-decoration

Är till för att lägga till dekorationer till text. Det går också ta bort understräck på länkar genom att sätta värdet till "none".

<p style="text-decoration: underline;">Text </p>
<p style="text-decoration: line-through;">Text </p>
<p style="text-decoration: overline;">Text </p>

Text

Text

Text


word-spacing

Används till att sätta avståndet mellan ord i en text.

<p style="word-spacing: -5px;">Text Text Text </p>
<p style="word-spacing: 10px;">Text Text Text </p>
<p style="word-spacing: 20px;">Text Text Text </p>

Text Text Text

Text Text Text

Text Text Text


background-color

Sätter färgen på backgrunden i elementet.

<p style="background-color: aqua;">Text Text Text </p>

Text Text Text


background-image

Sätter en bild som bakgrund till elementet. För att länka till bilden används "url()".

<p style="background-image: url(bild.png);">Text</p>

Text


list-style-type

Används när du vill ändra siffrorna i en lista till romerska siffror eller punkterna till fyrkanter. Det finns många olika stilar att välja på men här följer ett par exempel.

<ul style="list-style-type: square;">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ol style="list-style-type: upper-roman;">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

  • text
  • text
  • text
  1. text
  2. text
  3. text

Size


Width och Height

Egenskaper height och width beskriver storleken på elementet. Storleken kan beskrivas absolut med pixlar, cm, inch osv. eller relativt med %, fr osv. Procent är i relation till omslutande behållares storlek.

<div style="background-color: blue; height: 50px; width: 50%;"></div>

Margin

Marginalen är ett transparent område utanför elementet och skapar en gräns till omslutande element.

Margin egenskapen kan ha upp till fyra olika värden med olika resultat:

margin: 10px 20px 30px 40px;

top 10px, right 20px, bottom 30px, left 40px.

margin: 10px 20px 30px;

top 10px, right and left 20px, bottom 30px.

margin: 10px 20px;

top and bottom 10px, right and left 20px.

margin: 10px;

top, righ, bottom and left 10px.

margin: auto;

Centrerar elementet horizontelt inom sin behållare.

<img src="bild.png" alt="astronaut" style="margin: auto; display: block;">

astronaut

Padding

Egenskapen padding fungerar likt marginaler men skapar istället ett avgränsat område inom elementets ramar. Värdet för i längd som px eller i % och är då relativ till elementets storlek.

Padding egenskapen kan ha upp till fyra olika värden med olika resultat:

padding: 10px 20px 30px 40px;

top 10px, right 20px, bottom 30px, left 40px.

padding: 10px 20px 30px;

top 10px, right and left 20px, bottom 30px.

padding: 10px 20px;

top and bottom 10px, right and left 20px.

padding: 10px;

top, righ, bottom and left 10px.


I exemplet nedan så har den blå boxen en padding på 20px vilket skapar en inre ram innan som texten inte kan visas inom.

<div style="background-color: blue; padding: 20px;"> <p style="background-color: white; margin: 0;">Lorem... </p> </div>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit saepe accusantium quod quasi eius voluptatem enim dolorum autem sit, aperiam delectus dolor, itaque reiciendis unde, quaerat eaque doloribus modi. Asperiores!

Float


Float används när du vill justera ett element vänster eller höger i sin container.

<p><img src="bild.png" alt="astronaut" style="float: right;">Lorem...</p>

style="float: none;"

astronaut Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi inventore possimus asperiores esse voluptates! Quia tenetur quibusdam voluptas officiis ut deleniti perferendis aliquam esse. Repudiandae possimus voluptates qui illo omnis?

style="float: right;"

astronaut Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi inventore possimus asperiores esse voluptates! Quia tenetur quibusdam voluptas officiis ut deleniti perferendis aliquam esse. Repudiandae possimus voluptates qui illo omnis?

style="float: left;"

astronaut Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi inventore possimus asperiores esse voluptates! Quia tenetur quibusdam voluptas officiis ut deleniti perferendis aliquam esse. Repudiandae possimus voluptates qui illo omnis?

Position


Position bestämmer hur ett element positioneras på sidan. Det finns fem olika värden static, relative, fixed, absolute och sticky. Static är standard inställningen för alla element och följer det vanliga flödet på sidan. Elementen är postion är beräknad från deras övre vänstra hörn och kan justeras med egenskaperna left, right top och bottom. Värden är inverterade så om du vill flytta elementet 50px höger skriver du left: 50px;.

Relativ

Använd relative när du vill flytta ett element reltivt till sin ursprungliga position på sidan. Annat innehåll kommer inte justeras för efter ett relativt element.

<img src="bild.png" alt="astronaut" style="position: relative; left: 50px; top: 50px;">
<p>Lorem...</p>

astronaut

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eos, expedita enim quaerat minima laudantium quibusdam deserunt ut hic. Ipsa voluptatem illum dolorem totam voluptatum unde aperiam officiis corrupti adipisci?

Fixed

Ett element med egenskapen fixed. Hamnar utanför det normala flödet och är istället alltid i relation till fönstret. Se astronauten i högra hörnet :)

<img src="bild.png" alt="astronaut" style="position: fixed; top: 8px; right: 0;">

astronaut

Absolute

Element med egenskapen absolute fungerar likt fixed men är ankrat i närmaste förfader.

<img src="bild.png" alt="astronaut" style="position: absolute;">
<p>Lorem...</p>

astronaut

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eos, expedita enim quaerat minima laudantium quibusdam deserunt ut hic. Ipsa voluptatem illum dolorem totam voluptatum unde aperiam officiis corrupti adipisci?

Sticky

Sticky fungerar som en kombination av relative och sticky och växlar mellan dem baserad på användarens scroll-position.

<p>Lorem...</p>
<img src="bild.png" alt="astronaut" style="position: sticky; top: 0;">
<p>Lorem...</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione aperiam unde cupiditate quo sapiente ab debitis officiis voluptas, nostrum consequatur, rerum odio nulla sunt veritatis doloribus culpa? At, ratione numquam!

astronaut

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eos, expedita enim quaerat minima laudantium quibusdam deserunt ut hic. Ipsa voluptatem illum dolorem totam voluptatum unde aperiam officiis corrupti adipisci?