Poglavje 4 D1.4 Dodajanje preostalih spletnih strani

D1.4

4.1 Povezave na ostale strani

V glavi smo predvideli naslednje strani v okviru predstavitveni strani naše restavracije:

  • O nas je začetna stran, ki smo jo razvili v predhodnjem koraku,
  • Meni,
  • Vinska karta,
  • Dogodki in
  • Kontakt.

Najprej poskrbimo, da se ob kliku na logotip v glavi (glej vrstici 15 in 17) in nogi (glej vrstici 88 in 90) odpre naša začetna stran, ki smo jo razvijali v datoteki index.html.

Nato za vsa besedila (O nas, Meni, Vinska karta, Dogodki in Kontakt) poskrbimo, da se ob kliku odpre željena spletna stran v novem dokumentu, ki jih bomo razvili v nadaljevanju. Ker je privzeta barva povezava nad besedilom modra, poskrbimo še, da bo v našem primeru bela, saj imamo v glavi črno barvo, zato pri vsaki povezavi poskrbimo še za stil (color: white; text-decoration: none;).

index.html

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

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div style="background: url('slike/ozadje1.jpg') top left repeat; height: 200px; font-size: 42px; color: white; text-shadow: 0 0 4px black; display: flex; align-items: center; justify-content: center; text-align: center;">
        Restavracija izvrstnih okusov <br /> in dobrih ljudi
      </div>

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td>
              <img src="slike/hrana/hrana1.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana2.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana3.jpg" style="width: 320px;" />
            </td>
          </tr>
          <tr>
            <td>
              <img src="slike/hrana/hrana4.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana5.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana6.jpg" style="width: 320px;" />
            </td>
          </tr>
          <tr>
            <td>
              <img src="slike/hrana/hrana7.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana8.jpg" style="width: 320px;" />
            </td>
            <td>
              <img src="slike/hrana/hrana9.jpg" style="width: 320px;" />
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si< /a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

4.2 Stran z meniji

Na strani z meniji želimo potencialnim gostom predstaviti našo kulinarično ponudbo pri tem pa ohraniti izgled naše spletne strani, t.j. uporabiti nogo in glavo, ki smo jo že razvili na začetni strani.

4.2.1 Osnutek strani z meniji

Kreiramo novo datoteko meni.html, kamor prenesemo vsebino naše začetne datoteke, brez osrednjega dela vsebine, kjer v 1. koraku zgolj dodamo gradnik div z vsebino Meni (glej vrstico 41).

meni.html

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

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div>Meni</div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

4.2.2 Dodajanje kategorij menija

Ko imamo pripravljeno osnovno strukturo naše strani z menijem, lahko dodamo posamezne kategorije našega menija (Hladne predjedi, Juhe, Tople predjedi, Jedi po naročilu, Gotove jedi, Ribe in raki, Priloge in prikuhe, Solate in Sladice).

meni.html

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
121
122
123
124
125
126
127
128
129
130
131

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div>Meni</div>

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/hladne_predjedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Hladne predjedi
              </div>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/juhe.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Juhe
              </div>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/tople_predjedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Tople predjedi
              </div>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/jedi_po_narocilu.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Jedi po naročilu
              </div>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/gotove_jedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Gotove jedi
              </div>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/ribe_in_raki.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Ribe in raki
              </div>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/priloge_in_prikuhe.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Priloge in prikuhe
              </div>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/solate.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Solate
              </div>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/sladice.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Sladice
              </div>
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

Omenjene kategorije menija bomo dodali v obliki tabele (3 x 3), kjer bomo, podobno kot pri naslovu začetne strani, za ozadje uporabili sliko, v ospredju pa bo besedilo s senco (glej vrstice 43 - 97). Rezultat dodajanja kategorij menija je prikazan na sliki 4.1.

Dodane kategorije menija

Slika 4.1: Dodane kategorije menija

4.2.3 Dodajanje podrobnosti kategorij menija

Za vsako kategorijo želimo dodati še seznam jedi, ki bodo prikazane v obliki seznama.

Seznami v HTML standardu so dvojni:

  • neurejeni24 seznami v obliki ul gradnikov in
  • urejeni25 seznami v obliki ol gradnikov.

Elemente posameznega seznama vključimo v li gradnike..

meni.html

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/hladne_predjedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Hladne predjedi
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Tatarski biftek</li>
                <li>Kraški pršut</li>
                <li>Fini narezek</li>
                <li>Francoska solata</li>
                <li>Šunka s hrenom</li>
                <li>Govedina v solati</li>
                <li>Polenovka - namaz</li>
                <li>Ribja solata</li>
                <li>Hobotnica v solati</li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/juhe.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Juhe
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Ribja juha</li>
                <li>Goveja juha</li>
                <li>Zelenjavna juha</li>
                <li>Enolončnice</li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/tople_predjedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Tople predjedi
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Špageti</li>
                <li>Testenine z jurčki</li>
                <li>Ocvrti sir</li>
                <li>Njoki razni</li>
                <li>Pastičo mesni</li>
                <li>Kaneloni razni</li>
                <li>Rižota</li>
                <li>Rižota z jurčki</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/jedi_po_narocilu.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Jedi po naročilu
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Mešano meso na žaru</li>
                <li>Svinjska zarebrnica na žaru</li>
                <li>Svinjska ribica - medaljoni</li>
                <li>Pleskavica</li>
                <li>Zrezki na žaru,</li>
                <li>Ramstek na žaru</li>
                <li>Ljubljanski zrezek</li>
                <li>Puranov file na žaru</li>
                <li>Piščančji file z na žaru</li>
                <li>Goveji file na žaru</li>
                <li>Telečja rolada</li>
                <li>Telečji zrezki</li>
                <li>Telečja rebrca</li>
                <li>Pečena jagnjetina</li>
                <li>Mladi sir na žaru</li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/gotove_jedi.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Gotove jedi
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Nadevana paprika</li>
                <li>Sarma</li>
                <li>Musaka</li>
                <li>Zelenjavni krožnik</li>
                <li>Goveji golaž</li>
                <li>Svinjska pečenka</li>
                <li>Kuhana govedina</li>
                <li>Paslij z rebrci</li>
                <li>Pečenice (par)</li>
                <li>Kranjske klobase</li>
                <li>Pečeni piščanec</li>
                <li>Vampi po tržaško</li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/ribe_in_raki.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Ribe in raki
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Orada, Brancin na žaru</li>
                <li>Lignji s tatarsko omako</li>
                <li>Lignji nadevani</li>
                <li>Losos, na žaru</li>
                <li>Hobotnica na žaru</li>
                <li>Ribji file na žaru</li>
                <li>Postrv na žaru</li>
                <li>Polenovka po primorsko</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/priloge_in_prikuhe.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Priloge in prikuhe
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Dušeni riž</li>
                <li>Korenček na maslu</li>
                <li>Grah na maslu</li>
                <li>Zelje ali ohrovt</li>
                <li>Šampinjoni na žaru</li>
                <li>Špinača na maslu</li>
                <li>Krompir na različne načine</li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/solate.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Solate
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Zelena solata</li>
                <li>Paradižnikova solata</li>
                <li>Radič</li>
                <li>Zeljnata solata</li>
                <li>Mešana solata</li>
                <li>Solata Vrtnica</li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 320px;">
              <div style="width: 100%; background: url('slike/hrana/sladice.jpg') top left; height: 107px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Sladice
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>Jabolčni zavitek</li>
                <li>Skutni zavitek</li>
                <li>Sadne pite</li>
                <li>Gibanica</li>
                <li>Torte (razne)</li>
                <li>Gratinirane palačinke</li>
                <li>Tiramisu</li>
                <li>Kremna rezina</li>
                <li>Sadne solate</li>
                <li>Sadna kupa s prelivom</li>
                <li>Ananasov kompot</li>
                <li>Kompot</li>
              </ul>
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

V našem primeru bomo uporabili neurejen seznam <ul>, kjer alinej ne želimo prikazovati (stil list-style: none), poravnan naj bo sredinsko (stil align-content: center; text-align: center;) in vsebina je obdana z robom 20px (stil padding: 20px). Končni izgled strani z meniji je prikazan na sliki 4.2.

Dodane podrobnosti kategorij menija

Slika 4.2: Dodane podrobnosti kategorij menija

4.3 Stran z vinsko karto

Ideja pri strani z vinsko karto je podobno kot pri strani z menijem, zato lahko uporabimo isti pristop, kot v prejšnjem poglavju 4.2.

4.3.1 Osnutek strani in kategorije vinske karte

Najprej dodamo kategorije vinske karte (Odprta vina, Kakovostna vina, Peneča vina, Buteljčna bela vina in Buteljčna rdeča vina).

vinska-karta.html

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

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/odprta.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Odprta vina
              </div>
            </td>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/kakovostna.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Kakovostna vina
              </div>          
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/peneca.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Peneča vina
              </div>
            </td>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/buteljcna_bela.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Buteljčna bela vina
              </div>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/kakovostna.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Buteljčna rdeča vina
              </div>
            </td>
            <td>
              &nbsp;
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

Omenjenim kategorijam dodamo tudi ustrezna ozadja, kjer je prikaz kategorij vinske karte prikazan na sliki 4.3.

Dodane kategorije vinske karte

Slika 4.3: Dodane kategorije vinske karte

4.3.2 Dodajanje podrobnosti kategorij vinske karte

Pri podrobnosti kategorij vinske karte, bomo podobno kot pri menijih, dodali nekaj primerov posameznih kategorij vinske karte. Dodatni gradnik, ki ga v tem primeru uvedemo je odebljeno besedilo z <b>, ki prikaže besedilo v odebljeni obliki (glej vrstice 50, 54, 65, 69, 73, 86, 97, 101, 105, 109, 122, 126, 130 in 134).

vinska-karta.html

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/odprta.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Odprta vina
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>
                  <b>FRIZZANTINO, suho, V. K. Goriška Brda (1 l)</b><br />
                  Prijetno sveže in iskrivo biser vino pridelano po charmat metodi, sort Prossecco, Rebula in Chardonnay.
                </li>
                <li style="margin-top: 10px;">
                  <b>MEŠANO BELO, suho, V. K. Goriška Brda (1 l)</b><br />
                  Zvrst avtohtone sorte Goriških Brd, Rebule in svetovno znanega Chardonnay.
                </li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/kakovostna.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Kakovostna vina
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>
                  <b>VRTOVČAN, suho, Vinska klet Vipava 1894 (1 l)</b><br />
                  Mlado vino vipavskih sort Malvazija, Zelen, Sauvignon.
                </li>      
                <li style="margin-top: 10px;">
                  <b>MERLOT, suho, V. K. Goriška Brda (1 l)</b><br />
                  Kakovostno vino rubinaste rdeče barve granatnega odtenka.
                </li>
                <li style="margin-top: 10px;">
                  <b>REFOŠK, Vinakoper (1 l)</b><br />
                  Robustno vino, s prijetno kislostjo in primerno široki paleti jedi.
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/peneca.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Peneča vina
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>
                  <b>PENINA Quercus,  suho, V. K. Goriška Brda (0,75 l)</b><br />
                  Penina pridelana iz zvrsti Rebule in Chardonnay po charmat metodi.
                </li>
              </ul>
            </td>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/buteljcna_bela.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Buteljčna bela vina
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>
                  <b>REBULA Quercus, suho,  V.K. Goriška Brda (0,75 l)</b><br />
                  Vrhunsko vino prijetnega, zmerno polnega okusa, ki daje značilno svežino.
                </li>
                <li style="margin-top: 10px;">
                  <b>CUVÉE BELI Quercus, suho, V.K. Goriška Brda (0,75 l)</b><br />
                  Vrhunsko vino polnega okusa, prijetne svežine. Vonj spominja na jabolko, hrušk in citruse. Sorta: Chardonnay, Rbula, Sauvignonasse
                </li>
                <li style="margin-top: 10px;">
                  <b>SAUVIGNONASSE Belica, suho, Medana (0,75 l)</b><br />
                  Zelenkasto-rumene barve, sadnega okusa z izrazitim okusom mandljev. Sortna sestava je 100% grozdje Sauvignonasse.
                </li>
                <li style="margin-top: 10px;">
                  <b>CHARDONNAY Bagueri, suho, V.K. Goriška Brda (0,75 l)</b><br />
                  Vrhunsko vino prijetnega, izredno polnega okusa. Spominja na citruse, zrele breskve, melono, maslo, vanilijo in lešnike. Dopolnjen z izraženo aromo po kruhovi skorji.
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: top; width: 490px;">
              <div style="width: 100%; background: url('slike/vina/kakovostna.jpg') top left; height: 120px; color: white; text-shadow: 0 0 4px black; font-weight: bold; font-size: large; display: flex; align-items: center; justify-content: center; text-align: center;">
                Buteljčna rdeča vina
              </div>
              <ul style="list-style: none; align-content: center; text-align: center; padding: 20px;">
                <li>
                  <b>REBULA Quercus, suho,  V. K. Goriška Brda (0,75 l)</b><br />
                  Vrhunsko vino prijetnega, zmerno polnega okusa, ki daje značilno svežino.
                </li>
                <li style="margin-top: 10px;">
                  <b>CUVÉE BELI Quercus, suho, V.K. Goriška Brda (0,75 l)</b><br />
                  Vrhunsko vino polnega okusa, prijetne svežine. Vonj spominja na jabolko, hrušk in citruse. Sorta: Chardonnay, Rbula, Sauvignonasse
                </li>
                <li style="margin-top: 10px;">
                  <b>SAUVIGNONASSE Belica, suho, Medana (0,75 l)</b><br />
                  Zelenkasto-rumene barve, sadnega okusa z izrazitim okusom mandljev. Sortna sestava je 100% grozdje Sauvignonasse.
                </li>
                <li style="margin-top: 10px;">
                  <b>CHARDONNAY Bagueri, suho, V. K. Goriška Brda (0,75 l)</b><br />
                  Vrhunsko vino prijetnega, izredno polnega okusa. Spominja na citruse, zrele breskve, melono, maslo, vanilijo in lešnike. Dopolnjen z izraženo aromo po kruhovi skorji.
                </li>
              </ul>
            </td>
            <td>
              &nbsp;
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

Končni izgled je prikazan na sliki 4.4.

Dodane podrobnosti kategorij vinske karte

Slika 4.4: Dodane podrobnosti kategorij vinske karte

4.4 Stran z dogodki

Dodati želimo tudi stran z dogodki, kjer restavracije svoje goste obvešča o prihodnjih dogodkih, ki so planirani v restavraciji. Dogodke bomo preprosto prikazali v obliki tabele čez celotno stran, kjer imamo 1 celico v vrstici s sliko in opisom dogodka.

Naslove dogodkov želimo izpisati nekoliko večje, za kar lahko v HTML uporabimo naslove, saj je določeno besedilo v HTML dokumentih bolj pomembno kot ostalo. V standardu HTML je na voljo 6 naslovnih elementov (od h1 do h6) z različnimi ravnmi pomembnosti.

Naslovni element h1 je najbolj pomemben in ga brskalniki ponavadi prikažejo z večjo pisavo kot ostale. Vsak naslednji naslovni element (h2, h3 itd.) so nato prikazani s progresivno manjšo pisavo.

V našem primeru uporabimo naslova h2 (glej vrstice 45, 59 in 73) in h5 (glej vrstice 46, 60 in 74).

dogodki.html

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

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
            <tr>
              <td>
                <h2>Zaključna poletna zabava</h2>
                <h5>Ob Ljubljanici | Vsak petek v septembru</h5>
                <center>
                  <img src="slike/dogodki/melanie.png" style="width: 800px;" />
                </center>
                <p>
                  Vsak petek zvečer od 19. ure dalje lepo vabljeni na koncert mlade pevke Melanie Öesch, ki poje v ansamblu Die Dritten. 
                  Ansambel se imenuje po njej in hkrati pomeni, da predstavlja tretjo generacijo glasbenikov v svoji družini. 
                  Melanie je bila večkrat nagrajena za najboljše jodlanje in je zelo prepoznana v svoji domači Švici, Nemčiji in Avstriji. Prepoznavnost ji raste in zato ves čas prireja zelo obiskane koncerte po celi Evropi, zato smo zelo veseli, da jo bomo lahko gostili med nami.
                </p>
              </td>
            </tr>
            <tr>
              <td>
                <h2>Čarodej Jani</h2>
                <h5>Dvorišče naše restavracije | 1. oktober 2018</h5>
                <center>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/aIQN9rSqrW0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </center>
                <p>
                  Ob začetku novega študijskega leta za vse študente organiziramo poseben družaben program s Čarodejem Janijem. Dogodek je primeren še posebej za vse študente, ki 
                  se ne želijo udeležiti tradicionalnega brucovanja, saj na dogodku ne bomo stregli alkohola. Na voljo bo le hrana in pijača, ki je priporočena za otroke do 5. 
                  leta starosti.
                </p>
              </td>
            </tr>
            <tr>
                <td>
                  <h2>Premiera filma Mirko i Slavko</h2>
                  <h5>Velika soba | 31. oktober 2018</h5>
                  <center>
                    <img src="slike/dogodki/mirkoslavko.jpg" style="width: 800px;" />
                  </center>
                  <p>
                    V spomin na zgodovinske trenutke in osvajanja ozemelj, se bomo s ponovno premiero spomnili junakov Slavka in Mirka,
                    ki sta zaslužna za osvoboditev naših predhodnih republik.
                  </p>
                </td>
              </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

Pri vsakem dogodku, poleg opisa v odstavku <p> (glej vrstice 50 - 54, 64 - 68 in 78 - 81), dodamo še sliko, ki jo postavimo na sredino (glej vrstice 47 - 49 in 75 - 77).

Vključujemo pa lahko tudi multimedijsko gradivo, npr. vgrajen YouTube posnetek (glej vrstice 61 - 63).

Končni rezultat strani z dogodki prikazuje slike 4.5.

Stran z dogodki

Slika 4.5: Stran z dogodki

4.5 Stran s kontaktom

Na stran s kontakti želimo vključiti zemljevid lokacije naše restavracije, naslov, telefonsko številko, elektronski naslov in odpiralni čas. Ko na predhodnjih straneh, bomo tudi tukaj vsebino organizirali v obliki tabele, kamor bomo dodali sliko lokacije in ustrezne kontaktne podatke.

kontakt.html

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

<!DOCTYPE html>

<!-- Osnovna HTML stran -->
<html>
  <head>
    <meta charset="utf-8">
    <title>..:: Restavracija Dobrojed ::..</title>
  </head>
  
  <body style="margin: 0px; background: url('slike/ozadje.jpg') top left repeat;">

    <!-- GLAVA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center;">
      <div style="width: 200px;">
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_veliki.png" width="200px" />
        </a>
      </div>  
      <div style="width: 800px; text-align: right;">
        <span>
          <a href="index.html" style="color: white; text-decoration: none;">O nas</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="meni.html" style="color: white; text-decoration: none;">Meni</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="vinska-karta.html" style="color: white; text-decoration: none;">Vinska karta</a>
        </span>
        <span style="margin-left: 30px;">
          <a href="dogodki.html" style="color: white; text-decoration: none;">Dogodki</a>
        </span>
        <span style="margin-left: 30px; margin-right: 30px;">
          <a href="kontakt.html" style="color: white; text-decoration: none;">Kontakt</a>
        </span>
      </div>
    </div>

    <!-- CENTER -->
    <div style="width: 100%; align-items: center; justify-content: center;">

      <div style="width: 1000px; margin-left: auto; margin-right: auto;">
        <table style="margin-top: 30px; margin-bottom: 30px;" cellspacing="10px">
          <tr>
            <td>
              <img src="slike/lokacija.png" style="width: 450px;" />
            </td>
            <td style="padding-left: 150px; font-size: x-large;">
              <p>
                  Restavracija Dobrojed <br />
                  Slovenska cesta 222 B <br />
                  SI-1000 Ljubljana <br /><br />
                  tel. 01 / 286 31 45 <br />
                  <a href="mailto:info@dobrojed.si" style="color: black;">info@dobrojed.si</a>
              </p>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: center; font-size: x-large;">
              <p><b>Odpiralni čas</b></p>
              <p>ponedeljek - petek <br /> 7:00 - 18:00</p>
              <p>sobote, nedelje, prazniki <br /> ZAPRTO</p>
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- NOGA -->
    <div style="background-color: black; color: white; width: 100%; display: flex; align-items: center; justify-content: center; font-size: smaller; padding-top: 20px;">
      <div>
        <a href="index.html">
          <img src="slike/logo/dobrojed_logo_mali.png" width="150px" />
        </a>
        <p>
          &copy; 2018 Restavracija Dobrojed <br />
          Vse pravice pridržane
        </p>
      </div>
      <div style="width: 300px;">
        <p style="padding-left: 100px;">
          Restavracija Dobrojed <br />
          Slovenska cesta 222 B <br />
          SI-1000 Ljubljana <br /><br />
          tel. 01 / 286 31 45 <br />
          <a href="mailto:info@dobrojed.si" style="color: white;">info@dobrojed.si</a>
        </p>
      </div>
      <div style="width: 500px; text-align: right;">
        <p>
          IZDELAVA SPLETNE STRANI: <br />
          Informacijske tehnologije, Jože Mandeljc s.p. <br />
          OPOZORILO: Ta spletna stran služi kot učni pripomoček <br /> in vsebuje elemente iz spletne strani Restavracije Vrtnica.
        </p>
      </div>
    </div>

  </body>
</html>

Končni rezultat strani s kontakti prikazuje slika 4.6.

Stran s kontaktom

Slika 4.6: Stran s kontaktom

Delno rešitev spletne strani do te točke je na voljo na spletnem naslovu ali v obliki ZIP datoteke.

  1. angl. unordered↩

  2. angl. ordered↩

Obrazec za komentarje

Tip komentarja*
v okviru " "
       
Komentar*
Predlog rešitve*
Ime in priimek
Elektronski naslov