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.

Fájl - Megnyitás

„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.

Fájl - Mentés
Fájl - Bezárás

4. Nyisd meg a kapcsolat.txt fájlt.

Fájl - Megnyitás

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ájl - Mentés másként... - Fájltípus: (*.html)
Fájl - Bezárás

8. Nyisd meg az arlista.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

10. Nyisd meg a bejelentkezes.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

12. Nyisd meg a styles.css fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal: