Webszerkesztés
Notepad ++
5. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Módosítsd a „Figyelem!” címsor szövegét „Rendelési rend változás!”-ra.
<h2>Figyelem!Rendelési rend változás!</h2>
Szúrj be egy új 2. szintű címsort „Rendelési idő” szöveggel a táblázat elé.
<hr> <h2>Rendelési idő</h2> <table>
3. A Július 26-tól augusztus 5-ig szövegrészt tedd dőltté. A 24 órás sürgősségi szövegrészt tedd félkövérré.
<i>Július 26-tól augusztus 5-ig</i> <b>24 órás sürgősségi</b>
4. Egyesítsd a táblázat fejléc celláit a szomszédos üres cellákkal.
<th colspan="2">Felnőtt betegek részére:</th>a módosításokat a másik két fejléc cellánál is végezd el!<th></th>
5. A táblázat „Felnőtt betegek részére” részét (az alatta lévő 5 sorral együtt) helyezd át a tábla végére.
jelöld ki a megadott tartományt egérrel
<tr> <th colspan="2">Felnőtt betegek részére:</th> .... <td>8-14 óráig</td> </tr>C + c (másolás), lépj át a megfelelő helyre, C + v (beillesztés)
Mentsd el és zárd be az index.html fájlt.
-
-
-
6. Nyisd meg a szabadsagok.txt fájlt.
-
Módosítsd a május, június, július, augusztus sorok alatti felsorolások jelölőit úgy, hogy azok számozatlan felsorolás stílusúak legyenek. (május, június nem felsorolás!!!
bár a május, június helytelenül van a példában, ott is igazítsátok ki felsorolásra a szükséges részeket<ol><ul> ...<ol><ul>
7. Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
<html lang="hu"> <head> ... <title>Med-Im Bt. </head> <body> ... </body> </html>
Mentsd el a fájlt weboldalként szabadsagok.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
8. Nyisd meg a hirlevel.html fájlt.
-
Állíts be hiperhivatkozást az „írjon címünkre” szövegrészre, amely mutasson a hirlevel@medim.hu email címre úgy, hogy a levél tárgya „feliratkozás” legyen.
<a href="mailto:hirlevel@medim.hu?subject=feliratkozás">írjon címünkre</a>
Állíts be hiperhivatkozást az „ugyanígy teheti” szövegrészre is, amely ugyanerre az email címre mutasson, de a levél tárgya „leiratkozás” legyen.
<a href="mailto:hirlevel@medim.hu?subject=leiratkozás">ugyanígy teheti</a>
9. Javítsd a címsor melletti kép paramétereit a következőképpen: a kép fájlneve envelope.jpg, a megjelenő kép szélessége 150 pixel legyen. Adj alternatív szöveget a képnek Boríték értékkel.
<img src="xyz.jpg""envelope.jpg" width="150" alt="Boríték">
Mentsd el és zárd be a hirlevel.html fájlt.
-
-
-
10. Nyisd meg a kapcsolat.html fájlt.
-
Módosítsd a többsoros beviteli mező tulajdonságait úgy, hogy a sorok száma 4, a soron belüli karakterek száma 40 legyen.
<textarea name="megjegyzes" cols="40" rows="4">
11. Szúrj be egy reset típusú gombot a küldés gomb mellé. A gomb felirata „adatok törlése” legyen.
<input type="reset" value="adatok törlé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:
A menusor azonosítójú elemre vonatkozó háttérszín legyen #ff9c00.
#menusor{
background-color: yellow #ff9c00;
}Módosítsd az aktiv azonosítójú elemre vonatkozó háttérszínt fehérre (white).
#aktiv{
background-color: lightgray white;
}13. Módosítsd a table, th, td elemekre vonatkozó keret tulajdonságait: a keret legyen folytonos vonalú, 1 pixel vastag és #666 színű.
table, th, td{
border: 0 1px solid #666;
}14. A táblázat alsó és felső margói legyenek 20 pixel szélesek, a bal- és jobboldali margót pedig állítsd be úgy, hogy a táblázat középre rendeződjön.
table{
border-collapse: collapse;
margin: 20px auto;
}15. A submit és a reset típusú gombok szélessége legyen 120 pixel, magassága pedig 30 pixel.
.mezosor .mezo input[type='submit'],
.mezosor .mezo input[type='reset']{
margin: 10px;
width: 120px;
height: 30px;
}16. Azon elemek háttérszíne, amelyek osztálya mezosor és z1, legyen #fef6e7. Azon elemek háttérszíne pedig, amelyek osztálya mezosor és z2, legyen #fffbf4.
.mezosor.z1 {
background-color:#fef6e7;
}
.mezosor.z2 {
background-color:#fffbf4;
}Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

