WEB fejlesztés

A WEB dokumentumok felépítésére vonatkozó szabályokat a World Wide Web Consortium (W3C) alakítja. A képzés első felében ennek a W3 szabványnak készség szintű megismerése elengedhetetlen, mert a második felében erre épülnek a tantárgyak.

A 2014 október 28.-án megjelenő HTML5 szabvány változásainak az egyik meghatározó célja az volt, hogy a keresőmotorok számára jobban értelmezhető legyen a weboldal tartalma (SEM – Search Engine Marketing). Ehhez sok új elemet definiált nav, header, footer, aside, section, thead, tbody, video, canvas, ... és nagyon határozottan szétválasztotta a funkcionális részeket.

  • A HTML fájlban csak a strukturális elemek /-tag-ek -, amelyek leírják az adott szöveg "célját"/ helyezendők el.
  • A megjelenítésre vonatkozó elemeket CSS fájlban kell elhelyezni.
  • A WEB oldal interaktivitását kizárólag az ECMA-262 szabványban meghatározott JavaScript biztosítja, így a böngészőknek nem feladadatuk más script nyelvek futtatása. (pl. Adobe Flash)

A W3C-n nagyon részletesen, indoklásokkal találjuk a szabványt. Programozásban jobban használhatóak az ugyanolyan hivatalos Mozilla project-ben található leírások (HTML5, CSS3 és JavaScript).

Nem szabad megfeledkeznünk arról, hogy a szabványok napjainkban is fejlesztés alatt vannak. Az általunk készített oldalakat mindenképpen ellenőrízzük le, megfelelnek-e az éppen aktuális szabványoknak!

CSS szelektorok

Egyszerű szelektor (elemek kiválasztása név, azonosító, osztály alapján) 
            body {
                backgound-color: aqua;
            }
            .zoldbetu {
                color: green;
            }
            #logo {
                width: 100px;
            }
Összetett kiválasztók (az elemek kiválasztása a köztük lévő kapcsolat alapján)
  • leszármazott választó (szóköz)
  • gyermekválasztó (>)
  • szomszédos testvér választó (+)
  • általános testvérválasztó (~)
Pszeudo osztály szelektorok (elemek kiválasztása állapot alapján) 
            
                a:visited {
                    color: #00FF00;
                }
                a:hover {
                  color: #FF00FF;
                }
                p:first-child {
                  color: blue;
                }
Pszeudo elem választók (egy elem egy részének kijelölése) 
                p::first-line {
                    color: #ff0000;
                    font-variant: small-caps;
                }
Attribútum választók (elemek kiválasztása attribútum vagy az attribútum értéke alapján)
  • [attribute] szelektor egy megadott attribútummal rendelkező elemek kiválasztására szolgál.
  • [attribute="value"] szelektor meghatározott attribútumú és értékű elemek kiválasztására szolgál.
  • [attribute~="value"] szelektor egy adott szövegrészt tartalmazó attribútumértékkel rendelkező elemek kiválasztására szolgál.

Tanulás, gyakorlás

Nagyon sok oktatást kínáló oldal van, de ezek nem mindegyike vette át a filozófiát és nem biztos, hogy naprakészen tudják tartani, ezért leginkább a W3C által üzemeltetett W3Schools-t ajánlom. A szakmai képzéshez részemről ajánlott oldalak:

A legfrissebb szabványokat részletesen bemutató oldal a Mozilla

Érdekességek