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

test.html

66 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
<!DOCTYPE html>
<html>

<head>
    <style>
        .item1 {
            grid-area: header;
            background-color: #13cbc2;
        }

        .item2 {
            grid-area: menu;
        }

        .item3 {
            grid-area: main;
        }

        .item4 {
            grid-area: right;
        }

        .item5 {
            grid-area: footer;
        }

        .grid-container {
            display: grid;
            grid-template-areas:
                'header header header header header header'
                'menu main main main right right'
                'menu footer footer footer footer footer';
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }

        .grid-container>div {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>

    <h1>A Webpage Template</h1>

    <p>You can use the <em>grid-area</em> property to name grid items.</p>
    <p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on
        the grid container.</p>
    <p>This grid layout contains six columns and three rows:</p>

    <div class="grid-container">
        <div class="item1">jamie är bäst</div>
        <div class="item2">Menu</div>
        <div class="item3">Main</div>
        <div class="item4">Right</div>
        <div class="item5">Footer</div>
    </div>

</body>

</html>