Webszerkesztés
Notepad ++
42. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Alakítsd definíciós listává a címsor alatti Cím, Telefon, stb. sorokat.
<dl> <dt>Cím</dt> <dd>9999 Budapest, Petőfi u. 23-25.</dd> <dt>Telefon</dt> <dd>(06-1) 999-99999</dd> <dt>Email</dt> <dd>info@izzofitneszklub.hu<dd> <dd>vagy üzenet írása itt</dd> <dt>Nyitvatartás</dt> <dd>hétfőtől - péntekig: 8-21<dd> <dd>szombaton: 10-18<dd> <dd>vasárnap: zárva</dd> </dl>
3. Állíts be hiperhivatkozást az „üzenet írása itt” szövegrészre, amely mutasson a Kapcsolat című oldalra.
<a href="kapcsolat.html">üzenet írása itt</a>
Alakítsd hiperhivatkozássá a szövegben előforduló „info@...” email címet is.
<a href="mailto:info@izzofitneszklub.hu">info@izzofitneszklub.hu</a>
4. Módosítsd a szövegbe beszúrt kép megjelenési méreteit úgy, hogy a szélesség 220 pixel, a magasság 310 pixel legyen. Adj alternatív szöveget a képnek „edzőgép” értékkel.
<img src="fitness_1.jpg" width="220" height="310" alt="edzőgép">
Mentsd el és zárd be az index.html fájlt.
-
-
-
5. Nyisd meg a szolg.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Az oldalcím szövege pedig legyen „Izzó Fitnesz Klub”.
<html lang="hu"> <head> ... <link rel="stylesheet" href="styles.css"> <title>Izzó Fitnesz Klub</title> ... </body> </html>
6. Alakítsd dőltté a „25*100*3 m-es” szövegrészt.
<i>25*100*3 m-es</i>
A „4 °C-os” szövegrészt pedig tedd félkövérré és dőltté.
<b><i>4 °C-os</i></b>
7. Az oldalon található táblázatnak adj táblázatcímet (caption) „Teremfelelősök beosztása” szöveggel.
<table> <caption>Teremfelelősök beosztása</caption>
Mentsd el a fájlt weboldalként szolg.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
8. Nyisd meg a kapcs.html fájlt.
-
Az oldalon lévő űrlap Név feliratához tartozó beviteli mező paramétereit módosítsd úgy, hogy a név értéke „nev”, a maximálisan beírható karakterek száma pedig 30 legyen.
<input type="text" value="" name="nev" maxlength="30">
9. Az űrlap rádiógombjai közé vegyél fel egy újat, amelynek címkéje „Egyéb” legyen. Alapértelmezés szerint ez a rádiógomb legyen bejelölt állapotban.
<input type="radio" name="szolg" value="egyeb" id="egyeb" checked><label for="egyeb"> Egyéb</label>
10. A többsoros beviteli mező sorainak számát módosítsd 6-ra, a soron belüli karakterek számát pedig 60-ra. A mezőbe alapértelmezetten szerepeljen a következő szöveg: „Írjon nekünk vagy üzenjen!”.
<textarea name="uzenet" rows="46" cols="5060">Írjon nekünk vagy üzenjen!
11. A „Küldés” nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, amelyen „Alaphelyzetbe” felirat szerepeljen.
<input type="reset" name="reset" value="Alaphelyzetbe">
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 menu azonosítójú elemen belüli hivatkozás jelölő elemekre, és azok link és visited állapotára határozz meg fehér (white) betűszínt, a szöveg ne legyen aláhúzva.
#menu a,
#menu a:link,
#menu a:visited{
color: #dddwhite;
text-decoration: none;
}13. A tartalom 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övegigazítás pedig középre történjen.
#tartalom h1{
...
font-size: 1.5em;
text-align: center;
}14. A th és td elemek számára határozz meg 5 pixeles felső és alsó, valamint 15 pixeles bal- és jobboldali bélés (padding) értékeket.
th,td{
border: 1px dotted #666;
padding: 5px 15px;
}15. A legend elemekhez rendelj félkövér betűstílust.
legend{
font-weight: bold;
}16. A text típusú input elemek szélességét állítsd 500 pixel méretűre.
input[type="text"]{
width: 500px;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

