Webszerkesztés
Notepad ++
47. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Tedd 1. szintű címsorrá az „Üdvözöljük honlapunkon!”, valamint „A századok ködéből...” sorokat.
<p><h1>Üdvözöljük honlapunkon!</p></h1><p><h1>A századok ködéből...</p></h1>
3. Állíts be hiperhivatkozást a „konyha remekei” szövegrészre, amely mutasson a Specialitások című oldal foetelek könyvjelzőjére.
<a href="spec.html#foetelek">konyha remekei</a>
Állíts be hiperhivatkozást az „édességek” szóra is, ez mutasson a Specialitások című oldal desszertek könyvjelzőjére.
<a href="spec.html#desszertek">édességek</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg a business.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel. Adj oldalcímet „Palmerius étterem” szöveggel.
<html lang="hu"> <head> ... <title>Palmerius étterem</title> </head> <body>
5. Alakítsd számozott felsorolás stílusúvá „A menü tartalma:” alatti sorokat.
<ol> <li>Hideg és meleg előételek, saláták</li> ... <li>Korlátlan ásványvíz fogyasztás</li> </ol>
Mentsd el a fájlt weboldalként business.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
6. Nyisd meg a spec.html fájlt.
-
Szúrj be horgonyt (könyvjelzőt) a Főételek táblázata elé „foetelek” értékkel, valamint a Desszertek táblázata elé „desszertek” értékkel.
<th id="foetelek">Főételek</th> <th id="desszertek">Desszertek</th>
7. A táblázatokban lévő képek megjelenési szélességeit állítsd egységesen 140 pixel értékűre.
<img src="french-toast.jpg" alt="french-toast" width="135140"> mindhárom képnél végezd el a módosítást
8. Vond össze a táblázatok fejléc cella sorait a velük szomszédos üres cellákkal.
<th colspan="2">Reggeli</th><th></th>mindh a négy helyen végezd el a módosításokat
Mentsd el és zárd be az spec.html fájlt.
-
-
-
9. Nyisd meg a foglalas.html fájlt.
-
Az űrlapon rádiógombokhoz tartozó feliratokat tedd címke (label) típusúvá.
<input type="radio" name="nap" value="ma" id="napma"><label for="napma">mai napra</label> mindhárom helyen végezd el a módosítást, ügyelj, hogy a for értékhez mindig a megfelelő id érték kerüljön
10. A „Személyek száma” felirathoz tartozó űrlapelemet módosítsd úgy, hogy az elem minden értéke látszódjon. Alapértelmezésben az 1. érték legyen kiválasztott állapotban.
<select name="szemszam" size="6"> <option value="1" selected>1</option> <option value="2"selected>2</option>
11. A nyomógomb név értéke „ok”, a felirata „küldés” legyen.
<input type="submit" name="submitok" value="submitküldés">
Mentsd el és zárd be az foglalas.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A tartalom azonosítójú elemen belüli kozep osztályú elemekre a szövegigazítás középre történjen.
#tartalom .kozep{
text-align: center;
}13. A th elemekre határozz meg #060 háttérszínt, valamint #fff betűszínt.
th{
padding: 5px;
background-color: #060;
color: #fff;
}14. A td elemeknek állítsd a bélés (padding) értékét 5 pixelre, függőleges igazítását pedig alulra.
td{
border-bottom: 1px dotted #888;
padding: 5px;
vertical-align: bottom;
}15. A form elemeknek állítsd be a margóját a következőképpen: felül és alul a margó 0 méretű legyen, a bal- és jobboldali margót állítsa be úgy, hogy az elem középre rendeződjön.
form{
...
margin: 0 auto;
}16. A legend elemek számára állíts be félkövér betűstílust és 20 pixeles betűméretet.
legend{
font-size: 1.1em20px;
font-weight: bold;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

