Webszerkesztés
Notepad ++
13. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Az „Üdvözlöm Önt...” kezdetű sort tedd 1. színű címsorrá.
<p><h1>Üdvözlöm Önt cégünk nevében!</p></h1>
A „Reméljük...” kezdetű mondattól kezdődő szövegrész kerüljön új bekezdésbe.
is.</p> <p>Reméljük
3. Állíts be hiperhivatkozást az „eszközökről és szerelékekről” szövegrészre, amely mutasson az Eszközök című oldalra.
<a href="eszkozok.html">eszközökről és szerelékekről</a>
Állíts be hiperhivatkozást az „Addig is írjon nekünk” szövegrészre is, ez mutasson az informacio.html oldalra.
<a href="informacio.html">Addig is írjon nekünk!</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg az idojaras.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html és body nyitó és záró jelölőivel.
<html> <head> ... </head> <body> ... </div> </body> </html>
5. Tedd a „Holnap” valamint a „Holnapután” szövegű sorokat 2. szintű címsorrá.
<p><h2>Holnap</p></h2><p><h2>Holnapután</p></h2>
6. A Vízhőmérséklet: sorokat mindkét helyen tedd félkövérré.
<p><b>Vízhőmérséklet: 10 °C</b></p>
<p><b>Vízhőmérséklet: 11 °C</b></p>
Mentsd el a fájlt weboldalként idojaras.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
7. Nyisd meg az eszkozok.html fájlt.
-
A táblázatban található három képhez adj alternatív szöveget „horgászbot” szöveggel.
<img src="bot_1.jpg" alt="horgászbot">a módosításokat a másik két képnél is végezd el
8. Adj táblázatcímet a táblázathoz, a cím szövege: „Minőségi horgászbotok kedvező áron!” legyen.
<table> <caption>Minőségi horgászbotok kedvező áron!</caption>
Mentsd el és zárd be az eszkozok.html fájlt.
-
-
-
9. Nyisd meg az informacio.html fájlt.
-
A „Kategória” feliratú mező paramétereit módosítsd úgy, hogy a mező mindhárom értéke látszódjon.
<select name="kategoria" size="3">
Alapértelmezetten az „egyéb kérdés” érték legyen bejelölt állapotban.
<option value="egyeb" selected>
10. Módosítsd az „Üzenet” melletti mezőt úgy, hogy egysoros helyett többsoros beviteli mező legyen. A mező sorainak száma 7, a soronkénti karakterszám pedig 50 legyen.
<input type="text" name="uzenet"><textarea name="uzenet" rows="7" cols="50"></textarea>
11. Módosíts a nyomógomb típusát submit típusúra, a gomb felirata „üzenet küldése” legyen.
<input type="button""submit" name="kuldes" value="küldés"üzenet küldése>
Mentsd el és zárd be az informacio.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ú li elemekre a lista jelölője ne jelenjen meg.
#menu li{
list-style-type: none;
}13. A caption jelölők betű stílusa legyen félkövér, a betűköz pedig 0.4em méretű.
caption{
font-size: 1.2em;
font-weight: bold;
letter-spacing: 0.4em;
}14. A td elemeknek adj alsó keretet, amely 1 pixel vastag, pontozott mintázatú és #666 színű.
td{
padding: 3px;
border-bottom: 1px dotted #666;
}15. A legend elemek betűmérete legyen az alap betűméret 1,2-szerese.
legend{
font-size:1.2em;
}16. Állíts be háttérszínt a submit típusú nyomógombokra, a szín #ccf legyen.
input[type='submit']{
background-color: #ccf;
}Mentsd és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

