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.

Fájl - Megnyitás

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ájl - Mentés másként... - Fájltípus: (*.html)
Fájl - Bezárás

5. Nyisd meg a tortenet.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

8. Nyisd meg az pizzak.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

10. Nyisd meg a megrendeles.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

12. Nyisd meg a styles.css fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal: