Show sourcecode
The following files exists in this folder. Click to view.
webbsrvprg/style/webbsrvprg/webbutveckling1/Övningar/
61GgijAIoDL._AC_UF1000,1000_QL80_.jpg
CSS/
Pawmatchhh.png
apa.jpg
ex.html
foretagsprojekt/
foretagsprojekt.zip
goldie.jpg
jamie.html
javascript.html
javascript_cart.html
jquery.html
kanin.png
krokodil.jpg
labradoodle.jpg
labrador.jpg
loggapaw.png
maldiverna.jpg
mason.jpg
mosaic.jpg
ovning0.html
ovning1.html
ovning2.html
ovning3.html
ovning4_a.html
ovning4_b.html
ovning4_c.html
ovning6.html
ovning8.html
ovning9.html
ovning9apelsin.html
ovning9äpple.html
ovningflexbox.html
ovningform.html
ovningssida.html
responsivewebb/
startsida.hund.jpeg
startsida.hund2.jpg
sunset.la.webp
test.html
testsida.html
wp9473997-maldives-4k-wallpapers.jpg
wp9474007-maldives-4k-wallpapers.jpg
ovning9äpple.html
124 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Övning 9</title>
<style>
#vald {
font-weight: bold;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header reklam'
'right middle middle reklam'
'right footer footer reklam';
grid-gap: 1px;
background-color: black;
border: black 1px solid;
}
.header {
grid-area: header;
text-align: center;
background-color: palevioletred;
}
.reklam {
display:flex;
flex-direction: column;
gap: 10px;
grid-area: reklam;
text-align: center;
background-color: yellow;
}
.right {
grid-area: right;
background-color: rgb(0, 255, 42);
}
.middle {
grid-area: middle;
background-color: white;
}
.footer {
grid-area: footer;
text-align: center;
background-color: gray;
}
.bakgrund {
background-color: white;
border: black 3px solid;
padding: 5px;
}
.header,
.reklam,
.right,
.middle,
.footer {
padding: 20px;
}
nav a {
display: block;
padding:5px 10px;
border: 1px solid black;
background-color: aliceblue;
text-decoration: none;
}
a:hover {
background-color: plum;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">HTML5-element</div>
<div class="reklam">Reklam
<div class="bakgrund">
<p>Superpris<br>9,90kr/kg</p>
</div>
<div class="bakgrund">
<p>Kanonpris<br>0,99kr/kg</p>
</div>
<div class="bakgrund">
<p>Fantompris<br>4,95kr/1/2kg</p>
</div>
</div>
<div class="right">
<div class="bakgrund">
<p>Aktuella frukter</p>
<nav>
<a href="./ovning9.html">banan</a>
<a href="./ovning9apelsin.html">apelsin</a>
<a href="./ovning9äpple.html" id="vald">äpple</a>
</nav>
</div>
</div>
<div class="middle"><b>Frukter<br>Äpple</b><br>Äpple är en art i familjen rosväxter och är ett av de<br>
mest odlade fruktträden. Man äter oftast inte<br>kärnhuset, det så kallade äppelskruttet. Äpplen har<br>
länge ansetts vara nyttiga. I storbrittanien lyder ett<br>
gammalt taletsätt" An apple a day keeps the doctor<br>
away". Äpplen, framförallt äppelskalet, innehåller<br>
kalium och rikligt med C-vitamin. Det finns<br>
huvudsakligen tre typer av äpplen:sommaräpplen,<br>
höstäpplen och vinteräpplen. Om man biter av en bit<br>
från ett äpple och låter det ligga en stund blir<br>
fruktköttet brunaktigt. Detta kommer sig av att äpplen<br>
innehåller fenoler som oxideras. Detta kan förhindras<br>
om ett antioxidant, exempelvis askorbinsyra, täcker<br>
ytan.
</div>
<div class="footer">Jamie Wallin 2025-25-11</div>
</div>
</body>