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.
-
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.
-
-
-
4. Nyisd meg a top.txt fájlt.
-
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ájltípus: .html
-
Fájltípus: .html
-
6. Nyisd meg a viccek.html fájlt.
-
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>a másik négy helyen is végezd el a módosításokat<td></td>
Mentsd el és zárd be a viccek.html fájlt.
-
-
-
8. Nyisd meg a bekuldes.html fájlt.
-
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.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
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.
-
-
-
-
-
Az elkészült weboldal:

