ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder. <html></html> Taggar som talar om var html dokumentet börjar och slutar. Ska alltid stå först och sist i html- dokumentet. <head></head> Detta är taggen där allt som inte ska synas i webbläsarfönstret ligger. Som t.ex. <title> (taggen som visar namnet uppe i webbläsarfönstret) <link /> (länken till extern css fil.) <style> (taggen där man kan placera css- kod) <title></title> Det du skriver i mellan dessa taggar visas längst upp i webbläsarfönstrets namnlist. <style type= text/css ></style> När css- koden ligger inbäddad i html- koden ska den ligga mellan style- taggarna. Denna tagg ska placeras uppe i head- taggen. - talar om vilken typ av kod man använder i taggen. Här är det css- kod. <link href= style.css type= text/css ></link> Länkar till extern formatmall som t.ex. style.css - talar om vilken fil du ska länka till - Talar om typ av fil (media) <meta> Man kan bland annat använda META- koder för att hjälpa en del sökmotorer att indexera en sida. Om jag har en sida som innehåller information om Porsche, Led Zeppelin och länkar till olika HTML- kurser kanske jag vill att sökning på orden Porsche, Led Zeppelin och HTML ska ge en träff på min sida. Då kan jag använda: <META name="keywords"... >
<body bgcolor= black background= bakgrund.gif text= #22AAFF link= #33FFFF alink= #FF0000 vlink= #22AAFF ></body> Dessa anger var det du visar på sidan börjar och slutar. Det är mellan dessa taggar som det mesta av innehållet på hemsidan står. - bakgrundsfärg på sidan. Hexadecimalfärgkod el. ord - bakgrundbild - textfärg i hexadecimalfärgkod el. ord - länkfärg i hexadecimalfärgkod el. ord - länkens färg när man precis trycker på den - länkens färg när man har besökt den. <div id= header class= meny ></div> <font size= 1 face= Arial, Geneva, sans- serif color= #00FF00 ></font> Med hjälp av denna tagg kan du strukturera upp din sida med hjälp av boxar. Div taggen talar om hur en del av hemsidan ska se ut och gör att du har lättare att styra de olika div- boxarna i förhållande till varandra. - ger namn på ett unikt element. - ger namn på ett element. Detta kan användas flera gånger på sidan. Med dessa taggar kan du förändra utseendet på texten man brukar kalla det, som står mellan taggarna. - Storleken på texten, eller typsnittet som det ofta också kallas. Går att välja 1 7 - Här väljer du önskat typsnitt. Tänk på att det måste finnas i datorn som användaren har. - Färgen på typsnittet. <h1 align= center Rubriktagg. Med storlekarna h1 h6. h1 är minst och h6 störst. - Justering av rubriken. ></h1> <p align= right Stycke- tagg. Delar i texten i stycken. - höger justerar stycket. (left, center, right) ></p> <br /> <hr width= 95% size= 2 align= right /> Break- taggen. Bryter raden. Detta är en öppen tagg, den behöver ingen sluttagg. Skapar en horisontell linje - bredden på linjen. 95% av hemsidans bredd. - tjockleken på linjen - justering på linjen. <center></center> Centrerar allt som befinner sig innanför taggarna.
<img src= bildnamn.jpg src= images/bildnamn.gif alt= En bild på båten width= 400 height= 300 border 4 align= left /> Bild- taggen. Infogar bilder på din hemsida. Detta är en öppen tagg, det behövs ingen sluttagg. - talar om vilken bild du vill använda och sökvägen till den. Här ligger bilden i samma katalog som hemsidedokumentet t.ex. index.html. - Denna bild ligger i en underkatalog med namnet images. - Detta är en förklarande text som visas upp när man går över bilden. - Bredden på bilden i pixlar. - Höjden på bilden i pixlar. - Ram runt bilden med storleken 4. Värdet 0 tar bort ramen helt. - Bildens justering. (left, right, top, middle, bottom) <a href= http://www.urlnamnet.se href= kontakt.html href=../video.html href= kontakt.html > <img src= kontakt.jpg Länk- taggen. Kommer av ordet Anchor (ankare). - länkar till annan hemsida. - länk till annan sida i dina egen hemsida - länk till en sida som ligger i en katalog närmast över i hierarkin. - länk till en sida som heter katalog.html i din hemsida - det länkas när man trycker på denna bild. ></a> <ul></ul> Skapar en oordnad lista som t.ex. en punktlista. t.ex. Första raden Andra raden Tredje raden <ol></ol> Skapar ordnad lista som t.ex. en numrerad lista. t.ex. 1. Första 2. Andra 3. Tredje <li></li> Skapar varje listobjekt (varje rad i listan) Exempelkod på oordnad och ordnad lista <ul> <li>första</li> <li>andra</li> <li>tredje</li> </ul> I webbläsaren: Första Andra Tredje <ol> <li>första</li> <li>andra</li> <li>tredje</li> </ol> I webbläsaren 1. Första 2. Andra 3. Tredje
CSS- REGLER M.M. CSS står för Cascading Style Sheets. Med detta språk bestämmer du hur din information ska se ut på hemsidan. CSS är indelad i tre familjer. Detta har du bestämt i html- koden. ID (css) KLASS (css) TAGG (css) En av de tre familjer du kan dela in css- reglerna i. Det id du ger din t.ex. divbox kan bara användas en gång. Koden startar allt med en #. t.ex header{ height:300px; width:600px; padding:5px; margin-right:10px; margin-bottom:10px; background:#0fc; float:left; overflow:scroll; } Ännu en av css tre familjer. Det klassnamn du ger din t.ex. divbox kan användas flera gånger. Koden startar alltid med en punkt. t.ex.meny { font- family: Verdana, Helvetica, sans- serif; } Den sista av de tre css familjerna. Denna använder man när man vill lägga en stil på olika taggar i html- koden. t.ex. <p> taggen. Men då läggs detta utseende på alla <p> i hela html dokumentet. t.ex. p{ font-family:verdana, Geneva, sans-serif; font-size:12px; font-weight:bold; text-align:center; text-decoration:none; text-transform:uppercase; text-shadow:3px 3px 3px #CCC; line-height:15px; letter-spacing:2px; color:#666; width:300p; } EXEMPEL PÅ STRUKTUR CSS EXEMPEL PÅ CSS FÖR TYPOGRAFI
Hur sidans olika komponenter ska se ut visar du med olika css- regler. Varje regel har flera egenskaper med olika värden. CSS - REGLER för struktur width Bredd på Box / Objekt height Anger höjd på objekten. padding Bestämmer avståndet mellan kanten på en box och innehållet. margin Bestämmer marginalen till övriga objekt / box. background Med denna regel kan du ange antingen en bakgrundsbild eller en bakgrundsfärg. t.ex. background: url(bild.jpg); background: #303; float Anger hur du vill att ett objekt skall vara placerat: left, right Overflow Anger hur hemsidan skall förhålla sig till innehållets storlek. Om texten eller bilden inte får plats. Hur ska div- boxen göra. Den kan scrolla innehållet eller gömma innehållet. CSS- REGLER för typografi font- family Bestämmer vilket typsnitt du vill ha på hemsidan. Det finns flera typsnittsfamiljer att välja bland. Överväg ditt val av typsnitt för brödtext och rubriker. t.ex. font- family: Verdana, Geneva, sans- serif; font- family: Georgia, Times New Roman, Times, serif; Typsnitt som fortfarande har bra läsbarhet trots liten storlek på teckensnittet är förljande: Sans- serif typsnitt Verdana, Arial, Helvetica. serif typsnitt Georgia font- size Bestämmer teckensnitt storlek font- weight text- align Bestämmer tjockleken på din text. 100, 900, normal, lighter, bold, bolder Styr om du vill ha olika justeringar på texten: left, right, center, justify
text- decoration Styr om du vill ha textdekoration, så som understruken, överstruken text m.m. Blink, line- through, none, overline, underline. Text- shadow Skapar skugga på texten. Line- height Letter- spacing Anger radavstånd Anger teckenavstånd Color Anger färg på texten width Anger bredden på textspalten