Webszerkesztés
Notepad ++
7. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Módosítsd a „Nyitvatartási idő” alatti 7 sor jelölőjét úgy, hogy számozatlan felsorolás stílusú legyen, minden egyes sor egy felsorolás.
<ul> <li>Hétfő: 8.00 - 17.00</br></li> <li>Kedd: 8.00 - 17.00</br></li> <li>Szerda: 8.00 - 17.00</br></li> <li>Csütörtök: 8.00 - 17.00</br></li> <li>Péntek: 8.00 - 14.00</br></li> <li>Szombat: 9.00 - 14.00</br></li> <li>Vasárnap: Zárva</li> </ul>
Az utolsó, „Szintén új hír...” kezdetű szöveg jelölőjét módosítsd egyszerű bekezdés típusúra.
<div><p>Szintén új hír,... megújuló weboldalunkon.</div></p>
Mentsd el és zárd be az index.html fájlt.
-
-
-
3. Nyisd meg az elojegyzes.html fájlt.
-
Tedd félkövérré a „10 multimédiás PC-vel” szövegrészt.
<b>10 multimédiás PC-vel</b>
Ugyanebben a bekezdésben tedd dőltté az „internet” szót.
<i>internet</i>
4. Szúrj be egy képet a „Könyvtárunk...” kezdetű bekezdés elejére a következő paraméterekkel: A kép fájlneve pc.jpg, az alternatív szöveg ehhez legyen „PC”.
<img src="pc.jpg" alt="PC">
Adj továbbá osztály jellemzőt a képhez belso értékkel.
<img src="pc.jpg" alt="PC" class="belso">
Mentsd el és zárd be az elojegyzes.html fájlt.
-
-
-
5. Nyisd meg az olvaso.txt fájlt.
-
Szúrj be a karakterkódolásról szóló meta elemet, értéke legyen utf-8.
<head> <meta charset="utf-8">
Egészítsd ki a fájlt a weboldal címét beállító jelölővel, a weboldal címe „Könyvtár” legyen.
<title>Könyvtár</title> </head>
6. A „Hamarosan...” helyébe ezt a mondatot írja: „Örömmel értesítjük Olvasóinkat, hogy a megváltozott igényekhez alkalmazkodva új nyitva tartási idő lépett érvénybe idén március 1-jétől.”
Hamarosan...Örömmel értesítjük Olvasóinkat, hogy a megváltozott igényekhez alkalmazkodva új nyitva tartási idő lépett érvénybe idén március 1-jétől.
7. Állíts be hiperhivatkozást az „itt” szóra, amely mutasson a kezdőoldalra, valamint az „innen” szóra is, ez pedig a katalogus.html oldalra mutasson.
<a href="index.html">itt</a> <a href="katalogus.html">innen</a>
Mentsd el a fájlt weboldalként olvaso.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
8. Nyisd meg a katalogus.html fájlt.
-
Egyesítsd a táblázat középső oszlopában egymás alatt álló „kémia” szövegű cellákat.
<td rowspan="2"kémia</td> <td>szerves kémia</td> ...<td>kémia</td>
A kémia cella mellett álló üres cellában legyen a következő szöveg: „szervetlen kémia”.
<td>szervetlen kémia</td>
9. A „jog” szöveget tartalmazó cella tartalmát módosítsd „jogtudományok”-ra.
<td rowspan="2">jogjogtudományok</td>
A társadalom tudományok és a művészetek között van egy üres sor. E sor celláit töröld ki.
<tr></td><td> </td><td> </td></tr> Mentsd el és zárd be a katalogus.html fájlt.
-
-10. Nyisd meg a hosszabbitas.html fájlt.
-Adj az űrlaphoz egy új szöveges beviteli mezőt tartalmazó űrlapelemet a Név és A dokumentum katalógusszáma közé a következő paraméterekkel: A felirat: Olvasójegy azonosító, az űrlapelem neve: ojaz.
<p>Olvasójegy azonosító:<br /> <input type="text" name="ojaz"></p>11. Módosítsd a „Hosszabbítás kérés ideje” feliratú űrlapelemet a következők szerint: látszódjon a lista mind az öt sora, alapértelmezetten legyen a 3 nap kiválasztott állapotban.
<select name="hossz" size="5"> <option value="3" selected>3 nap</option>Mentsd el és zárd be a hosszabbitas.html fájlt.
-
-12. Nyisd meg a styles.css fájlt
-Módosítsd a CSS szabályokat az alábbiak szerint:
A menu azonosítójú elemen belüli li elemekre a keret vastagsága legyen 1 pixel, mintázata pontozott, a színe pedig #c57658.#menu li{ ... border:solid 2px #ccc;1px dotted #c57658; }13. A cím azonosítójú elemen belüli h1 elemeknél a betűméretet állítsd 36 pixelre, a betűközt pedig 0.3em értékre.
#cim h1{ ... font-size:38px36px; letter-spacing: 0.3em; }14. A táblázat th elemeire a háttérszín legyen #006, a betűszín pedig #ff9.
th{ background-color: #006; color: #ff9; }15. A táblázat th és td elemeinek bélés (padding) méretét határozd meg a következők szerint: felső és alsó legyen 5 pixel, a bal- és jobboldali pedig 20 pixel.
th, td{ padding: 5px 20px; }16. Az egysoros szöveges beviteli mezők szélessége legyen 200 pixel, a háttérszíne pedig: #faa.
input [type='text']{ width: 200px; background-color: #faa; }Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-Az elkészült weboldal:
![]()
![]()
![]()
![]()
