Webszerkesztés
Notepad ++
31. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Az „Üdvözlünk a Hot Salsa Tánciskola honlapján!” sort tedd 1. szintű címsor típusúvá.
<p><h1>Üdvözlünk a Hot Salsa Tánciskola honlapján!</p><h1>
A „Célunk, hogy a...” szövegrésztől a szöveg kerüljön új bekezdésbe.
szívében.</p><p>Célunk, hogy
3. „A tánc az életstílusunk!” sor elé szúrj be egy bekezdést a következő szöveggel: „Ha felkeltettük érdeklődését, írjon nekünk!.”
Az „írjon nekünk” szövegrészre állíts be hiperhivatkozást, amely mutasson a kapcsolat.html oldalra.
<p>Ha felkeltettük érdeklődését, <a href="kapcsolat.html">írjon nekünk!</a></p>
4. Állíts be hiperhivatkozást a „10 professzionális oktatóval” szövegrészre, amely mutasson a tanaraink.html oldalra.
<a href="tanaraink.html">10 professzionális oktatóval</a>
Állíts be hiperhivatkozást a „számtalan választható táncműfajjal” szövegrészre is, ez mutasson a Táncórák című oldalra.
<a href="tancorak.html">számtalan választható táncműfajjal</a>
5. Javítsd ki az oldalon található képfájl nevét. Adj hozzá alternatív szöveget „tánc” értékkel.
<img src="dancing.gif" alt="tánc" width="150" height="160">
Mentsd el és zárd be az index.html fájlt.
-
-
6. Nyisd meg a tanaraink.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html és head nyitó és záró jelölőivel.
<html>
<head>
<meta charset="utf-8">
...
<title>Hot Salsa Tánciskola
</head>
...
</body>
</html>
7. Alakítsd számozatlan felsorolás stílusúvá a Tanáraink címsor alatt található sorokat.
<ul>
- <li>Latin táncok<br>
Szabó Stefánia</li>
- <li>Társastánc<br>
Józsefé Nagy Dóra</li>
- <li>Modern tánc<br>
John Smith</li>
- <li>Rock & Roll, Jazz<br>
Kis Tamara </li>
</ul>
Mentsd el a fájlt weboldalként tanaraink.html néven és zárd be.
- - Fájltípus: (*.html)
-
8. Nyisd meg a tancorak.html fájlt.
-
Adj feliratot (caption) a táblázathoz „Időbeosztás” szöveggel.
<table>
<caption>Időbeosztás</caption>
9. Töröld a táblázatból a „Haladó latin felnőtteknek” sort.
<tr>
<th>Haladó latin felnőtteknek</th>
<td>kedd, csütörtök 13.00-14.30</td>
<td>első óra: feb. 20.</td>
<td>utolsó óra: jún. 9.</td>
</tr>
Cseréld fel egymással a „Bevezető felnőtteknek” és a „Haladó klasszikus felnőtteknek” sorokat.
jelöld ki az alábbi részt, majd üsd le a C + x billentyűkombinációt...
<tr>
<th>Bevezető felnőtteknek</th>
<td>hétfő, csütörtök 13.00-14.30</td>
<<td>első óra: feb. 12.</td>
<td>utolsó óra: jún. 2.</td>
</tr>
üss egy N-t „Haladó klasszikus felnőtteknek” sor záró </tr> tagja után; majd C + v.
Mentsd el és zárd be a tancorak.html fájlt.
-
-
10. Nyisd meg a kapcsolat.html fájlt.
-
Módosítsd az „Üzenet” felirathoz tartozó beviteli mezőt többsorossá, a sorok száma 8, a soron belüli karakterek száma pedig 60 legyen.
<input type="text" textarea rows="8" cols="60" name="uzenet" value=""></textarea>
11. A submit nyomógomb mellé tegyél egy reset típusú nyomógombot is, ennek felirata töröl legyen.
<input type="reset" name="torol" value="töröl">
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:
Az li elemek listajelölő típusa legyen négyzetes (square).
li{
list-style-type: square;
}
13. A table elemeknek legyen kerete, amely 1 pixel vastag folytonos vonalú és fehér (white) színű.
table{
border: 0 1px solid white;
}
14. A th és td elemekre a felső és alsó bélés (padding) mérete legyen 3 pixel, a bal- és jobboldali pedig 6 pixel.
th, td{
...
padding: 3px 6px;
}
15. A submit és reset típusú input elemeknél a betűk mérete az alap betűméret 1,1-szerese legyen és félkövér.
input[type='submit'],
input[type='reset']{
...
font-size: 1.1em;
font-weight: bold;
}
16. A text típusú input elemeknél a háttérszín legyen sárga (yellow), a betűszín pedig kék (blue).
input[type='text']{
...
background-color: yellow;
color: blue;
}
Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
Az elkészült weboldal:
<img src="dancing.gif" alt="tánc" width="150" height="160">
-
<html> <head> <meta charset="utf-8"> ... <title>Hot Salsa Tánciskola </head> ... </body> </html>
<ul>-<li>Latin táncok<br> Szabó Stefánia</li>-<li>Társastánc<br> Józsefé Nagy Dóra</li>-<li>Modern tánc<br> John Smith</li>-<li>Rock & Roll, Jazz<br> Kis Tamara </li> </ul>
-
<table> <caption>Időbeosztás</caption>
<tr> <th>Haladó latin felnőtteknek</th> <td>kedd, csütörtök 13.00-14.30</td> <td>első óra: feb. 20.</td> <td>utolsó óra: jún. 9.</td> </tr>
<tr> <th>Bevezető felnőtteknek</th> <td>hétfő, csütörtök 13.00-14.30</td> <<td>első óra: feb. 12.</td> <td>utolsó óra: jún. 2.</td> </tr>
-
<input type="text"textarea rows="8" cols="60" name="uzenet" value=""></textarea>
<input type="reset" name="torol" value="töröl">
-
Az li elemek listajelölő típusa legyen négyzetes (square).
li{
list-style-type: square;
}table{
border: 0 1px solid white;
}th, td{
...
padding: 3px 6px;
}input[type='submit'],
input[type='reset']{
...
font-size: 1.1em;
font-weight: bold;
}input[type='text']{
...
background-color: yellow;
color: blue;
}-
-

