Webszerkesztés
Notepad ++
45. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
„A fodrászhelyiség...” mondattól a szöveg kerüljön új bekezdésbe.
található.</p> <p>A fodrászhelyiség
A „Szombati napon...” mondat elé szúrj be egy sortörést.
munkarendben.<br> Szombati
3. Töröld a félkövérré tevő jelölőket a „45 m2 alapterületen” szövegrészről, valamint a dőltté tevő jelölőket az „5 fodrász” szövegrészről.
<b>45 <sup>2</sup> alapterületen</b><i>5 fodrász</i>
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg a kapcsolat.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Adj oldalcímet a következő szöveggel: „Fodor & Bodor fodrászat”.
<html> <head> ... <title>Fodor & Bodor fodrászat</title> </head> ... </body> </html>
5. Alakítsd számozatlan felsorolás stílusúvá az „Elérhetőség, Munkaidő,” stb. sorokat.
<ul>-<li> Elérhetőség:<br> Tel: +36 20 999 99 99<br> E-mail: fodorbodor@fodraszat.hu<br> Cím: 1000 Budapest, Fodor Bodor tér 25.</li> ...-<li> Bejelentkezés<br> Telefonon vagy on-line</li> <ul>
6. Alakítsd hiperhivatkozássá a „fodorbodor@...” email címet.
<a href="mailto:fodorbodor@fodraszat.hu">fodorbodor@fodraszat.hu</a>
Állíts be hiperhivatkozást az „on-line” kifejezésre, amely mutasson a „Bejelentkezés” című oldalra.
<a href="bejelentkezes.html">on-line</a>
7. Szúrd be a comfort.jpg képet a kep_jobbra osztályú elemen belülre. Adj alternatív szöveget a képnek „szék” értékkel.
<p class="kep_jobbra"><img src="comfort.jpg" alt="szek">
Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
8. Nyisd meg az arlista.html fájlt.
-
Adj táblázatcímet az oldalon található táblázatnak „Árlista” szöveggel.
<table> <caption>Árlista</caption>
9. Vond össze a „Férfi hajvágás szárítással” valamint a „Gyermek hajvágás szárítással” sorok melletti „ár” celláit a mellettük lévő üres cellákkal.
<td colspan="3">3200 Ft</td><td></td> <td></td>...<td></td><td colspan="3">2100 Ft</td><td></td>
Mentsd el és zárd be az arlista.html fájlt.
-
-
-
10. Nyisd meg a bejelentkezes.html fájlt.
-
A „Telefon” felirathoz tartozó űrlapelembe írható karakterek száma maximum 15 legyen, alapértelmezetten pedig „06-” szöveg látszódjon a mezőben.
<input type="text" name="tel" maxlength="15" value="06-">
11. Az űrlap alján található submit típusú nyomógomb feliratát módosítsd „küldés”-re, a reset típusú felirata pedig „adatok törlése” legyen.
<input type="submit" name="ok" value="okküldés"> <input type="reset" name="vissza" value="visszaadatok törlése">
Mentsd el és zárd be a bejelentkezes.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A h1 elemek betűszínére határozd meg #f28 értéket, a betű mérete pedig az alap betűméret 1,8-szorosa legyen.
h1{
font-size: 1.4em1.8em;
color: #f28;
}13. A kep_jobbra osztályú elemeken belüli img elemek szélességét állítsd 120 pixel méretűre, és határozz meg 2 pixel vastag, pontozott mintázatú és kék (blue) színű keretet.
.kep_jobbra img{
...
width: 110px120px;
border: 5px solid black2px dotted blue;
}14. A table elemek háttérszínének adj fehér (white) színt, a betűszínnek pedig #f66 értéket.
table{
...
background-color: white;
color: #f66;
}15. Alkalmazz középre történő szövegigazítást minden olyan td elemre, amelynél 3 egymás melletti cella van összevonva.
td[colspan="3"]{
text-align: center;
}16. A text típusú input elemek szélességét állítsd 300 pixel méretűre.
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:

