Webszerkesztés
Notepad ++



37. feladatsor


Indíts el a Notepad++ webszerkesztő programot.

2. Nyisd meg az index.html nevű fájlt a megadott helyről.

Fájl - Megnyitás

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.

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

4. Nyisd meg az allas.txt fájlt.

Fájl - Megnyitás

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

6. Nyisd meg a szonyegek.html fájlt.

Fájl - Megnyitás

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)

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

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

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

Fájl - Megnyitás

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.

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:
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.

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

Az elkészült weboldal: