Webszerkesztés
Notepad ++



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

Tedd dőltté a „Ponta de Sagres” szövegrészt, valamint félkövérré az „Akár üzleti út, akár kikapcsolódás” szövegrészt.

<i>Ponta de Sagres</i>
<b>Akár üzleti út, akár kikapcsolódás</b>

3. Állíts be hiperhivatkozást a „Foglalja le a szobát már most!” mondatot, amely mutasson a Foglalás című oldalra, azon belül az urlap nevű könyvjelzőre.

<a href="foglalas.html#urlap">Foglalja le a szobát már most!</a>

Mentsd el és zárd be az index.html fájlt.

Fájl - Mentés
Fájl - Bezárás

4. Nyisd meg a szolg.html fájlt.

Fájl - Megnyitás

Módosítsd az oldalon megjelenő pool.jpg kép megjelenését úgy, hogy szélessége 425, magassága 283 pixel legyen. Adj alternatív szöveget a képhez medence értékkel.

<img src="pool.jpg" width="425" height="283" alt="medence">

5. Tedd dőltté a felsorolás fölötti Szolgáltatásaink: sort.

<p><i>Szolgáltatásaink:</i></p>

A felsorolás stílusát módosítsd számozottról számozatlanra.

<ol><ul>
...
</ol></ul>

6. Töröld a felsorolásból az Iszapfürdő sort, a felsorolás végére pedig tegyünk be egy új sort Aromaterápia szöveggel.

<li>Iszapfürdő</li>
<li>Aromaterápia</li>

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

Fájl - Mentés
Fájl - Bezárás

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

Fájl - Megnyitás

Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.

<html lang="hu">
<head>
<meta charset="utf-8">
...
<title>Cape Hotel</title>
</head>
<body>
...
</body>
</html>

Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.

Fájl - Mentés másként...
Fájltípus: .html
Fájl - Bezárás

8. Nyisd meg a szobak.html fájlt.

Fájl - Megnyitás

Töröld a táblázatból az Egyéb nevű oszlopot.

<td>Egyéb</td>
<td>-</td> (mind a 4 helyen!)

9. A megmaradt táblázat első sorának és oszlopának celláit alakítsd fejléc cella típusúvá.

<td><th>Árak (/szoba/éj)</td></th>
<td><th>Egyágyas</td></th>
<td><th>Kétágyas</td></th>
...
<td><th>január - március</td></th>
(a többi hónapnevet tartalmazó cellánál is végezd el a módosításokat!)

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

Fájl - Mentés
Fájl - Bezárás

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

Fájl - Megnyitás

Módosítsd a Hotel nevű választólista tulajdonságait úgy, hogy minden értéke látszódjon.

<select name="hotel" size="4">

Alapértelmezés szerint a Cape Hotel legyen kiválasztott állásban.

<option value="ch" selected>Cape Hotel</option>

11. Adj hozzá két új listaelemet a Szoba típusa nevű választólistához: Egyágyas, illetve Kétágyas szöveggel, a listaelemekhez rendelt érték pedig 1 illetve 2 legyen.

<option value="0" selected>Válasszon szobatípust!</option>
<option value="1">Egyágyas</option>
<option value="2">Kétágyas</option>

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

Fájl - Mentés
Fájl - Bezárás

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

Fájl - Megnyitás

Módosítsa a CSS szabályokat az alábbiak szerint:
Az aktiv azonosítójú elemen belüli hivatkozás jelölő elemek betűszíne legyen #f66, a betűstílus pedig félkövér.

#menu ul li#aktiv a{
	color: #000 #f66;
	font-weight: bold;
}

13. Adj keretet a tartalom azonosítón belüli table elemeknek: a felső és a baloldali keret legyen 2 pixel vastag, folytonos és #ccc színű, az alsó és jobboldali keret pedig 2 pixel vastag, folytonos és #999 színű.

#tartalom table{
	border: 0;
	border-top: 2px solid #ccc;
	border-left: 2px solid #ccc;
	border-bottom: 2px solid #999;
	border-right: 2px solid #999;
}

14. A táblázat feliratához (caption) rendelj csupa nagybetűs (uppercase) betűképet és 2em nagyságú betűközt.

#tartalom table caption{
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 2em;
}

15. A foglalas_urlap osztályú elem háttérszíne legyen #eee, a bal- és jobboldali margóját pedig állítsd be úgy, hogy az elem tartalma középre rendeződjön.

#tartalom .foglalas_urlap{
	width: 600px;
	padding: 5px;
	margin: 0 auto;
	background-color: #eee;
}

16. A text típusú input elemek szélessége legyen 220 pixel, a háttérszínük pedig #ffe.

input[type=text]{
	width:220px; background-color:#ffe;
}

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: