Webszerkesztés
Notepad ++

25. 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 „Remélem, tetszeni fognak...” mondattól a szöveg kerüljön új bekezdésbe.

8 órában.</p>
<p>Remélem, tetszeni fognak

„A legtöbb viccet...” mondat szintén kerüljön új bekezdésbe.

jobbakat! :P<br></p>
<p>A legtöbb viccet

3. Állíts be hiperhivatkozást az „eddig beküldött viccek” szövegrészre, amely mutasson a Viccek című oldalra.

<a href="viccek.html">eddig beküldött viccek</a>

Állíts be hiperhivatkozást a „listára” szóra is, ez mutasson a top.html oldalra.

<a href="top.html">listára</a>

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

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

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

Fájl - Megnyitás

Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.
Az oldal címe „Balu vicces oldala” legyen.

<html lang="hu">
<head>
...
<link rel="stylesheet" href="styles.css">
<title>Balu vicces oldala</title>
</head>

5. Szúrd be a kep osztályú elemen belülre a fun_1.jpg képet.
A kép megjelenési szélességét állítsd 200 pixelre.

<p class="kep"><img src="fun_1.jpg" width="200"></p>

Mentsd el a fájlt weboldalként top.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 viccek.html fájlt.

Fájl - Megnyitás

Minden „beküldte:” és a beküldő email címét tartalmazó cella típusát módosítsd fejléc cellára.

<td><th>beküldte: Elgya Pál</td></th>
<td><th>horutty@ize.hu</td></th>
a másik négy helyen is végezd el a módosításokat

7. Minden viccet tartalmazó cella legyen összevonva a mellette lévő üres cellával.

<td colspan="2">
Három bagoly ül a fán.
...
- Már fél hat? Gyerünk fejni!
</td>
<td></td>
a másik négy helyen is végezd el a módosításokat

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

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

8. Nyisd meg a bekuldes.html fájlt.

Fájl - Megnyitás

Az űrlap form jelölőn belüli részét tedd mezőcsoportba (fieldset).
Adj az űrlapnak magyarázó feliratot (legend) a következő szöveggel: „Oszd meg velünk kedvenc viccedet!”

<form>
	<fieldset>
		<legend>Oszd meg velünk kedvenc viccedet!</legend>	
...
	</fieldset>
</form>

9. Módosítsd az Email cím felirathoz tartozó beviteli mezőt a következők szerint: a név értéke email, a maximálisan beírható karakterszám pedig 50 legyen.

<p>Email cím:</p>
	<div><input type="text" name="email" maxlength="50"></div>

10. A Vicc felirathoz tartozó mező típusa legyen többsoros szöveges, a sorok száma 6 a soron belüli karakterszám pedig 50.

<input type="text" name="vicc"><textarea rows="6" cols="50"></textarea>

11. Az űrlap végén található nyomógomb típusa legyen submit, a gomb felirata pedig „beküldés”.

<input type="button""submit" name="mehet" value="beküldés"

Mentsd el és zárd be a bekuldes.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 valasztek azonosítójú elemen belüli ittvagyok osztályú elemekre vonatkozóan a listajelölő típusa kör (circle) legyen.

#valasztek .ittvagyok{
	list-style-type: circle;
}

13. A lenyeg azonosítójú elemen belüli h1 elemekben a betűméret legyen az alap betűméret 1,5-szöröse.

#lenyeg h1{
	font-size: 1.5em;
}

14. A viccek osztályú table elemek kerete legyen 1 pixel vastag, szaggatott vonalas mintázatú és #000 színű.

table.viccek{
	width: 700px;
	border-collapse: collapse;
	border: 1px dashed #000;
}

15. A viccek osztályú elemeken belüli td elemek bélés (padding) méretét állítsd 10 pixelre.

.viccek td{
	padding:10px;
}

16. A text típusú input elemek szélességének adjon meg 300 pixel értéket.

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: