Források
- Minta: Kép az egész honlapról, hogy hogy kellene kinézzen
- kép, amit be kell szúrni: első
- kép, amit be kell szúrni: második
- kép, amit be kell szúrni: harmadik
- Nyers szöveg: Ezt kellene formázni. A markdownról szóló részhez beszúrtam 1-2 mondatot arról, hogy ezt használjuk a githubon is, az nem szerepel a képen!
Feladat
A feladatok megoldásához Visual Studio Code vagy Sublime Text javasolt. SharePoint Designerrel vagy egyéb wysiwyg-stílusú szerkesztővel ne dolgozzatok.
Ez a feladat a HTML nyelvről szól, ezért most kivételesen fontos, hogy semmilyen formázáshoz ne használjatok CSS-nyelvet. Még akkor sem, ha a dolgoknak ez lenne a korszerű és igényes megvalósítása. Amíg az érettségiben HTML-es formázást is kérnek, addig ehhez sajnos ragaszkodnom kell.
- Hozd létre a mellékletben található dokumentumot. Minden nézzen ki úgy, ahogy az a mintán látszik.
- Gondoskodj róla, hogy a dokumentum kódolása megfelelő legyen (azaz a magyar nyelvben szokásos ékezeteket képes legyen kezelni.)
- Semmiképpen ne legyen szöveg 'csak úgy' a dokumentumban, mindenről legyen megmondva, hogy az 'micsoda': bekezdés, cím, alcím, táblázat cellája stb.
- Ne feledjétek: a "lorem ipsum..." tesztszövegeket legenerálja a Visual Studio Code / Sublime Text, ha beírod, hogy lorem, és utána nyomsz egy TAB-ot.
- A dokumentum címe legyen ez: "HF-HTML".
- A gimnázium honlapjára mutató szöveg legyen link. A linkre kattintva a böngésző nyisson új lapot, tehát ne vigyen el a kattintás helyéről.
- A modern honlap szemantikus elemeiként szolgáló kép a w3schools-on található itt, a A DOM fejezetben található kép pedig itt található. A képet ne töltsd le, mikor megjeleníted, hanem mutasson kifejezetten ide, tehát ha a w3schools-on frissítik a fájlt, a honlapod is az új verziót mutassa!
- A bme honlapjáról készült képek mindegyike a képernyő szélességének 30%-át tegye ki! (Ehhez a td-k szélessége legyen 30%, a képek szélessége pedig 100%! Ha csak a kép szélességét állítod be 30%-ra, akkor az a td szélességének lesz a 30%-a, ami td eleve a képernyő szélességének 30%-át teszi ki alapból. Ha nem állítasz 100%-ot a kép szélességének, akkor az viszont eredeti méretben jelenne meg, ami nagy.)
- A bme-s képek alatt a ? magyarázatánál a link vigyen a korábbi azonos nevű szakaszra. Ezt úgy érheted el, hogy a a szakasznak adsz egy id attribútumot egy általad választott névvel, és a linkelés során a href értéke legyen ez a név elöl egy hashtag-gel megtoldva.
- A "DOM" szakasz fölött két vízszintes vonal szerepel, amelyek az oldal szélességének háromnegyedét teszik ki.
