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.
-
Á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.
-
-
-
4. Nyisd meg a kapcsolat.txt fájlt.
-
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ájltípus: (*.html)
-
-
7. Nyisd meg a programok.html fájlt.
-
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.
-
-
-
9. Nyisd meg a tudasteszt.html fájlt.
-
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.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
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.
-
-
-
-
-
Az elkészült weboldal:

