Webszerkesztés
Notepad ++
8. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Módosítsd „A századok ködéből...” szöveget 1. szintű címsorrá.
<p><h1>A századok ködéből...</p></h1>
A felette lévő bekezdésben keresd meg az „Asztalfoglalás” szót. Ezt alakítsd hiperhivatkozássá, amely mutasson az Asztalfoglalás című oldalra.
<a href="foglalas.html">Asztalfoglalás</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
3. Nyisd meg a spec.html fájlt.
-
Módosítsd az ételek képeinek megjelenési tulajdonságait úgy, hogy mindhárom kép szélessége 135 pixel legyen. Ügyelj arra, hogy a képek méretarányai ne torzuljanak.
<img src="french-toast.jpg" alt="french-toast" width="135"> <img src="leves.jpg" alt="leves"height="94"width="135"> <img src="cake.jpg" alt="torta" width="105""135"height="108">
4. Szúrj be horgonyt (könyvjelzőt) a „Levesek” szó elé levesek néven, valamint a „Desszertek” szó elé desszertek néven.
<td id="levesek">Levesek</td> <td id="desszertek">Desszertek</td>
5. Alakítsd át a táblázatok első sorainak celláit fejléc cella típusúvá.
a másik három helyen is végezd el a módosításokat!<tr><td><th>Reggeli</td></th><td><th></td></th></tr>
Egyesítsd ezeket a cellákat a velük szomszédos üres cellákkal.
<th colspan="2">Reggeli</th>a másik három helyen is végezd el a módosításokat!<th></th>
6. Töröld a Levesek táblázatból a Fahéjas szilvaleves sort.
<tr> <td>Fahéjas szilvaleves</td> <td>800 Ft</td> </tr>
Módosítsd a Szarvas tokány zöldséges bundában árát 5500 Ft-ra.
<td>7200 Ft5500 Ft</td>
Mentsd el és zárd be a spec.html fájlt.
-
-
-
7. Nyisd meg a business.txt fájlt.
-
Tedd félkövérré „A menü tartalma:” szöveget.
<p><b>A menü tartalma:</b></p>
Az ez alatt lévő felsorolást alakítsd számozatlan felsorolás stílusúvá.
<pre><ul>-<li>Hideg és meleg előételek, saláták</li>-<li>A nap levese</li>-<li>Szárnyas vagy hal tetszőleges körettel</li>-<li>Fagylalt vagy sütemény</li>-<li>Korlátlan ásványvíz fogyasztás</li></pre></ul>
8. Állíts be hiperhivatkozást „A nap levese” sorra, amely mutasson a Specialitások című oldal Levesek táblázatához tartozó könyvjelzőre.
<li><a href="spec.html#levesek">A nap levese</a></li>
Állíts be hiperhivatkozást a „Fagylalt vagy sütemény” sorra is, ez pedig a Specialitások című oldal Desszertek táblázatához tartozó könyvjelzőre mutasson.
<li><a href="spec.html#desszertek">Desszertek</a></li>
9. Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
<html lang="hu"> <head> ... <title>Palmerius étterem</title> </head> <body> ... </body> </html>
Mentsd el a fájlt weboldalként business.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
10. Nyisd meg a foglalas.html fájlt.
-
Alakítsd át a Személyek száma melletti űrlapelemet, hogy az legördülő választóelem legyen. A választható lehetőségeket bővítse ki úgy, hogy 1 és 6 közötti szám bármelyikét ki lehessen választani.
<select name="szemszam"size="3"> <option value="0">- válasszon -</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select>
11. A „Füstmentes helyet kérek” melletti űrlapelemet módosítsd jelölőnégyzet típusúvá.
<input type="radio""checkbox" ....><label for="nemdohanyzo">Füstmentes helyet kérek.</label>
A jelölőnégyzet alapértelmezés szerint legyen bejelölt állapotú.
<input type="checkbox" checked ....>
Mentsd el és zárd be a foglalas.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A kep_alairva osztályú elemek betűtípusa legyen serif, mérete 11 pixel.
.kep_alairva{
font-family: serif;
font-size: 11px;
}13. Egészítsd ki a td elemekre illeszkedő szabályt a következővel: az alsó keret legyen 1 pixel vastag, #888 színű és pontozott mintázatú.
td{
padding: 5px;
vertical-align: bottom;
border-bottom: 1px dotted #888;
}14. Egészítsd ki a th elemekre illeszkedő szabályt a következővel: a háttér színe legyen #060, a betű színe pedig #fff.
th{
padding: 5px;
background-color: #060;
color: #fff;
}15. Az űrlap legend elemeknél a betű mérete legyen 20 pixel, a betűstílusa pedig félkövér.
legend{
font-size: 20px;
font-weight: bold;
}16. Egészítsd ki a form elemre vonatkozó szabályt: az elem szélessége legyen 900 pixel, a bal- és jobboldali margókat pedig állítsd be úgy, hogy az elem doboza középen helyezkedjen el.
form{
background-color: #eee;
width: 900px;
margin: 0 auto;
}Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:
index.html
