Webszerkesztés
Notepad ++

48. 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

Vond össze a „Csúcs, hogy...” kezdetű bekezdést az azt követő bekezdéssel, a „Legutóbbi kalandozásom...” mondat elé szúrj be egy sortörést.

a weblapomra!</p><br> 
<p>Legutóbbi

3. Állíts be hiperhivatkozást az oldalon szereplő „Párizs” szó mindkét előfordulására, a hivatkozás mutasson a Párizs című oldalra.

<a href="parizs.html">Párizs</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 parizs.txt fájlt.

Fájl - Megnyitás

Rendelj a fájlhoz a styles.css stíluslap állományt. Adj oldalcímet „Jani utazós web site-ja¨ szöveggel.

<link rel="stylesheet" href="styles.css">
<title>Jani utazós web site-ja</title>
</head>

5. Alakítsd félkövérré a szövegben szereplő „Rómát” szót, valamint dőltté a „Le jardin” kifejezést.

<b>Rómát</b>
<i>Le jardin<i>

6. Az oldalon lévő táblázat első oszlopát módosítsd fejléc cella típusúvá.

<td><th>Helyszín</td></th>
<td><th>Diadalív</td></th>
<td><th>Eiffel-torony</td></th>
<td><th>Notre Dame</td></th>

7. Cseréld meg a táblázat két sorát, felül legyenek a képek és alatta a szöveg.

jelöld ki az első táblázatsort (<tr>...</tr> közötti részt), majd üsd le a C + x billentyűkombinációt;
üss egy N-t a második táblázatsor </tr> tagja után és üsd le a C + v billentyűkombinációt

8. Adj alternatív szöveget a táblázatban található képeknek, amely ugyanaz legyen, mint a képekhez tartozó helyszín szövege.
9. A képek megjelenési magasságát egységesen 190 pixelben határozd meg.

<img src="arcdetriomphe.jpg" alt="Diadalív" height="190">
<img src="eifle2.jpg" alt="Eiffel-torony" height="190">
<img src="notre_dame.jpg" alt="Notre Dame" height="190">

Mentsd el a fájlt weboldalként parizs.html néven és zárd be.

Fájl - Mentés másként... - Fájltípus: (*.html)
Fájl - Bezárás

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

Fájl - Megnyitás

Módosítsd az „Üzenet” felirathoz tartozó beviteli mezőt többsorossá, a sorok száma 5, a soron belüli karakterek száma pedig 45 legyen.

<input type="text"textarea name="uzenet" rows="5" cols="45"><textarea>

11. A nyomógomb mellé vegyél fel egy másik, reset típusú nyomógombot is, amelynek felirata „üzenet törlése” legyen.

<input type="reset" name="torles" value="üzenet törlése">

Mentsd el és zárd be az kapcsolat.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:
Az oldal azonosítójú elemen belüli hivatkozás jelölő elemekre, és azok link és visited állapotaira alkalmazd a következő szabályokat: a szöveg ne legyen aláhúzott, a betű színének pedig #ffd értéket adj.

#oldal a,
#oldal a:link,
#oldal a:visited{
	color: white#ffd;
	text-decoration: none;
}

13. A table elemek szélessége legyen 100%.

table{
	width: 100%;
}

14. A th és td elemekre a szövegigazítás vízszintesen középre történjen, a függőleges igazítás pedig felülre.

th, td{
	...
	text-align: center;
	vertical-align: top;
}

15. A textarea elemekre határozz meg #f6f6f6 értékű háttérszínt.

textarea{
	background-color: #f6f6f6;
}

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.

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

Az elkészült weboldal: