Webbserver - Love Blomberg

Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/ovningar/

baskod.html
bentogrid.html
bilder/
css/
gimp_logga.html
index.html
js/
meny1/
meny2/
ovning-flexbox.html
ovning0.html
ovning00.html
ovning1.html
ovning10.html
ovning11.html
ovning12.html
ovning2.html
ovning3.html
ovning4.html
ovning5.html
ovning6.html
ovning6b.html
ovning7.html
ovning8a.html
ovning8b.html
ovning9a.html
ovning9b.html
ovning9c.html
ovning9d.html
sida2.html

ovning6.html

106 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
<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8">
    <title>Övning 6</title>
    <style>
        div {
            width: 175px;
            height: 100px;
        }
        
        p {
            margin: 0;
            padding: 0;
        }

        .align-right {
            text-align: right;
        }

        .yellow {
            background-color: yellow;
        }

        .strike {
            text-decoration: line-through;
        }

       #div1 {
        position: absolute;
        left: 20px;
        top: 10px;
        z-index: 1;
        background-color: blue;
       }
       
       #div2 {
        position: absolute;
        left: 75px;
        top: 50px;
        z-index: 2;
        background-color: green;
       }

       #div3 {
        z-index: 3;
        left: 50px;
        top: 85px;
        position: absolute;
        background-color: yellow;
       }

       #div4 {
        background-image: url("./bilder/metal.jpg");
        width: 500px;
        height: 100px;
        border: 5px solid red;
        top: 500px;
        left: 10px;
       }

       #div5 {
        width: 45%;
       }

       .indent {
        text-indent: 50px;
       }
    </style>
</head>

<body>
    <div>
    <div id="div1">
        <p>Lager 2 har blå färg</p>
    </div>
    <div id="div2">
        <p>Lager 3 har grön färg</p>
    </div>
    <div id="div3">
        <p>Lager 1 har gul färg. märk väl i vilken ordning lagren läggs in i sidan och vilket som är överlappande i den gemensamma ytan</p>
    </div>
    </div>
    
    <br><br><br><br><br><br>
    <div id="div4">
        <p class="align-right">Här kommer lite vanlig text...</p>
        <p class="align-right">Man kan göra <span class="yellow">f&nbsp; ä&nbsp; r&nbsp; g&nbsp; ö&nbsp; v&nbsp; e&nbsp; r&nbsp; s&nbsp; t&nbsp; r&nbsp; y&nbsp; k&nbsp; n&nbsp; i&nbsp; n&nbsp; g&nbsp; a&nbsp; r&nbsp;</span> lite som man vill om man kan hantera stilmallar!</p>
        <p class="align-right">Eller så kan man göra <span class="strike">överstrykningar</span></p>
    </div>
    <br><br>
    <div id="div5">
        <p class="indent">Här kommer lite indragen text Här kommer lite indragen text Här kommer lite
            indragen text Här kommer lite indragen text Här kommer lite indragen text Här
            kommer lite indragen text Här kommer lite indragen text Här kommer lite indragen
            text Här kommer lite indragen text Här kommer lite indragen text Här kommer lite
            indragen text Här kommer lite indragen text Här kommer lite indragen text Här
            kommer lite indragen text
        </p>
        <br>
        <a href="./ovning6b.html">Övning 6b</a>
    </div>
</body>

</html>