Webszerkesztés
Notepad ++
36. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Tedd félkövérré az „egyszerűen és gyorsan” szövegrészt.
<b>egyszerűen és gyorsan</b>
Alakítsd dőltté az „Ismerd meg a vidéket!” sort.
<i>Ismerd meg a vidéket!</i>
3. Állíts be hiperhivatkozást a „FALU-VÉGE kft.” szövegrészre, amely mutasson a kapcsolat.html oldalra.
<a href="kapcsolat.html"FALU-VÉGE kft.</a>
Állíts be hiperhivatkozást a „szálláshelyeket és programokat” szövegrészre is, ez mutasson a Programok című oldalra.
<a href="programok.html">szálláshelyeket és programokat</a>
4. Szúrd be a turizmus.jpg képet a kep osztályú elemen belülre. Adj alternatív szöveget a képnek „turizmus” értékkel.
<p class="kep"><img src="turizmus.jpg" alt="turizmus">
Mentsd el és zárd be az index.html fájlt.
-
-
-
5. 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> ... <title>Falu vége turisztikai Kft.</title> </head> <body> ... </body> </html>
6. Módosítsa a „Kapcsolat” címsor alatti szöveget úgy, hogy az egyes sorok legyenek külön bekezdésben.
<p>FALU-VÉGE Utazási Iroda és Turisztikai Szolgáltató Kft.<br></p> <p>Székhely: 9999 Piripócs, Faluvége u. 4568.<br></p> <p>Telefon: +36 999 345 6789<br></p> <p>Fax: +36 999 345 6789<br></p> <p>Levelezési cím: 9999 Faluvége, Pf: 98654.</p>
Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
7. Nyisd meg a programok.html fájlt.
-
Az oldalon található táblázathoz adj táblázatcímet (caption) „Tavaszi programok” szöveggel.
<table> <caption>Tavaszi programok</caption>
8. Rendezd a táblázat sorait helyszín szerinti ABC sorrendbe.
jelöld ki az utolsó két táblázatsor adatait, majd üsd le a C + x billentyűkombinációt...üss egy N-t a <tbody> tag után; C + v.
Mentsd el és zárd be a programok.html fájlt.
-
-
-
9. Nyisd meg az ajanlo.html fájlt.
-
A Név felirathoz tartozó szövegmező név értéke legyen „nev”, a maximálisan beírható karakterek száma pedig 30.
<input type="text" name="textnev" maxlength="30">
10. A „Kategóriák, amelyekre kíváncsi” szöveghez tartozó jelölőnégyzetekhez vegyél fel egy új jelölőnégyzetet, amelynek a címkéje legyen „Gasztronómia”, és legyen alapértelmezés szerint bejelölt állapotban.
<input type="checkbox" name="gastro" value="1" id="gastro" checked> <label for="gastro"> Gasztronómia</label><br>
A jelölőnégyzet value értéke nem lehet(ne) azonos!
11. A Régió mezőjét állítsd be úgy, hogy minden eleme látszódjon, alapértelmezés szerint pedig legyen „Budapest és Pest megye” kiválasztott állapotban.
<select name="regio" size="8"> ... <option value="bud" selected>Budapest és Pest megye</option>
Mentsd el és zárd be az ajanlo.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A menu azonosítójú elemen belüli li elemekre adj meg félkövér betűstílust, valamint 1.2em betűméretet.
#menu li{
...
font-weight: bold;
font-size: 1.2 em;
}13. Adj meg a thead elemen belüli th elemek háttérszínének #060, a betűszínének pedig fehér (white) értékeket.
thead th{
...
background-color: #060;
color: white;
}14. A td elemekre határozz meg minimális szélességet, ami 80 pixel. Ugyanitt a függőleges szövegelrendezés felülre történjen.
td{
...
min-width: 80px;
vertical-align: top;
}15. A fieldset elemekhez rendelj 15 pixel méretű bélés (padding) értéket.
fieldset{
padding: 15px;
}16.A text típusú input elemek szélessége legyen 300 pixel.
input[type="text"]{
width: 300px;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

