|
|
|
Zlatan Ibrahimovic er en kjend fotbollsspiller fra Malmö.
Din oppgave er å lage en nettside der du skriver litt om denne fantastiske fotbollspiller. Finn ihvertfall to ting om honom på nettet som du skriver og bruk link til kildene. Bruk også bilden i oppgaveteksten men skaler ner den til 480x300 px. Ha med to overskriftshierarkier som begge skall typsettes. Typsettingen skal lagres i et eget stilark.
Det er skolestart, og du skal lage en timeplan i html. Lag timeplanen på bildet under. Bildet kan du hente fra commons.wikimedia.org. Husk å lagre oppgaven i egen mappe. Legg også bildet i en egen mappe med navn "bilder". I versjon 2 skal du nå lage fargekoder og leke deg med rammer på tabellen. La hvert fag få egen bakgrunnsfarge, og lag tykkere ramme på tabellen.
Solution.
timeplan2/timeplan.html.
<!doctype html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stilark.css">
<title>Min timeplan v2.0</title>
</head>
<body>
<h1>
Min Timeplan v2.0
</h1>
<img src="bilder/skolesal.jpg" width="25%">
<p>
<ul>
<li>Kontaktinformasjonen finnes på skolens hjemmeside</li>
<li>Husk rådegivertjenesten hver onsdag i 4. time</li>
<li>Kantinen er åpen fra kl 08:30 - kl 14:00 hver dag</li>
</ul>
</p>
<table>
<tr>
<td><b>Time</b></td><td><b>Mandag</b></td>
<td><b>Tisdag</b></td><td><b>Onsdag</b></td>
<td><b>Torsdag</b></td><td><b>Fredag</b></td>
</tr>
<tr>
<td><b>1. time</b></td><td class="norsk">Norsk</td>
<td class="norsk">Norsk</td><td class="samfunnsfag">Samfunnsfag</td>
<td class="it2">IT2</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>2. time</b></td><td class="norsk">Norsk</td>
<td class="norsk">Norsk</td><td class="samfunnsfag">Samfunnsfag</td>
<td class="it2">IT2</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>3. time</b></td><td class="norsk">Norsk</td>
<td class="kjemi">Kjemi</td><td class="kontakt">Kontaktlærer</td>
<td class="kjemi">Kjemi</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>4. time</b></td><td class="norsk">Norsk</td>
<td class="kjemi">Kjemi</td><td class="fritimme">Fritimme</td>
<td class="kjemi">Kjemi</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>5. time</b></td><td class="historie">Historie</td>
<td class="kroppsoving">Kroppsøving</td><td class="matematikk">Matematikk</td>
<td class="fysikk">Fysikk</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>6. time</b></td><td class="historie">Historie</td>
<td class="kroppsoving">Kroppsøving</td><td class="matematikk">Matematikk</td>
<td class="fysikk">Fysikk</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>7. time</b></td><td class="matematikk">Matematikk</td>
<td class="rle">RLE</td><td class="it2">IT2</td>
<td class="fysikk">Fysikk</td><td class="fagdag">Fagdag</td>
</tr>
<tr>
<td><b>8. time</b></td><td class="matematikk">Matematikk</td>
<td class="rle">RLE</td><td class="it2">IT2</td>
<td class="fysikk">Fysikk</td><td class="fagdag">Fagdag</td>
</tr>
</table>
<p>
<ul>
<li>Kontakt lærer på studieforberedende
<ol>
<li>Arne Johansen</li>
<li>Anna Jansen</li>
</ol>
</li>
<li>Kontakt lærer på yrkesfag
<ol>
<li>Nina Nilsen</li>
<li>Ola Pedersen</li>
<li>Mette Lia</li>
</ol>
</li>
</ul>
</p>
</body>
</html>
timeplan/stilark.css.
td, tr{
border: 2px solid black;
}
table {
background-color: LightYellow;
border: 4px solid black;
}
td.matematikk {
background-color: Red;
}
td.kontakt {
background-color: #FBB917;
}
td.fritimme {
background-color: #6960EC;
}
td.norsk {
background-color: Green;
}
td.it2 {
background-color: Blue;
}
td.historie {
background-color: Maroon;
}
td.kjemi {
background-color: Pink;
}
td.fysikk {
background-color: Purple;
}
td.fagdag {
background-color: Lime;
}
td.rle {
background-color: Olive;
}
td.samfunnsfag {
background-color: LightBlue;
}
td.kroppsoving {
background-color: LightGreen;
}
Hurtigmatkjeden McBergbys ønsker å utvikle et bestillingssystem som kundene kan bruke mens de venter på å bestille mat i restauranten og i drive-in. Dette gjør at kjøkkenet får beskjed om hva som skal lages av mat får kundene kommer til kassa, og dermed kan begynne på bestillingen tidligere. Slik avvikles køen raskere.
Du skal lage nettsiden index.html, slik at den blir slik du ser på bildet.
stilark.css for å kontrollere utseendet på siden.
Hint 1.
<div> elementet for å ramme inn siden og menyvelgeren.
Hint 2.
width, padding, border og border-radius til å kontrollere utseendet til div elementene.
Hint 3.
div element for å gi plass mellom ulike div element.Solution.
mcbergbys/index.html.
<!doctype html>
<html lang="nb">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stilark.css">
<title>McBergbys</title>
</head>
<body>
<div class="bakgrund">
<h1>Velkommen til McBergbys</h1>
<img src="bilder/logo.jpg" width="640px">
<div class="mellomrom"></div>
<div class="meny">
<h2>Velkommen til menyvelgeren</h2>
<h3>Sett sammen din meny under</h3>
<form>
<input type="text" value="Fornavn" id="navn"><br>
<table>
<tr>
<td>
<input type="radio" name="drikke">Cola<br>
<input type="radio" name="drikke">Solo<br>
<input type="radio" name="drikke">Sitronbrus<br>
<input type="radio" name="drikke">Vann<br>
</td>
<td>
<input type="radio" name="hoved">Hamburger<br>
<input type="radio" name="hoved">Kylling<br>
<input type="radio" name="hoved">Cheeseburger<br>
<input type="radio" name="hoved">Nuggets<br>
</td>
<td>
<input type="radio" name="side">Pommes frites<br>
<input type="radio" name="side">Løkringer<br>
<input type="radio" name="side">Cheesesticks<br>
</td>
<td>
<input type="checkbox" name="annet">Ketchup<br>
<input type="checkbox" name="annet">Sennep<br>
<input type="checkbox" name="annet">Grillkrydder<br>
<input type="checkbox" name="annet">Dip<br>
</td>
</tr>
</table>
<input type="button" value="Send bestilling"><br>
<input type="reset" value="Nullstill skjema"></button>
</form>
</div>
</div>
</body>
</html>
mcbergbys/stilark.css.
div.bakgrund {
background-color: ForestGreen;
width: 640px;
padding: 20px;
border-radius: 20px;
}
div.mellomrom {
height: 20px;
}
div.meny {
background-color: GreenYellow;
padding:20px;
width: 600px;
border-radius: 20px;
border:4px solid black;
}
|
|
|