Webszerkesztés
Notepad ++
6. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Állíts be hiperhivatkozást a második bekezdésben két helyen található „Párizs” szóra, amelyek mutassanak a parizs.html oldalra.
<a href="parizs.html">Párizs</a>
Alakítsd hiperhivatkozássá a „lépj velem kapcsolatba” szövegrészt is, ez pedig mutasson a Kapcsolat című oldalra.
<a href="kapcsolat.html">lépj velem kapcsolatba</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
3. Nyisd meg a london.html fájlt.
-
Szúrj be egy horgonyt (könyvjelzőt) top néven közvetlenül a body nyitó jelölő alá.
<body> <a id="top"></a>
Alakítsd hiperhivatkozássá az oldal alján található „Vissza a lap tetejére” szöveget, a hivatkozás mutasson az oldal top nevű könyvjelzőjére.
<a href="#top">Vissza a lap tetejére</a>
Mentsd el és zárd be a london.html fájlt.
-
-
-
4. Nyisd meg a parizs.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
<<html lang="hu"> <head> ... <title>Jani utazós web site-ja</title> </head> <body> ... </body> </html>
5. A képek és a képaláírások nem passzolnak össze. Tedd a helyére a képaláírásokat, hogy a megfelelő képek alá kerüljenek.
<img src="arcdetriomphe.jpg""notre_dame.jpg"><br>Notre Dame <img src="eifle2.jpg""arcdetriomphe.jpg"><br>A Diadalív <img src="notre_dame.jpg""eifle2.jpg"><br>Az Eiffel-torony
6. Tedd dőltté a „Le jardin” szövegrészt. Szüntesd meg a dőlt stílust a „Rómát már megörökíthetem” szövegrészről.
<i>Le jardin</i><i>Rómát már megörökíthetem</i>
7. A galeria osztályon belüli képek magasságai legyenek 190 pixelesek.
<img ... height="190"
8. A képeknek adj alternatív szöveget, ami ugyanaz legyen, mint a képhez tartozó képaláírás.
<img src="notre_dame.jpg" alt="Notre Dame"><br>Notre Dame <img src="arcdetriomphe.jpg" alt="A Diadalív"><br>A Diadalív <img src="eifle2.jpg" alt="Az Eiffel-torony"><br>Az Eiffel-torony
Mentsd el a fájlt weboldalként parizs.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
9. Nyisd meg a kapcsolat.html fájlt.
-
Módosítsd a Név: szöveg alatti beviteli mező jellemzőit a következőképpen: a mező neve legyen nev, a mezőbe alapértelmezetten az „ide írja a nevét” szöveg kerüljön.
<input type="text" name="nev" value="ide írja a nevét">
10. A többsoros beviteli mező méreteit módosítsd úgy, hogy a sorainak száma 5, a soron belüli karakterek száma 50 legyen. Alapértelmezetten az „ide írja az üzenetét” szöveg jelenjen benne meg.
<textarea name="uzenet" rows="5" cols="50">ide írja az üzenetét</textarea>
11. Hozz létre egy submit típusú nyomógombot az űrlap alján, amelynek neve ok, a gomb felirata pedig „üzenet küldése” legyen.
<p> <input type="submit" name="ok" value="üzenet küldése"></p>
Mentsd el és zárd be a kapcsolat.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
Hozz létre egy új szabályt a hivatkozás jelölő elemekre, és azok link és visited állapotaira: a betű színe legyen #66f és ne legyen aláhúzva.
a, a:link, a:visited{
color:#66f;
text-decoration:none;
}13. Adj egy új szabályt a hivatkozás jelölő elemek hover állapotára: a betű színe legyen #f66 és aláhúzott.
a:hover{
color:#f66;
text-decoration:underline;
}14. Módosítsd azt a CSS szabályt, amely azokra az elemekre vonatkozik, amelyek osztálya kep_hely és galeria egyszerre: A margó értékét állítsd 5 pixelre, és töröld a padding értékre vonatkozó értékadást.
.kep_hely.galeria{
float: left;
margin: 2px 5px;
padding: 5px;
}15. Szúrj be egy új szabályt: a többsoros beviteli mező háttérszíne legyen #f6f6f6, a betűszín pedig #66f.
textarea{
background-color: #f6f6f6;
color: #66f;
}16. A submit típusú gomb feliratának betűstílusát állítsd félkövérre.
input[type='submit']{
font-weight:bold;
}Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:
