HTML, CSS

A webprogramozás alapjai

Telekommunikációs forradalom napjait éljük. Néhány filozófusnak a múlt század derekán tett óvatos jóslata szerint egy olyan világ van kibontakozóban, amelyben az ember a technológia segítségével a Föld bármely pontján befolyással bírhat, jelen lehet.

Az igazság egyszerű: weboldal nélkül sem üzlet, sem szervezet nem működik többé. Aki ajánlatait nem tudja közzétenni a világhálón, az súlyos versenyhátrányba kerül. A világháló az emberek életét a legnagyobb mértékben átformáló médium. Az interface design ne-törd-a-fejem elve, az információ minél egyértelműbb, azonnali fogyasztásra alkalmas tálalása olyan ütemben változtatják a vizuális nyelvet, amilyennel elődeink nem konfrontálódtak.

A jó hír az, hogy az olyan korszerű szerkesztő szoftverekkel, mint a Dreamweaver a webszerkesztés nem is olyan nagy ördöngősség. Soha nem késő bekapcsolódni, mert minél később „érkezik” valaki, annál letisztultabb eszközökkel kezdheti a munkát. A webszerkesztés olyan alapvető kultúrtechnikává válik, mint a szövegszerkesztés vagy a böngészés.

A HTML (Hypertext Markup Language = Hiperszöveg-Leíró Nyelv) az emberiség legszélesebb körben használt nyelve. Ennek ismerete nélkül semmilyen magasabb webtechnológiát nem érthetünk meg. Bármivel is fogunk a későbbiekben weboldalazni (WYSIWYG-szerkesztők, szkriptnyelvek, tartalomkezelő rendszerek), alapfeltétel, hogy megismerkedjünk a HTML-lel. A HTML5-ben bevezetett új tagek sokat adnak a weboldalaknak és így a világhálónak. A 'szemantikus web' zászlaja alatt megpróbálnak minden információt a robotok (jellemzően keresőmotorok) számára egymással (még inkább) kapcsolatba hozhatóvá tenni. A jellegtelen divek helyett most már egy sor strukturáló elemünk van, amelyek egymással szemantikus kapcsolatban állnak; pl. cím-tartalom, tartalom-illusztráció, vagy tartalom-lábjegyzet kapcsolatban. A mikroadatokkal már szinte minden szóról megmondhatjuk, milyen kategóriába tartozik, a hivatkozások tipizálhatók. Jelentősen kibővítették az űrlapelemeket, validálásukat a böngésző elvégzi, és született néhány interaktív és alkalmazás-elem. A táblázatok okosabbak és helytakarékosabbak lettek, új médiaelemek könnyítik az életünket és egy vászon-elem, amelyre akár 3D-s grafikákat lehet rajzolni JavaScripttel. Utóbbival egyébként SVG-formátumú (akár mozgó-) képek is programozhatók és megállapítható vele a felhasználó földrajzi helyzete.

A CSS (Cascading Style Sheets = Lépcsőzetes Stíluslapok) a HTML-dokumentumokat formázó stílusnyelv. A World Wide Web konzorcium másfél évtizede sulykolja a tartalom és a forma szétválasztásának elvét. A CSS 3. verzióját jelentősen továbbfelfejlesztették: a media attribútummal a megjelenítő eszköz több paramétere is lereagálható (szélesség, tájolás, felbontás), azaz egyszerűen megadhatjuk, milyen elrendezést kérünk desktopon, tableten és okostelefonon (esetleg melyiken-mi legyen elrejtve), új szövegtulajdonságokat vezettek be (betűtípus-beágyazás, szövegárnyék, -elfordulás, többhasábos elrendezés), de új doboztulajdonságokat is (színátmenet, tetszőleges számú és átméretezhető háttérgrafika, lekerekített sarkak, dobozárnyék) - hogy csak a legizgalmasabbakat említsük. Bármilyen elemnek meg lehet adni az áttetszőségét is. De a hab a tortán, hogy minden paraméter animációra kész: pl. egy rollover-státuszra a megadott tulajdonságok adott idő alatt bontakozhatnak ki, ami lehetőséget ad az elemek ki- beröptetésére, -úsztatására, szín- vagy méretváltozásaira, forgatására. A CSS ma már alkalmas arra is, hogy kijelzőre varázsolják vele a naprendszert.

XML (eXtensible markup Language = Bővíthető kijelölő nyelv) alatt általában egy adatfelsorolást tartalmazó szövegfile-t értünk, amely gép és ember által is könnyen olvasható. Itt magunk találjuk ki saját tagjeinket, ezekhez attribútumokat rendelhetünk, amelyek saját értékeinket vehetik fel. Így az XML nem csak egy kijelölő nyelv, hanem egy nyelvcsalád, amelynek mindenféle vállalat számtalan dialektusát hozta létre. Az XML egy kevésbé robusztus alternatívája az olyan adatbázisnak, amelyet többnyire emberkéz frissít. A benne tárolt adatokat bármilyen program kiolvassa, hogy működéséhez felhasználja; webes környezetben általában JavaScripttel vagy PHP-vel olvassák ki az adatokat és HTML-ben jelenítik meg.

A HTML, a CSS és az XML a JavaScripttel együtt nem valami múló hype, hanem a weboldalak de facto sztenderdje, és az is marad.

A magánórákat igényeinek megfelelően tartjuk. A tanfolyamhoz jegyzetet biztosítunk.

Időtartam: kb. 40 × 60 perc

Alapismeretek

  • Az internet (hálózatok, infrastruktúra, kliens-szerver architektúra, protokollok)
  • A világháló (URL, HTTP, hiperszöveg)
  • Domain-név és tárhely, szolgáltatók és csomagjaik, FTP
  • Sztatikus és dinamikus oldalak
  • Fogalmak
  • A webböngésző
  • Általános billentyűparancsok
  • A böngészők billentyűparancsai és helyi menüje
  • Technológiai áttekintés:
    • kijelölőnyelvek: HTML, XML, XHTML, CSS
    • szkriptnyelvek: JavaScript, PHP, MySQL, phpMyAdmin

HTML lépésről lépésre

  • Szintaxis
    • dokumentum-struktúra
    • Dokumentum-Objektum-Modell
    • kijelölések és tagek
    • attribútumok és értékek
  • Stiláris szövegkijelölések
    • aláhúzott, áthúzott, felső és alsó index, félkövér, előformázott szövegrész
  • Szemantikus szövegkijelölések
    • dőlt, kiemelt, hangsúlyos, fontos, apróbetűs, rövidítés, idő, definíció, kód, változó, gépi output és input, törölt és helyettesített szövegrész, postai cím, tematikai elválasztás
    • Fejezetcímek és bekezdések
  • Mikroadatok
    • kategóriák és elemek
  • Idézetek
    • inline- és blokk-idézet
  • Hivatkozások
    • belső, külső
    • e-mail-, skype- és telefon-hivatkozás
    • relatív és abszolút elérés
    • target
    • kapcsolat-típusok
  • Felsorolások
    • rendezetlen, rendezett, definíciós
  • Interaktív elemek
    • részletek
  • Alkalmazás elemek
    • meter
    • progress
  • Grafika, webes képformátumok
  • Multimédia
  • iFrames
  • A fejléc elemei: meta-tagek, összekapcsolás külső erőforrásokkal
  • Táblázatok
    • Egyszerű táblázat
    • Táblázat fej- és lábrésszel
    • Oszlopok formázása oszlopcsoporttal
    • Cellák egyesítése
  • Űrlapok
    • strukturáló elemek: mezőcsoport, cimkék
    • szövegmezők: rejtett, egyszerű, e-mail, keresőmező, URL, telefon, szövegdoboz, beszédfelismerés
    • számmezők: egyszerű, szélsőértékek és léptetés, dátumválasztók, csúszka, színválasztó
    • menük: legördülő, opciócsoport, adatlista
    • rádiógomb-csoport, jelölődoboz, bejelölés, kötelező
    • file-feltöltés, típuskorlátozás
    • kulcsgenerálás
    • output
    • gombok: küldés, visszaállítás, képgomb, általános gomb
  • Űrlapelemek formázása
    • szélesség és maximális karakterszám
    • automatikus fókusz, automatikus kitöltés
    • érvényesítés: kötelező, tipp, sablon, érvényesítés feloldása
    • alapértelmezett és fix érték, alapértelmezett bejelölés
  • Médiumok
    • Képek, képformátumok (JPG, GIF, PNG, SVG)
    • Beágyazott médiumok (multimédia-formátumok: MP3, MOV, MP4, OGV, WEBM, SWF)
    • Audio, hangformátumok (MP3, OGG)
    • Video, videoformátumok (MP4, OGV, WEBM)
  • Vászon
    • grafikai elemek és programozásuk
  • Strukturáló elemek
    • Általános blokk és inline-elem
    • Fejléc, fejezetcím-csoport, navigáció, részleg, cikk, oldalelem, lábrész
    • normalize.css: böngészők viselkedésének egységesítése
    • 3-oszlopos layout felépítése
  • Mediaqueries: különböző képernyőszélességek és –tájolás lereagálása
    • Átalakítás 2-oszlopossá (tablet szélességben)
    • Átalakítás 1-oszlopossá (okostelefon szélességben)

CSS 1-2 lépésről lépésre

  • CSS alkalmazása HTML-re
    • Külső stíluslap alkalmazása
    • HTML-lapon belüli stílusok
    • HTML-tagre vonatkozó stílus
    • Általános szintaxis
    • Többszörös kiválasztás (ÉS-kapcsolat)
  • Kiválasztók (szelektorok)
    • Tagek
    • Osztályok
    • Azonosítók
    • Univerzális kiválasztó
    • Gyermekkiválasztó
    • Testvérkiválasztó
  • Látszólagos kiválasztók
    • Dinamikus látszólagos kiválasztók
    • Linkek státuszainak kiválasztói
  • Öröklődés
  • Kaszkádolás
  • Mértékegységek
    • Színek
    • Méretek
      • Relatív mértékegységek (pixel, em és ex, százalék)
      • Abszolút mértékegységek (SI-mértékegységek, tipográfiai pont, tipográfiai pica)
      • Elérési utak
  • Betűtulajdonságok
    • Betűtípus
    • Betűstílus
    • Betűváltozat
    • Betűvastagság
    • Betűméret
    • Sormagasság
  • Szövegtulajdonságok
    • Szín
    • Betűköz, szóköz
    • Szöveg-igazítás
    • Első sor bekezdése
    • Szöveg-dekoráció
    • Szöveg-transzformáció
    • Szövegárnyék
    • Sortörés és űrök kezelése
    • Függőleges igazítás
  • Felsorolások
  • Táblázatok
    • Táblázatcím
    • Szélesség
    • Keret
    • Üres cellák kezelése
  • Hivatkozások
    • Alapállapot
    • Fókusz-státusz
    • Rollover-státusz
    • Megkattintott státusz
    • Meglátogatott státusz
  • Háttér
    • Háttérszín
    • Háttérkép
      • Görgetése
      • Pozíciója
      • Ismétlődése
  • További tulajdonságok
    • Láthatóság
    • Megjelenítés
  • Dinamikus tartalmak
    • Karakterláncok
    • Képek
    • Idézőjelek
    • Számláló
    • Kurzor beállítása
  • Doboz-modell
    • Kitöltések
    • Külső margók
    • Keretek
    • Fentiek paraméterei
    • Méretezés
    • Átméretezés korlátozása
    • Túlcsordulás
  • Pozícionálás
    • sztatikus, relatív, abszolút, rögzített
    • Doboz elmozdítása
    • Lebegés
    • Rétegek
    • Kommentálás

CSS 3 lépésről lépésre

  • Mediaqueries
    • okostelefonos megjelenítés vezérlése
    • médiaspecifikus utasítások mentése egyazon stíluslapba
    • formázás két határ közötti szélességű kijelzőkre
    • nyomtatás formázása
    • formázás adott felbontású nyomtatásra
    • formázás adott tájolású eszközre
    • formázás adott képarányú eszközre
    • formázás adott színmélységű megjelenítőkre
  • Új szövegtulajdonságok
    • Betűtípus beágyazása
    • Szövegárnyék
    • Szövegkontúr
    • Szövegelfordulás
    • Sorvégi elválasztás
    • Szövegtúlcsordulás
    • Többhasábos elrendezés
  • Új doboztulajdonságok
    • Színátmenetek (lineáris, átlós, sugárirányú)
    • Szegélykép, ismétlése, nyújtása
    • Lekerekített dobozok (azonos sugárral, részletezetten, eltérő vízszintes és függőleges sugár, %-os meghatározás)
    • Dobozárnyék
    • Doboz-tükrözés
    • Transzformációk (átméretezés, elforgatás, eltolás, ferdítés)
    • Doboz felhasználói átméretezése
    • Átméretezhető háttérgrafika
    • Többszörös háttérgrafika
    • Rugalmas doboz-modell
  • Új általános tulajdonságok
    • Áttetszőség
    • Animáció
  • Új kiválasztók
    • Attribútumkiválasztó
      • Értékkiválasztók
      • Boole-attribútumkiválasztó
    • Gyermekkiválasztók
      • Első gyermek kiválasztó
      • Minden n-edik előfordulás kiválasztó
      • Páros és páratlan gyermek kiválasztó
      • Utolsó gyermek kiválasztó
      • Egyetlen gyermek kiválasztó
      • Gyermektelen elem kiválasztó
      • Kivétel-kiválasztó
    • Kijelölés-kiválasztó

Kitekintés: JavaScript

  • Rajzolás Canvas-szel
  • SVG-grafika programozott animációja
  • Geolocation: földrajzi helyzet megállapítása

Hasznos linkek

Böngésző-statisztikák

Még több statisztika

Domain foglaltság-kijelző az összes kiterjesztéshez

Vakszöveg-generátor

Külső űrlap-szolgáltató sztatikus oldalakhoz

Adobe termékek

FileZilla FTP-kliens

A W3C online HTML-érvényesítője

A W3C online CSS-érvényesítője

A CSS szépségeiről

Fix, folyékony, hibrid és rugalmas sablonok - kezdőknek

Sablonkészítő - elfoglaltaknak

Kész weboldal-sablonok - lustáknak

CSS3 Generator

CSS 3 Maker

CSS3 átmenetes hátterek

Betűtípusok #1, Betűtípusok #2, Google WebFonts

HTML-redukáló

CSS-redukáló

JavaSript-redukáló

Képforrás 1, képforrás 2

Színpaletták böngészője

UTF-8 ikonok - inkább, mint súlyos képekkel

... de ha mégse lenne elég: ikonok minden célra, IcoMoon

Mennyire korszerű a böngészője? HTML-teszt és CSS-teszt

Oldalbetöltés-gyorsító

Firebug weblap-analízis

Fireshot :: weblap-fényképező és -exportőr

Web Developer Toolbar

Megoldások a responsive webdesign kihívásaira

JavaScript könyvtár a weboldal-elemektől komplett mobiloldalakig

Kapcsolódó modulok: Grafikus Webdesign, Joomla!, Online Marketing