Webszerkesztés
Notepad ++
Indíts el a Notepad++ webszerkesztő programot.
Módosítsa a CSS szabályokat az alábbiak szerint:
4. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
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.
-
-
-
4. Nyisd meg a szolg.html fájlt.
-
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.
-
-
-
7. Nyisd meg a kapcsolat.txt fájlt.
-
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ájltípus: .html
-
Fájltípus: .html
-
8. Nyisd meg a szobak.html fájlt.
-
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.
-
-
-
10. Nyisd meg a foglalas.html fájlt.
-
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.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
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.
-
-
-
-
-
Az elkészült weboldal:

