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.

Fájl - Megnyitás

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.

Fájl - Mind bezárása
Fájl - Kilépés

3. Nyisd meg a spec.html fájlt.

Fájl - Megnyitás

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á.

<tr>
	<td><th>Reggeli</td></th>
	<td><th></td></th>
</tr>
a másik három helyen is végezd el a módosításokat!

Egyesítsd ezeket a cellákat a velük szomszédos üres cellákkal.

<th colspan="2">Reggeli</th>
<th></th>
a másik három helyen is végezd el a módosításokat!

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 Ft 5500 Ft</td>

Mentsd el és zárd be a spec.html fájlt.

Fájl - Mind bezárása
Fájl - Kilépés

7. Nyisd meg a business.txt fájlt.

Fájl - Megnyitás

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ájl - Mentés másként...
Fájltípus: .html
Fájl - Bezárás

10. Nyisd meg a foglalas.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mind bezárása
Fájl - Kilépés

12. Nyisd meg a styles.css fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal:

index.html