Webszerkesztés
Notepad ++

33. 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 „További szolgáltatásaink...” mondat elé tegyél sortörést.

látogatókat.<br /> További szolgáltatásaink

Az „Üdvözlettel:” kezdődő két sor kerüljön új bekezdésbe.

kertépítés.<br></p>
<p>Üdvözlettel:

3. Állíts be hiperhivatkozást a „faiskolai áruinkkal” szövegrészre, amely mutasson a Termékeink című oldalra.

<a href="termekeink.html">faiskolai áruinkkal</a>

Állíts be hiperhivatkozást a „További szolgáltatásaink” szövegrészre is, ez mutasson a szolgaltatasaink.html oldalra.

<a href="szolgaltatasaink.html">További szolgáltatásaink</a>

Mentsd el és zárd be az index.html fájlt.

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

4. Nyisd meg az akcionk.txt fájlt.

Fájl - Megnyitás

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>

5. Tedd az „Akciónk” sort 1. szintű címsorrá.

<p><h1>Akciónk</p></h1>

A „Tavaszi akció!” sort pedig alakítsd 2. szintű címsorrá.

<p><h2>Tavaszi akció!</p></h2>

Mentsd el a fájlt weboldalként akcionk.html néven és zárd be.

Fájl - Mentés másként... - Fájltípus: (*.html)
Fájl - Bezárás

6. Nyisd meg a szolgaltatasaink.html fájlt.

Fájl - Megnyitás

Módosítsd az oldalon található felsorolást számozatlan felsorolás stílusúvá.

<ol><ul>
...
</ol></ul>

A Kertépítés és Szaktanácsadás közti sorokat ágyazd be a Kertépítés sora alá ??? már ott van!!!.
A beágyazott felsorolás legyen számozott felsorolás stílusú.

<p><ol>
	<li>Sövénynyírás<br></li>
	<li>Metszés<br></li>
	<li>Ágaprítás<br></li>
	<li>Zöldhulladék elszállítás</li>
</p></ol>

Mentsd el és zárd be a szolgaltatasaink.html fájlt.

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

7. Nyisd meg a termekeink.html fájlt.

Fájl - Megnyitás

Adj a termek_kep osztályú elemeken belüli képeknek alternatív szöveget, ezek értéke legyen ugyanaz, mint a képek alatt lévő, zárójelbe tett latin megnevezés.

<img src="fa_1.jpg" alt="Pinus mugo">
<img src="fa_2.jpg" alt="Cedrus sp.">
<img src="fa_3.jpg" alt="Pinus sylvestris L.">

Mentsd el és zárd be a termekeink.html fájlt.

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

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

Fájl - Megnyitás

Szúrd be a garden.jpg képet a kep osztályú elemen belülre, a kép megjelenési magasságát állítsd 180 pixelre.

<p class="kep"><img src="garden.jpg" height="180">

9. Az oldalon található űrlap egészét tedd egy mezőcsoportba (fieldset). Adj magyarázó feliratot (legend) a mezőcsoporthoz „Írjon nekünk!” szöveggel.

<form>
	<fieldset><legend>Írjon nekünk!</legend>
...
	</fieldset>
</form>

10. A Tárgy felirathoz tartozó beviteli mező név tulajdonságát módosítsd „targy”-ra, a maximálisan beírható karakterek száma pedig 30 legyen.

Tárgy:<br>
	<input type="text" name="texttargy" maxlength="30">

11. A submit gomb mellé vegyél fel egy reset típusú nyomógombot. Ennek felirata legyen „üzenet törlése”.

<input type="reset" name="torles" value="üzenet törlése">

Mentsd el és zárd be az elerhetosegunk.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 menu azonosítójú elemen belüli hivatkozás jelölő elemekhez tartozó, valamint azok link és visited állapotaira a betű színe legyen fehér (white), a stílusa pedig félkövér.

#menu a,
#menu a:link,
#menu a:visited{
	text-decoration: none;
	color: white;
	font-weight: bold;
}

13. A h1 elemekre a betűméret legyen az alap betűméret 1,65-szöröse, a szöveget pedig igazítsd középre.

h1{
	font-size: 1.9em 1.65em;
	text-align: center;
}

14. A termek_kep osztályú elemeken belüli img elemekhez határozz meg keret tulajdonságot, amely 3 pixel vastag, folytonos vonalú és #060 színű.

.termek_kep img{
	border: 3px solid #060;
}

15. A fieldset elemekre határozz meg 15 pixel méretű bélést (padding), valamint félkövér betűstílust.

fieldset{
    padding: 15px;
	font-weight: bold;
}

16. A text típusú input elemek szélessége legyen 300 pixel.

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: