TD1 1. rész; HTML - jelölőnyelv a dokumentumok strukturálásához

A bemutató célja annak megértése, hogyan íródnak az alap weblapok, más néven statikus oldalak (Web 1.0). Egy ilyen weboldal két részből áll:

HTML: A HTML fájl tartalmazza az oldal felépítését és tartalmát; a sima szöveg mellett értelmet ad a szövegnek azzal, hogy címkék használatával jelzi, hogy mi tartozik egy bekezdésbe, egy címbe stb.

CSS: A CSS fájl felelős ezen elemek elrendezéséért (ezt a bekezdést rózsaszínűre tegye, ehhez a címhez használja a „Sans Serif” betűtípust,…)

A böngésző (Firefox, Chrome, Safari, IE/Edge,…) az a szoftver, amely lehetővé teszi számunkra a weboldalak megtekintését. A bemutató célja annak demisztikálása, hogy a böngésző hogyan értelmezi ezt a két fájltípust. Ehhez egy olyan webhelyet fogunk létrehozni, amelynek renderelése megfelel a target.png fájlnak, az index.txt fájlból kiindulva, amely tartalmazza az elkészítendő webhely szinte „nyers” tartalmát.

Először annak a struktúrának (tehát HTML-nek) a megadását szenteljük, amelyet hozzáadhatunk a nyers tartalmunkhoz. Ezután az oktatóanyag második részében láthatjuk, hogyan lehet elérni a target.png által javasolt renderelést CSS fájl létrehozásával.

Szöveges dokumentum átalakítása HTML-dokumentumdá

A navigátor szerepe

Mint korábban említettük, a böngésző (Firefox, Chrome, Safari, IE/Edge,…) feladata a weboldalak megtekintése. Tehát a böngésző átalakítja a HTML/CSS-t tartalmazó szövegfájlt elrendezéssé, képekkel ...

A TD oldal egy weboldal. Nyissa meg az oldal forrásait az oldal megjelenítéséhez használt HTML-kód megtekintéséhez (kattintson jobb gombbal, majd a forráskód vagy a Ctrl + U).

Weboldal létrehozásához csak hozzon létre egy szövegfájlt, és adja meg a .html kiterjesztést, hogy a böngésző megértse, hogy HTML dokumentumként kell értelmeznie.

Mentse az index.txt fájlt helyileg a HTMLCSS/TD1/mappába .
Készítsen index.html másolatot az index.txt fájlból ugyanabban a mappában.

Nyissa meg az index.txt és az index.html fájlokat is a böngészőben.
Milyen megjelenítési különbségeket lát? Miért ?
Hogyan jelennek meg a HTML-dokumentum sortörései ?
Hogyan jelenik meg egy HTML szöveg, amelyet körülvesz a -> ?

A HTML nyelvi szabvány

Az index.html dokumentumunkat HTML-dokumentumként értelmezi a böngésző.

A HTML, amely a HyperText Markup Language rövidítése, egy jelölő nyelv, amely úgynevezett hipertext hivatkozásokat tartalmaz más dokumentumokhoz.

A HTML szabvány, vagyis egy teljesen leírt nyelv (ne habozzon gyorsan megnézni annak specifikációját, egy nagyon technikai, de átfogó dokumentumot).

Ellenőrizzük az index.html HTML5 szabványnak való megfelelőségét a https://html5.validator.nu/ ellenőrző segítségével. Milyen hibákat jeleznek ?

Kezdjük a hibával

Az érvényesítő elmondja nekünk, hogy várhatóan látni fogja a dokumentumunk elején. Ezt a címkét használják annak kijelentésére, hogy a dokumentum HTML5-ben íródott. Valójában több "HTML" szabvány létezik: HTML4, XHTML, HTML5, ... Manapság az emberek elsősorban a HTML5-et használják, és mi is ezt fogjuk tenni.

Ahhoz, hogy a dokumentum érvényes legyen, és HTML 5 dokumentumként ismerje el, hozzá a címke a fájl legelején.
Tesztelje újra a dokumentum megfelelőségét.

Az érvényesítő elmondja nekünk A karakterkódolást nem deklarálták.

A kódolás jelzi a fájl mentésének módját (UTF-8, ANSI, iso-8859-15, ...). Ha a legtöbb karakter normál módon kerül rögzítésre, akkor a speciális karakterek (ékezetek, œ, ...) egészen más módon rögzíthetők.

A karakterkódolás megadása ezért szükséges az oldalon található speciális karakterek megfelelő megjelenítéséhez. Mindig UTF-8 kódolást fogunk használni (és ideális esetben mindenki ezt is használja).

Hozzáadás tehát a következő sor, amely a dokumentum fejlécében lévő kódolást deklarálja közvetlenül a DOCTYPE után.

Nyissa meg újra az index.html fájlt a böngészőben, és ellenőrizze, hogy az összes ékezet megjelenik-e.

Jegyzet: Ha az ékezet még mindig nem működik, az azért vannem elég mondani, hogy a fájl UTF-8-ban van. A fájljának is kell lennie jól rögzítették az UTF-8-ban. Például a Notepad ++ alkalmazásban a kódolás a jobb alsó sarokban van jelölve. A menükben keresve konvertálhatja fájlját UTF-8 formátumra.

Tesztelje újra a dokumentum megfelelőségét.

Az utolsó hiba egy fej elemről szól, amelyről hiányzik egy cím. Javítsa ki weboldalát úgy, hogy a cím után illeszt be egy címet. Megtalálta, hogy mi változik a kijelzőn ?

Ezen a ponton az érvényesítő jelzi, hogy az index.html fájl érvényes HTML5 dokumentum.

HTML dokumentum szokásos felépítése

HTML címkék

Az előző gyakorlatban láttuk első címkéinket és. A dokumentum strukturálásához címkéket használnak. Megjegyzik a bennük található szöveget, és ezért jelentést adnak hozzá. Kétféle címke létezik:

A legtöbb címke tartalmat foglal magában: egy nyitó címkével kezdődnek, majd a tartalommal, amelyet "meg akarunk jegyezni", és egy záró címkével zárunk .
Például a címkét arra használják, hogy azt mondják, hogy az általa felölelt szöveg a dokumentum címe lesz.

Bizonyos címkék ne fogadja el a tartalmat: csak egy nyitó tagből állnak. Önzáró címkéknek is nevezik őket. Például láttuk a jelzőt, és hamarosan meglátjuk,
...

További példák:

Az alapszerkezet

Tehát használjunk címkéket egy jó HTML dokumentumstruktúra létrehozásához:

A nyelvi deklarációs sor után a dokumentum szerepel a címkében, és két részből áll:

a fejléc információkat tartalmaz a HTML dokumentumról, például
- egy (kötelező címke)
- az egyik a kódolás meghatározásához
a test tartalmazza a valódi tartalmat. A Közös címkék részben láthatunk példákat a címkékre.

A HTML dokumentum olyan, mint egy fa

A HTML címkék fa struktúrát adnak a dokumentumnak. Az index.html példánkban

a fa a következő:

a gyökérelem
és az elem két fia
és az elem két fia
A „Chuck Norris nem hivatalos oldal” az elem fia .

Frissítse az index.html oldalt úgy, hogy az tiszteletben tartsa a fenti HTML struktúrát.
(Hozzá kell adnia a címkéket, és)
Tesztelje újra a dokumentum megfelelőségét.

Webfejlesztő eszközök

Az oktatóanyag további részében a böngészőnk segítségével "ellenőrizzük" weboldalunkat. Ehhez a Chrome-ot vagy a Firefoxot javasoljuk. Nyomja meg az F12 gombot. A fejlesztőeszközöknek két különálló részük van, az egyik a HTML-nek, a másik pedig a CSS-nek szentelt. Ezek az eszközök kiválóan alkalmasak egy weboldal készítésének elsajátításához.

Három módon lehet egy adott elemre összpontosítani:

Ha egy egérgombbal jobb egérgombbal kattint a megjelenített oldalra, majd egy "Elem ellenőrzése/vizsgálata" követi, akkor a megfelelő HTML-kód megjeleníthető a fejlesztőeszközben.
Ha rákattint a fejlesztőeszközön, akkor ellenőrizheti az oldal érdeklődési területét (az egér mozgatásával).
Amikor az egérrel az egérrel a fejlesztőeszköz egyik eleme fölé viszi az elemet, az kiszínezi azt az oldalon.

Ismerkedjen meg ezzel a három technikával a TD oldal áttekintésével.
Például kattintson a jobb gombbal a "háromféleképpen ..." elemre, majd az "elem ellenőrzése" elemre. A fejlesztőeszköznek be kell mutatnia a HTML kódot, és közvetlenül rá kell helyeznie

Általános HTML-címkék

Megjegyzések HTML-ben

Lehetőség van megjegyzések hozzáadására a HTML-be. Ezeket a megjegyzéseket a böngésző nem értelmezi, ezért nem jelennek meg (de továbbra is jelen vannak a forráskódban). Ez tehát a fejlesztők által a fejlesztők számára hagyott információ. A címkék közé helyezik és ->:

Csak az index.html fájlban vannak megjegyzések, például annyi utasítás, hogy HTML-re cserélje őket. Ezeket a következő szakaszokban magyarázzuk el.

Értékpapír

Kezdjük azzal, hogy struktúrát adunk az oldalunkhoz. Ehhez a tartalom címkéket fogjuk használni