Serpent.

Építs portált egyszerűen!
Ugrás a tartalomhoz
  • Before és After

    Before és After – Előtte és Utána. Ez a két dolog CSS -ben igazán hasznos tud lenni, sőt. Segítségével tartalmat fűzhetünk az adott elem elé / mögé HTML használata nélkül. A tartalmat a content -tel tudjuk megadni: p::before{ content: “Előtte “; } p::after{ content: ” Utána”; } Előtte   Ez a tartalom   Utána Ez lenne az […]

  • Mit NE csinálj design készítésekor

    Az aktuális trendek szinte mindig változnak, beszéljünk akár divatról, tévéműsorokról vagy akár sablonkészítésről. Ezek ugyan mindig változnak, de ha úgy vesszük, pár “aranyszabály” mindig van. Most ezekről szeretnék mesélni nektek, konkrétabban arról, hogy mit tartok mai szemmel nagy hibának design készítésekor. Egyébként, készítettem egy új projektdobozt, amit itt(link) tudtok meglesni 🙂 Betűtípusok Nehéz lehet megtalálni […]

Alap HTML tároló elemek

Ha saját weboldalt szeretnél és az ehhez tartozó sablont te akarod elkészíteni, elengedhetetlen, hogy tároló elemeket használj. Ha egy ténylegesen jól kinézetet akarsz, nem elegendő a div használata. A továbbiakban azokról a hasznos, alap tároló elemekről lesz szó, amikkel úgymond egy csontvázat adunk az oldalunknak.

Hogy miért fontos több tároló elemet is használni a div -en kívül? Nos, képzeld el, hogy böngészel egy oldalt. Némely böngészőben megtalálható az olvasómód, és ezt használva például az én oldalamat így mutassa:

(katt a képre a teljes méretért)

Ezek a tároló elemek abban segítenek, hogy a böngésző felismerje a tartalmat. Ha csak divet használnék, katyvaszként jelenne meg. Tudom, azt gondolod, hogy az olvasó módot biztos senki sem használja. Lehet, hogy aki éppen az oldaladra téved, nem fogja, de nem lehetsz benne biztos. Ahány ember, annyi szokás. Rövidre fogva, ezek a tagek megmondják a böngésződnek, hogy milyen tartalmat, információt jelölnek, hogy milyen részét is képezi az oldaladnak az adott tartalom.

A legtöbbjük új, mivel a HTML5 -tel jelentek meg. Mindegyikük páros tag, azaz:

<párostag></párostag>

header – Avagy a fejléc. Nem összekeverendő a headdel!  Akárcsak minden más, az alábbiakban bemutatásra kerülő tároló elem, ez is a body -n belül helyezkedik el. Ebben szoktuk megjeleníteni a navigációs sávot, az oldal címét, logóját vagy esetleg rövid leírást.

main – a dokumentum (az oldalad) tartalmát jelöli. Legtöbb esetben olyan információt tartalmaz, ami nem ismétlődik (ilyen például az oldalsáv, vagy a fejléc és a lábléc). Célszerű csupán egyszer használni.

nav – Avagy a navigációs sáv. Ebben csupán azokat a linkeket helyezzük el, amik menüpontként szolgálnak.

section – Mint ahogy a neve is sugallja, szekció. Én általában modulnak használom.

article – Egy cikk, bejegyzés, vagy akár egy hozzászólás. Voltaképp külön álló tartalom.

aside – Mellékes tartalom. Én általában sidebarként használom.

footer – Avagy az oldal, vagy egy section lábléce. Ebben általában információkat, elérhetőséget, navigációs sávot, vagy akár widgeteket helyezünk el.

és végül talán a leghasznosabb:

div – Szakaszt jelöl. Gyakorlatilag bármire használhatjuk, persze ettől még célszerűbb az adott  feladatnál az adott tároló elemet alkalmazni.

Oszd meg az ismerőseiddel