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.

Fájl - Megnyitás

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.

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

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

Fájl - Megnyitás

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

7. Nyisd meg az eszkozok.html fájlt.

Fájl - Megnyitás

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.

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

9. Nyisd meg az informacio.html fájlt.

Fájl - Megnyitás

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.

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

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

Az elkészült weboldal: