Webszerkesztés
Notepad ++

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

Állíts be hiperhivatkozást a „töltse ki az űrlapot” szövegrészre, amely mutasson a „Kapcsolat” című oldalra úgy, hogy új ablakban nyíljon meg.

<a href="kapcsolat.html" target="_blank">töltse ki az űrlapot</a>

3. Töröld a táblázat fejléc celláiból az „időbeosztása” szavakat.

Keresés - Csere
Keresendő: időbeosztása
Csere erre: „ ” (üres mező)
Összes cseréje

4. Egyesítsd a táblázat Versenyúszás, Golf klub, valamint a Football klub celláit a szomszédos üres cellákkal.

<th colspan="7"Versenyúszás</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
a másik két helyen is végezd el a módosításokat

5. Módosítsd a csütörtöki versenyúszásra, valamint a keddi Football klubra vonatkozó cellák tartalmát „Zárva!” értékre.

<td>17.00-18.00 Zárva!</td>
<td>10.30-14.30 Zárva!</td>

6. Adj osztályt azoknak a celláknak, amelyekben „Zárva!” szöveg szerepel, az osztály értéke legyen kiemelt.

<td class="kiemelt">Zárva!</td>

Mentsd el és zárd be az index.html fájlt.

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

7. Nyisd meg a sport.html fájlt.

Fájl - Megnyitás

Módosítsd a „Bayview Golf Klub” és a „Bayview Futball Klub” sorokat 3. szintű címsorrá.

<p><h3>Bayview Golf Klub</p></h3>
a másik helyen is végezd el a módosításokat

8. Módosítsd az oldalon megjelenő golf.jpg kép megjelenését úgy, hogy szélessége 188, magassága pedig 285 legyen. Adj alternatív szöveget a képhez „Golf” értékkel.

<img src="golf.jpg" width="150" "188" height="285" alt="Golf">

Mentse el és zárja be a sport.html fájlt.

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

9. Nyisd meg a tel.txt fájlt.

Fájl - Megnyitás

Állíts be hiperhivatkozást „Dr. Mary Green” és „Dr. Nicholas Duggan” nevekre, amelyek mutassanak a mary@xyzmail.hu illetve nicholas@xyzmail.hu email címekre.

<p><a href="mailto:mary@xyzmail.hu">Dr. Mary Green</a><br />
a másik helyen is végezd el a módosításokat

10. Adj meg karakterkódolásra vonatkozó meta elemet, amely legyen utf-8 kódolású.

<head>
<meta charset="utf-8">

Módosítsd az oldal címét „Bayview Szabadidő Központ”-ra.

<title>Bayview Szabadidő Központ</title>

11. Rendeld a fájlhoz a styles.css stíluslap állományt.

<link rel="stylesheet" href="styles.css">

Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel.

<html>
<head>
...
</body>
</html>

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

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

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

Fájl - Megnyitás

Az „Ajánlatot szeretnék kérni” szöveg melletti jelölőnégyzet legyen alapértelmezés szerint bejelölt állásban.

<input type="checkbox" name="ajanlatkeres" value="" checked>

Az Üzenet alatti szövegmezőben legyen alapértelmezetten ez a szöveg beírva: „az üzenet szövege”.

<textarea name="megjegyzes" rows="5" cols="40">az üzenet szövege</textarea>

Mentsd el és zárd be a kapcsolat.html fájlt.

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

13. Nyisd meg a styles.css fájlt.

Fájl - Megnyitás

Módosítsd a CSS szabályokat az alábbiak szerint:
A kiemelt osztályú táblázatok celláiban (index.html) a betűszín legyen vörös (red), a betűstílus félkövér.

table td.kiemelt {
	color: red;
	font-weight: bold;
}

14. Adj keretet a table elemeknek: a felső és baloldali keret legyen 3 pixel vastag, folytonos vonalú és #ccc színű, az alsó és jobboldali pedig 3 pixel vastag, folytonos vonalú és fekete (black) színű.

table{
	margin: 20px auto;
	border-top: 3px solid #ccc;
	border-left: 3px solid #ccc; 
	border-bottom: 3px solid black;
	border-right: 3px solid black;
}

15. A cellák és fejléc cellák margói legyenek 0 pixel, a cellabéléseik pedig 7 pixel méretűek.

table th, table td{
	border: 1px dotted #ccc;
	margin: 0px;
	padding: 7px;
}

16. Az urlap azonosítójú elem felső és alsó margója legyen 0 pixel méretű, a bal- és jobboldali margót pedig állítsa be úgy, hogy az elem középre rendeződjön.

#urlap{
	width: 400px;
	margin: 0 auto;
}

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: