Webszerkesztés
Notepad ++
34. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
-
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Rendelj a fájlhoz a styles.css stíluslap állományt.
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> ... </body> </html>
3. Az „Állásajánlat” sort tedd 2. szintű címsorrá.
<p><h2>Állásajánlat</p></h2>
A „Jelenleg teljes...” alatti felsorolás stílusát módosítsd számozatlanná.
<ol><ul> ...</ol></ul>
4. Állíts be hiperhivatkozást a „Saját készítésű pizzáink” szövegrészre, amely mutasson a pizzak.html oldalra.
<a href="pizzak.html">Saját készítésű pizzáink</a>
Állíts be hiperhivatkozást a „futárokkal” szóra is, ez mutasson a Megrendelés című oldalra.
<a href="megrendeles.html">futárokkal</a>
Mentsd el a fájlt weboldalként index.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
5. Nyisd meg a tortenet.html fájlt.
-
Az „Eredetileg a pizza...” mondattól a szöveg kerüljön új bekezdésbe.
pizzától.</p> <p>Eredetileg a pizza
„A modern pizza feltalálását...” mondattól a szöveg kerüljön új bekezdésbe.
specialitást.<br></p> <p>A modern pizza
6. „A modern pizza feltalálását” szövegrészt tedd félkövérré.
<b>A modern pizza feltalálását</b>
A „Raffaele Espositónak” szövegrészt alakítsd félkövérré és dőltté.
<b><i>Raffaele Espositónak</i></b>
7. A kep_jobb osztályú elemen belülre szúrd be a pizza_02.jpg képet. A kép megjelenési szélességét állítsd 280 pixelre.
<p class="kep_jobb"><img src="pizza_02.jpg" width="280">
Mentsd el és zárd be az tortenet.html fájlt.
-
-
-
8. Nyisd meg az pizzak.html fájlt.
-
Alakítsd az itt található táblázat első sorát fejléc cella típusúvá.
<td><th>Név</td></th><td><th>32cm ára</td></th><td><th>45cm ára</td></th>
9. Javítsd a táblázatban a 45 cm-es gombás pizza árát 2200 Ft-ra, a 32 cm-es kolbászosét pedig 1300 Ft-ra.
<td>21002200 Ft</td> <td>12501300 Ft</td>
Mentsd el és zárd be a pizzak.html fájlt.
-
-
-
10. Nyisd meg a megrendeles.html fájlt.
-
Az oldalon található űrlap egészét tedd egy mezőcsoportba (fieldset). Adj magyarázó feliratot (legend) a mezőcsoportnak „Válasszon pizzát és adja meg adatait!” szöveggel.
<form> <fieldset><legend>Válasszon pizzát és adja meg adatait!</legend> ... </fieldset> </form>
11. Az űrlap alján található nyomógomb típusát módosítsd submit típusúra, a felirata pedig legyen „megrendelés”.
<input type="buttonsubmit" name="megrendeles" value="buttonmegrendelés">
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:
A content azonosítójú elemen belüli h2 elemekre a betű mérete az alap betűméret 1,3-szorosa legyen.
#content h2{
font-size: 1.3em;
}13. A th elemek háttérszíne #c00000 legyen, a betű színe pedig fehér (white).
th{
...
background-color: #c00000;
color: white;
}14. A td elemekhez rendelj bélés (padding) értékeket, a felső és alsó 5 pixel, a bal- és jobboldali pedig 10 pixel legyen.
td{
border: 1px dotted #c00000;
padding: 5px 10px;
}15. A legend elemhez rendelj félkövér betűstílust.
legend{
font-weight: bold;
}16. A submit típusú input elemekben a betűméret legyen az alap betűméret 1,3-szorosa.
input[type='submit']{
font-size: 1.3em;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

