tamas100 / html-alapjai

HTML alapjai

HTML alapjai

A Karrierváltó mentorprogramhoz készült gyakorló repo.

1.Dokumentum létrehozása

1. Hozz létre egy üres HTML oldalt Emmet segítségével!
2. Adj meg egy főcímet “HTML alapjai” címen!
3. Csomagold a főcímet egy article-be!
4. Adj egy section-t a cikkhez egy alcímmel, amelynek neve szöveg!
5. A section-ön belül hozz létre egy bekezdést!
6. A bekezdés alatt hozz létre egy rendezetlen listát, amelynek elemei: egy félkövér szó és egy dőlt betűs szóKépek és multimédia!
7. Adj egy második section-t a cikkhez egy alcímmel: képek és multimédia!
8. Adj egy bekezdést!
9. Keresd meg images.google.com-ban a HTML5 logo-t és illeszd be a fotót a képek és multimédia section-be!
10. Hozz létre egy videó hivatkozást a ​https://www.w3schools.com/tags/movie.mp4​ fájlra!
11. Hozz létre egy audió hivatkozást a ​https://www.w3schools.com/tags/horse.ogg​ fájlra!
12. Adj egy harmadik section-t a cikkhez egy alcímmel: táblázatok!
13. Hozz létre egy táblázatot, amelyben a következő adatokat adod meg (a stílussal nefoglalkozz)! Dokumentum vázlatSectionTag-ekNehézségSzövegp, strong, emph2Képek és multimédiaimg, video, audio3 Táblázatoktable5
14. Ne felejtsd el a caption-t a táblázat tetején! Fejléc, lábléc, navigáció
15. Adj egy fejlécet a dokumentumhoz!
16. A fejlécen belül hozz létre egy navigációs elemet! A navigációs elembe helyezz elhárom hivatkozást a három section-re! Helyezz el belső hivatkozásokat úgy, hogy a fejlécben lévő hivatkozásokra kattintva az adott helyre navigálj a dokumentumban! Használj ID attribútumot!
17. Adj egy láblécet a dokumentumhoz, amelybe írj bele egy copyright 2020-as sort! A copyright szimbólumot (©) a © karakterek begépelésével tudod beírni.

Kapcsolat oldal

1. Hozz létre egy Kapcsolat nevű HTML oldalt ugyanabban a könyvtárban!
2. Emmet segítségével hozz létre egy üres HTML oldalt!
3. Főcímként add meg, hogy Kapcsolat!
4. Módosítsd a HTML alapjai című oldal fejlécében lévő navigációs elemet úgy, hogyegy negyedik hivatkozás a Kapcsolat oldalra mutasson! Igyekezz úgy megadni a hivatkozásokat, hogy mindkét oldalon változtatás nélkül működjenek!
5. Másold a főoldal fejlécét a Kapcsolat oldalra, és teszteld le, hogy mindenhivatkozásod működjön! Fontos, hogy mindkét oldalon változtatás nélkül működjeneka navigációs elemek.

Űrlapok

1. Adj egy section-t az oldalhoz, amelynek címe “Írj nekünk!”
2. Hozz létre egy űrlapot, amelyben a következő elemek vannak:a.Egy név szövegmező (placeholder szöveg: Név)b.Egy email szövegmező (placeholder szöveg: E-mail)c.Egy üzenet szövegdoboz (placeholder szöveg: Üzenet)d.Egy jelölőnégyzet (checkbox), amelyben jelezheted, hogy sürgős az üzenet!Alapértelmezés szerint ez a jelölőnégyzet ki van kapcsolva
3. Mindhárom mezőhöz adj egy címkét, amelynek nevei Név, E-mail, Üzenet! Ha acímkére kattintasz, a HTML oldalon legyen látható, hogy fókuszba kerül a címkéheztartozó input mező.
4. Adj az űrlaphoz egy beküldő gombot “Üzenet küldése” néven!
5. Hozz létre formspree-ben egy beküldési hivatkozást, és teszteld le, hogy működik-eaz űrlapÖnellenőrzés!
6. Validáld mindkét dokumentumot egy HTML validátorral!Tartsd meg ezt az oldalt, mert a CSS gyakorlatban használni fogjuk!

Copyright © 2020- Zsolt Nagy