Webszerkesztés
Notepad ++
33. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
A „További szolgáltatásaink...” mondat elé tegyél sortörést.
látogatókat.<br /> További szolgáltatásaink
Az „Üdvözlettel:” kezdődő két sor kerüljön új bekezdésbe.
kertépítés.<br></p> <p>Üdvözlettel:
3. Állíts be hiperhivatkozást a „faiskolai áruinkkal” szövegrészre, amely mutasson a Termékeink című oldalra.
<a href="termekeink.html">faiskolai áruinkkal</a>
Állíts be hiperhivatkozást a „További szolgáltatásaink” szövegrészre is, ez mutasson a szolgaltatasaink.html oldalra.
<a href="szolgaltatasaink.html">További szolgáltatásaink</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg az akcionk.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html és body nyitó és záró jelölőivel.
<html> <head> ... </head> <body> ... </body> </html>
5. Tedd az „Akciónk” sort 1. szintű címsorrá.
<p><h1>Akciónk</p></h1>
A „Tavaszi akció!” sort pedig alakítsd 2. szintű címsorrá.
<p><h2>Tavaszi akció!</p></h2>
Mentsd el a fájlt weboldalként akcionk.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
6. Nyisd meg a szolgaltatasaink.html fájlt.
-
Módosítsd az oldalon található felsorolást számozatlan felsorolás stílusúvá.
<ol><ul> ...</ol></ul>
A Kertépítés és Szaktanácsadás közti sorokat ágyazd be a Kertépítés sora alá ??? már ott van!!!.
A beágyazott felsorolás legyen számozott felsorolás stílusú.
<p><ol>
<li>Sövénynyírás<br></li>
<li>Metszés<br></li>
<li>Ágaprítás<br></li>
<li>Zöldhulladék elszállítás</li>
</p></ol>
Mentsd el és zárd be a szolgaltatasaink.html fájlt.
-
-
7. Nyisd meg a termekeink.html fájlt.
-
Adj a termek_kep osztályú elemeken belüli képeknek alternatív szöveget, ezek értéke legyen ugyanaz, mint a képek alatt lévő, zárójelbe tett latin megnevezés.
<img src="fa_1.jpg" alt="Pinus mugo">
<img src="fa_2.jpg" alt="Cedrus sp.">
<img src="fa_3.jpg" alt="Pinus sylvestris L.">
Mentsd el és zárd be a termekeink.html fájlt.
-
-
8. Nyisd meg az elerhetosegunk.html fájlt.
-
Szúrd be a garden.jpg képet a kep osztályú elemen belülre, a kép megjelenési magasságát állítsd 180 pixelre.
<p class="kep"><img src="garden.jpg" height="180">
9. Az oldalon található űrlap egészét tedd egy mezőcsoportba (fieldset). Adj magyarázó feliratot (legend) a mezőcsoporthoz „Írjon nekünk!” szöveggel.
<form>
<fieldset><legend>Írjon nekünk!</legend>
...
</fieldset>
</form>
10. A Tárgy felirathoz tartozó beviteli mező név tulajdonságát módosítsd „targy”-ra, a maximálisan beírható karakterek száma pedig 30 legyen.
Tárgy:<br>
<input type="text" name="texttargy" maxlength="30">
11. A submit gomb mellé vegyél fel egy reset típusú nyomógombot. Ennek felirata legyen „üzenet törlése”.
<input type="reset" name="torles" value="üzenet törlése">
Mentsd el és zárd be az elerhetosegunk.html fájlt.
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A menu azonosítójú elemen belüli hivatkozás jelölő elemekhez tartozó, valamint azok link és visited állapotaira a betű színe legyen fehér (white), a stílusa pedig félkövér.
#menu a,
#menu a:link,
#menu a:visited{
text-decoration: none;
color: white;
font-weight: bold;
}
13. A h1 elemekre a betűméret legyen az alap betűméret 1,65-szöröse, a szöveget pedig igazítsd középre.
h1{
font-size: 1.9em 1.65em;
text-align: center;
}
14. A termek_kep osztályú elemeken belüli img elemekhez határozz meg keret tulajdonságot, amely 3 pixel vastag, folytonos vonalú és #060 színű.
.termek_kep img{
border: 3px solid #060;
}
15. A fieldset elemekre határozz meg 15 pixel méretű bélést (padding), valamint félkövér betűstílust.
fieldset{
padding: 15px;
font-weight: bold;
}
16. A text típusú input elemek szélessége legyen 300 pixel.
input[type="text"]{
width: 300px;
}
Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
Az elkészült weboldal:
<p><ol> <li>Sövénynyírás<br></li> <li>Metszés<br></li> <li>Ágaprítás<br></li> <li>Zöldhulladék elszállítás</li></p></ol>
-
<img src="fa_1.jpg" alt="Pinus mugo"> <img src="fa_2.jpg" alt="Cedrus sp."> <img src="fa_3.jpg" alt="Pinus sylvestris L.">
-
<p class="kep"><img src="garden.jpg" height="180">
<form> <fieldset><legend>Írjon nekünk!</legend> ... </fieldset> </form>
Tárgy:<br> <input type="text" name="texttargy" maxlength="30">
<input type="reset" name="torles" value="üzenet törlése">
-
A menu azonosítójú elemen belüli hivatkozás jelölő elemekhez tartozó, valamint azok link és visited állapotaira a betű színe legyen fehér (white), a stílusa pedig félkövér.
#menu a,
#menu a:link,
#menu a:visited{
text-decoration: none;
color: white;
font-weight: bold;
}h1{
font-size: 1.9em 1.65em;
text-align: center;
}.termek_kep img{
border: 3px solid #060;
}fieldset{
padding: 15px;
font-weight: bold;
}input[type="text"]{
width: 300px;
}-
-

