Mielőtt belekezdenék egy mélyebb témába, el kell hogy mondjam, hogy a HTML5 és a CSS3 egy egyszerű páros, semmi bonyolult dolog nincs bennük, ha szánunk rá időt gyakorlatban ezek elsajátítására. Igen, direkt írtam gyakorlatot, mert hiába az elméleti tudás, ha mögötte csak copy-paste van, és nem is tudod, hogy miért működik a kód, úgy ahogy. Milyen folyamatok vezetnek el ahhoz, hogy e kettő párosának megtanulásával, eljuss egy olyan szintre hogy mellette sok infót el tudjon raktározni az elméd? Megmutatom!
Amikor annó nekiálltam ezeknek a megtanulásának, volt olyan hogy egy div-et nem zártam le valahol gyakorlat közben és órákon át kerestem, szinte már el tudtam volna magam bőgni, hogy ilyen bagatel hibába estem. Hidd el, ezen bárki áteshet eleinte, szóval az önsanyargatást ki kell tudni zárni, tudom nehéz, mert akik igazán fanatikusan akarnak valamit, egyfajta megfelelési kényszerrel is küzdenek maguk felé. A volt tanárom mondta nekem annó:
"hogyha van egy hiba, amit nem találsz órákig, akkor inkább írd előlről az egészet." D.P.
Na de mi is az a div, amit nem zártam le? Kezdjük az elején. Egy kis történeti áttekintés, ami még érdekes is, nem árt, hiszen ez egyfajta tisztelet a szakmának.
Történeti kitekintés
A HTML (HyperText Markup Language=hiperszöveges jelölőnyelv), egy leíró nyelv, amit weboldalak létrehozására fejlesztettek, informácók közlésére. Ez egy internet által használt szabvány amit a W3C (a Word Wide Web Consortium: Fejlesztésekkel szabványokkal foglalkozó szervezet, akik mint egy szektás csoport úgy hírdetik az open source, nyilt forráskóddal létrehozott szoftverek igéjét. Már önmagában emiatt is illik róluk tudni.) és a WHATWG (Web Hypertext Application Technology Working Group) támogatásával jött létre.
A W3C-nek az elnöke Tim Berners-Lee, aki az URL (Uniform Resource Locator, univerzális erőforrás azonosító) és a HTTP (HyperText Transfer Protocol) és a HTML eredeti megalkotója. Akit érdekel mélyebben a HTML története, sok sok érdekes információval gazdagodhat ezen az oldalon.
Tehát megalakultak ezek a szabványok. Ezek ugye tartalmaznak nyelvi elemeket, megkötéseket, böngésző támogatottságot, és sok sok egyéb hasznos dolgot. A HTML egy élő szabvány, amely technikailag folyamatos fejlesztés alatt áll. A jelenlegi HTML szabvány verziójára HTML5 ként hivatkozunk. Időrendi sorredben HTML 2.0, HTML 3.2, HTML 4.01 és a naprakész HTML5. Sok találgatás van a HTML6-al kapcsolatban, olvastam is nyílt levelezéseket a W3C levelezési rendszerén, de ezt jelenleg a W3C nem fogadta még el, és addig ez nem is tekinthető egy élő verziónak. A HTML5 a jelenlegi szabvány 2008 január 22-től napjainkig.
A le nem zárt div...
A HTML 4.01 verziójában még csak div-ben a div-ben a div-ek voltak és minden div-nek adtunk egy jelölő id-t (Pl.: <div id="header"></div> ), a HTML5-be kerültek be új szemantikai (nevük árulkodik a tulajdonságaikról) cimkék (HTML tag-ek) ezáltal az id-k használata érvényét vesztette minden div-ben, de jelenleg is használjuk ha szükség van rá. A multimédiát (video, audió) nem támogatta a 4-es verzió, csak a flash-t. A JavaScript támogatottságát javitották, a böngészőkompatibilitási problémákra nagy hangsúlyt fektettek, a karakterkódolás és a szabvány verzió infója(<!DOCTYPE>) rövidebb lett. Nagyon leegyszerűsitve, sok javitás ment végbe, és kevesebbet kell gépelni. :)
Emiatt ma már ezeknek a segítségével, ill. a technika és a text editorok és IDE-k (Integrated Development Environment) fejlődésével, segítségével a div lezárása már egyszerűbb, mint ez előtt 10 évvel.
DIV - mint általános tárolóelem && HTML5 tag-ek
Angol neve division (rész,részleg, elosztás), mely egy páros cimke, aminek van nyitó és záró tag-je. Akár mennyit ágyazhatunk egybe, ezt szokták általában Div Tree-nek (Div fának) is nevezni.
<div></div>
A weboldal egy logikailag összetartozó részének csomagolására és blokkszíntű formázásra használjuk. Alap esetben ez egy blokk elem: - display: block; , aminek a formázását szintén stílus deklarálással változtatjuk.
A HTML5-ben is használunk jelenleg is diveket, sőt, sokan azért is használnak még, mert alapvetően nem foglalkoztak ezzel a témával sokat, és kevesebbet használják a szemantikus HTML5 elemeket.
Népszerű elemek
<header></header>
<aside></aside>
<nav></nav>
<article></article>
<main></main>
<footer></footer>
<section></section>
<hgroup></hgroup>
<mark></mark>
<audio></audio>
<video></video>
<canvas></canvas>
<figure></figure>
<figcaption></figcaption>
Még több itt található, példákkal szemléltetve.
Ezeknek az elemeknek a stílus deklarálását, CSS (Cascading Style Sheet - Lépcsőzetes, örököltetett, egymásba ágyazott stíluslap) segítségével adjuk meg.
Röviden a CSS-ről
Az első stílus szabványt 1996-ban fejlesztette ki a W3C CSS1 néven aztán 98'-ban CSS2 néven, és már 1998-2000-től egészen napjainkig a CSS3-at fejlesztik, elmondásuk szerint nem is lesz CSS4.
"There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists." Tab Atkins in 2013
"Many people are waiting for CSS4 to come out. Where is it? When will it arrive? The answer is never. CSS4 will never happen. It’s not actually a thing." Jen Simmons in 2018
CSS3 4-es szintű moduláris fejlesztés van, aminek a legfrissebb változatát 2020 januárjában publikálta a W3C.
CSS3, HTML5 és a Hello World
Demo
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: #36CFFF;
}
</style>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<hgroup>
<h1>Hello World!</h1>
<h2>Hello Codepen!</h2>
</hgroup>
</main>
</body>
</html>
CSS importálása az oldalunkba
A stílus beemelése a weboldalunkba 3 féle képpen történhet.
-
Első a fenti ammikor a head-be style tag-ek közé írjuk a css-t, ezt max akkor használjuk, ha hírlevelet készítünk, vagy számlázó programhoz számlaképet, mivel azokat egy oldalon töltjük be, vagy a számlázó program oldalhibák nélkül is kell hogy működjön, vagy pedig a levelező klienssel, aminél szintén egyszerűbb ez az eljárás. Ezt hívjuk Internal (belső) Stylesheet-nek.
-
Második amikor inline style-t írunk a HTML-be. pl.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<hgroup>
<h1 style="color: #36CFFF;">Hello World!</h1>
<h2 style="color: #36CFFF; background-color: #ddd;">Hello Codepen!</h2>
</hgroup>
</main>
</body>
</html>
Ezt akkor használjuk maximum, ha JavaScript-ben adjuk meg a CSS formázást, akkor a JS inline teszi bele a CSS utasítást. Vagy még szintén hírleveleknél. De ez nem jó módszer, meg maga az inline style se, szóval ezt engedjük el szerintem. Tudjuk hogy van, létezik, szép és jó, de nem kell erőltetni, mert utána meg csodálkozunk ha egy 5mp-es formázás 25 perc lesz, mert nem tudjuk felülcsapni simán css-fájlban. Ezt hívjuk Inline (sorszintű) Stylesheet-nek.
- Harmadik pedig a külső fájlból való beemelés, ami a head tag-ek közé kerül. A link igazából linkeket generál a HTML után de még a html kódjaid előtt, a rel meg egy attribútum ami megmondja milyen kapcsolata lesz ennek a fájlnak a te kódoddal. Ez esetben 'stylesheet' ami az assets/css mappádban fog szerepelni a main.css.
Példa
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/main.css"/>
<title>This is document title</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<hgroup>
<h1>Hello World!</h1>
<h2>Hello Codepen!</h2>
</hgroup>
</main>
</body>
</html>
Ez az amit általánosan használunk. Ennek a neve External (külső) Stylesheet.
Szünet ON
A fentiek egyértelműen alapok, ami mély alapok, azért mély, mert sokan nem veszik a fáradtságot arra, hogy ezeket tényleg megértsék, pedig ezek igazán fontos, érdekes és egyszerű dolgok. Eddig ugye volt kis történeti betekintés a HTML és a CSS világába, volt egy kis HTML4 vs. HTML5, megismerkedtünk a CSS szintjeivel. Láttunk kódokat. Ez már nem is rossz nem? Ok persze ebbe még nincs benne a syntaxis, de ezt különféle tutorial oldalakról magadra szeded kb 5 perc alatt. A lényeg nem azon van, hogy mennyi elméletet magolunk be, hanem azon hogy már akkor elkezdjük írni a kódokat, amikor még fogalmunk sincs arról, hogyan fogunk egy szöveget pl. szívárvány színűvé tenni.
Ilyenkor mindig van kis feladat, amit részekre kell szedni, és azokra keresni neten. Keresni Stackoverflow-n. Próbálgatni a határainkat, minél több dolgot megérteni a propertyk-ből és azok értékeiből, a HTML tag-eket megszokni és azok osztályainak érthető neveket adni. Ezt egy előző cikkben már kifejtettem.
Szünet OFF: CSS3 és HTML szabályok szintaxisa pár szóban
Egy CSS deklaráció két részből áll: Egy tulajdonságból (property), aminek értéket szeretnénk beállítani. Egy értékből (value), amit a tulajdonságnak adunk értékül.
Ezt a tulajdonság-érték párost kettőspont választja el egymástól.
pl.:
/* this is a comment */
.class {
property: value;
}
#id {
property: value;
}
Minden CSS deklarációt egy pontosvessző zár le. (semicolon) Ez a pontosvessző a szabályhoz tartozó utolsó deklaráció végéről elhagyható. Ez azonban nem ajánlott, mert később hibákhoz vezethet.
Uncaught SyntaxError: Unexpected token ;
Az id-kat hash-el jelöljük css-ben ill. html-en belül az a tag-ekben is, ha leugró blokkot szeretnénk.
pl.:
<a href="#myId"></a>
<!-- valahol alul a kódban pedig -->
<section id="myId"></section>
<!-- TODO: comment -->
Commentek a kódban ahogy a fenti példában is látszik CSS-ben /* comment */ per csillag - csillag per közé kerülnek. HTML-ben pedig <!-- TODO: comment --> így néz ki.
Kódolási alapelvek, írott és íratlan szabályok
- h1 csak egy lehet egy oldalon és azt követi a h2, h3, h4, h5, h6. Viszont, ha vannak cikkek az oldalon, ott is lehet h1.
- ha nincs h2 akkor utána lentebb nem használhatunk h3-at, először h2-nek kell lennie valahol.
- alt-nak mindig adjunk leíró szöveget, mert a felolvasó programok ezeket olvassák fel a látás sérült embereknek.
- tag-et és tulajdonságot csak úgy használjunk, ha megnéztük a böngészőkompatibilitást. Azt itt könnyedén ellenőrizhetjük: https://caniuse.com/
- ahol partial (részleges támogatottság) van használjunk olyan property-t ami minden esetet lefed, vagy használjunk olyat is. Ez pl Flexbox-nál szokott gond lenni.
- 2000px-től nagyobb képeket ne használjunk desktopon se. Ill. tömörítsük a képeket. Tömörítésre ez kiváló: https://tinypng.com/
- Mobilra és tabletre is külön méretet vágjunk be. Alap Gimp, vagy PhotoShop használatot tanuljuk meg.
- képeknél ahol háttér típusú képeket használunk jpg vagy webp kiterjesztés legyen, ahol meg ikonok, logók vannak ott svg.
- hosszabb szövegek félkövérré tételére a 'strong' vagy a 'b' tag-et használjuk. A 'b' -tag-et viszont, csak akkor, ha semmi más opció nincs. (Seo barát)
Akkor Sitebuilder vagyok, leszek?
Ha ezeket megértetted, akkor pörgess végig valami tutoriált, mellé találj egy szakmai mentort aki útba irányit, csinálj legalább pár ref oldalt, mellé codepen.io-n csinálj kis részfeladatokat, gyakorolj sokat és ha már megy a HTML, CSS3 (nativan), akkor mellé tanulj egy Flexbox-ot, vagy egy CSS grid-et, vagy mindkettőt, mellé jöhet egy Bootstrap, vagy valamilyen CSS keretrendszer megértése, mellé pedig a JS natívan.
Ezekkel már elmondhatod hogy ha alapszinten mennek, hogy sitebuilder vagy, és ha meg tanulsz mellé pár JS framework-ot, pl a Vue.js (kezdőknek én ezt ajánlom), és a Vue.js mellé majd TypeScriptet akkor elmondhatod hogy programozol és webet || szoftver felületet és funkcionalitást fejlesztesz.
Van akinek a TypeScript és társai soha nem lesz programozás, persze ezt valahol meg lehet érteni hiszen még se egy Assembly, meg nem egy C++, de ugy gondolom hogy a körtét ne is hasonlítsuk össze az almával. Mindegyik nyelvnek és területnek megvan a nehézsége és könnyedsége. És minden embernek megvan a saját tanulási görbéje. :)
Tutorial oldalak pl:
Eredeti cikk megjelenése itt érhető el: codepen post
