Webszerkesztés
Notepad ++

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

Állíts be hiperhivatkozást a „családi szabadidőprogramok” szövegrészre, amely mutasson a Programok című oldalra.

<a href="programok.html">családi szabadidőprogramok</a>

Állíts be hiperhivatkozást a „fővárostól nem messze” szövegrészre is, ez mutasson a kapcsolat.html oldalra.

<a href="kapcsolat.html">fővárostól nem messze</a>

3. Adj „kep” nevű osztályt a zsiraf.jpg képet tartalmazó bekezdésnek. A kép megjelenési szélességét állítsd 190 pixelre.

<p class="kep"><img src="zsiraf.jpg" width="190">

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

Adj oldalcímet MAZ-ZOO Vadaspark szöveggel. Rendelj a fájlhoz a styles.css stíluslap állományt.

<link rel="stylesheet" href="styles.css">
<title>MAZ-ZOO Vadaspark</title>
</head>

5. Az „Autóval szintén...” kezdetű mondattól a szöveg kerüljön új bekezdésbe, a mondat elől szedd ki a sortörést.

érhető el.<br></p>
<p>Autóval szintén

Az „Aktualitások, rendezvények...” mondat elé szúrj be egy sortörést.

telefonszámon!<br> Aktualitások,

6. Alkalmazz félkövér betűstílust a szövegben előforduló mindhárom „MAZ-ZOO” előfordulásra.

<b>MAZ-ZOO</b>

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

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

Fájl - Megnyitás

Vond össze a „július 11.”-et tartalmazó cellát az alatta található üres cellával.
Tedd ugyanezt a „Szabadidő klubok” szöveget tartalmazó cellával is.

<td rowspan="2">július 11.</td>
<td rowspan="2">Szabadidő klubok</td>
...
<td></td>
<td></td>

8. Adj a táblázatnak táblázatcímet (caption) „Programok a nyárra” szöveggel.

<table>
<caption>Programok a nyárra</caption>

Mentsd el és zárd be a programok.html fájt.

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

9. Nyisd meg a tudasteszt.html fájlt.

Fájl - Megnyitás

Az űrlap Név feliratához tartozó beviteli mező név értéke legyen „nev”, a maximálisan beírható karakterek száma pedig 30.

<input type="text" name="nev" maxlength="30">

10. A giliszta nevű kiválasztó elem paramétereit módosítsd úgy, hogy annak minden értéke látszódjon, alapértelmezésben pedig az első értéke legyen kiválasztott állapotban.

<select name="giliszta" size="4">
	<option value="" selected></option>

11. Az űrlap alján lévő nyomógombot módosítsd úgy, hogy a típusa submit, a felirata „Elküldöm” legyen.

<input type="buttonsubmit" name="elkuld" value="buttonElküldöm">

Mentsd el és zárd be a tudasteszt.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ítsa a CSS szabályokat az alábbiak szerint:
A fo azonosítójú elemen belüli h1 elemek számára határozd meg a betűméretet az alap betűméret 1,5-szörösére, a szövegelrendezést pedig rendezd középre.

#fo h1{
	font-size: 1.8em1.5em;
	text-align: center;
}

13. A menu azonosítójú elemen belüli hivatkozás jelölő elem hover állapotánál a szöveg aláhúzott legyen és #fff színű.

#menu a:hover{
	text-decoration: noneunderline;
	color: #fff;
}

14. A th elemekre állíts be #060 háttérszínt, valamint 10 pixel méretű bélés (padding) értéket.

th{
	color: #fff;
	background-color: #060;
	padding: 10px;
}

15. A legend elemekben a betűméret legyen az alap betűméret 1,3-szorosa, a betűk közti távolság pedig 0,6em.

legend{
	font-weight: bold;
	font-size: 1.3em;
	letter-spacing: 0.6em;
}

16. A text típusú input elemek szélességét állítsd 300 pixelre.

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: