Inför prov 1 i webbdesign

Storlek: px

Starta visningen från sidan:

Download "Inför prov 1 i webbdesign"

Karolina Nyberg
för 8 år sedan
Visningar:

1 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

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>

2 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= > 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

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.

3 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>

<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>.

4 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.

Vad de vanligaste definitionerna i formatmallarna gör [du behöver inte veta namnen, bara hur de fungerar] I formatmallsfilen [namn.

5 <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

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

Relevanta dokument

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition