Webszerkesztés
Notepad ++
1. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Módosítsd a karakterkódolás típusát, utf-8-ra.
-
vagy
<meta charset="UTF-8">
vagy
<meta charset="UTF-8">
Módosítsd az oldal címét Kovács és Fiai Kft.-re.
<title>Kovács és Fiai Kft.</title>
3. Állíts be hiperhivatkozást a kedvező ár szövegrészre, amely mutasson az arak.html oldalra.
<a href="arak.html">kedvező ár</a>
Töröld a hiperhivatkozást a Minőség, megbízhatóság szövegrészről.
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg a referenciak.txt fájlt.
-
A Vállalati, intézményi referenciák alatti négy sort formázd számozott felsorolás stílusúvá.
<p><ol> <li>XZY Rt.<br></li> <li>AAA Iroda<br></li> <li>BBB Kft.<br></li> <li>CCC SZKI<br></li></p></ol>
A Magán megrendelői referenciák alatti négy sort formázd számozatlan felsorolás stílusúvá.
<p><ul> <li>Nagy Andrásné, Budapest 1844 Fenyő u. 12.<br></li> <li>Szabó Zoltán, Budapest, 1845 Duna stny. 42.<br></li> <li>Pais Ábrahám, Budapest, 1846 Varsányi út 67.<br></li> <li>Joó Ferenc, Budapest, 1844 Soproni u. 14.<br></li></p></ul>
5. A Referenciák címsor alatti kép (festes.jpg) tulajdonságait módosítsd úgy, hogy a szélessége 130 pixel legyen, és adj festés értékkel alternatív szöveget a képhez.
<img src="festes.jpg" width="130" alt="festés">
6. Rendeld a fájlhoz a styles.css stíluslap állományt.
<link rel="stylesheet" href="styles.css" type="text/css" />
Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.
<head> <meta charset="utf-8"> ... <title>Kovács és Fiai Kft.</title> </head>
Mentsd el a fájlt weboldalként referenciak.html néven és zárd be.
-
- Fájltípus: (*.html)
-
- Fájltípus: (*.html)
-
7. Nyisd meg az arak.html fájlt.
-
Egyesítsd a táblázat celláit a szomszédos üres cellákkal minden olyan sorban, ahol a cella osztálya kiemelt értékű.
<td class="kiemelt" colspan="3">Glettelés</td><td></td> <td></td>végezd el a módosítást a további 3 helyen is!
8. Módosítsd az Impregnálás tartalmú cellák melletti árakat 150-ről 180-ra, az akciós árat pedig 100-ról 120-ra.
<td>Impregnálás</td> <td>150180 Ft/m<sup>2</sup></td> <td>100120 Ft/m<sup>2</sup></td>
9. Szúrj be egy horgonyt (könyvjelzőt) tapeta néven a Tapétázás szövegű cellába.
<td class="kiemelt" colspan="3" id="tapeta">Tapétázás</td>
Állíts be hiperhivatkozást a Figyelmükbe ajánljuk a tapétázással kapcsolatos árainkat mondatra, amely mutasson a tapeta nevű könyvjelzőre.
<a href="#tapeta">Figyelmükbe ajánljuk a tapétázással kapcsolatos árainkat</a>.
Mentsd el és zárd be az arak.html fájlt.
-
-
-
10. Nyisd meg az ajanlat.html fájlt.
-
A Tapétázás rádiógomb alatti három rádiógombhoz adj címkéket (label) a többi rádiógomb címkéihez hasonló módon.
<label for="gletteles">Glettelés</label>
végezd el a módosítást a további 2 helyen is!
végezd el a módosítást a további 2 helyen is!
11. A többsoros beviteli mező értékébe alapértelmezetten legyen ez a szöveg beírva: egyéb megjegyzéseit ide írja.
<textarea name="megjegyzes" rows="2" cols="10">egyéb megjegyzéseit ide írja</textarea>
A mező sorainak száma legyen 5, a soron belüli karakterek száma pedig 40.
<textarea name="megjegyzes" rows="5" cols="40">
Mentsd el és zárd be az ajanlat.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A body elemhez rendelt betű típusa legyen tahoma, sans-serif, a háttérszín pedig #fff2e8.
body{
color: #000000;
font-family: tahoma, sans-serif;
background-color: #fff2e8;
}13. Módosítsd a menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapotát a következők szerint: a betűszín legyen vörös (red), és aláhúzott.
#menu a:hover{
color: green red;
text-decoration: none underline;
}14. Adj keretet a kep osztályú elemeknek, a keret vastagsága legyen 2 pixel, a mintázata pontozott, a színe pedig vörös (red).
.kep{
border: 0 2px dotted red;
float: right;
}15. Módosítsd a táblázatok celláinak cellabélés értékét: felülre és alulra 4 pixel, balra és jobbra 20 pixel értékeket rendelj.
th, td{
border: 1px dotted white;
padding: 5px 5px 4px 20px;
}16. A kiemelt osztályú cellák baloldali bélését állítsd 30 pixelre.
td.kiemelt{
color: red;
font-weight: bold;
padding-left: 30px;
}Az ajanlat_form azonosítójú elemeken belül a meret osztályú input elem szélessége legyen 70 pixel.
#ajanlat_form input.meret{
width: 50px 70px;
}Ments el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

