HTML 01 HTML Szövegként

Html oldal létrehozása egyszerű szövegszerkesztővel
1. A feladat mappájában lévő goldie mappában társítással nyisd meg a Jegyzettömb programmal az index nevű html
fájlt!
2. Mentés másként menüpont kérése után a párbeszédpanelben a fájltípust váltsd át minden fájl-ra, és mentsd el
sajátnév index.html néven.(A névben szereplő index után egy pont van, s csak utána a html!! Ettől html típusú fájl
lesz, és nem szövegfájl, azaz txt.)
3. Nyisd meg ezt dupla kattintással a böngésződben!
Ezután a következő feladatok szerint dolgozz! ( Egyébként ezeket, sőt még ennél többet is megtalálhatsz a 9. osztályos
digi tankönyvben.(155.-165. oldal).Ha van kedved, akkor olvasd el az egészet! Sőt, ha akarod, akkor meg is valósíthatod,
ha használod a tankönyv mellől letöltött és kicsomagolt digit-kult9.zip fájl megfelelő mappáját.)
Amikor egy változtatást csináltál valamelyik feladat utasítása szerint, a Jegyzettömbbel, Mentés –sel írasd a
háttértárolóra, majd frissítd a böngésződ tartalmát, amiután látható lesz a változás html megfelelője a böngészőben..
Az előbbi tevékenységek elvégzését a kövérített Ellenőrzés! fogja jelezni!!!
Tehát:
4. Gépeld be a <title> tag-ek közé a „Golden Retrieverek – Kezdőlap” szöveget majd a fentiek szerint nézd meg mit
okozott ez!
Ellenőrzés!
6. Gépeld be a <body> tag-ek közé az alábbiakat, majd nézd meg a böngészőben!
<h1>A golden retriever bemutatása</h1>
<h2>Előnyös tulajdonságai</h2>
<h2>Goldi, a kutyám</h2>
Ellenőrzés!
7. Az első <body> tag után tegyünk be egy megjegyzést a kódba, amelyben a saját nevünk szerepeljen!
Begépelendő: --
Ellenőrzés!
8. Helyezzük el az alábbi első bekezdést a A golden retriever bemutatása címsor alá! Használjuk ehhez a <p> taget,
amely egy bekezdést hoz létre! Próbáljuk ki a<br> tag hatását a bekezdésen belül, amely egy sortorest hoz létre.
Gépeljük ezt a <br> tag-et a „származik.” szó után. Vigyázzunk, ennek a címkének nincsen záró párja!
A beírandó szöveg:
<p>A golden retriever egy kedves, barátságos kutyafajta, mely Skóciából
származik. <br>A fajta tudományos megnevezése: golden retriever
– Canis lupus familiaris.</p>
Ellenőrzés!
9. A <b> tag a szóvég félkövér formázására alkalmas. Az <i> tag segítségével dőlt betűs formázást állíthatunk be.
Írd be a 8. feladatban begépelt bekezdésbe az előbbi két tag-et az alábbiak szerint:

<p>A <b>golden retriever</b> egy kedves, barátságos kutyafajta,
mely Skóciából származik. <br>A fajta tudományos megnevezése:
golden retriever - <i>Canis lupus familiaris.</i></p>
Ellenőrzés!
10. A <strong> címkével olyan szóvégeket emelhetünk ki, amelyen nagyon fontosak, ezért
erősen ki szeretnénk emelni. Ezek megjelenítésé éppúgy félkövér formázással történik a
böngészőben, mint a <b> tag eseten.
Az <em> címke a hangsúlyos kiemelésre szolgal. Az elő beszédben is sokszor nyomatékosunk
egy-egy szót, amely a mondat jelenteset is befolyásolhatja.
Például az alábbi mondatoknak kissé módosul a jelentésé, ha más-más szavakat hangsúlyozunk.
Tegnap Abel hiányzott az iskolából. Tegnap Ábel hiányzott az iskolából.
Az ilyenfajta hangsulyok jelzésére alkalmas tehát az <em> tag.
Begépelendő a 9. feladatban beírt bekezdés után:

<p><strong>Fontos!</strong> Ha gazdi szeretnél lenni, nézz utána
hogy a <em>felelős</em> kutyatartással kapcsolatban milyen ajánlások
és kötelezettségek vannak!</p>
Ellenőrzés!
11. Felsorolás listát úgy készíthetünk, hogy egy <ul> címkét nyitunk meg, es abban helyezzük
el a listaelemeket, amelyek <li> tagekbe kerülnek. Az ul az unordered list (felsorolás
lista), a li a list item (listaelem) szavak rövidítésé.
Begépelendő az Előnyös tulajdonságai alcím alá:

<ul>
<li>Okos, könnyen képezhető</li>
<li>Szelíd, családbarát</li>
<li>Nagyon jó vadászkutya</li>
</ul>
Ellenőrzés!
12. Képek beillesztése (<img>)
A honlapokon kepéket is elhelyezhetünk az <img> tag használatával. A legfontosabb paraméterei:
src A kép elérési útvonalat tartalmazza.
alt Alternatív szóvég, vagyis a kép rövid tartalmi leírását tartalmazza.
title A képhez rendelt cím, amely a böngészőkben akkor jelenik meg, ha a kép fölé
visszük az egeret.
width A kép szelességé koppantokban.
height A kép magassága koppantokban.
Fontos! Az a könyvtár, amelyben az index.html állományt elhelyezzük, lesz a gyökér könyvtára a honlapunknak.
Ezen belül tetszőleges könyvtár struktúrát kialakíthatunk, de ne hivatkozzunk az index.html állományban (es a
vele egy szinten levő HTML-állományokban) olyan könyvtárrá, amely feljebbi szinteken levő alkönyvtárkára
mutat (pl. ../ kepek), mert ez a weblap publikálásánál problémákat okozhat!
Illesszünk be most két képet egymás mellé, azonos magasságban. A magasság legyen 200 képpont! Adjuk meg az
alt és title paramétereket is!
Begépelendő a második Goldi, a kutyám alcím után:

<img src="kepek/goldi.jpg" height="200" alt="A kutyám, aki egy golden
retriever." title="Goldi, a kutyám (felnőttkorában)">
<img src="kepek/kolyok.jpg" height="200" alt="A kutyám kölyökkorában."
title="Goldi, a kutyám (kölyökkorában)">
Ellenőrzés!
13. A hivatkozások (linkek) segítségével el tudjuk érni, hogy az oldalunkról egy másik erőforrásra (weboldalra,
média elemhez, egyéb fájlhoz) lehessen eljutni.
Készítsünk egy olyan linket, amelyet követve a honlapunk látogatói még több kutyás képet nézhetnek meg. A
weboldal, amelyre hivatkozunk, a http://tiny.cc/goldipix rövidített címen elérhető Pixabay portál. A
https://pixabay.com/ portalon jogtiszta, ingyenesen felhasználható fotók találhatók. Csak rá kell keresned egy
témára, és máris rengeteg jó minőségű fotót kapsz eredményül
Begépelendő az eddigiek után:

<p>Ha szeretnél még több kutyás fotót nézegetni, látogasd meg a
<a href="http://tiny.cc/goldipix">Pixabay portál - Goldenek</a>
fotó oldalát!</p>
Ellenőrzés!
14. Azt is megtehetjük, hogy a hivatkozás segítségével a lap egy adott pontjára ugrunk. Ehhez azt a helyet el kell
neveznünk az id paraméterrel. Ennek a névnek egyedinek kell lennie a teljes oldalon belül. Ezt a paramétert
barmelyik címkénél felhasználhatjuk. Vigyázzunk, a név kis- es nagybetű-érzékeny. Az egyedi nevet a link href
paraméterében úgy kell megadnunk, hogy egy kettős keresztet teszünk elé (href="#egyedinév").
Az oldal elején lévő első címsor1-t javítsuk át a következőre:
<h1 id="eleje">A golden retriever bemutatása</h1>
Az eddigiek végére , de a </body> elé gépeljük be:
<p><a href="#eleje">Vissza az oldal tetejére</a></p>
Ellenőrzés!

HTML 01 HTML Szövegként

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 01 HTML Szövegként

Uploaded by

Copyright:

Available Formats

Html oldal létrehozása egyszerű szövegszerkesztővel

Írd be a 8. feladatban begépelt bekezdésbe az előbbi két tag-et az alábbiak szerint:

Begépelendő a 9. feladatban beírt bekezdés után:

Begépelendő az Előnyös tulajdonságai alcím alá:

Begépelendő a második Goldi, a kutyám alcím után:

Begépelendő az eddigiek után:

You might also like