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.

Fájl - Megnyitás

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.

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

3. Nyisd meg az elojegyzes.html fájlt.

Fájl - Megnyitás

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.

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

5. Nyisd meg az olvaso.txt fájlt.

Fájl - Megnyitás

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ájl - Mentés másként...
Fájltípus: .html
Fájl - Bezárás

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

Fájl - Megnyitás

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">jog jogtudomá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.

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

10. Nyisd meg a hosszabbitas.html fájlt.

Fájl - Megnyitás

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.

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

12. Nyisd meg a styles.css fájlt

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal: