Bia Rask Webbkurs

HTML & CSS

HTML

 


Det finns massor med guider och hjälpsidor i form av pdf:er, videor och annat på internet. Googla dig fram!

Vänj dig att ta hjälp av Adobes användarhandbok när du vill veta hur man använder Dreamweaver.

Behöver du hjälp med koden hittar du den på w3schools.com.

Saknar du internetuppkoppling emellanåt kan du ladda ner den omfattande pdf:en Hjälp om Adobe Dreamweaver CC i förebyggande syfte. Perfekt att ha som uppslagsbok!


Kom igång

Grundkod

Alla html-sidor innehåller kod som inte visas på webbsidan men som krävs för att det ska fungera.

 

<!DOCTYPE html>

<html lang="sv">
<head>
<meta charset="utf-8">
<title>Sidans titel</title>
<link rel="stylesheet" type="text/css"href="style.css">
</head>

<body>
Sidans innehåll inneslutet i lämpliga taggar.
</body>

</html>

 

Doctype-deklarationen måste vara allra först i dokumentet. Inte ens ett mellanslag får komma före den! Den talar om för webbläsaren vilket språk dokumentet är skrivet i.

Html-taggarna berättar att allt mellan start och sluttaggen html är html-kod.

Meta-taggen innehåller information om sidan till sökmotorer och webbläsare. Charset betyder teckenuppsättning och utf-8 är en uppsättning koder för bokstäver, siffror med mera.

Title innehåller sidans titel, dvs det som ska synas på webbläsarfönstrets övre kant och stå som rubrik i sökmotorer.

Link-taggen visar var stilmallen finns.

Det som finns mellan bodytaggarna är det som visas i webbläsarfönstret.

Element

Ett element består av starttagg, eventuella parametrar, eventuellt innehåll och sluttagg:

<tagg>Innehåll</tagg>
<h1>Välkommen till Olas historiesida!</h1>

<tagg egenskap="värde">Text</tagg>
<a href="http://norran.se">Norran</a>

Några få element saknar sluttagg och kallas tomma element. Det är element som är självklart när de slutar. Det kan vara en horisontell linje, <br>, eller en bild:

<img src="bild.jpg" alt="Ola håller historielektion.">

Om det finns element i elementen är det viktigt att elementet som kom sist i koden avslutas först. Element får inte gå omlott.

<p>Maila <a href="mailto:anna@mail.se">Anna</a></p>

Inte: <p>Maila <a href="mailto:anna@mail.se">Anna</p></a>

Till de flesta element kan man ange egenskaper (kallas även attribut) för att mer exakt definiera elementets funktion eller hur det ska visas på en webbsida. Egenskapen skrivs innanför vinkelparenteserna som omger starttaggen och följs av likamed-tecken och egenskapens värde. Värdet ska omges med raka citattecken.

<a href="http://norran.se">Norran</a>

Taggarna du kan använda hittar du på w3schools.com.

Skapa en HTML-fil

  1. Arkiv > Nytt
  2. Välj Tom sida, Sidtyp: HTML, Layout: <ingen> och Dokumenttyp: HTML5
  3. Klicka på Skapa 
  4. Ge sidan en relevant titel på en gång eftersom det är så lätt att glömma det annars. Det gör du i rutan vi Titel eller i kodfönstret vid <title>. Titeln ska vara relevant för innehållet och formulerad så att den lockar besökare som får upp den i sökmotorer. En välformulerad titel ökar också chansen att komma högt upp i sökmotorernas rankning. "Kapitel 1" är en dålig titel. "Bind din egen brudbukett" säger betydligt mer.
  5. Spara sidan med kortkommandot CMD + S (Windows: CTRL + S). Förutsatt att du definierat rotmappen kommer Dreamweaver automatiskt att lägga filen i den. Man kan lägga filer i undermappar, men de måste alltid vara placerade i rotmappen.
  6. Namnet på filen ska vara index.html (eller index.htm eller index.php) om det är den fil som ska laddas först på en webbplats eller först i en undermapp. Annars ska namnet vara logiskt så du aldrig behöver tveka över vilken fil som är vilken. Filnamnet får inte innehålla å, ä, ö, mellanslag eller konstiga tecken! Använd endast gemener i filnamn på webben. Versaler kan fungera, men det är som att be om strul.

Du kan även välja att skapa HTML-filen direkt från Välkomstskärmen.

 


Skriv HTML

Styckeindelning

Vanliga radbrytningar helt verkningslösa i HTML-kod. De påverkar inte alls vad som visas i webbläsaren. Att de inte syns gör att du kan använda radbrytningar där du vill för att göra din kod mer lättläst. Självklart vill man att webbläsaren ska visa texten indelad i stycken ändå, och det gör man med en liten kodsnutt:

<p>Här kommer stycket.</p>

Vill du byta rad utan att det ska bli ett nytt stycke skriver du <br>. Den taggen behöver ingen sluttagg.

<p>Här vill vi ha en radbrytning<br>
utan att det blir ett nytt stycke.</p>

 

Rubriker

Använd rätt rubriknivå! Det kan vara frestande att välja rubriknivå efter hur den ser ut typografiskt som standard, men gör inte så. Använd den korrekta nivån och justera utseendet i stilmallen så det blir som du vill ha det. Huvudrubriken för sidan ska ha taggen <h1>. De största underrubrikerna heter <h2> och så vidare till <h6>.

<h1>Rubrik</h1>

Framhäva ord och fraser

<b> ger fet stil och <em> kursiverar texten. Vill man ge kodexempel används någon av taggarna <code> eller <samp>. Variabler anges med taggen <var>.

<b>Här är texten som ska vara fetstilt.</b>

<em>Här är texten som ska vara kursiv.</em>

Dessa taggar går att ge kraftigare effekt med CSS om man vill.

Läs mer på http://www.w3schools.com > HTML > HTML Formatting.

 


Listor

Punktlistor har taggen <ul> och varje listpost markeras med <li>.

<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Om listan ska vara numrerad skriver man <ol> istället.

<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

Läs mer på www.w3schools.com > HTML > HTML Lists.

 

 

Tabeller

Tabellen har taggen <table>. Varje rad markeras med <tr> och cellerna med <td>.

<table border="1">
<tr>
<td>rad 1, cell 1</td>
<td>rad 1, cell 2</td>
</tr>

<tr>
<td>rad 2, cell 1</td>
<td>rad 2, cell 2</td>
</tr>
</table>

Läs mer på www.w3schools.com > HTML > HTML Tables.

 

Specialtecken

En del tecken tolkas av webbläsaren som kod. Då måste man använda en teckenkod för att förklara för webbläsaren att man faktiskt vill visa tecknet på skärmen.

(mellanslag) skrivs: &nbsp;
< skrivs &lit;
> skrivs &gt;
& skrivs &amp;

Läs mer på http://www.w3schools.com > HTML > HTML Entitles.

 

 


Länkar

Taggen för länkar är <a>, och för att veta var länken leder behövs egenskapen href följt av adressen till den aktuella filen. Om båda filerna ligger i samma mapp räcker det att ange filnamnet som adress.

<a href=”aborre.html”>text</a>

Ligger filen i en undermapp inleder man med mappens namn.

<a href=”vatten/fiskar/aborre.html”>text</a>

Ligger filen i en mapp högre upp i hierarkin ”backar” man med två punkter.

<a href=”../index2.html”>text</a>

För att länka till en annan webbsida är det enklast surfa till den och kopiera adressen i webbläsarens adressfält.

<a href=”http://www.w3schools.com/html/”>text</a>

Länkar med e-postadress skrivs så här:

<a href=”mailto:bo.ek@adress.se”>Maila Bosse</a>

Läs mer på www.w3schools.com > HTML > HTML Links.

 

Bilder

Elementet img ska ha två egenskaper, dels src som berättar var källan finns och dels alt som beskriver bilden för synskadade och dem som av någon anledning har stängt av bildvisningen samt för att sökmotorerna ska hitta den.

<img src="hasse.jpg" alt="Katten Hasse jagar en råtta.">

Ofta anger man bildens storlek för att webbläsaren ska kunna beräkna utrymmet direkt. Annars kommer innehållet på sidan att hoppa efter när bilderna laddas och det kan vara rätt irriterande.

<img src="hasse.jpg" alt="Katten Hasse jagar en råtta." width="320" height="250">

Ingen sluttagg krävs vid bilder i html.

Läs mer på www.w3schools.com > HTML > HTML Images.

 

Boxar

Boxar är synliga eller osynliga rutor med varierande innehåll. Olika taggar används beroende på boxens innehåll.

<div>innehåll</div>

Tidigare användes taggen <div> flitigt, men numera väljer man olika taggar beroende på innehållet i boxen. Idag används div när ingen av de nedanstående passar. I praktiken används taggen främst som "wrapper" och för att underlätta formgivningen av en del av webbsidan.

<header> används om det är ett sidhuvud som ska ligga i boxen.

<nav> används till menyer.

<section> visar att det handlar om ett avsnitt, som till exempel en enskild post i en databas.

(Om ett del av innehållet behöver en box bara för att det ska stylas annorlunda är det lämpligare använda <div> än <section>.)

<article> omsluter innehåll som kan användas separat från resten av webbsidan, till exempel för en tidningsartikel, ett inlägg i ett forum eller en bloggpost.

<aside> används för sekundärt innehåll. Det kan till exempel vara en faktaruta eller ordlista som har koppling till en artikel utan att vara en del av den.

<figure> kan innehålla diagram, tabeller, illustrationer eller bilder med bildtext, videoklipp, kodexempel eller liknande.

<footer> omsluter sidfoten.

Dessa taggar kompletteras ofta med attributen id eller class för att man ska kunna styra egenskaperna i stilmallen.

<div id="wrapper">innehåll</div>

<div class="grey">innehåll</div>

Boxar som namnges med id kan bara användas en gång per sida. Används till exempel till för att positionera en viss box.

Boxar med class kan användas flera gånger på samma webbsida. Används till exempel för att tala om att vissa boxar ska ha speciella egenskaper, till exempel en färgad bakgrund eller högerjustering.

 

 


Span

Om man vill styra en del av ett block med hjälp av stilmallen använder man taggen <span>.

<span class="red">innehåll</span>

Används på inline-nivå, till exempel för att färgmarkera ett enskilt ord.

<p>Tänk på att <span class="red">förvara medicinen utom räckhåll för barn</span> då kan skadas allvarligt eller dö om de får i sig för mycket av den.</p>

 

Kommentera HTML

<!-- Här börjar prislistan -->

Används för anteckningar som man inte vill att webbläsaren ska visa. Man kan också kommentera bort kod istället för att radera den om man är osäker om man kommer att vilja ha med den eller inte.

Det är ofta enklast skriva allt direkt i koden, men det finns en knapp för kommentarer (rödmarkerad på skärmdumpen) till vänster om fönstret du skriver i. Ser du inte knappen klickar du på pilarna som visar mer innehåll (blåmarkerad). Klicka på "Lägg till HTML-kod" och skriv sedan in texten du vill i ha din kommentar direkt i koden.

Placeholder image

 

Du hittar mer på w3schools.com > HTML.