» Kategori: XHTML-CSS
Skillnaden mellan HTML och XHTML
XHTML som står för eXtensible HyperText Markup Text, är ett märkspråk och har samma djup med uttryck som HTML men är även anpassad för XML. Medans HTML kan vara ganska flexibel i sin syntax (uppbyggnad) så är XHTML väldigt strikt på att koden är väl formulerad.
Med enkla ord kan man säga att XHTML är en utbyggnad av HTML, som i utbyggnaden fått i sig lite av XML.
Om man ska koda i XHTML
Inget nästlande
När man kodade i HTML och använder sig av en massa olika taggar så kan det bli så att taggar stängs i fel ordning. Du öppnar en <p> tagg och i den taggen öppnar du en <span> tagg. Om du då stänger <p> taggen innan <span> taggen så har taggarna blivit nästlade och det är inget som gillas i XHTML.
Fel: <p><span>En liten text</p></span>
Rätt: <p><span>En liten text</span></p>
Allt ska stängas
Eftersom XHTML har mycket gemensamt med XML så ska även taggar som inte har någon stängningstagg stängas ordentligt. Detta gör man enkelt med att lägga till en / (snedstreck) i taggen.
Fel: <br>
Rätt: <br />
Värden ska vara i ett Attribut
I vissa Element när man arbetar med HTML, kan man skriva särskilda Värden utan att ha dem i ett attribut. Men i XHTML ska alla värden vara i ett attribut.
Fel: <option value="värde" selected>värde</option>
Rätt: <option value="värde" selected=”selected”>värde</option>
Värden måste även omslutas av ” (citationstecken).
Fel: <span class=vit>En vit text</span>
Rätt: <span class=”vit”>En vit text</span>
Smaksak
Om man ska välja att koda i HTML eller XHTML är så klart ett smakval, men jag föredrar XHTML så därför kodar jag i det, och därför kommer resterande artiklar i HTML skolan vara i XHTML.
Föregående: Vad är CSS?
Nästa: Ett XHTML dokument
Vad är CSS?
Css som står för Cascading Style Sheet är ett såkallat stilmallspråk och är till för att beskriva utseendet på dokument skrivna i märkspråk. Som till exempel HTML och XHTML, det går även att använda till XML. CSS styr helt enkelt utseendet på Elementen i HTML dokumentet som till exempel: färger, typsnitt, bakgrundsbilder, layout. Vad som helst i stort sett. Vilket innerbär att samma HTML dokument kan se olika ut med olika CSS mallar.
Syntax
CSS har en enkel uppbyggnad och använder sig av engelska nyckelord för att specificera olika stilar.
En stilmall består med en rad Reglemente, som har en eller flera Selectorer och en Declarations block, blocken omsluts av { } tecken. Inuti varje block har man en Egenskap, som följs utav ett : (kolon), sedan Värdet och till avslut ett ; (semikolon).
Selector { Egenskap : Värde ; }
Anropa en Selector
Om du vill att ett särskilt HTML Element ska ha en viss stil så ger man det Elementet Attributet ”class” eller ”id”. Det som skiljer sig mellan id och class är att id bara får användas en gång i samma HTML dokument medan class kan användas flera gånger om.
För att anropa en Selector i stilmallen ger du ditt class/id Attribut det namn på Selectoren som Värde.
Men om det är ett rent HTML element utan class eller id som du vill ge en viss stilmall döper du Selectoren till Elementnamnet, till exempel: body, a, p etc.
<html>
<head>
<style type="text/css">
<!--
body {
background-color: #ff0000;
}
-->
</style>
</head>
<body>
</body>
</html>
Om det är ett class som ska anropas så ska du ha en . (punkt) framför namnet på selectoren, till exempel: .vit
<style type="text/css">
<!--
.vit {
color: #ffffff;
}
-->
</style>
<span class="vit">texten som blir vit</span>
Och om det är ett id som ska anropas så ska du ha en # (fyrkant) framför namnet på selectoren, till exempel: #header
<style type="text/css">
<!--
#header {
width:300px
height:100px;
color: #ffffff;
background-color:#000000;
}
-->
</style>
<div id="header">Här visas texten i #header</div>
Vad är HTML?
HTML som står för HyperText Markup Language är ett såkallat märkspråk som man använder för att skapa Webbsidor. Ett HTML dokument innehåller strukturerad text som tack vare webbläsaren tolkas och visas som en webbsida. HTML är alltså ett klientspråk som tolkas av besökarens webbläsare. Detta gör att webbsidan kan se annorlunda ut beroende på vilken webbläsare besökaren använder.
Filnamnet till ett HTML dokument avslutas oftast med .html eller .htm.
Element och taggar
HTML använder sig utav Element som oftast består av två Taggar ett exempel på detta är <strong> där ”strong” är Elementet och där <strong> är öppningstaggen och </strong> är stängningstaggen. Taggarna omsluter den text man vill att dom ska påverka till exempel <strong>text</strong> som blir text
Ett Element kan också ha ett Attribut som alltid har ett värde. Attributet följs med ett = tecken och Värdet omsluts av två ” tecken. Ett exempel på det är <span class=”vit”> </span>. Här är nu span som är Elementet och där öppningstaggen innehåller class som är Attributet och där ”vit” är Värdet i Attributet.
Det finns även Element som inte har någon stängningstagg som till exempel <br> och <hr>. Dessa är dock lite speciella om man ska koda i XHTML men mer om detta kommer i en senare artikel.
Elementtyper
Man har kategoriserat Elementen i 4 olika kategorier:
Strukturmärkning – Bekriver syftet med texten, till exempel <h1>Text</h1> som beskriver texten som en rubrik.
Presentationsmärkning – Beskriver stilen på texten, till exempel <i>text</i> som beskriver stilen på texten som italic. Många webbutvecklare har dock idag börjat använda struktur framför presentationsmärkning och ändrat stilen med CSS.
Hyperlänkmärkningar – Skapar länkar till andra dokument eller sektioner i det aktiva dokumentet, till exempel <a href=”http://www.elatus.se”>Elatus</a>. Som skriver ut Elatus och länkar till http://www.elatus.se.
Interaktiva element – Skapar interaktiva objekt, till exempel <button>Skicka</button>. Som skapar en klickbar knapp som det står ”Skicka” på.
Elatus htmlskola
För att kunna skapa hemsidor behöver man kunna HTML, och för att göra det snyggt och prydligt bör man kunna CSS. Därför tänkte jag att det var dags för en liten skola som tar upp allt matnyttigt inom dessa två genrer.
Här nedan ser ni en lista eller ett schema kanske man ska kalla det, punkterna kommer att bytas ut mot länkar till respektive artikel när den väl är skriven.
Introduktion
- Vad är HTML?
- Vad är CSS?
- Skillnaden mellan HTML och XHTML
- Ett XHTML dokument
- Välj rätt program att skriva HTML i
- Validera din kod
XHTML/CSS
Bra att veta
- Favicon
- Gör snygga menyer med listor
- Gör en validerad design uppbyggd med div
Saknar du nått? Tveka inte att skriva dina önskemål i en kommentar.
