Webszerkesztés
Notepad ++
Indíts el a Notepad++ webszerkesztő programot.
Módosítsd a CSS szabályokat az alábbiak szerint:
37. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
A „Termékeink minőségi...” kezdetű mondattól a szöveg kerüljön új bekezdésbe.
üzleteink.<br></p> <p>Termékeink
A „Reméljük, hogy...” mondat elé szúrj be egy sortörést.
szőnyegünket.<br> Reméljük, hogy
3. Állíts be hiperhivatkozást a „bármelyik termékünk” szövegrészre, amely mutasson a Szőnyegek című oldalra.
<a href="szonyegek.html">bármelyik termékünk</a>
Állíts be hiperhivatkozást a „felkeltette érdeklődését” szövegrészre is, ez mutasson a megrendeles.html oldalra.
<a href="megrendeles.html">felkeltette érdeklődését</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg az allas.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel. Rendelje a fájlhoz a styles.css stíluslap állományt.
<head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>TIP-TOP Szőnyegház</title> </head>
5. A „Jelenleg teljes munkaidőbe keresünk:” alatti sorokat alakítsd számozott felsorolás stílusúvá.
<ol> <li>1 fő pénztárost</li> <li>1 fő szállítmányozót</li> <li>2 fő eladót</li> </ol>
Mentsd el a fájlt weboldalként allas.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
6. Nyisd meg a szonyegek.html fájlt.
-
Méretezd át a táblázatban található képek megjelenését úgy, hogy a képek mérete egységesen 80 pixel szélesek legyenek.
<img src="szonyeg_6.jpg" width="80"> minden képhez írd be a szélességet a fent látható módon
7. A táblázathoz adj táblázatcímet (caption) „Jelenleg kapható szőnyegek” szöveggel.
<table> <caption>Jelenleg kapható szőnyegek<caption>
8. Rendezd át a sorokat úgy, hogy megnevezés szerint ABC sorrendben legyenek.
jelöld ki az áthelyezni kívánt táblázatsor adatait, majd üsd le a C + x billentyűkombinációt...
üss egy N-t azután a </tr> tag előtt vagy után, ahová be kell illesztened az előbbi táblázatsort; C + v;
a fenti műveletet kétszer kell elvégezned! (A... a B... elé; S... az R... után)
üss egy N-t azután a </tr> tag előtt vagy után, ahová be kell illesztened az előbbi táblázatsort; C + v;
a fenti műveletet kétszer kell elvégezned! (A... a B... elé; S... az R... után)
Mentsd el és zárd be a szonyegek.html fájlt.
-
-
-
9. Nyisd meg a megrendeles.html fájlt.
-
Az űrlap Szőnyeg feliratához tartozó űrlapelemet módosítsd úgy, hogy valamennyi értéke látszódjon, alapértelmezetten pedig legyen a Spring kiválasztott állapotban.
<select name="szonyeg" size="5"> ... <option value="spring" selected>Spring</option>
10. Az „Elektronikus számlát küldjünk?” rádiógombjaihoz tartozó feliratokat alakítsd címke (label) típusúvá.
<label for="eszamla_igen"> Igen</label> <label for="eszamla_nem"> Nem</label>
11. Az űrlap alján található nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, amelynek „alaphelyzet” szövegű felirata legyen.
<input type="reset" name="alaphelyzet" value="alaphelyzet">
Mentsd el és zárd be a megrendeles.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
Az alja azonosítójú elemen belüli h1 elemeknél a betűméret az alap betűméret 1,5-szöröse legyen, a szöveg elrendezése pedig középre történjen.
#alja h1{
font-size: 1.8em1.5em;
text-align: center;
}13. A caption elemeknél a betűméretre az alap betűméret 1,2-szeresét add meg, a betűstílus pedig legyen félkövér.
caption{
font-size: 1.1em1.2em;
font-weight: bold;
}14. A td elemek számára határozz meg 1 pixel vastag, pontozott mintázatú és #ccc színű keretet.
td{
vertical-align: top;
border: 1px dotted #ccc;
}15. A fieldset elemek felső és alsó margóját állítsd 0 méretűre, a bal- és jobboldalit pedig állítsd be úgy, hogy az elem középre rendeződjön.
fieldset{
...
margin: 0 auto;
}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:

