Webszerkesztés
Notepad ++



17. 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ó head nyitó és záró jelölőivel.
Rendelj a fájlhoz a styles.css stíluslapfájlt.

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Pacman Pizza</title>
</head>

3. Módosítsd az „Üdvözöljük a...” szöveggel kezdődő sort 1. szintű címsorrá, valamint az „Állásajánlat” sort 2. szintű címsorrá.

<p><h1>Üdvözöljük a Pacman Pizza oldalán!</p></h1>
<p><h2>Állásajánlat</p></h2>

4. Állíts be hiperhivatkozást a „pizzafélék” szóra, amely mutasson a Pizzák című oldalra.

<a href="pizzak.html">pizzafélék</a>

Állíts be hiperhivatkozást a „leggyorsabb futárokkal” szövegrészre is, ez mutasson a megrendeles.html oldalra.

<a href="megrendeles.html">leggyorsabb 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

Szúrj be sortörést „A pizzát Vergilius...” mondat elé.

használtak.<br />
A pizzát Vergilius

„A modern pizza feltalálását...” kezdetű mondattól a szöveg kerüljön új bekezdésbe.

specialitást.</p>
<p>A modern pizza

6. Alakítsd félkövérré a „napjaink egyik legkedveltebb” szövegrészt.

<b>napjaink egyik legkedveltebb</b>

„Raffaele Espositónak” szövegrészt pedig tedd dőltté.

<i>Raffaele Espositónak</i>

7. Szúrd be a pizza_02.jpg képet a kep_jobb osztályú elemen belülre.
Adj a képnek alternatív szöveget „pizza” néven.

<p class="kep_jobb"><img src="pizza_02.jpg" alt="pizza"></p>

Mentsd el és zárd be a tortenet.html fájlt.

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

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

Fájl - Megnyitás

Szúrj be a táblázat elejére táblázat feliratot (caption) „Pizzáink ezen a héten” szöveggel.

<table>
	<caption>Pizzáink ezen a héten</caption>

9. Rendezd át a táblázat sorait úgy, hogy a pizzák elnevezéseik szerint ABC sorrendben legyenek egymás alatt.

Alexandra sor az elejére, Vegetáriánus sor a végére

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

A méretre vonatkozó rádiógombok feliratait alakítsd címke (label) típusúvá.

<label for="meret_32">32 cm</label>
<label for="meret_45">45 cm</label>

11. A telefonszámhoz tartozó beviteli mező paramétereit módosítsd úgy, hogy a neve tel legyen, a mezőben megadható maximális karakterszám pedig 15.

<input type="text" name="text""tel" maxlength="15">

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ú elem h1 gyermekelemeire a betű mérete legyen az alap betűméret 1,5-szerese és középre rendezett.

#content h1{
	text-align: leftcenter;
	font-size: 1.5em;
}

13. A table elemek felső és alsó margóját állítsd 0 méretűre, a bal- és jobboldali margót pedig állítsd be úgy, hogy az elem középre rendeződjön.

table{
	width: 500px;
	border-collapse: collapse;
	margin: 0 auto;
}

14. A td elemeknek adj keretet, amely 1 pixel vastag, pontozott mintázatú és #c00000 színű.

td{
	padding: 5px 10px;
	border: 1px dotted #C00000;
}

15. Rendelj a fieldset elemekhez egységesen 10 pixel bélés (padding) értéket, valamint az elem szélességét 500 pixelben határozd meg.

fieldset{
	padding: 10px;
	width: 500px;
}

16. Az egysoros szöveges beviteli mező szélességét méretezd 300 pixel nagyságúra.

input[type='text']{
	width: 300px;
}

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: