Webszerkesztés
Notepad ++
26. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Tedd a Cégünk filozófiája sort 3. szintű címsorrá.
<p><h3>Cégünk filozófiája</p><h3>
A „Hogyan értük el és tartjuk fenn...” sort tedd szintén 3. szintű címsorrá.
<p><h3>Hogyan értük el és tartjuk fenn a sikeres működés feltételeit?</p><h3>
3. Alakítsd félkövérré a „Több mint 100 ügyfelünk... meggyőződhet.” mondatot.
<b>Több mint 100 ügyfelünk elégedettségéről személyesen is meggyőződhet.</b>
A „minimálisan szükséges technikával” szövegrészt pedig tedd dőltté.
<i>minimálisan szükséges technikával”</b>
4. Egészítsd ki a szöveget egy új bekezdéssel, az „Igen gondosan járunk el...” kezdetű bekezdés után, a szöveg pedig ez legyen: „Tekintse meg referenciánkat.” Állíts be hiperhivatkozást erre a mondatra, amely mutasson a referenciak.html oldalra.
kapcsolattartást.</p> <a href="referenciak.html"><p>Tekintse meg referenciánkat.</p></a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
5. Nyisd meg a referenciak.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html és body nyitó és záró jelölőivel.
<html> <head> ... </head> <body> ... </body> </html>
6. Tedd számozatlan felsorolás stílusúvá a „Vállalati, intézményi referenciák” címsor alatti listát.
<ul> <li>XZY Rt.</li> <li>AAA Iroda</li> <li>BBB Kft.</li> <li>CCC SZKI</li> </ul>
Valamint számozott felsorolás stílusú listává a „Magán megrendelői referenciák” címsor alatti sorokat.
<ol> <li>Nagy Andrásné, Budapest 1844 Fenyő u. 12.</li> <li>Szabó Zoltán, Budapest, 1845 Duna stny. 42.</li> <li>Pais Ábrahám, Budapest, 1846 Varsányi út 67.</li> <li>Joó Ferenc, Budapest, 1844 Soproni u. 14.</li> </ol>
7. Cseréld le a festes.jpg képet a vodor.jpg képre. A kép alternatív szövege vödör legyen.
<img src="festesvodor.jpg" alt="festésvödör">
Mentsd el a fájlt weboldalként referenciak.html néven és zárd be.
-
Fájltípus: (*.html)
-
Fájltípus: (*.html)
-
8. Nyisd meg az arak.html fájlt.
-
Töröld a táblázatból a Színhatárképzés sort.
<tr> <td>Színhatárképzés</td> <td>300 Ft/m<sup>2</sup></td> <td>250 Ft/m<sup>2</sup></td> </tr>
Cseréld meg a Pácolás és a Lazúrozás sort egymással.
jelöld ki a Pácolás táblázatsort (<tr>...</tr> közötti részt), C + x (kivágás);
üss egy N-t a Lazúrozás táblázatsor előtti </tr> tag után, C + v (beillesztés)
üss egy N-t a Lazúrozás táblázatsor előtti </tr> tag után, C + v (beillesztés)
9. Módosítsd a táblázat első sorának celláit fejléc cella típusúvá.
<td><th>Megnevezés</td></th><td><th>Ár</td></th><td><th>Akciós ár</td></th>
A Tapétázás cella osztálya legyen kiemelt.
<td colspan="3" class="kiemelt"><a id="tapeta"></a>Tapétázás</td>
Mentsd el és zárd be az arak.html fájlt.
-
Fájltípus: (*.html)
-
Fájltípus: (*.html)
-
10. Nyisd meg az ajanlat.html fájlt.
-
Szúrj be az űrlapba egy új sort Email cím felirattal, a hozzá tartozó beviteli mező legyen egysoros szöveges.
<p>Email cím<br><input type="text" name="email"></p>
11. Az űrlap alján lévő gomb típusa legyen submit, felirata Küldés.
<input type="buttonsubmit" name="ok" value="okKüldés">
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 menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapotára a betű színe legyen vörös (red) és aláhúzott.
#menu a:hover {
color: yellow red;
text-decoration: underline;
}13. A table elemek felső és alsó margójának adj 5 pixel értéket, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre rendeződjön.
table {
...
margin: 5px auto;
}14. A kiemelt osztályú td elemek baloldali bélése (padding) legyen 30 pixel, a betűstílus pedig félkövér.
td.kiemelt {
...
padding-left: 30px;
font-weight: bold;
}15. Az ajanlat_form azonosítójú elemen belüli egysoros szöveges beviteli mező szélessége legyen 300 pixel.
#ajanlat_form input[type='text'] {
width: 300px;
}16. Az ajanlat_form azonosítójú elemen belüli meret osztályú elemek szélességét állítsd 70 pixelre.
#ajanlat_form .meret {
width: 70px;
}Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

