Webbserverprogrammering 1

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

ovning9apelsin.html

120 lines UTF-8 Windows (CRLF)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!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" id="vald">apelsin</a>
        <a href="./ovning9äpple.html">äpple</a>
        </nav>
      </div>
    </div>

    <div class="middle"><b>Frukter<br>Apelsin</b><br>En apelsin är ett orangefärgat bär som kommer ifrån<br>
        apelsinträdet. Apelsinen är ingen naturligt<br>
        förkommande art utan en hybrid mellan pompelmus<br>
        och småcitrus. Apelsinen kommer ursprungligen från<br>
        Sydostasien men växer idag i många områden i världen.<br>
        Färgen orange har fått sitt namn ifrån apelsinen som på<br>
        franska (och engelska) heter just orange. Brasilien är<br>
        det land som producerar flest apelsiner. Blodapelsin är<br>
        en typ av apelsin. Blodapelsiner har en kort säsong och<br>
        odlas bara på några få platser på jorden, främst Sicilien</div>
    <div class="footer">Jamie Wallin 2025-12-11</div>
  </div>
</body>