Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument <html> <head> <title> sidtitel </title> </head> <body> övriga instruktioner </body> </html> Grundläggande märken, samt hur de används startmärke stoppmärke <h1> text som påverkas </h1> Det ska alltid vara start och stopp för följande märken: <html> </html> detta är en HTML-fil <head> </head> sidhuvud <body> </body> själva sidan finns mellan start och stop för body <h1> </h1> rubrik: nivå 1 <h2> </h2> rubrik: nivå 2 <h3> </h3> rubrik: nivå 3 <p> stycke <em> </em> text som märks <strong> </strong> fet stil <ul> </ul> punktlista <ol> </ol> nummerlista <li> </li> en rad i en lista <table> </table> tabell <tr> </tr> tabellrad <td> </td> datacell i tabell <a> </a> länk <div> </div> avsnitt <span> </span> avsnitt i löpande text... men inte på följande märken: <br> <hr> <img> radbrytning streck infoga bild
Attribut för att påverka märken Ett märke kan påverkas genom att man ger det ett attribut. Om flera attribut ska ges, skriv dem inom startmärkets början < och slut >. <body bgcolor= red text= blue link= blue > Attributets värde anges genom att skriva = värde, dvs likhetstecken och sedan värdet inom citationstecken. Några vanliga attribut: Textjustering: <h1 align= left > <h1 align= right > <h1 align= center > Färg: bgcolor= färg color= färg bakgrundsfärg förgrundsfärg Länkar Extern länk: <a href= http://www.linkoping.se > Linköping </a> Texten som syns i webbläsaren är den som står mellan <a> och </a>. Den blir blå och understruken. Epost-länk: <a href= mailto:erilen@linkoping.se > Erik </a> Bokmärke: (ges ett unikt namn med name= namn ) <a name= inledning ><h1>inledning </h1></a> Länk som refererar till ett bokmärke med ett givet namn: <a href= inledning >Inledning </a> Bilder Infoga en bild (ex erik.jpg) som finns i samma mapp som HTML-dokumentet: <img src= erik.jpg alt= Erik > Infoga en bild (ex erik.jpg) som finns i en undermapp [ex mappen bilder]: <img src= bilder/erik.jpg alt= Erik > Infoga en bild (ex erik.jpg) som finns i en sidomapp till mappen som HTML-dokumentet finns i: <img src=../bilder/erik.jpg alt= Erik > Några övriga användbara attribut för <img>-märket: width= #, height= #, hspace= #, vspace= #, align= left, align= right, align= center
Tabeller För att skapa en tabell med 4 rutor skriver man på följande sätt: (# = siffra) <table border= # cellspacing= # cellpadding= # width= # > <tr> <td>... </td> <td>... </td> </tr> <tr> <td>... </td> <td>... </td> </tr> </table> Varje rad i tabellen skrivs mellan <tr>... </tr>. I varje rad lägger man in ett antal celler, där innehållet i varje cell skrivs inom märket <td>... </td>. border cellspacing cellpadding anger bredden på linjerna mellan cellerna [border= 0 inga linjer alls] avstånd mellan cellerna avstånd mellan text och kantlinje i cellerna Innehållet för varje cell fyller man i mellan <td> och </td>. Varje cell kan innehålla vad som helst en hel webbsida, en annan tabell, en bild... Attribut till <td>: <td width= # height= # colspan= # rowspan= # align= # valign= # > width height colspan rowspan align valign ger cellen en given bredd [pixlar (dvs ett siffervärde) eller i % av tabellens bredd] ger cellen en given höjd [pixlar] sammanfogar celler horisontellt sammanfogar celler vertikalt justerar innehållet i cellen [right, center, left] justerar innehållet i vertikalled [bottom, middle, top] Tabeller används till: Tabeller samt layout, dvs vi ser till att placera innehållet på webbsidan där vi vill att det ska vara. <table border= 1 cellspacing= 20 cellpadding= 5 > <tr> <td width= 100 colspan= 3 >... </td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table> Detta ger en tabell med tre rader och tre kolumner, där den översta radens tre celler är sammanslagen till en enda stor cell [rubrik]. Listor En lista skapas på följande vis, där varje rad i listan skrivs mellan start- och stoppmärket <li>... </li>. <ul> ger en punktlista och <ol> ger en nummerlista. <ul> <li>... </li> <li>... </li> </ul>
Formatmallar Ni behöver inte veta hur man infogar en formatmall i ett HTML-dokument. Det ni behöver veta är följande: Varför man använder formatmallar. Vad formatmallar kan användas till. Hur man skriver en formatmall. Hur man använder klasser. Hur man definierar ett format för ett märke beroende på i vilket sammanhang det märket finns i dokumentet [se nedan]. Vad de vanligaste definitionerna i formatmallarna gör [du behöver inte veta namnen, bara hur de fungerar] I formatmallsfilen [namn.css] lagras information om hur texten i ett HTML-dokument ska formateras, dvs hur den ska se ut. Man skriver på följande sätt: märkesnamn { formatdefinition 1: värde ; formatdefinition 1: värde ; formatdefinition 1: värde ; } OBS! Glöm ej kolon [:] efter varje formatdefinition och semikolon [;] efter varje rad. h1 { color: red; font-family: Verdana, sans-serif; font-size: 120%; font-style: italic; font-weight: 700;} Denna deklaration ger rubriker som har röd färg, typsnittet Verdana (eller ett standardteckensnitt utan hakar om Verdana inte finns på datorn), fetstil och kursiv text som är 120% större än normal text. Klasser En klass definerar en egenskap som kan ges till ett valfritt märke. I formatmallsfilen skrivs klasser med en punkt först i namnet.rod { color: red; }.bla { color: blue; }.central { text-align: center; } Klasser används på följande vis i HTML-dokumentet <p class= rod > Texten i detta stycke blir röd, men övrig text påverkas inte. <p class= bla > Texten i detta stycke blir blå, men övrig text påverkas inte.
<p> Texten i detta stycke påverkas inte. <div class= central >... allt som står mellan startmärket och slutmärket för avsnittet hamnar centrerat i webbläsarfönstret. </div> Formatering beroende på i vilket sammanhang märket finns Man kan deklarera ett format för en märke som bara gäller om det märket finns mellan ett annat märkes start och stopp, exempelvis: <h1> En rubik med ett <em>kursivt</em> ord som ska vara gult </h1> eller <div class= bla > Den här texten blir blå men det <strong>här</strong> ordet blir fetstilt och blått För att åstadkomma detta skriver man så här i sin formatmallsfil h1 em { color: yellow;}.bla em { color: blue; font-weight: 700;} Formatdeklarationer background-color: färg; background-image: url(sökväg och filnamn ); text-indent indrag för text text-align textjustering text-decoration none,underline font-family typsnitt [standard: serif, sans-serif, monospaced, cursive, fantasy] font-style normal, italic, oblique font-weight 100, 200,..., 900 [900 fetast] font-size pixlar, %, small, normal, large, larger, smaller, em text-align left, right, center, justify vertical-align bottom, middle, top, sub, sup margin-# marginaler finns för top, right, bottom, left padding-# avstånd mellan kant och text finns för top, right, bottom, left border-#-width bredd på marginal finns för top, right, bottom, left border-color: top- höger- botten- vänster-färg eller 1 färg för alla sidor border-style none, dotted, dashed, solid, double, groove, ridge width längd, % height längd, % float left, right, none clear none, left, right, both