Webszerkesztés
Notepad ++

41. 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 és head nyitó és záró jelölőivel.

<html>
<head>
<meta charset="utf-8">
...
<title>Expresso internet-kávézó</title>
</head>
...
</body>
</html>

3. Szúrj be egy sortörést a „Két szinten...” mondat elé.

számára.<brKét szinten,

Szúrj be szintén egy sortörést a „Nyitva 0-tól 24...” mondat elé is.

non-stop.<br> Nyitva 0-tól 24 óráig

4. Tedd félkövérré a „45 db csúcsminőségű” szövegrészt.

<b>45 db csúcsminőségű</b>

A szövegben előforduló „Expresso” szót alakítsa félkövérré és dőltté.

<b><i>Expresso</i></b>

5. Állíts be hiperhivatkozást a „számos kiegészítő szolgáltatást” szövegrészre, amely mutasson a Szolgáltatásaink című oldalra.

<a href="szolg.html">számos kiegészítő szolgáltatást</a>

Alakíts hiperhivatkozássá a szövegben előforduló „expresso@...” email címet is.

<a href="mailto:xpresso@expresso.mail.hu">expresso@expresso.mail.hu</a>

6. Szúrd be az expresso_1.jpg képet a kep osztályú elemen belülre. A képhez rendeljen alternatív szöveget „nyíl” értékkel.

<p class="kep"><img src="expresso_1.jpg" alt="nyíl">

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

7. Nyisd meg a szolg.html fájlt.

Fájl - Megnyitás

Vond össze a táblázat fejléc celláit a velük szomszédos üres cellákkal.

<th colspan="2">Internet</th>
<th></th>
a másik két helyen is végezd el a fenti módosításokat

8. Módosítsd a „Caffee latte” árát „380 Ft”-ra, a „Capuccino” árát „430 Ft”-ra.

<td>400380 Ft</td>
...
<td>400430 Ft</td>

Mentsd el és zárd be az szolg.html fájlt.

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

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

Fájl - Megnyitás

Az „Email címe” felirathoz tartozó beviteli mező neve „email”, maximálisan beírható karaktereinek a száma 40 legyen.

<input type="text" name="email" value="" maxlength="40">

10. A többsoros beviteli mező sorainak számát módosítsd 4-re, a soron belüli karakterek számát 40-re. A mezőbe alapértelmezetten a következő szöveg szerepeljen: „Itt tegye fel a kérdését!”.

<textarea name="kerdes" rows="4" cols="40">Itt tegye fel a kérdését!</textarea>

11. Az űrlapon található nyomógomb legyen submit típusú, a gombon a „Küldés” felirat látszódjon.

<input type="buttonsubmit" name="mehet" value="GombKüldés">

Mentsd el és zárd be a kapcs.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 h1 elemekre határozz meg az alap betűmérethez képest 1,5-szörös méretű betűnagyságot, valamint középre történő szövegigazítást.

#content h1{
	font-size: 1.8em1.5em;
	text-align: center;
}

13. A dt elemekre állíts be 12 pixel méretű margót, és félkövér betűstílust.

dt{
	margin: 8px12px;
	font-weight: bold;
}

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

table{
	border-collapse: collapse;
	margin: 0 auto;
}

15. A th és td elemekhez adj keretet, amely 1 pixel vastag, pontozott mintázatú és #ccc színű.

th, td{
	padding: 8px 20px;
	border: 1px dotted #ccc;
}

16. A text típusú input elemek szélességét állítsd 250 pixelre.

input[type="text"]{
	width: 250px;
}

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: