Webszerkesztés
Notepad ++
2. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az inf.html nevű fájlt a megadott helyről.
-
Alakítsd át mindkét táblázat első sorát fejléc cella típusúvá.
<td><th>Hová</td></th><td><th>Indulás</td></th><td><th>Megjegyzés</td></th>
3. Szúrj be mindkét táblázat elejére táblázat feliratot (caption), az első táblázaté legyen Induló járatok, a másodiké Érkező járatok.
<caption>Induló járatok</caption> <th>Hová</th>
4. Szúrj be egy-egy horgonyt (könyvjelzőt) indulo néven az első táblázat elé, valamint erkezo néven a második táblázat elé.
<caption id="indulo">Induló járatok</caption>
<caption id="erkezo">Érkező járatok</caption>
5. Szúrj be egy sort az induló járatok táblázatába a 17.30-kor Helsinkibe induló és a 18.45-kor Budapestre induló járat közé a következő adatokkal: Hová: Oslo, Indulás:18.15, Megjegyzés: Minden nap.
<tr> <td>Oslo</td> <td>18.15</td> <td>Minden nap</td> </tr>
Módosítsd a 21.00 órakor Stockholmból érkező járat megjegyzését Hétvégén-re.
<td>HétköznapokonHétvégén</td>
Mentsd el és zárd be az inf.html fájlt.
-
-
-
6. Nyisd meg az index.html fájlt.
-
A 105 pályát 75 sílift szövegrészt alakítsd félkövérré.
<b>105 pályát 75 sílift</b>
Az izgalmas síprogramokkal szövegrészt alakítsd dőltté.
<i>izgalmas síprogramokkal</i>
7. A Járat információk sort alakítsd 2. szintű címsorrá.
<p><h2>Járat információk</p></h2>
Az induló járatok, és az érkező járatok sorát alakítsd számozatlan felsorolás stílusúvá.
<ul><p><li>induló járatok</p></li><p><li>érkező járatok</p></li> </ul>
8. Állíts be hiperhivatkozást az induló járatok-ra, amely mutasson az inf.html oldal indulo nevű könyvjelzőjére, valamint az érkező járatok-ra, ez mutasson az inf.html oldal erkezo nevű könyvjelzőjére.
<li><a href="inf.html#indulo">induló járatok</a></li> <li><a href="inf.html#erkezo">érkező járatok</a></li>
9. Adj alternatív szöveget a jet.jpg képhez Járatok értékkel, állítsd a szélességet 200 pixelre.
<img src="jet.jpg" alt="Járatok" width="200">
Mentsd el és zárd be az index.html fájlt.
-
-
-
10. Nyisd meg az ido.txt fájlt.
-
Rendelj a fájlhoz a styles.css stíluslap állományt.
<head>... <link rel="stylesheet" href="styles.css"> ...</head>
Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel.
</head> <body> ... </body> </html>
Mentsd el a fájlt weboldalként ido.html néven és zárjd be.
-
Fájl típusa:
-
Fájl típusa:
.html-
11. Nyissa meg a kapcsolat.html fájlt.
-
A rádiógombok közül alapértelmezés szerint az egyéb érték legyen kiválasztott állapotban.
<input type="radio" name="tema" value="egyeb" id="egyeb" checked>
Adj a gombnak feliratot Üzenet küldése értékkel.
<input type="submit" name="ok" value="Üzenet küldése">
Mentsd el és zárd be a kapcsolat.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
Add meg az oldal hátterének a ho_hatter.jpg képet, a kép legyen vízszintes és függőleges irányban is ismétlődő.
body{
margin: 0;
font-family: sans-serif;
background: url('ho_hatter.jpg') repeat;
}13. A nav azonosítójú elemen belüli ul elemek listajelölőjéhez rendeld a hopehely.png képet.
#nav ul li{
padding: 10px 0;
list-style-image: url('hopehely.png');
}14. Adj keretet a table elemeknek: a keret legyen 1 pixel vastag, folytonos vonalú, a színe pedig #fcc.
table{
...
border: 1px solid #fcc;
}15. Állítsd a táblázatok th elemeinek a háttérszínét #f99-re, betűszínét pedig #066-ra.
table th{
padding: 5px 10px;
background-color:#f99;
color:#066;
}16. Állítsd a fieldset elemek margóját és a bélését (padding) 10 pixelre.
form fieldset{
width: 500px;
padding: 5 10px;
margin: 5 10px;
}Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

