Diagnos i html och css

Webbutvecklare h08, 2 september 2008

Gör så här

Skapa en katalog som heter htmlprov på din M:-enhet. Det är viktigt att du använder just detta namn eftersom jag kommer att söka upp dina filer med hjälp av namnet htmlprov.
I denna katalog htmlprov skall du sedan skapa de html-filer som utgör lösning på provet.
Använda dig av en texteditor, t ex kodläget i Dreamweaver eller Anteckningar.
Det är tillåtet att söka hjälp i böcker eller på nätet.
Varje uppgift skall döpas efter sitt nummer. Lösningen på uppgift 1 skall sålunda heta 1.html.
Du kan hålla på till 16.30.
Antalet uppgifter är tilltaget, så att alla skall ha att göra. Förök därför inte bli stressad om du inte hinner med allt.

Uppgift 1

Skapa en sida som endast innehåller en textrad enligt bilden. Se till att sidan även får en titel. Spara uppgiften som 1.html.

fest

15p

Uppgift 2

Du skall rama in dina svar på uppgifterna i ett frameset. Koden för själva framesetsidan får du nedanför illustrationen.

Döp filerna enligt följande

default.html - själva framesetet
meny.html - ramen till vänster med menyn
1.html - (detta var den sida du skapade i uppgift 1) ramen till höger, den med vit bakgrund

Menyrubrikerna skall vara länkade till de olika filer som utgör lösning på uppgifterna i detta prov. Lägg märke till att sidan har titeln Htmlprov

Skriv ditt namn längst ner under menyn

Lägg in dessa bifogade stylesheetspecifikationer i filen meny.html.

Länka Fråga 2 till filen default.html och visa hela framesetet i den högra ramen.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Htmlprov</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<frameset  cols="110,*">
    <frame src="meny.html" name="meny" frameborder="0" scrolling="auto" marginwidth="5" marginheight="5" id="meny" />
    <frame src="1.html" name="sidor" frameborder="0" scrolling="auto" marginwidth="5" marginheight="5" id="sidor" />
</frameset>
</html>

Tips: Använd Anteckningar när du skapar och redigerar ditt framesetdokument. Dreamweaver CS3 uppför sig på ett svårgenomskådat sätt när det hanterar sådana filer.

20 p

Uppgift 3

Skapa en sida med flexibel design (dvs att texten flödar om när fönstrets storlek ändras). Textens överskrift skall markeras som ger en rubrik av största storlek. Orden Dirección och Intérpretes skall märkas upp med en html-tag som anger att de skall betonas.

Hämta texten här.

15 p

Uppgift 4

Utgå från filen i uppgift 3 och formattera den enligt nedanstående illustration.Designen skall forfarande vara flexibel.

Marginal höger: 20% av sidytan
Marginal vänster: 5%
Font rubrik: Verdana 18px
Font underrubrik: 12px
Font brödtext: Georgia 12px/16px
Avstånd mellan styckena: 10px
Avstånd efter rubrik: 16px
Marginaler runt bilden: utgå från förlagan

Bilder:

Volver

25 p

Uppgift 5

På denna sida finns en lista inuti en div-tag.

För div-tagen gäller

Bredd 250 pixlar
Bakrundsfärg #eee
Pading: i högerkant 40, annars 20 pixlar
Kantlinjen är 12 pixlar bred och har färgen #ccc

För listan gäller

Tecken: 11 pixlars Georgia med radavstånd 15
Avstånd efter varje budord är 10 pixlar
Notera hur listans numrering ser ut!

Kantlinjen kommer att se olika ut i IE och Firefox. Det är ok i det här fallet. Illustrationen är hämtad från Firefox.

Textfil med budorden

Budord dump

20 p

Uppgift 6

Sidan skall endast innehålla fotot på huset i Carna. Placering:

Centrerad i sidled
100 pixlar från skärmens övre kant

Hämta bilden här.

Carna skärmdump

15 p

Uppgift 7

Använd färgade div-taggar för att skapa de olikfärgade liggande diagrammen.

För diagrammen gäller

Teckensnitt: verdana, 12px, fet
Teckenfärg: #333
Höjd på staplar: 50px
Total bredd: 400px
Bakgrundsfärger: #FF3300, #66FF99 och #FFCC00

I övrigt gäller

Marginaler i pixlar (TRBL): 0, 0, 3 och 0
Padding-top: 10px
Tecken huvudrubrik: small-caps, 17px, verdana
Tecken underrubrik: 12px, verdana
Teckenfärg: #666666

20 p

Uppgift 8

Här skall du göra en länk till Michael Moores hemsida.

Bilden och texten skall vara klickbara och länkade till http://www.michaelmoore.com/
Med hjälp av css skall du göra en mouseovereffekt.Den andra illutrationen visar utseendet då cursorn är över länken.
Bilden skall vara centrerad i höjd och sidled med hjälp av css
Texten skall vara färgad
- #CCCCCC
- #FF66FF (Vid mouseover)
Teckensnitt är default.

Förlaga:

Bilder:

20 p

Uppgift 9

Nedanstående dokument är xhtml enligt doctypedeklarationen. Vid validering hos W3C på adressen http://validator.w3.org/#validate_by_input visar det sig att koden innehåller arton fel. Rätta dessa fel utan att sidans utseende i Firefox ändras.

Filens källkod hittar du här.

validera

20 p

Uppgift 10

I denna uppgift skall du utgå från en given html-fil vilken saknar css. Din uppgift är att lägga till css så att filen ser ut som på skärmdumpen nedan. Du får inte ändra några html-tagar i dokumentet. Du får endast lägga till css i en style-tag i dess head-del.

Rabbit Bakgrundsbild.

Merton

20 p

OK...

Lycka till

Torgny