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.
-
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ájltípus: (*.html)
-
-
7. Nyisd meg a szolg.html fájlt.
-
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.
-
-
-
9. Nyisd meg a kapcs.html fájlt.
-
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.
-
-
-
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 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.
-
-
-
-
-
Az elkészült weboldal:

