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.
-
Á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.
-
Keresendő: időbeosztása
Csere erre: „ ” (üres mező)
Összes cseréje
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>a másik két helyen is végezd el a módosításokat<th></th> <th></th> <th></th> <th></th> <th></th> <th></th>
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.00Zárva!</td>
<td>10.30-14.30Zá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.
-
-
-
7. Nyisd meg a sport.html fájlt.
-
Módosítsd a „Bayview Golf Klub” és a „Bayview Futball Klub” sorokat 3. szintű címsorrá.
a másik helyen is végezd el a módosításokat<p><h3>Bayview Golf Klub</p></h3>
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.
-
-
-
9. Nyisd meg a tel.txt fájlt.
-
Á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ájltípus: .html
-
Fájltípus: .html
-
12. Nyisd meg a kapcsolat.html fájlt.
-
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.
-
-
-
13. Nyisd meg a styles.css fájlt.
-
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.
-
-
-
-
-
Az elkészült weboldal:

