HTML Lite mer
Lite mer HTML - andra sidan
Vi lär oss några fler html-element, men framför allt så använder vi en stilmall (CSS - Cascading Style Sheet) för att styra utseendet. På denna sida tittar vi på de nya taggarna. Två nya attribut vi använder i en eller flera taggar. Lite information om färgkodning finns i själva demo-exemplet.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Demo 2</title>
<style>
body {
background-color: #ffffcc;
}
h3 {
text-align:center;
}
ol {
list-style-type:lower-roman;
}
hr {
width:80%;
margin-left: 0px;
}
img {
border-width:3px;
border-style:solid;
}
.red {
color:red;
}
.green {
color:green;
}
.blue {
color:blue;
}
.fontArial {
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
.fontVerdana {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px; /* OBS! Inget mellanrum mellan 12 och px. */
font-weight:bold;
}
.bild1 {
float:right;
}
.bild2 {
width:150px;
float:left;
margin-right:50px;
}
</style>
</head>
<body>
<h1>Idag ska vi titta på hur man skriver:</h1>
<ul>
<li>färger</li>
<li>textlayout</li>
<li>hur skriver man specialtecken som bl a copyright</li>
<li>olika listor</li>
<li>lite CSS för att styra taggars egenskaper</li>
</ul>
<h3>Färger</h3>
<p>
När vi ska tala om vilken färg vi vill ha kan vi i många falla använda fördefinierade namn, som white, red, green, aqua, darkorange, steelblue.
<br />
<a href="http://www.w3schools.com/tags/ref_colornames.asp" target="_blank">W3Schools lista med namn på färger.</a><br />
Men som du såg i listan så finns det lite mer kryptiska beskrivningar som <strong>#ff0000</strong>. Detta är den hexadecimala(basen 16) beskrivningen av röd. Man anger hur mycket som ska blandas av färgerna <strong>Röd-Grön- Blå</strong> (RGB-kod). <br />
Egentligen anger man tal mellan 0 och 255, men datorn pratar bara ettor och nollor så för den är det hexadecimala systemet mycket effektivare, därför får vi lära oss att ha en liten hum om vad de olika delarna betyder. Efter #-tecknet så visar de två första positionerna hur mycket rött det ska vara, sen nästa två positionerna visar grönt och de sista två positionerna blått. <br />
Varje position kan innehålla ett tal mellan 0-15, men för att det bara ska ta en position översätts det till talen 0-9 och bokstäverna a-f (och som då betyder a=10, b=11, ..., f=15).
<br />
Av de två positionerna som representerar varje färg, så är första positionen är värd 16 och den andra 1, jämfört vårt decimalsystem så skulle den första positionen vara värd 10 och den andra 1. Ovan betyder då ff att vi ska ha f=15 gånger 16 och f=15 gånger 1, dvs 15*16+15*1=255.<br />
Som sagt ni behöver inte förstå detta till 100% men ni ska förstå om det är mycket eller litet av de tre ingående färgerna.<br />
Det hjälper säkert till att titta på följande sida: <a href="http://www.w3schools.com/tags/ref_colorpicker.asp" target="_blank">Colorpicker</a> (hos w3schools).
</p>
<hr />
<h3>Textlayout</h3>
<p><img class="bild1" src="bilder/fargcirklar.jpg" alt="färgcirklar" /></p>
<h1>
<span class="red">F</span><span class="green">Ä</span><span class="blue">R</span><span class="red">G</span><span class="green">E</span><span class="blue">R</span><span class="red">N</span><span class="green">A</span><span class="blue"> T</span><span class="red">A</span><span class="green">R</span><span class="blue"> Ö</span><span class="red">V</span><span class="green">E</span><span class="blue">R</span>
</h1>
<p>
Med flera färger blir det lite mera fart i webbsidan. Om du dessutom kan byta teckensnitt, precis som i Word, blir det ännu lite roligare.
</p>
<p>
<img class="bild2" src="bilder/teckensnitt.jpg" alt="Teckensnitt på bild">
Standard teckensnitt brukar vara Times New Roman vilket oftast inte är snyggt. <span class="fontArial">Arial är ett
klacklöst (utan serifer) teckensnitt som finns på surfarens dator!</span><br>
<span class="fontVerdana">Verdana är ett annat.</span>
</p>
<ol>
<li>face -> typsnitt</li>
<li>size -> storlek(fördefinierade)</li>
<li>color -> färg</li>
</ol>
<!-- Vi visar lite koder för specialtecken -->
<h3>Specialtecken</h3>
<p>
Den här webbsidan är © 2008 Värmdö Gymnasium!
</p>
<p>
<a href="http://www.w3schools.com/html/html_entities.asp" target="_blank">W3Schools lista på specialtecken.</a>
</p>
<pre>
Högerklickar du på sidan, så kan du välja att få se själva koden som skapar denna sida. iiiii mmmmm
</pre>
<p>
iiiii<br />
mmmmm
</p>
</html>
Nya element
<style> gör att vi kan skriva stilmallskod, det vill säga sätta design på alla html-element så att sidan blir snygg.
<ul> skapar en "unordered list", oordnad lista. En vanlig punktlista i grundutförandet.
<li> är varje list-element i våra listor. Elementet hamnar automatiskt på ny rad.
<ol> skapar en "ordered list", oordnad lista. Utgångsläget är numrering med siffror.
<span> gör egentligen ingenting utan det är attributen vi hänger på starttaggen som styr. Ofta hänger vi på "class" som får inställningar från stilmallen, css-koden. Dessa inställningar appliceras då på det som finns i span-elementet. Span-elmentet är "inline"-typ det vill säga det det slår på när starttaggen kommer följer med i flödet och slår av när startaggen kommer. Det betyder att vi kan starta och sluta mitt i en rad. (Till skillnad från t ex p-elementet som skapar ny rad och breder ut sig över hela fönstret).
<pre> används då vi vill skriva ut texten exakt som den står i koden med mellanslag och radbrytningar. Varje tecken tar exakt lika stor plats oavsett om det är "i" eller "m" eller en punkt "." som skrivs ut.
Nya attribut
<a href="..." target="_blank"> target används framför allt i länkar och styr var innehållet till länken ska visas. "_blank" betyder nytt fönster/ny flik vilket är praktiskt om man vill att den befintliga sidan ska finnas kvar i ett fönster/flik.
<img class="bild1" ... />, <span class="red">...</span> class kan användas i alla taggar och är enbart till för att styra utseende med stilmallsinställningar. De klasser som attributet "class" sätts lika med definieras i stilmallen. Samma "klasser" kan användas på många olika ställen i html-koden, till och med i olika element. Som t ex "red" som innehåller inställningar för att textfärgen ska vara röd, kan med fördel användas på t ex någon rubrik, på någon text, på någon "blockquote".
Entiteter
Vissa tecken måste skrivas med entitetsnamn eller entitetsnummer. Anledningen är att de är reserverade för andra betydelser, t ex < > som talar om att en tagg startar och slutar och att tecknen inte finns på tangentbordet.
betyder mellanslag, "non breaking space". Bra om vi enkelt vill tvinga fram mer mellanrum mellan två ord eller två bilder eller liknande. Eftersom webbläsaren automatiskt skippar alla utom ett mellanslag om vi försökt skriva det i koden.
© litet c i en cirkel.
ä ö lilla ä och ö. Våra små och stora åäö finns t ex inte på ett engelskt tangentbord så därför kan vi ibland se dessa översatta till entiteter.
Mer om entiteter
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
XHTML and CSS Tutorial - 15 - Lists (thenewboston 6 min)
Kommentar: För HTML5 är första raden med doctype helt korrekt. Det som tas upp i filmen(nr 15) är den tidigare standarden(den långa komplicerade doctype'n).
XHTML and CSS Tutorial - 16 - Intro to CSS (thenewboston 7 min)
Kommentar: I HTML5 skriver vi start "style"-taggen helt ren, det vill säga utan egenskapen type.
XHTML and CSS Tutorial - 17 - RGB Color and Line Spacing (thenewboston 6 min)
XHTML and CSS Tutorial - 18 - font-weight & font-style (thenewboston 3 min)
XHTML and CSS Tutorial - 19 - text-align and Changing Background Color (thenewboston 6 min)
XHTML and CSS Tutorial - 21 - Padding (thenewboston 5 min)
XHTML and CSS Tutorial - 22 - Border (thenewboston 4 min)
XHTML and CSS Tutorial - 23 - Margin (thenewboston 4 min)
XHTML and CSS Tutorial - 24 - Width & Height (thenewboston 5 min)
XHTML and CSS Tutorial - 28 - Style More Than One Elements & Span! (thenewboston 6 min)
XHTML and CSS Tutorial - 30 - Styling Using Classes (thenewboston 6 min)