HTML feladatok (77 feladat)

Feladat leírás:
img - elem, amellyel képet lehet az oldalba beilleszteni
alt - az "img" elem attribútumaként a helyettesítő szöveget lehet vele megadni, ha pl valami miatt a kép nem tölthető be
src - az "img" elem attribútumaként a kép forráscímét lehet vele megadni
title - az "img" elem attribútumaként a kép fölé vitt egérre megjelenő szöveget lehet vele megadni
figure - csoportosító elem, amelybe a képeket, diagramokat szokás befoglalni a feliratukkal együtt
figcaption - a "figure" elemen belül szokás ezzel megadni a kép vagy diagram feliratát
float: left; float: right; - a kép balra illetve jobbra igazítása
width: 300px; height: 600px; - kép szélessége és magassága

pl:
<figure>
   <img src="kép.jpg" alt="Helyettesítő szöveg" title="Az egérre megjelenő szöveg" />
   <figcaption>A kép felirata</figcaption>
</figure>

Oldd meg az alábbi űrlap feladatait: 08 Képek - teszt

Feladat leírás:
Készíts el egy szabványos HTML fájlt "08-01 Linkek.html" néven, amely linkeket tartalmaz az alábbiak szerint:

1. Egy link a Pataky oldalára, amely új lapon nyílik meg ( http://pataky.hu )
2. Egy link a Bükki Nemzeti Park oldalára, amely helyben nyílik meg ( https://bnpi.hu )
3. Egy link a Hortobágyra, amelyen van "egér feletti" szöveg is ( https://www.hnp.hu )
4. Egy kép amely szintén link a Hortobágyra. A kép innen tölthető le.
5. Egy link a legvégén, amely az oldal elejére ugrik.

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Módosítsd a Forrásfájlok között található 08-02 Aggtelek.html fájlt az alábbiak szerint.

1. A nav-ban lévő menü elemeit alakítsd át linkekké, amelyek a jelzett részekre ugranak ezen az oldalon belül. Ehhez használd a már megadott konténer azonosítókat:
Bevezető ==> bevezeto
Látnivaló ==> latnivalo
Hucul ménes ==> hucul
Baradla-barlang ==> baradla
Oktatás ==> oktatas
Szállás ==> szallas

2. A logót és mind a hat nagy képet, amely után a forráskódban egy linket tartalmazó megjegyzés van, alakítsd át úgy, hogy a képre kattintva a megjegyzésben megadott oldalra ugorjunk. Ez az oldal a böngésző új lapján jelenjen meg. Ezeket a linkeket tartalmazó megjegyzéseket töröld ki a forráskódból.

3. A szövegben vastagon szedett szövegeket alakítsd át új lapon megnyíló linkekké az alábbiak szerint:
A "Bevezető" részben:
- Aggteleki Nemzeti Park ==> https://anp.hu/
- Gömör-Tornai-karszt ==> https://hu.wikipedia.org/wiki/G%C3%B6m%C3%B6r%E2%80%93Tornai-karszt

A "Látnivaló" részben:
- Szlovák-karszt barlangjai ==> https://www.turistamagazin.hu/blog-bejegyzes-1/a-szlovak-karszt-termeszeti-kincsei
- UNESCO ==> https://www.unesco.org/en
- Világörökség ==> https://unesco.hu/vilagorokseg/vilagorokseg-107171
- barlangtúrákat ==> https://anp.hu/barlangi-turak

A "Hucul ménes" részben:
- Jósvafői Hucul Ménes ==> https://www.programturizmus.hu/partner-josvafoi-hucul-menes-aggteleki-nemzeti-park.html

A "Baradla barlang" részben:
- Baradla ==> https://termeszetvedelem.hu/talalati-oldal/?type=barlang&id=5430-1
- Bódvarákó ==> http://bodvarako.lapunk.hu/
- Esztramos-hegy ==> https://www.tornaszentandras.hu/esztramos_hegy.php
- Rákóczi-barlang ==> http://magyarnemzetiparkok.hu/rakoczi-i-sz-barlang/
- Meteor ==> https://hu.wikipedia.org/wiki/Meteor-barlang
- Béke ==> https://hu.wikipedia.org/wiki/B%C3%A9ke-barlang
- Kossuth-barlang ==> https://hu.wikipedia.org/wiki/Kossuth-barlang

Az "Oktatás" részben:
- Aggteleki Nemzeti Park Igazgatóság ==> https://anp.hu/
- Kúria Oktatóközpont ==> https://dka.oszk.hu/html/kepoldal/index.phtml?id=120631

A "Szállás" részben:
- Tengerszem Hotel ==> http://magyarnemzetiparkok.hu/tengerszem-szallo-es-oktatasi-kozpont/
- Nomád-Baradla Turistaszálló és Kemping ==> http://magyarnemzetiparkok.hu/baradla-kemping-es-turistaszallo/
- Kövirózsa Apartmanház ==> http://magyarnemzetiparkok.hu/kovirozsa-apartmanhaz/
- Szalamandra-ház ==> http://magyarnemzetiparkok.hu/szalamandra-haz/

4. A láblécben levő, "A szöveg forrása" szöveget követő linket módosítsd úgy, hogy a megnyíló oldal helyben nyíljon meg és ne új lapon.

5. Legyen egy link a legvégén, a vízszintes vonal alatt, amely az oldal elejére ugrik - ezzel kapcsolatban lásd a mintát.

6. Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts el egy szabványos HTML fájlt "08-03 Kepek.html" néven, amely magyar írók fotóit és nevét tartalmazza.
A fotók az alábbi nevekre kattintva letölthetők:
Jókai Mór,
Arany János,
Benedek Elek,
Balassi Bálint,
Zrínyi Miklós

1. Használd a figure és figcaption elemeket.

2. Az írók neve a kép alatt legyen.

3. Az írók nevei linkek legyenek az író Wikipédia oldalára és külön lapon nyíljanak meg.

4. A képek egységesen 100 pixel szélesek legyenek.

Az eredményt ellenőrizd le egy online HTML validátorral!

Feladat leírás:
Készíts egy szabványos HTML fájlt "08-04 Gellert-hegy.html" néven, amely megfelel a mellékelt mintának.
Kiinduláshoz használd a mellékelt forrásfájokat.
- Az oldal nyelve legyen magyar és a kódolása UTF-8.
- A böngésző fülszövege "Gellért-hegy" legyen.
- Az oldal törzs részében a főcím legyen egyes címsorral formázva.
- A forrásban levő üres sorokkal elválasztott szövegrészek mindegyike önálló bekezdés legyen.
- A forrásban megjelölt helyekre szúrd be a megfelelő képeket az "images" mappából a mintának megfelelően igazítva őket. A képek beillesztéséhez használd a figure és figcaption elemeket!
- Az első kép: Gellert_hegy.jpg
- Az első kép legyen balra igazítva és legyen 300px széles.
- Ha az első kép fölött van az egér, vagy ha a kép nem jeleníthető meg, illetve a kép aláírása is a "Gellért-hegy" szöveg legyen.
- A második kép: Gellert_szobor.jpg
- A második kép legyen jobbra igazítva és legyen 300px széles.
- Ha a második kép fölött van az egér, vagy ha a kép nem jeleníthető meg, illetve a kép aláírása is a "Gellért szobor" szöveg legyen.
- Az oldal alján legyen egy vízszintes vonal.
- A vonal alatt egy konténerben legyen feltüntetve a forrás, amely egyúttal link is a forrásra és kattintásra külön lapon nyílik meg.

Az eredményt ellenőrizd le egy online HTML validátorral!