Egyedi motorok

Egyedi programozású rendszereket számos cég készít, jellemzően egyedi igényeket elégítenek ki.

Egyedi rendszerek előnyei

• Nincsenek ismert hibák, amit a hackerek (könnyen) kihasználhatnának.

• Azt az igényt elégíti ki, amire a megrendelőnek szüksége van.

• Nem tartalmaz felesleges funkciókat, így könnyebben optimalizálható.

Egyedi rendszerek hátrányai

• Nincs mögötte a közösség ereje, tudása.

• Jellemzően a legalapvetőbb funkciókon kívül mindent le kell fejleszteni.

• Nem jönnek ki új frissítések, csak ha ezért fizetünk.

• Megszűnik a fejlesztő cég nem biztos hogy (könnyen) találunk kompetens fejlesztőt.

• Az egyedi rendszerek költségvonzata is magasabb.

Webes tartalomkezelő rendszerek

A webes tartalomkezelő rendszerek (CMS - Content Management System) adatok (tartalmak) kezelésére szolgálnak, és lehetőséget biztosítanak több felhasználó kollaboratív együttműködésére.

Webes tartalomkezelők legjellemzőbb képességei:

• Tartalmak kezelése, szerkesztése (szöveges, képi, multimédia)

• Különböző tartalomtípusok kezelése (aloldal, blogbejegyzés, hír, publikáció, termék, naptár időpont stb.)

• Tartalmak rendszerezésének lehetősége (kategóriák, cimkék, stb.)

• Több felhasználó kezelése

• Felhasználói szintek (szuperadmin, admin, szerkesztő, tag, stb.)

• Látogatói statisztikák biztosítása

• Adatok exportálása, importálása

• Frissítéskezelő

• Bővíthetőség modulokkal, pluginokkal

• Különböző a design-t, és a megjelenést befolyásoló témák

Jellemző a bőség zavara, mind fizetős, mind ingyenes rendszerből számolatlan áll rendelkezésre, legelterjedtebb ezek közül:

WordPress

A WordPress egy nyílt forráskódú, ingyenes tartalomkezelő rendszer, eredetileg blogmotor volt, elsődleges célja a blog funkciók kiszolgálása, de sokoldalúsága, és számtalan bővítményének hála nagyon széles körben bevethető, akár webshop funkciókkal is fel lehet ruházni. 2003 óta létezik, és aktívan fejlesztik, számos technológia, például a Gutenberg interaktív szerkesztő a Wordpress-ből nőtt ki. Magyar közösség aktív, és magyar nyelvű kézikönyv is elérhető. Telepítése egyszerű, 5 perc alatt elvégezhető (híres 5 perces telepítés). A WordPressnek jelentős elterjedsége van, a Világháló öszes weblapjának 33.9%-a WordPress alapú, a tartalomkezelők piacán 60.7%-ot mondhat magáénak (2018-as adatok alapján).

Drupal

A Drupal 2000 óta létző nyílt forráskódú, ingyenes CMS, általános célra készült, a funkcionalitása bővítmények segítségével fejleszthető, bővíthető, a kinézete témázható (itt sminknek hívják). Telepítése, konfigurálása bonyolult a többi ingyenes CMS-hez képest. A magyar közösség aktív, létezik több magyar kézikönyv, fontos a Drupalaton, a Balatonnál megtartott éves Drupál konferencia. Sok magyar fejlesztőcég dolgozik ezzel a tartalomkezelővel (pl. Penceo, Cheppers).

Joomla

A Joomla 2005-ben jött létre nyílt forráskódu ingyenes rendszerként egy korábbi tartalomkezelőből a Mambo-ból. Bővíthető, és témázható CMS. A mai napig aktív a fejlesztése. Korábbi kiemelkedő népszerűségét átvette a WordPress.

Typo3

A Typo3 jellemzően német nyelvterületen elterjedt 2001 óta létező nyílt forráskódú ingyenes tartalomkezelő rendszer.

Webshopok

A webshopok termékek és szolgáltatások forgalmazásra specializált tartalom kezelő rendszerek. A CMS alap funkciókon túl fel vannak ruházva az áruforgalom lebonyolításához szükséges képességekkel:

• Árucikkek kezelése, szerkesztése

• Raktárkészlet kezelése

• Vásárlók kezelése

• Kosár

• Online fizetés

• Online számlázás

• Szállítási költségkalkuláció

• Visszaigazoló emailek kezelése

• Könyvelés, statisztika

Webáruház motorok tekintetében is bőséges kínálatból választhatunk:

Magento

A Magento egy nyílt forráskódú e-kereskedelmi platform. Az Adobe 2018-ban megvásárolta a Magentót fejlesztő céget, és bemelte a Magentót a saját felhő szolgáltatásába (Adobe Commerce Cloud).

Opencart

Régi motoros a webshopok között az 1998 óta létező Opencart, ez szintén egy népszerű, nyílt forráskódú ingyenes rendszer.

WooCommerce

A WooCommerce plugin a WordPress-t ruházza fel webshop funkcionalítással. Létezik hozzá egy speciális WordPress téma, a Storefront, ez biztosítja a webshop megjelenést. Hatalmas előnye, hogy a WordPress-el együtt is gyorsan és egyszerűen telepíthető.

Egyéb alternatívák

Statikus oldal generáló (Static Site Generator)

A statikus oldal generáló szöveges állományokból, például markdown állományokból állít elő egy teljes weboldalt, ezt a műveletet rendszerint az oldal szerzője, fejlesztője végzi el egy asztali gépen. Nagy előnye ezeknek a rendszereknek, hogy nincs szükség számításigényes szerveroldali technológiákra, adatbázisokra, így ezek az oldalak kifejezetten gyorsak, és biztonságosak. Hátrányuk az interaktivitás hiánya (nincsenek háttérműveletek).

Statikus oldal generálók: Jekyll, Hyde, Gatsby

Felhő alapú weboldalkészítő (Cloude based website builder)

A kétezres évek közepén jelentek meg a felhő alapú weboldal készítő alkalmazások, és egyszerű kezelhetőségük miatt egyre növekszik a népszerűségük.

A felhő alapú weboldalkészítők egy online felületen drag and drop (fogd és vidd) technikával gyorsan összerakható, és szerkeszthető weboldalakat kínálnak.

Felhő alapú weboldalkészítő előnyei

• Gyorsan megtanulható a használata

• Nem szükséges csak minimális technikai háttér ismeret

• Számos előre elkészített sablon, és bővítmény

Felhő alapú weboldalkészítő hátrányai

• Kötve vagyunk a platformhoz, nem a miénk az oldal kódja, emiatt nem költöztethető

• Korlátozottan optimalizálható teljesítmény, SEO szinten

• Korlátozott funkcionalitása miatt egyedi igényeinket adott esetben nem tudja kielégíteni

Felhő alapú weboldal készítők: WIX, Squarespace, site123.com, Weebly, Unbounce

Gyökérelem

A html elem az összes többi elem szülője. Ebbe kerül az oldal teljes tartalma.

<html>
    <!-- Ide kerül az oldal tartalma -->
</html>

Jellemző, hogy az oldalak nyelvét a html elemen a lang (nyelv) tulajdonsággal határozhatjuk meg.

<html lang="hu">

HTML dokumentum fejléce

A head a dokumentum fejléce, a dokumentum metaadatait, és egyéb állományokra való hivatkozásokat tartalmaz, ezeket nem jeleníti meg a böngésző vizuálisan (jellemzően ezek általános információk, amit a böngésző program, internetes keresők dolgoznak fel).

<html>
    <head>
        ...
    </head>
</html>

A head elemet közvetlenül a html elemben kell elhelyezni.

HTML elemek a fejlécben

Az oldal címe

A title elemben megadott szöveg azonosítja a HTML dokumentumot, és ez jelenik meg a böngészőablak címsorában. Kötelezően szerepelnie kell a head elemben.

<title>Az oldal címe</title>

Az oldal meta adatai

A meta elemben helyezhetünk el információkat a weboldalunkról (ez nem jelenik meg a látható tartalomban). A meta elemeknek egy name (név) és egy content (tartalom) tulajdonsága van. A name határozza meg a meta információ típusát, a content pedig a hozzá rendelt információt.

<meta name="description" content="Oldal rövid leírása">

Kivétel a charset amivel az oldal karakter kódolását határozhatjuk meg, ez csak egy charset tulajdonsággal rendelkezik.

<meta charset="UTF-8">

Példák meta információra:

<meta name="description" content="Oldal rövid leírása">
<meta name="keywords" content="Kulcsszavak, vesszővel, elválasztva">
<meta name="author" content="Szerző Krisztina">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Linkek

A link elemmel hivatkozhatunk külső állományokra, ezek egy részét be fogja tölteni a böngésző. A link elemmel köthetünk be például egy CSS állományt a dokumentumunkba.

<link rel="shortcut icon" type="image/png" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />

Stílus

A style elemben a HTML dokumentum megjelenését szabályozó CSS stílusokat helyezhetünk el. A style nyitó és záró eleme által közrefogott részen a CSS nyelv szabályai érvényesek.

<style>
    p {
        color: red;
    }
</style>

HTML dokumentum törzse

A body a dokumentum törzse, ezt jeleníti meg a böngésző vizuálisan, ennek az elemnek a gyermeke az összes böngészőben megjelenő elem. A body elemet közvetlenül a html elemben a head elem után kell elhelyezni.

<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>    
</html>

Szöveges elemek

Címek

A HTML dokumentum tartalmát 6 cím mélységig lehet fejezetekre, alfejezetekre bontani, ezt a h1 h2 h3 h4 h5 h6 elemekkel tehetjük meg.

<h1>1-es cím</h1>
<h2>2-es cím</h2>
<h3>3-as cím</h3>
<h4>4-es cím</h4>
<h5>5-ös cím</h5>
<h6>6-os cím</h6>

Bekezdések

Az oldal szöveges tartalmát bekezdésekben p helyezhetjük el.

<p>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Praesent et ligula magna. 
Aliquam vestibulum fringilla tincidunt. 
Etiam in leo mi. Nunc magna quam, 
consectetur eget elit in, cursus lacinia 
justo. Aenean condimentum suscipit lectus 
sit amet pharetra. Maecenas varius ac 
libero nec varius. Praesent aliquam 
tincidunt tortor, nec imperdiet nisi 
pharetra a.</p>

Listák

Két típusát különböztetjük meg, számozott lista ol, és pontozott lista ul, mindkettőnek gyermekei a lista elemek li.

Számozott lista:

<ol>
    <li>Ez egy lista elem</li>
    <li>Ez is egy lista elem</li>
    <li>És ez is</li>
</ol>

Pontozott lista:

<ul>
    <li>Ez egy lista elem</li>
    <li>Ez is egy lista elem</li>
    <li>És ez is</li>
</ul>

A listákat egymásba is lehet ágyazni, így lehet több szintű listákat létrehozni.

<ol>
    <li>Ez egy lista elem</li>
    <li>Ez is egy lista elem</li>
    <li>És ez is, de ennek vannak gyermekei
        <ul>
            <li>Ez egy lista elem</li>
            <li>Ez is egy lista elem</li>
            <li>És ez is</li>
        </ul>
    </li>
</ol>

Képek

Képeket a HTML dokumentumba az img (kép) elem segítségével tudunk beilleszteni. Két kötelező tulajdonsága van, az src (forrás), ami a behivatkozott kép elérési útvonala, és az alt (alternatív szöveg), a kép tartalmának szöveges leirata.

<img src="images/kutya.jpg" alt="6 hetes alvó labradorkölyök">

Ha a képünk csak dekorációs célokat szolgál, és nem kapcsolódik szorosan a dokumentum szöveges tartalmához, akkor is kötelező az alt tulajdonság, de üresen hagyhatjuk az értékét.

<img src="page-decoration.png" alt="">

A képeket a böngésző megpróbálja eredeti méretükben megjeleníteni, amennyiben a megfelelő ablakméret rendelkezésre áll. A width (szélesség) és a height (magasság) tulajdonságokkal ezt felülbírálhatjuk. Ha csak az egyik értéket adjuk meg a böngésző az oldalarányok megtartásával számolja ki a másikat. Az értékek pixelben értendőek.

<img
    src="puppy.png"
    width="360"
    height="240"
    alt="3 hónapos labradorkölyök"
>

Szövegközi elemek

A HTML elemekben lévő szöveget szövegközi (inline) elemekkel módosíthatjuk. A szövegközi elemek teljes szöveges blokkok, vagy szövegrészletek megjelenését, viselkedését módosítják.

<p>A <strong>Web</strong> alapelveit <em>Tim Berners-Lee</em>, a
CERN részecskefizikai kutatóközpont munkatársa dolgozta ki
1989-ben. Eredeti  célja a különböző intézményekben világszerte 
dolgozó kutatók közötti  automatizált <em>információmegosztás</em> 
volt.</p>

A fenti példakódban a bekezdés egyes szakaszai fontosként (<strong>), vagy hangsúlyosként (<em>) vannak megjelölve.

<p>
    <b>Vastagon szedett szöveg</b> <br>
    <strong>Fontos szöveg</strong> <br>
    <i>Dőlt betűs szöveg</i> <br>
    <em>Hangsúlyos szöveg</em> <br>
    <mark>Kiemelt szöveg</mark>
</p>

<p>
    <small>Kis méretű szöveg</small> <br>
    <time>20:00</time> <br>
    E=mc<sup>2</sup> <br>
    H<sub>2</sub>O <br>
    <s>Elavult imformáció</s>
</p>

Hiperlink

A hiperlinkek, vagy linkek kattinthatóvá teszik a bennük foglalt szöveget. Linket az a elemmel lehet létrehozni. Van egy kötelező tulajdonsága a href ami azt a címet tartalmazza, amit a böngésző be fog tölteni kattintás esetén. Ez a cím lehet egy másik HTML dokumentum vagy egyéb állomány, internetes cím (URL), vagy e-mail cím.

<p>Ebben a szövegben egy szó <a href="document.html">kattintható</a>,
rákattintva a böngésző betölt egy másik HTML dokumentumot.</p>

A linkek módosítják a szöveg megjelenését is, a böngésző kék szövegszínnel, és aláhúzva jeleníti meg a kattintható szöveget, így könnyű a linkeket felismerni.

Span

Van egy szövegközi elem, ami nem hordoz jelentéstartalmat, és nem módosítja a bele foglalt szöveget vizuálisan, ez a span elem (szabad fordításban dirib-darab).

<p>Ebben a szövegben van egy <span>szakasz</span>, aminek 
nem módosul a kinézete, és a szemantikai jelentése</p>

Dekorációs elemek

Sortörés

A br (sortörés) elem új sorba töri a szöveget, amiben elhelyezzük, úgy hogy a br elem után következő szöveg már új sorba törik.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Donec facilisis sit amet nisi nec mattis.</p>

Vízszintes vonal

A hr (vízszintes vonal) elem egy vízszintes vonalat hoz létre. Célja a tartalom tagolása.

<hr>

Strukturális elemek

Általános konténer elem

A div (csoport, rész) elemmel hozhatunk létre általános gyűjtőelemeket, úgynevezett konténereket. A div nem hordoz semmilyen jelentéstartalmat, és a megjelenése is teljesen semleges, hasonlóan a korábban tárgyalt span elemhez, csak amíg a span szövegközi elem, addig a div blokkos elem.

Ezzel az elemmel foghatunk össze egy csoportba több elemet (ha úgy tetszik részekre bonthatjuk div elemekkel egy oldal tartalmát). A div-ekben bármilyen tartalom típusú elemet elhelyezhetünk, például címeket, szöveget, listákat, képet, linket, más div-eket, vagy egyéb strukturális elemeket.

<div>
    <!-- Ide kerülnek azok az elemek, amiket össze kell fogni egy csoportba -->
</div>

A div szemantikus variációi

A HTML korábbi verzióiban a div elemet ruháztuk fel szerepekkel a role (szerep) tulajdonság segítségével, ez a lehetőség most is megvan, de megjelentek a HTML5-ben új elemek amik kiváltják ezt az igényt.

Navigáció

A nav elem kifejezetten egy weboldalon belüli (aloldalak közötti) navigációra szolgál, így linkeket helyezhetünk el benne.

<nav>
    <a href="/homepage">Home</a>
    <a href="/contact">Contact</a>
</nav>

Bonyolultabb navigáció, például egy weboldal főmenüje esetében a linkeket lista elemekben csoportosíthatjuk a nav elemen belül.

<nav>
    <ul>
        <li><a href="/homepage">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/about">About us</a></li>
        <li><a href="/contact">Contact us</a></li>
    </ul>
</nav>

A menü linkek listába helyezése lehetővé teszi több szintű almenü struktúra létrehozását.

<nav>
    <ul>
        <li><a href="/homepage">Home</a></li>
        <li><a href="/products">Products</a>
            <ul>
                <li><a href="/products/books">Books</a></li>
                <li><a href="/products/magazines">Magazines</a></li>
                <li><a href="/products/comic">Comic</a></li>
                <li><a href="/products/albums">Albums</a></li>
                <li><a href="/products/guides">Pocket guides</a></li>
            </ul>
        </li>
        <li><a href="/contact">Contact us</a></li>
    </ul>
</nav>

Fejléc elem

A header elem használható egy weboldal fejléceként (ebbe kerül például az oldal logója, főmenüje), vagy kisebb tartalmi egységek fejléceként is szolgálhat. Nem összekeverendő a head elemmel!

Fő tartalmi egység

A main elembe kerül a lényegi tartalom egy oldalon, minden ami nem a tartalommal közvetlenül kapcsolatos (például navigáció), az ezen az elemen kívül helyezendő el. Egy HTML dokumentumban csak egy main elem helyezhető el.

Másodlagos tartalom

Másodlagos, a fő tartalomhoz csak kapcsolódó tartalmaz az aside elemben helyezhetünk el. Jellemző, hogy a weboldalak oldalsávjait (sidebar) aside elemekből építjük.

Lábléc elem

A footer elem a header elem párja, értelemszerűen vizuálisan a dokumentum (vagy a dokumentum egy alegységének) alján alkalmazandó.

Szekció

Egy nagyobb szerkezeti egységet tagolhatunk a section elemekkel kisebb egységekre.

Cikk

Az article egy nagyobb összefüggő szöveges tartalmi egység. Egy ilyen tartalmi egység lehet egy blogbejegyzés, hír, recept, fórum hozzászólás, közlemény... Egy HTML dokumentumban több article is lehet.

Űrlapok

Az űrlap elem

Űrlapokat a form elemmel hozhatunk létre, az összes kitölthető űrlap mező (pár kivételtől eltekintve) ebben az elemben helyezendő el. A form elem képes a tartalmát elküldeni a webszervernek.

<form>
    ...
</form>

A beviteli elem

Az űrlap mezőit az input (beviteli mező) elemmel hozhatjuk létre. Az input elem viselkedését, kinézetét meghatározza a type (típus) tulajdonsága.

<form>
    <input id="name" type="text" placeholder="Your name">
</form>

<form>
    <label>Szövegbeviteli mező</label> <input type="text"> <br>
    <label>E-mail</label> <input type="email"> <br>
    <label>Jelszó</label> <input type="password"> <br>
    <label>Állomány feltöltés</label> <input type="file"> <br>
    <label>Rádiógomb</label> <input type="radio"> <br>
    <label>Jelölőnégyzet</label> <input type="checkbox"> <br>
    <label>Gomb</label> <input type="button" value="Elküldés">
</form>

Címke elem

Az űrlap beviteli mezőit a label elem látja el feliratokkal. A label elem for tulajdonságában megadott egyedi azonosító összeköti a label-t az azonosítóval ellátott beviteli mezővel. Ekkor ha a címkére kattintunk, a kurzor automatikusan beáll a beviteli mezőbe.

<form>
    <label for="name">Your Name</label>
    <input id="name" type="text">
</form>

Ez a kötés létrejön akkor is, ha a beviteli mező a label gyermeke:

<form>
    <label>
        Your Name
        <input id="name" type="text">
    </label>
</form>

Szövegdoboz

A textarea hasonló a szöveges beviteli mezőhöz, csak ez egy több soros, és átméretezhető beviteli eszköz.

A rows és cols (sorok és oszlopok) tulajdonságaival meghatározhatjuk a kiinduló méretét is.

<form>
    <textarea rows="4" cols="50"></textarea>
</form>

Lenyíló lista

A select elem option elemeket tartalmaz, ezek a lenyíló lista választható opciói. Az option elemek közül az lesz az alapértelmezett, amelyik rendelkezik a kiválasztott (selected) tulajdonsággal.

<select>
    <option selected>Almafa</option>
    <option>Körtefa</option>
    <option>Barackfa</option>
</select>

Táblázatok

Táblázat

A table elem a táblázat szülőeleme, a sorokat a tr elemek képzik, az oszlopokat, vagy cellákat a td elemek.

<table>
    <tr>
        <td>Első sor, első oszlop</td>
        <td>Első sor, második oszlop</td>
        <td>Első sor, harmadik oszlop</td>
    </tr>
    <tr>
        <td>Második sor, első oszlop</td>
        <td>Második sor, második oszlop</td>
        <td>Második sor, harmadik oszlop</td>
    </tr>
</table>

Minden sorban egyező számú oszlopot kell elhelyezni.

Táblázat fejléc

Táblázat cella helyett lehet táblázat fejléc cellát alkalmazni, ez a th elem. A táblázat fejléc cellában lévő tartalom vizuálisan hangsúlyosabban jelenik meg.

<!-- Fejléc cellák vízszintesen. -->
<table>
    <tr>
        <th>Fejléc</th>
        <th>Fejléc</th>
        <th>Fejléc</th>
    </tr>
    <tr>
        <td>Cella</td>
        <td>Cella</td>
        <td>Cella</td>
    </tr>
</table>


<!-- Fejléc cellák függőlegesen. -->
<table>
    <tr>
        <th>Fejléc</th>
        <td>Cella</td>
        <td>Cella</td>
    </tr>
    <tr>
        <th>Fejléc</th>
        <td>Cella</td>
        <td>Cella</td>
    </tr>
</table>

Felsorolt elemek listája

HTML állomány kiterjesztése

A HTML állományok kiterjesztése .html vagy .htm lehet.

A böngészők, és a fejlesztésre használt szövegszerkesztők automatikusan felismerik, és statikus weboldalként kezelik ezeket az állományokat.

Doctype

A HTML dokumentum a típusmeghatározással kezdődik, ez a !DOCTYPE.

Ez alapján azonosítja be a böngésző a dokumentum típusát, ettől függ az elemek megjelenítésének módja.

Kötelezően a HTML állomány első sorában, a többi elem előtt kell elhelyezni.

A !DOCTYPE nem érzékeny a kis- és nagybetűk különbözőségére

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".../xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".../xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ".../xhtml1-frameset.dtd">

Régebbi verzióknál a !DOCTYPE tartalmazta a DTD (Document Type Definition) állományokra mutató hivatkozást, a HTML 5 esetében ez az elem is egyszerűsödött.

HTML 5

<!DOCTYPE html>

Megjegyzések (Comment)

A HTML állományban elhelyezhetők megjegyzések:

<!-- Ez egy megjegyzés -->

A megjegyzés nyitó <!--, és záró --> karaktersorozata közötti részt a böngésző figyelmen kívül hagyja.

A megjegyzés lehet kód magyarázat, jelölhetjük vele szekciók elejét és végét, ez a forráskód olvashatóságát könnyíti.

Elrejthetünk vele HTML elemeket is:

<ul>
    <li>Alma</li>
    <!--<li>Körte</li>-->
    <li>Barack</li>
</ul>

A fenti példában a középső lista elemet nem hozza létre a böngésző.

HTML Címkék (Tag)

A HTML dokumentum tag-ekből (címke) épül fel, ezekből képezi le a böngésző a HTML elemeket, miután beolvasta a dokumentumot.

Egy lehetséges HTML elem:

<elem tulajdonsag="ertek">tartalom</elem>

A HTML elemek nyitó és záró tagből állnak, amennyiben lehet tartalmuk:

Az elemek egymásba ágyazhatóak:

<ul>
    <li>Ez egy lista elem</li>
    <li>Ez egy másik lista elem</li>
    <li>Ez pedig egy harmadik!</li>
</ul>

A fenti példában az ul egy lista, amiben lista elemek li vannak, ez a tartalma. Az li-k az ul gyermek elemei, és egymásnak testvér elemei.

Vannak HTML elemek, amiknek nem lehet tartalma, így záró tag-re nincs szükség:

<br> <!-- Sortörés -->

<hr> <!-- Vízszintes vonal -->

<img src=kep.jpg> <!-- Kép -->

Tulajdonságok (Atributes)

A HTML elemeket fel lehet ruházni tulajdonságokkal, illetve egyes HTML elemeknek kötelező megadni bizonyos tulajdonságokat.

Korábbi példa:

<elem tulajdonsag="ertek">tartalom</elem>

A tulajdonságok a nyitó tag-ben helyezhetőek el, szóközökkel elválasztva egymástól, és HTML tag nevétől.

Minden tulajdonság egy név-érték pár, balra a tulajdonság neve, jobbra az értéke, egyenlőségjellel elválasztva.

Az értéket idézőjelbe kell tenni, ha tartalmaz szóközt. Bár nem kötelező, az olvashatóság megkönnyítése érdekében ezt érdemes minden esetben kitenni.

Egyes tulajdonságok a HTML elemünk azonosítását könnyítik meg.

Az id (egyedi azonosító) tulajdonsággal egyedi nevet adhatunk elemeinknek:

<h1 id="main-title">Ez a főcím</h1>

Az class (osztály) tulajdonság csoportokba szervezi az elemeket:

<p class="red">Én a pirosak közé tartozom?</p>
<p class="blue">Igen, én kék vagyok, de ettől még lehetünk barátok...</p>

További példák tulajdonságokra:

<input type="text">      <!-- Szövegbeviteli mező -->
<input type="button">    <!-- Gomb --> 
<input type="checkbox">  <!-- Pipa --> 
<input type="password">  <!-- Jelszó -->

Az input (beviteli mező) elem megjelenése és viselkedése a type tulajdonságától függ.

Következő példában egy img (kép), az src a képállományra mutató hivatkozás, a title a kép címe, az alt pedig a kép tartalmának szöveges leirata:

<img 
    src="images/kutya.jpg"
    title="Alvó labradorkölyök"
    alt="A képen egy 6 hetes alvó labradorkölyök látható.">

Példa HTML állomány

Ebben a példában egy egyszerű HTML állomány tartalma látható:

<!DOCTYPE html>
<html lang="hu">
    <head>
        <meta charset="UTF-8">
        <title>Helló Világ!</title>
    </head>
    <body>
        <h1>Helló Világ</h1>
    </body>
</html>

Ennek a könyvnek a célja, hogy a Számalk-Szalézi Szakgimnázium Kiadványszerkesztő Technikus szakos hallgatóinak jegyzeteket biztosítson az órai gyakorlatok, és előadások mellett a Digitális kiadványok tantárgyban.

Fő fejezetek

Domain név

A domain név egy könnyen megjegyezhető szöveges cím, amin a webes szolgáltatásokat és a honlapokat elérhetjük.

A domain nevek formátumát a DNS (Domain Name System) szabvány szabályozza, tartományokra, és altartományokra osztva a hálózatokon, például az interneten elérhető számítógépeket.

A domain név több egységből épül fel (ezek között a szeparátor szerepét egy pont . tölti be).

Az első egység a tartomány (Top Level Domain - TLD), ami lehet top domain (például .org, .gov, .com, .net), vagy nemzeti tartomány (például .eu, .hu, .de, .at). Például a Wikipedia domain nevében a tartomány az org: wikipedia.org.

A második egység (jobbról balra) az altartomány (Second Level Domain - SLD). A gyakorlatban ez azonosít egy tartomány alá besorolt számítógépet. Például a Wikipedia domain nevében ez a wikipedia: wikipedia.org

A harmadik opcionális egység az altartomány alá további címek besorolását teszi lehetővé, ez az aldomain (subdomain vagy Third Level Domain). Például a Wikipédián a különböző nyelvű Wikipédia alegységeket így azonosítják, a magyar wikipédia címe hu.wikipedia.org, a német nyelvű wikipedia címe de.wikipedia.org.

Domaint az úgynevezett domain regisztrátor cégeknél lehet igényelni, regisztrációs díj ellenében.

Domain.hu weboldal a magyar domain regisztrátorok listájával.

Tárhely

Hagyományos tárhelyek

Általában egy szerverparkban elhelyezett számítógép, amin több felhasználói fiók (tárhely) található. A tárhelyekhez rendszerint tartozik egy adminisztrációs felület, mint például a Webmin, amin keresztül a rendszer beállításait a tárhely bérlője is el tudja látni (például mentés/helyreállítás). A tárhelyhez FTP képes fájlkezelővel lehet csatlakozni, és ennek segítségével lehet a weboldalak állományait le, és feltölteni.

Felhő alapú tárhelyek

Felhő alapú tárhelyen az igényeinknek megfelelő virtuális szerverek létrehozására van lehetőség, ez a költségek hatékony minimalizálhatóságát is lehetővé teszi, de szükséges hozzá némi szaktudás, cserébe jóval nagyobb szabadságot kapunk (akár bármikor ki is törölhetjük egy óvatlan mozdulattal a gépet). Számos cég kínál felhő alapú tárhelyet, például: Amazon Web Services (AWS), Microsoft Azure, Google Cloud...

Szerver oldali technológiák

A PHP egy szerver oldali programozási nyelv, úgynevezett scriptnyelv. A webszerverek a PHP kódból készítik el a weboldal HTML állományait, és ezt kapja meg a kliens.

A MySQL egy nyílt forráskódú adatbázis szerver, segítségével adatokat, például egy weboldal adatait tárolhatjuk egy webszerveren.

A LAMP egy szoftver csomag, tartalmaz minden alapvető komponenst, amiből egy webes kiszolgáló felépül:

• Linux (operációs rendszer)

• Apache (HTTP szerver)

• MySQL (adatbázis kezelő)

• PHP (script futtató környezet)

A Világháló az Interneten működő egymással hiperhivatkozásokkal kapcsolódó weboldalak összessége. A felhasználók, akik igénybe akarnak venni egy szolgáltatást a Világhálón, internetképes eszközeikkel tehetik meg ezt (ez lehet hagyományos számítógép, okostelefon, konzol, még akár egy hűtőszekrény is). Az eszközön lévő böngésző vagy egyéb alkalmazás (kliens) egy kérést küld az interneten keresztül a kiszolgálónak (szerver). A kiszolgáló a kérésnek (request) megfelelően összeállítja a választ (response) csomagok formájában, és visszaküldi a kliensnek. A válaszként kapott csomagok alapján jeleníti meg a felhasználó gépén a kliens például a lekért weboldalt.

A kiszolgáló területét nevezzük backend-nek, vagy szerver oldalnak, a felhasználó gépét érintő területet frontend-nek, vagy kliens oldalnak.

Kliens oldalon alkotóelemeire bontva egy weboldalt, három fő elkülöníthető technológiát tudunk azonosítani:

Az első a HTML, vagy hipertext jelölőnyelv, ez a szabvány a weboldalak strukturális felépítését (tartalmi szerkezetét) biztosítja. A második a CSS, vagy egymásba ágyazható stíluslapok, ami a weboldalak megjelenéséért felel. A harmadik a JavaScript, ami a web programozási nyelve, és a weboldalak viselkedését vezérli.

A Internet, és később a Világháló megjelenése megreformálta az élet minden területét, így a hagyományos tervezőgrafikai műfajokat (plakátok, meghívók, oklevelek, könyv-, lemez-, CDés DVD-borítók, szórólapok, hirdetések stb.) is, új ág keletkezett: az online tervezőgrafika.

Az új tervezőgrafikai műfajok:

• webtervezés (desktop, tablet, mobil)

• webes hirdetések, bannerek

• animált média, videók (!)

• weboldalakhoz, webáruházakhoz kapcsolódó grafika

• közösségi oldalakra borítóképek (G+, FB, Instagram, Twitter)

• közösségi oldalakra, blogokra bejegyzés-illusztrációk

• online prezentációk (Prezi)

Online tervezőgrafika korszakai

A online tervezőgrafika egy fiatal műfaj, közege a Világháló, ami csupán 30-éves múltra tekint vissza:

A Világháló az 1990-es évek előtt még nem létezett, elméleti koncepcióját 1989-ben dolgozta ki Tim Berners-Lee a CERN kutatója, az első weboldal, és internetes böngésző is az ő nevéhez fűződik, szűk körben 1990-ben, széles nyilvánosság előtt 1991-ben mutatta be az új médiumot.

1990-es évek

Kilencvenes évek közepén jelentek meg az első böngészők, amik képeket is meg tudtak már jeleníteni, ezt tekinthetjük a webdesign hajnalának.

A hagyományos tervezőgrafikai megközelítéseket ültették át online környezetbe (könyv, magazin)

Feltűnik az interaktivitás a javaScript programozási nyelv megjelenésének köszönhetően. A weboldalakon elérhetővé válik a navigáció, gombok, űrlapok.

Ebben a korszakban még nem álltak rendelkezésre a felület kialakítását megkönnyítő CSS technikák, így a fejlesztők a weboldalak felületét táblázatokból és frame-ekből építették fel, ezek a technológiák mára már teljesen elavultak.

• 1990-ben adja ki az Adobe a Photoshop 1.0-át

• 1996 CSS 1

• 1996 Macromedia kiadja a Flash 1.0-át

• 1998 Létrejön a Google internetes kereső

2000-es évek első fele

Piacra kerülnek a fejlett LCD monitorok, nagyobb felbontással és színmélységgel, ami lehetővé tette a fejlettebb webdizájnok megjelenését.

• Oldal layout még mindig táblázatos struktúra

• Fash animációk az oldalakon

• Teljes weboldalak Flash-ben elkészítve

• Egyszerűbb munkafolyamat (csak monitorra kellett tervezni)

• Egyedüli kihívás az egységes megjelenés a különböző böngészőkben

2000-es évek második fele

2007-ben megjelenik az első okostelefon, az iPhone, ez alapvetően változtatta meg az élet szinte minden területét (folyamatos online jelenlét, tartalomfogyasztás, információszerzés, navigáció, játékok, stb).

Megváltozik a világháló is Az Apple nem engedi az iPhone készüékekre a Flash animációkat, így ez a technológia lassan visszaszorul.

Az új felhasználói felületek új kihívásokat támasztanak, már nem csak az asztali gépekre kell tervezni, fejleszteni, tenyérnyi kijelzőre is, és megjelenik az érintőképernyő mint beviteli eszköz.

2010-es évek

Megjelenik az internetképes eszközök széles skálája, például a 4-es iPhone a korábbiaknál nagyobb felbontással, az iPad az első tablet, az Android-os telefonok, és a Windows Phone készülékek. A fejlesztőknek már számtalan eszközre, és képernyő felbontásra kell optimalizálni a weboldalakat, létrejön a reszponzív design, ami rugalmasan alkalmazkodik a kijelzők méretéhez.

A mobil ökoszisztémák virágzása elhozza az alkalmazások korszakát, megjelennek a webalkalmazások, és elterjednek HTML5 CSS3 alapú felhasználói felületek az alkalmazások között.

Háttérbe szorul az anyagi valóságot mimelő felhasználói felület, tért nyer a minimalizmus, és a flat design. Erre legjobb példa a Google Android operációs rendszere, a Material Design-al.

Megjelennek a fejlett keretrendszerek, mint a Bootstrap, vagy a Zurb Foundation.

Töretlen a CSS fejlődése: animációk, flexbox, CSS grid rendszer, …

Megfordult tendencia: az online tervezőgrafikai megközelítéseket ültetjük át hagyományos környezetbe (könyv, magazin)

Online tervezőgrafika szempontjai

Weboldaltervezés előtt tudni érdemes:

• Mi a célja a weboldalnak (eladás, informálás, szórakoztatás)

• Ki a célcsoport (nem, kor, ágazat)

• Milyen motorra készül (nyílt forráskódú, egyedi programozás)

• Technikai lehetőségek

• Milyen eszközökön fogják nézni (Asztali, laptop, mobil, tablet)

Mi a HTML?

A HTML egy a webes szabványok közül. A webes szabványok közül a legfontosabb a HTML, a CSS és a JavaScript, ezek hármasa együtt alkotja a weboldalak technológiai alapját.

HTML egy mozaikszó, jelentése HyperText Markup Language, vagyis hiperszöveges jelölőnyelv.

A HTML egy leírónyelv, ami a webalkalmazások strukturális vázát, tartalmát adja.

A HTML-t mint szabványt a W3C (World Wide Web Consortium) kezeli.

A HTML nyelv elsajátítása az első lépés azon az úton aminek a végén képessé válunk weboldalakat, web alapú alkalmazásokat készíteni.

Építőelemek

A HTML dokumentum tag-ekből (címke) épül fel, ezekből képezi le a böngésző a HTML elemeket, miután beolvasta és feldolgozta a dokumentumot.

Egy lehetséges HTML elem:

<elem tulajdonsag="ertek">tartalom</elem>

Hiperhivatkozások

A weboldalak legfontosabb építőelemei a hiperhivatkozások (link vagy hyperlink). Ezek kötik össze egy globális egységgé a weben található dokumentumokat.

<a href="fontos.html">Fontos információ!<a>

Mi a CSS?

A CSS egy a webes szabványok közül. A webes szabványok közül a legfontosabb a HTML, a CSS és a JavaScript, ezek hármasa együtt alkotja a weboldalak technológiai alapját.

A CSS egy mozaikszó, jelentése Cascading Style Sheets - Egymásba ágyazható stíluslapok.

A CSS a webes alkalmazások megjelenését szabályozó stílusnyelv:

• A stíluslapok definiálják, hogy hogyan jelenjenek meg vizuálisan a HTML elemek.

• Segítenek, hogy a tartalom, és a megjelenés elkülönüljön egymástól.

• Külső állományban is elhelyezhető, így több HTML állomány is használhatja ugyanazt a CSS-t.

• Egy elemre több stílus is hatással lehet.

CSS rövid története

Korábban a HTML tartalmazta a megjelenésre vonatkozó utasításokat.

A fejlesztői igények növekedésével végül 1994-ben Håkon Wium Lie, és Bert Bos kidolgozta a CSS alapjait.

1996-ban adta ki hivatalos ajánlásként a W3C Consortium a CSS level 1 -et.

A CSS 2. kiadása 1998-ban lett hivatalos ajánlás, ez a kiadás radikálisan kibővítette az első kiadás lehetőségeit.

2005-ben a 3. kiadás szakított az eddig fejlesztési formával, nem egységes dokumentumként, hanem modulokra bontva folyik a fejlesztés, így lehetőség van építőelemenként fejleszteni a szabványt.

Mire szolgál a CSS kijelölő?

A kijelölők segítenek kiválasztani azokat a HTML elemeket, amelyekre CSS stílus szabályokat szeretnénk alkalmazni. Minden stílusnak tartalmaznia kell egy kijelölőt, amit úgy kell elképzelni mint egy címzést, ami egy, vagy több elemre hivatkozik.

A következő példában, a HTML állományunkban elhelyzünk egyh1 címet:

<h1>Helló világ</h1>

A HTML elemek megjelenését CSS stílusokkal tudjuk befolyásolni, a lenti példában a h1 elem szövegszínét vörösre állítjuk. Maga a kijelölő a kapcsos zárójel nyitó eleme előtt található (h1).

h1 {
    color: red;
}

A kijelölők hivatkozhatnak több elemre, vagy bizonyos típúsú elemekre (a fenti példában az összes h1 elemre), de egészen specifikusan egy-egy elemet is kiválaszthatunk velük.

A kijelölők könnyebb megértését segíti a CSS Diner nevű játék, ami elérhető az alábbi linken: https://flukeout.github.io/

Általános kijelölő

Az általános kijelölő minden elemre általánosan hivatkozik, segítségével a HTML dokumentumban lévő összes elemre vonatkozó stílusokat tudunk megadni.

* {
    color: red;
}

Az általános kijelölőt csillag (*) karakterrel hozhatunk létre.

Elem kijelölő

Az elem kijelölő ez elemeket típusuk alapján azonosítja, például lista elemre, vagy elemekre a kijelölő a következőképpen hivatkozhat:

li {}

Az alábbi példában a bekezdésekre célzunk, ez azt jelenti, hogy az összes p elem a dokumentumban megkapja a vörös szövegszínt:

<p>Lorem ipsum dolor sit amet.</p>
<p>Consectetur adipiscing elit.</p>

p {
    color: red;
}

Az elem összes példányát ki fogja választani az elem kijelölő az adott HTML dokumentumban.

A következő példában az összes cím (h1-h6) elemet kiválasztjuk vesszővel elválasztva (így minden cím a HTML dokumentumban vörös szövegszínű lesz):

h1,
h2,
h3,
h4,
h5,
h6 {
    color: red;
}

Osztály kijelölő

Az osztály kijelölő az elemet az class (osztály) tulajdonsága alapján célozza be.

<p class="first-paragraph">Lorem ipsum dolor sit amet</p>

.first-paragraph {
    color: red;
}

Az osztály kijelölő ponttal kezdődik (.) ezt követi az osztály neve.

Ugyanazzal az osztállyal több elem is rendelkezhet, és egy elem rendelkezhet több osztállyal is. Így lehetőség van elemeinket rugalmasan csoportosítani.

<div class="osztaly-1 osztaly-2 osztaly-3">...</div>

Azonosító kijelölő

Az azonosító kijelölő az elemet az id (egyedi azonosító) tulajdonsága alapján célozza be.

<p id="introduction">Lorem ipsum dolor sit amet</p>

#introduction {
    color: red;
}

Az azonosító kijelölő rácsjellel (#) kezdődik, ezt követi az azonosító neve.

Egy HTML dokumentumban egy elem rendelkezhet egy adott egyedi azonosítóval, és ezt az elemet az azonosítókijelölővel tudjuk célozni.

Leszármazott kijelölő

Ezzel a kijelölővel szülő elem alapján tudunk szűkíteni egy elemre (leszármazott). A szülőt és a gyermeket a kijelölőben szóközzel választjuk el. A következő példában csak a section elemben lévő bekezdés kap vörös szövegszínt, a második bekezdés, ami nincs benne a section elemben nem kapja meg:

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<p>Aenean et nunc nec ligula condimentum luctus et a urna.</p>

section p {
    color: red;
}

A gyermeknek nem kell közvetlenül a szülőben lennie, lehet egy vagy több szinttel beljebb is, abben a példában mindkét bekezdésre hatással van a css (mindkettő leszármazottja a section elemnek):

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div>
        <p>Aenean et nunc nec ligula condimentum luctus et a urna.</p>
    </div>
</section>

section p {
    color: red;
}

Lehetőség van kettőnél több szint megadására, és a korábban megismert kijelölők szabadon kombinálhatóak:

header .main-title h1 span {
    color: red;
}

Gyermek kijelölő

A gyermek kijelölő az alapján jelöli ki az adott HTML elemet, hogy közvetlenül melyik elemben található (szülő).

<div class="parent">
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

.parent > .child {
    color: red;
}

Gyermek kijelölőt a > jellel hozhatunk létre, a > jel bal oldalán a szülő, jobb oldalán a gyermek található. Ebben a példában kizárólag a közvetlenül a p HTML elemekben lévő span elemek szövegszínét festi vörösre a CSS stílus:

p > span {
    color: red;
}

Szomszédos testvér kijelölő

Ezzel a kijelölővel egy bizonyos elem után következő elemet célozhatunk meg.

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p>Doloremque impedit laborum eum ad fugiat.</p>
<p>Error quam voluptatibus sequi dolore iure corrupti ab.</p>

p + p {
    color: red;
}

A fenti esetben a második, és a harmadik bekezdésre fog vonatkozni a stílus (ezek a bekezdések találhatóak egy másik után, az első nem).

Álosztályok

Állapot álosztályok

Ezekkel a kijelölőkkel egy bizonyos állapotban lévő elemre hivatkozhatunk. Ilyen állapot például ha egy link fölött áll az egérkurzor, vagy ha egy beviteli mezőbe írunk éppen.

:active Aktív állapotban lévő elemre vonatkozik, egy link addig aktív, amíg lenyomva tartjuk az egér gombot. :focus Azokra az elemekre vonatkozik, amik fókuszban vannak (ráléptettünk tabbal, vagy benne állunk egy űrlap mezőben). :hover Az egérkurzor alatti elemekre vonatkozik. :visited Azokra a hivatkozásokra vonatkozik, amiket korábban már bejártunk. :empty Üres, és gyermek nélküli elemeket lehet kiválasztani vele. :link Eddig még nem bejárt linkeket lehet vele célozni. :checked Megjelölt input elemeket céloz.

a:hover {
    color: red;
}

A fenti példában a linkek vörös szövegszínt kapnak, ha föléjük kerül az egér kurzor.

Pozíció álosztályok

Ezekkel a kijelölőkkel egy bizonyos pozícióban lévő elemre hivatkozhatunk. Ilyen pozíció, hogy egy elem páratlan, vagy páros elem egy sorozatban, esetleg az első vagy az utolsó darabja egy sorozatnak.

:nth-child(n) n-edik elem a sorban :nth-type(n) n-edik bizonyos elem :first-child első elem :last-child utolsó elem :first-of-type első egy bizonyos elem típusból :last-of-type utolsó egy bizonyos elem típusból

<ul>
    <li>Első elem</li>
    <li>Második elem</li>
    <li>Harmadik elem</li>
    <li>Negyedik elem</li>
    <li>Ötödik, vagy utolsó elem</li>
</ul>

li:first-child {
    color: red;
}

li:nth-child(3) {
    color: green;
}

li:last-child {
    color: blue;
}

Ebben a példában a lista elemek szövegszínét módosítjuk, az első elemét a :first-child (első gyermek) kijelölő segítségével vörösre, a harmadik lista elem színét a :nth-child() (n-edik elem) kijelölővel zöldre, és végül az utolsó lista elem színét kékre a :last-child (utolsó gyermek) kijelölővel.

Álelemek

Minden HTML elemhez hozzá lehet rendelni két álelemet, ezek az eredeti elem gyermekei lesznek, egyet a tartalma előtt, egyet pedig a tartalma után tud megjeleníteni a böngésző. Az így létrejövő elemek virtuális elemek, a CSS stílus hozza létre őket, nem képezik a HTML dokumentum részét.

p:before {
    content: "";
}

p:after {
    content: "";
}

Az álelemek CSS-ében el kell helyezni egy tartalom content meghatározást, ez adja meg az álelem tartalmát, e nélkül a böngésző nem hozza létre az álelemeket. Ez rendszerint szöveg vagy kép lehet, de üresen is lehet hagyni.

p:before {
    content: "Lorem ipsum dolor...";
}

div:before {
    content: url('ribbon.png');
}

Álelemet az elem tartalma előtt a :before kijelölővel, a tartalom után az :after kijelölővel hozhatunk létre. Az álelemek alapesetben inline (szövegközi) elemek, és CSS stílusokkal módosítható a megjelenésük.

A következő példában egy főcím szövege előtt, és után elhelyezünk egy-egy kötőjelet, és a két kötőjelnek a szövegszínét is beállítjuk a :before, és az :after kijelölők segítségével:

<h1>Lorem Ipse</h1>

h1:before,
h1:after {
    content: " - ";
	color: red;
}

Kijelölők listája

Alapfogalmak

A HTML (HyperText Markup Language) a weboldal alapja, olyan, mint egy ház alapja, csupasz falai, teteje.

A CSS (Cascading Style Sheets) felel a weboldal kinézetéért, olyan, mint a ház színe, dekorációja, bútorzata.

A JavaScript programozási nyelv felel az oldalak működésért, olyan mint egy ház gépészete, elektromos rendszere (ha itt megnyomok egy kapcsolót, amott felgyúl a villany).

Grafikai szoftverek

Az Adobe termékei de facto iparági szabványként működnek, a webes grafikusok jelentős része Adobe Photoshop-ot használ, és PSD formátumú állományokkal látja el a fejlesztőket.

Photoshop mellett az Adobe Illustrator, és a Fireworks is népszerű. Az Adobe termékek nyílt forráskódú alternatívája a Gimp ingyenes képszerkesztő, és az Inkscape vektorgrafikus szerkesztő.

Animációs területen az Adobe Flash elvesztette a piaci monopóliumát, az Adobe beszüntette a platform támogatását, ezt a piaci rést a HTML5-ös animált bannerek töltik be, ezek szerkesztésére jött létre az ingyenes Google Web Designer.

Az asztali alkalmazások mellett egyre terjednek az online felhő alapú grafikai programok, amik nagyban támogatják a kollaboratív munkát. MacOS rendszeren a Sketch jellemző, jó alternatíva a Figma, vagy az InVision. Az új trendre reagálva az Adobe is piacra dobta a saját felhő alapú megoldását, ez az Adobe XD-t.

Szövegszerkesztők

A grafikai munkákon túl a fejlesztők szövegszerkesztőt (Text editor), és integrált fejlesztői környezetet (Integrated Development Environment azaz IDE) használnak, ezek a programok fel vannak ruházva a forráskódok irását, szerkesztését segítő funkciókkal, úgy mint intelligens kód kiegészítés (Emmet, Intelli Sense, TabNine), kód színezés, hibakiemelés, stb. Számos ingyenes és fizetős program létezik, a teljesség igénye nélkül: Visual Studio Code, Atom, Notepad++, Brackets, Sublime Text, Adobe Dreamweaver...

Drótváz

A drótváz készítés egy módszer, amely segítségével kialakíthatjuk egy weboldal felépítését. A drótvázat elsősorban olyan weboldalak tartalmának és funkcionalitásának meghatározására használjuk, melyek figyelembe veszik a felhasználói igényeket és a felhasználói viselkedést. A drótvázakat a fejlesztési folyamat korai szakaszában használjuk az oldal alapvető kialakítása előtt, megelőzi a tényleges online grafikai tervezést, és a (szöveges) tartalmak kialakítását. A drótváz kiváló eszköz arra, hogy költséges fejlesztés nélkül megismerjük az ügyfél igényeit, a fejlesztők pontos képet kapjanak az elkészítendő alkalmazás működéséről, ezen felül teret ad a kisérletezésnek, segítségével alacsony költségen kipróbálhatóak a projektekkel kapcsolatos ötletek.

A drótváz készülhet kézi rajzzal papíron, táblán, de vannak speciálisan erre a célra szolgáló szoftverek, mint példáula a Scetch, vagy az Adobe XD, egy jó ingyenes nyílt forráskódú alternatíva a Pencil Projekt. Jellemző még ezen a területen az Adobe Illustrator használata.

A prototípus a következő lépés a drótváz után, ez már kattintható, bár a funkcionalitás csak mímelt (angol kifejezéssel mock, magyarosítva mokkolt). Jellemzően HTML, és CSS segítségével készül, erre a feladatra kiválóan alkalmas a Bootstrap keretrendszer is, ezzel gyorsan és hatékonyan lehet felületeket kialakítani. Egyes drótváz készítő programokból lehet kattintható prototípust előállítani.

Bővebbebb cikk a témáról: Using wireframes to streamline your development process

Grid rendszerek, vagy modulháló

A grid, vagy modulháló a tervezés legalapabb alapja, nem újkeletű dolog (többszáz éve használja a nyomtatott grafika), de új értelmet nyert a reszponzív webdizájnban, ahol fix szélességek helyett dinamikusan alkamazkodó arányokat célszerű használni.

A modulháló (grid system) részei

Sorok (row)

Oszlopok (column)

Csatornák (Gutter vagy Gap)

Margók

Régiók/területek

Modulháló használata

Weboldalunkhoz nem kell megírni külön a grid rendszert, számos kész rendszer a rendelkezésünkre áll: 960 Grid System, csswizardry-grids

Grid rendszert készen beépítve megtaláljuk a jelentősebb CSS HTML keretrendszerekben: Bootstrap - Grid System, Zurb Foundation - The Grid

A Bootstrap Grid System érdekessége, hogy magában a Bootstrap egyéb funkciói nélkül is beépíthetjük, és használhatjuk webes alkalmazásainkban.

Kezdetek

1980 - Tim Berners-Lee az akkor a CERN-ben dolgozó fizikus létrehozta ENQUIRE dokumentációs rendszert

1989 - Tanulmányt írt a hálózat alapú hipertext rendszerről, amiben lefektette a HTML koncepciójának alapjait.

1990 - Elkészítette az első (szöveges) böngészőt, és webszervert.

1991 - Kikerül az internetre az első weboldal ().

A web kiteljesedése

1994 - Megalakul a W3C, szabványok és ajánlások formájában fejleszti és javítja az internet technológiáit

1995 - HTML 2.0

1997 - HTML 3.0 - HTML 4.0

(Sötét) Középkor

1997 - A HTML 4.0 ajánlás publikálása után bezárják a HTML munkacsoportot, két hónappal később megszületik az XML 1.0, ezt követően pedig az XHTML 1.0

Jelenkor

2004 - A gyártók fellázadnak és elkezdik fejleszteni a HTML 4 alapjain az újragondolt szolgáltatásokkal kibővített HTML 5-öt.

2006 - A W3C behozhatatlan hátrányba kerül, lemaradnak az XHTML 2.0 szabvány fejlesztésében, ekkor egyesítik erőiket a gyártókkal.

2008 - W3C ajánlásként kiadásra kerül a HTML 5

CSS elhelyezése HTML állományokban

Szövegközi stílusok (inline style)

A CSS stílusokat egy HTML elem style elhelyezve csak arra az egy elemre fognak vonatkozni. A következő példában egy bekezdés, vagyis egy p elem szövegszínét és betűméretét állítjuk be:

Beágyazott stíluslapok

A CSS stílusokat elhelyezhetjük egy HTML állomány egy style elemben. A style elemben CSS nyelvi szabályok lesznek érvényesek.

Külső stíluslapok

A külső CSS állomány kiterjesztése .css lehet.

A link elemeket minden esetben a HTML állomány fejlécében, a head elemben kell elhelyezni:

CSS importálása

Egy CSS állományba behívhatunk egy másik CSS állományt @import segítségével.

Megjegyzések

Megjegyzés (comment) /* */ jelek használatával hozható létre CSS-ben

A /* és a */ karaktersorozatok közötti részt a böngésző figyelmen kívül hagyja.

Stílusok felépítése

CSS stílus (CSS rule)

Kijelölők (selector)

A kijelölő a kapcsos zárójel előtt helyezkedik el, és tipusától függően hivatkozik egy vagy több HTML elemre. A következő példában az összes h1 (főcím) elem szövegszínét állítjuk be vörösre:

A kijelölőket lehet csoportosítani vesszővel elválasztva több elemre is vonatkoztathatjuk ugyan azt a szabályt. A következő példában már nem csak a h1 elem szöveg színét állítjuk be, a h2 h3 h4 HTML elemek szövegszínét is vörösre állítjuk:

A kijelölő szűrhet bizonyos elemkombinációkra, ekkor a szülőkön keresztül célozzuk meg az adott elemet. A következő példában a h1 elemekben lévő span elemek szövegszínét kékre állítjuk:

Meghatározások

A meghatározásokat a kijelölő utáni kapcsos zárójelben helyezzük el, egymástól pontosvesszővel elválasztva. Az utolsó meghatározás, vagy CSS szabály után nem kell pontosvessző (általában ki szoktuk tenni).

Egy meghatározás kulcsszóból, vagy névből, és a hozzá tartozó értékből áll, kettősponttal elválasztva.

Léteznek gyorsírásos szabályok, amikben több értéket is megadhatunk. Ebben az esetben az értékeket szóközzel kell elválasztani.

Százalék

A legtöbb értéket megadhatjuk százalékban, hosszmértékként értelmezve ezt általában a szülő konténer mérete alapján számolja a böngésző.

Képpont - pixel

Tekinthetjük alap mértékegységnek, egy képpontja a magjelenítő eszköznek. A böngészők minden egyéb hosszmértéket erre számítanak át. Ez eltérhet a nagyobb képpont sűrűségű eszközökön, például retina eszközön egy pixel egy 3*3 képpontos négyzet.

Tipográfiai mértékegységek

A tipográfiai mértékegységek jellemzően egy bizonyos betű magasságát veszik egy egységnek.

Em - M magasság

A nagy M betű magassága alapján számolja a távolságokat. Ez a legelterjedtebb tipográfiai mértékegység. A szülőhöz képest állítja be a fontméretet, ha a szülőnek 2em a font mérete, a gyermeknek pedig 1em, a szülő és a gyermek számított font mérete megegyező lesz.

Rem - Relatív M magasság

Az em párja, de ez nem öröklődik, a body fontmérete alapján számítja ki a böngésző.

Egyéb tipográfiai mértékegységek

Ex

Az ex a kis x magassága alapján számolt egység, az em érték fele pixelben

ch

A ch a 0 karakter szélessége alapján számolt egység.

Fizikai hosszmértékek

A méreteket megadhatjuk fizikai kiterjedés alapján, ez a HTML dokumentum nyomtatása estén használatos.

cm - centiméter mm - miliméter in - incs pc - nyomdai pica pt - nyomdai pont

Képernyőméret

Képernyőmező szélesség - viewport width

A vw egy egysége a képernyő szélességének századrésze. vagyis egy 100vw szélességű elem a képernyő teljes szélességét kitölti.

Képernyő magasság - viewport height

A vh egy egysége a képernyő magasságának századrésze. vagyis egy 100vh magasságú elem a képernyő teljes szélességét kitölti.

Kisebb képernyő dimenzió - viewport min

A vmin egy egysége a vh és a vw értéke közül a kisebbel lesz egyenlő.

Nagyobb képernyődimenzió - viewport max

A vmax egy egysége a vh és a vw értéke közül a nagyobbal lesz egyenlő.

Idő

Animációk, átmenetek vagy hang időzítése esetén az időfaktor beállítására használhatjuk.

Szögek

Elemek forgatása esetén használatos mértékegységek:

deg - fok grad - újfok (derékszög század része) rad - radiáns turn - teljes fordulat (360°)

Mi az a rangsor?

Egy elemre jellemzően több CSS szabály is vonatkozhat, amik felülbírálhatják egymást, a böngészők rangsorolással döntik el, hogy mely szabály lesz érvényes az adott elemre (melyik az erősebb).

Eredet

Három forrásból származhat stílus: A böngésző alapértelmezett készlete, a felhasználó által definiált, és a webalkalmazás saját CSS-e, ez utóbbi felülbírálja a többit.

A User agent CSS a böngésző alapértelmezett formázásai egy alapot adnak a weboldalak tartalmának, így az minden nemű stílus formázás nélkül is értelmezhető lesz, ez a leggyengébb, legegyszerűbben felülírható stílus. A felhasználó által definiálható Reader CSS valamivel erősebb, de mindkettőt felülbírálja a webalkalmazások saját CSS stílusai, az Author CSS.

Sorrend

A korábbi szabályokat felülírják a későbbiek. Minél később található a kódban egy stílus, annál erősebb. Ez az állományok bekötési sorrendjére is érvényes.

Szűkítés

A szűkítés értékei összeadódnak, és a kapott érték alapján a rangsorolja a böngésző a CSS szabályokat. Ezek nem helyi értékek, egy darab egyedi azonosító a kijelölőben bármennyi osztályt felülbírál.

Fontosság (!important)

!important jelöléssel ellátott szabály mindig erősebb a nem important szabálynál, két important közözött a további rangsorolási szabályok érvényesülnek. Az fontosság felülbírálja az eredetet, a sorrendet, és a szűkítést is.

Dokumentumfolyam

A dokumentumfolyam az elemek sorozata, ennek a sorozatnak a sorrendje alapján rajzolja ki a böngésző a HTML elemeket.

A pozicionálás az elemek a böngésző által, a dokumentumfolyam alapján meghatározott eredeti helyét módosítja. Az elem pozicionálásának típusát a position CSS tulajdonsággal lehet beállítani.

Statikus pozíció (static)

Ez az alapállapot, ebben az estben az elem statikus, nem változik a pozíciója (nincs pozicionálva).

Eltolás

A nem statikus helyzetű elemek helyzetét tudjuk módosítani a következő tulajdonságokkal:

• left - eltolás balról

• right - eltolás jobbról

• top - eltolás fentről

• bottom - eltolás lentről

Az eltolás alapértéke auto ez nem befolyásolja az elem helyzetét. Megadhatjuk hosszmértékben, vagy százalékban. Százalékos érték esetén a pozicionálás típusától függő (szülő-)elem mérete alapján számolja ki a böngésző az eltolás mértékét. Felvehet negatív értéket is.

Viszonylagos pozíció (relative)

Viszonylagos pozicionálás esetén az elem eredeti helyéhez képest eltolódik a megadott mértékben.

Az elem eredeti helye megmarad a dokumentum- folyamban, az utána következő elemeket eltolja, ugyanúgy, mintha statikus helyzetű lenne a pozicionált elem.

Független pozíció (absolute)

Független pozíció esetén a legközelebbi nem statikus pozicionálású szülő elemhez képest történik az eltolás (ha az elem közvetlen szülője például relative pozíciójú, akkor ahhoz képest). Ha nincs nem statikus szülő, akkor a body elemhez képest történik az eltolás.​

Az abszolút pozicionálású elem nem lesz ráhatással a dokumentumfolyamra (eltűnik). Eredeti helyére becsúsznak az őt követő elemek, illetve nem tolja ki szülőelemeinek magasságát sem.

Rögzített pozíció (fixed)

Rögzített pozíció esetén a böngésző ablakához képest történik az eltolás, ebben az esetben a pozicionált elem nem scrollozódik együtt a többi elemmel (rögzített).

Eredeti helyére becsúsznak az őt követő elemek, illetve nem tolja ki szülőelemeinek magasságát sem - hasonlóan a független pozicionálású elemekhez.

Z magasság (z-index)

A dokumentumfolyam meghatározza az elemek egymásra lapolódását is, a később jövő elemek a korábbiak fölé kerülnek.

Ezen módosíthatunk a z-index tulajdonsággal.

A böngésző ablak síkjára merőleges tengelyen (z) mozgathatjuk vele az elemeket. A pozitív érték emel az elemen, a negatív érték süllyeszt. Értéke egész szám lehet (negatív is), alapértéke az auto vagyis a dokumentumfolyam alapján számított magasság.

Szövegközi elemek jellemzői

A szövegközi elemek nem törik meg a szöveget sortöréssel, egyszerűen úgy viselkednek, mint egy szó, vagy mondat.

A szövegközi megjelenítésű elemekre nem érvényesülnek a doboz modell tulajdonságok. Nem határozhatjuk meg a szélességüket, és a magasságukat, illetve nem működik a margó.

A padding (belső margó), és a border (keret) használható, a blokkos elemektől némileg eltérő módon.

CSS-el megváltoztathatjuk az elemek megjelenítési módját szövegközire:

Betűtípusok, betűcsaládok

Betűcsalád (font-family)

Betűcsaláddal határozhatjuk meg az elemeink szövegének a betűtípusát. Vesszővel elválasztva több betűtípust is megadhatunk, ezeket sorrendben megpróbálja betölteni a böngésző, ha az elsőt nem találja, megkísérli a következőt.

A fenti példában az első az Arial betűtípus, ami "minden" Windows-os gépen megtalálható, a második a Helvetica, ami nagyon hasonlít az Arial betűtípusra, de OSX operációs rendszeren elterjedt. A sans-serif általános betűcsalád (generic-family), a böngésző az ebbe a kategóriába eső elérhető fontok közül próbál egyet betölteni.

Több font felsorolásával, és általános betűcsalád megadásával biztosíthatjuk, hogy a böngésző kezelni tudja a szöveg betűtípusát, hiányzó fontok esetén is.

Általános betűcsaládok:

• serif

• sans-serif

• cursive

• monospace

• fantasy

Web biztos fontok

Web biztos fontok azok a betűkészletek, amik széles körben elérhetőek a különböző operációs rendszereken. Az első nagyobb csomagot a Microsoft adta ki 1996-ban Core fonts for the Web néven.

Az alábbi fontokat tartalmazza: Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings

@font-face

A @font-face segítségével mi is létrehozhatunk betűcsaládokat, és betölthetünk betűkészleteket a HTML állományainkba. Ehhez szükséges a böngészők számára is emészthető fontok (webfontok) használata.

Betűméret (font-size)

A betűmérettel határozhatjuk meg a szöveg méretét. A böngészők a nagy M betű alapján méretezik a betűket (em méret), ezért az elterjedt mértékegységek a em, és a rem, illetve a pixelben megadott méret.

Betűvastagság (font-weight)

A font-weight-et (betűvastagságot) megadhatjuk kulcsszóval, vagy számmal (100-as lépésekben). Az hogy az adott érték érvényesül-e a szövegre nagyban függ az adott betűtípustól.

Használható kulcsszavak: normal, bold, bolder, lighter Használható számértékek: 100-900 -ig, ahol a 400 a normal méret, 700 a vastagon szedett (bold).

Az hogy mely betű vastagság értéket lehet használni függ az adott fonttól. A legtöbb webfont, vagy rendszerfont a 400-as (normal), és a 700-as (bold) értékekeket támogatja csak.

Betűstílus (font-style)

A betűstílussal tehetünk dőltté egy szöveget. Alapértéke a normal, a dőlt értékei italic vagy oblique.

Betűvariáns (font-variant)

Betűvariáns segítségével készíthetünk kiskapitális szöveget. A kiskapitális szövegben a kisbetűk is olyan alakúak, mint a nagybetűk, de magasságuk megegyezik a kisbetűk magasságával (bizonyos betűtípusoknál eltérhet). Alapértéke a normal.

Szöveg igazítás (text-align)

A text-align segítségével lehet igazítani egy blokkos elemen belül a szöveget vízszintesen.

Lehetséges értékei:

• left: balra igazítás

• right: jobbra igazítás

• center: középre igazítás

• justify: sorkizárt

Szöveg díszítés (text-decoration)

A text-decoration-al húzhatjuk át, vagy alá a szöveget.

Lehetséges értékei:

• none: nincs dekoráció

• underline: aláhúzás

• overline: föléhúzás

• line-trought: áthúzás

Szöveg behúzás (text-indent)

A text-indent a bekezdés első sorában behúzást hoz létre. Negatív értéke is lehet, aminek hatására ki fog lógni az elemből az első sor. Megadhatjuk százalékban is, de inkább jellemző az em, vagy a pixeles értékadás. Alapértéke 0 (nincs behúzás).

Szöveg transzformáció (text-transform)

A text-transform-al csupa kis vagy nagybetűssé változtathatunk egy szöveget attól függetlenül, hogy a HTML állományban hogy szerepel.

Értékei:

• none: nincs

• capitalize: szóeleji nagybetű

• uppercase: csupa nagybetű

• lowercase: csupa kisbetű

Sormagasság (line-height)

A line-height határozza meg a szöveg két sora közötti távolságot. Alapértéke normal, megadhatjuk százalékban, vagy hosszmértékben.

A tartalom terület (vörös vonalakkal határolva a fenti képen) a nagy M-betű magasságával egyező magasságú, gyakorlatban ez a font mérete (tipográfiában a verzál magasság, ezen túlnyúlhatnak a betűk fel- és lenyúló szárai). A szövegközi mező magassága a sormagasság (kék vonalakkal határolt terület a fenti képen).

A tartalom terület és a szövegközi mező külömbsége a sortávolság (adott esetben negatív értéket is felvehet) - vonjuk ki a line-height (sormagasság) értékéből a font-size (betűméret) értékét, így megkapjuk a két sor pontos távolságát.

Szóköz (word-spacing)

A word-spacing határozza meg a szavak közötti távolságot. Alapértéke a normal, ez nullával egyenlő, a módosított értéke a betűtípus szóköz karakterének szélességét módosítja, akár negatív irányban is, ekkor egymásra csúsznak a szavak.

Betűköz (letter-spacing)

A letter-spacing (betűköz) határozza meg a betűk karaktermezői közötti távolságot. Alapértéke a normal, ezt módosíthatjuk hosszmérték megadásával. Értéke lehet negatív, ebben az esetben a betűk közelebb kerülnek egymáshoz.

Hexadecimális - #rrggbb

RGB szín, 256^3 bit mélységben, amit színenként egy két helyi értékű 16 számrendszerben kifejezett szám ad meg. (16*16=256)

Hexadecimális rövid - #rgb

Mint a hexadecimális, csak kevesebb árnyalatot tartalmaz, 256^3 helyett csak 16^3 eltérő árnyalatot lehet kifejezni vele. Hexadecimális színek közül azokat, amelyeknél egy szín két helyi értéke egyezik.

#000000 = #000 #777777 = #777 #112233 = #123 #ffffff = #fff

RGB színek - rgb(r, g, b)

Megadhatjuk a színeket direkt rgb értékük alapján, vagy egy 0-255 ig terjedő számmal, vagy százalékosan is.

RGBA színek - rgba(r, g, b, a)

Hasonló mint az RGB, de itt van egy alfa csatorna is, ami meghatározza a szín átlátszóságát, az alfa csatorna értéke egy 0 és egy közötti szám, tört érték esetén részleges az átlátszóság.

HSL színek - hsl(h, s, l)

HSL (Színezet telítettség fényesség) alapú színrendszer, az első értéke 0 -től 360 -ig terjedő szög érték, ami a HSL színkörön jelöl ki egy színt, második értéke a telítettség, harmadik a világosság, ez a kettő százalékos.

HSLA színek - hsla(h, s, l, a)

Itt is van alfa csatorna mint az RGBA esetében.

Kulcsszavas színek

Színeket megadhatunk a nevük alapján is, kulcsszavas formában. A modern böngészők 140 kulcsszavas színt támogatnak.

Átlátszó

A transparent (átlátszó) kulcsszóval adhatunk meg (teljesen) átlátszó színt.

Vízszintes középre rendezés külső margóval.

A következő technikával elemeket lehet a szülő elemükben középre rendezni. A vízszintes középre rendezéshez auto értéket kell beállítani a jobb és bal oldali (külső margó) tulajdonságnak.

A technika úsztatott elemek esetében nem működik.

Úsztatás (float)

Az úsztatott elemek a tartalmazó konténerük felső sarkába igyekeznek, az úsztatás irányában. Az előttük lévő tartalom alá úsznak be, az utánuk következő tartalom pedig körülfolyja őket.

Az úsztatott elemek nem hoznak létre sortörést, és nem tolják szét a tartalmazó konténerüket.

Ha nincs közöttük nem úsztatott elem vízszintesen egy vonalba rendeződnek az úsztatás irányának megfelelően.

Úsztatott elemek viselkedése szövegben.

Az úsztatott elemeket a szöveges tartalom, és a szövegközi elemek körbefolyják, körbeveszik.

Úsztatott elemek egymásra gyakorolt hatása

Az úsztatott blokkos elemek megpróbálnak egy sorba rendeződni, ezt úgy kell elképzelni, mintha betűk, vagy szavak lennének egy szövegben. Nem képeznek sortörést, és nem tolják szét az őket tartalmazó elemeket függőlegesen, így ezeknek az elemeknek be kell állítani a magasságát, vagy egyéb módon kell gondoskodni arról, hogy ne 0 legyen a magasságuk.

Úsztatás törése (clear)

A clear értékkel rendelkező elem mellé nem kerülhet úsztatott elem (abban az esetben sem, ha maga úsztatott elem). Beállíthatjuk, hogy csak az elem bal, vagy jobb oldalán left, right, vagy mindkét oldalán both akadályozza az úsztatott elemeket. Alapérték a none, vagyis nincs.

Úsztatott elemek törése

Kör

Kört a border-radius (keret lekerekítés) CSS tulajdonsággal lehet létrehozni . Alapfeltétel, hogy az elem szélessége és magassága megegyezzen. A border-radius értéke 50%, vagy nagyobb kell legyen, hogy létrejöjjön a kör.

Ellipszis

Annyiban különbözik a körtől, hogy az oldalak hosszai nem ugyanakkorák, ha a szélessége nagyobb a magasságánál, fekvő ellipszis jön létre, ha a magassága nagyobb szélességénél, álló ellipszis.

Háttérkép és keret is használható ezzel a technikával:

A CSS alapesetben nem kínál fel lehetőséget arra, hogy oldal arányait rugalmasan, reszponzív módon tartó téglalapot, vagy négyzetet hozzunk létre. A szélesség meghatározására számos lehetőségünk van, ha rugalmas felületeket akarunk létrehozni, a százalékos szélesség megadás egy optimális lehetőség, de a magasságot nem lehet úgy százalékosan megadni, mint a szélességet.

Fix méretű négyzetet egyszerűen készíthetünk, ha a szélességét és magasságát pixelben adjuk meg:

Ez nem egy reszponzív megoldás, és ha megpróbáljuk százalékos értékkel helyettesíteni a szélességet, és a magasságot, az elem magassága 0 lesz.

A magasság helyett használjuk a padding-bottom (alsó belső margó) tulajdonságot, az elem szélességével megegyező százalékos méretben.

Ha átméretezzük a böngésző ablakát a négyzet megtartja az arányait, és a böngésző ablak szélességétől függően méreteződik át.

Elegánsabb megoldás, ha álelemet használunk, ebben az esetben egyenlő arányú oldalaknál 100% padding-bottom-ot kell megadni:

Ha eltérő oldalarányt szeretnénk (téglalapot, nem négyzetet) módosítsuk a padding százalékos értékét az aránynak megfelelően.

A technika kiindulási alapja egy navigációs menü egy listából, és lista elemekből felépítve (nav elemről ):

Első lépésként eltüntetjük a lista elemek pontjait, és a listán lévő külső és belső margót:

Második lépésként balra úsztatjuk a lista elemeket, ennek következtében egy sorba rendeződnek:

A harmadik lépés, hogy a menüpontokat széthúzzuk, belső margó segítségével, ezt az a elemre tesszük. Ahhoz, hogy a belső margót rá tudjuk tenni az a elemre, blokkos elemmé kell alakítani, alapesetben szövegközi elem (inline).

Kész a vízszintes menü, jelen formájában már használható, a következő példában további stílusokkal látjuk el (elemek magassága, szövegszín, háttérszín):

Háttérszín

A background-color segítségével színt adhatunk elemeink hátterének. Átlátszó szín esetén az elem mögött lévő elemek is (részlegesen) látszódni fognak. A háttérszín az elem teljes hátterét kitölti, látható a belső margó (padding), és a keret átlátszó része alatt (border). Alapértéke a transparent, vagyis átlátszó.

Háttérkép

A background-image értékeként egy kép elérési útvonalát adhatjuk meg, url('elérési útvonal') formában. A kép valós méretében jelenik meg az elem hátterében. Alapértéke a none, vagyis nincs.

Háttérkép ismétlődése

A background-repeat segítségével szabályozhatjuk a háttérkép ismétlődését.

Értékei:

• no-repeat - nincs ismétlődés

• repeat - ismétlődés (ez az alapérték)

• repeat-x - ismétlődés csak vízszintesen

• repeat-y - ismétlődés csak függőlegesen

Háttérkép helyzete

A background-position a kép helyzetét határozza meg vízszintesen, és függőlegesen.

Megadhatjuk kulcsszavakkal, ezek:

• center - középen

• top - fent

• bottom - lent

• left - balra

• right - jobbra

Két értéket is megadhatunk első a vízszintes, második a függőleges helyzetet adja meg.

Hosszértéket, vagy százalékot is felvehet, ebben az esetben a bal felső sarok lesz az origó (innen eltolva jelenik meg a kép).

Háttérkép méretezése

A background-size határozza meg, hogy az elem hátterének mekkora hányadát fedje a háttérkép. Alapértéke az auto vagyis a kép eredeti méretében jelenik meg.

Megadhatjuk hosszmértékben a méretet, például pixelben, vagy százalékban, ami az elem méretéhez képest értendő.

Kulcsszavas értékei:

• auto - eredeti méret (alapérték)

• cover - a háttérkép teljesen lefedi az elemet

• contain - a kép addig növekszik, amíg vízszintesen, vagy függőlegesen be nem tölti az elemet.

Gyorsírásos háttér

A background gyorsírásos forma, amivel egy menetben több háttér jellemzőt is megadhatunk.

Többszörös háttérkép

Egy HTML elemnek meg lehet adni több háttérképet is, ehhez vesszővel (nem pontosvesszővel) elválasztva kell a háttérképeket felsorolni:

A background-image tulajdonsághoz hasonlóan a további háttér beállításokat is megadhatjuk képenként, szintén vesszővel elválasztva:

Hasonlóképpen működik a background gyorsírásos CSS tulajdonság:

A fenti példában háttérképenként új sorba van törve a kód, ez nagyban könnyíti az olvashatóságot.

Ha több háttérképet állítunk be egy HTML elemnek, előfordulhat, hogy kitakarják egymást, mindíg a sorrendben korábban megadott kép fog rálapolódni a később megadott képre (az elsőnek megadott kép lesz legfölül, az utolsónak megadott kép legalul).

Szintaktikai hibák

Szintaktikai hibának számít, ha a HTML dokumentum forráskódja hibás.

Ezt rendszerint nem vesszük észre, a hibák egy részének jelenléte nem okoz vizuális eltérést, vagy a böngészők sikeresen javítják a hibát az oldal betöltésénél.

A hibákat , vagy fejlesztőeszközeink beépített tudjuk felderíteni.

Miért kell elkerülni a szintaktikai hibákat?

Nem minden böngésző tudja kijavítani, egy kevésbé elterjedt böngészőben, amiben nem teszteltük jelentkezhet a hiba.

A fejlesztés későbbi fázisát akadályozza, eleve biztosabb mindent szabványosan felépíteni, hogy egy esetleges hiba miatt később ne ütközzünk nem várt akadályokba.

Akadályozza a keresőket az oldal feldolgozásában.

Jellemző hibák

Kötelező elemek hiányoznak a dokumentumból.

Pédául nincs !DOCTYPE. Vagy hiányoznak az alapvető elemek: html head body.

Blokkos elem van elembe ágyazva.

Lezáró tag hiányzik, vagy a lezáró tag-ből hiányzik a "/".

Elemek rosszul vannak egymásba ágyazva

Kötelezően megadandó tulajdonságok hiányoznak a HTML elemekből.

Szemantikai "hibák"

Szemantikai hiba, ha adott célra nem az annak megfelelő elemeket használjuk.

Például szemantikus jelentéstartalommal rendelkező elemek helyett jelentés, vagy szerepkör nélküli elemekből építkezünk.

Nem kapunk rá hibát a validátorban, viszont egyéb szempontokból tekintve nem optimális a megoldás.

Mik lehetnek ezek a szempontok?

SEO - Search Engine Optimalization Legfontosabb a keresőprogramok megítélése, a szemantikus elemek megkönnyítik a tartalom feldolgozását a keresők számára, ezért honorálják a számukra könnyen olvasható tartalmakat.

Usability - Akadálymentesítés Szemantikus elemek könnyítik a tartalom gépi feldolgozását, így például a felolvasóprogramok is képesek értelmezni azt.

Kód olvashatóság Szemantikus elemekkel könnyebben olvasható a forráskód (tudjuk, minek mi a feladata), ami ebben a lényeges, hogy nem csak a szerző, de egy másik fejlesztő is érteni fogja az elemek szerepét.

Jellemző hibák

Bekezdések helyett sortöréssel van tagolva a szöveg.

Lista elemek helyett sortörésekkel létrehozott lista.

Nem szemantikus elemekkel létrehozott kiemelések a szövegben.

Címek nem cím elemekből felépítve, CSS-el cím szerűre formázva.

A @media direktíva a megjelenítő eszköz típusa, és tulajdonságai alapján léptet életbe CSS szabályokat.

Segítségével eltérő kinézetet valósíthatunk meg eltérő képernyőfelbontásokon, vagy eszközökön.

Megjelenítő eszköz típusa (media types)

A közvetlenül a @media kulcsszó után kell megadni. Lehetséges értékei:

• all - minden típus

• print - nyomtatás

• screen - kijelző

• speech - felolvasóprogram

Nem kötelező megadni, ebben az esetben az alapértéket, az all-t veszi fel.

A fenti példában a bekezdések színe képernyőn vörös, kinyomtatva viszont fekete színű lesz.

Megjelenítő eszköz tulajdonsága (media features)

Megjelenítő eszköz szélesség alapján

Mobil eszközök esetén ez a megjelenítő eszköz szélessége, asztali böngésző esetén a böngésző ablaka mérvadó.

Megjelenítő eszköz magasság alapján

Megjelenítő eszköz orientációja alapján

...

További eszköz tulajdonságok

Reszponziv webalkalmazások építéséhez az eddig felsorolt eszköz tulajdonságok bő eszközkészletet biztosítanak, de rajtuk kívül még további tulajdonságok is elérhetőek. További példák:

• aspect-ratio - képernyő arány

• resolution - pixel sűrűség (retina)

• color - megjelenítő eszköz színei

• monochrome - monokróm e a kijelző

• pointer - pozicionáló eszköz típusa (egér)

Logikai operátorok

not (nem)

A not operátorral megfordíthatunk egy @media direktívát.

Ebben a példában minden eszköz típusra, ami nem print érvényes CSS szabály.

and (és)

Az and operátorral összekapcsolhatjuk az eszköztípusokat és jellemzőket, így több szabálynak kell megfelelnie az adott eszközön, hogy érvénybe lépjen a @media-ba foglalt CSS.

A fenti példában média típust, és média tulajdonságot is megadtunk.

, (vagy)

A , operátorral több eszköz szabályt is megadhatunk, ha egy közülük érvényes, a @media direktívában lévő CSS szabály(-ok) érvénybe lépnek.

Ebben a példában 100px alatt és 200px felett is érvényesül a CSS.

Mi az a rugalmas dobozok

A Flexbox, vagy rugalmas dobozok egy lineáris elem rendezési metódus. Egy konténer elemeit lehet vele sorba, vagy oszlopba rendezni. Az elemek méretét, helyzetét, sorrendjét rugalmasan szabályozhatjuk. Ehhez a konténer megjelenítés (display) értékét kell flex-re állítani:

Rugalmas irány - flex-direction

A flex-direction CSS szabállyal adhatjuk meg a rugalmas elemek rendeződésének ​ fő irányát (fő tengely).

Sor - row

Sorba rendezve az elemek vízszintesen rendeződnek egy sorba, és sorrendben balról jobbra következnek eymás után. Ez az alapértelmezett beállítás.

Fordított sor - row-reverse

Ugyanaz mint a sor, csak az elemek jobbról balra rendeződve jönnek egymás után a sorrendjük szerint.

Oszlop - column

Az elemek függőleges oszlopba rendezve jelennek meg, sorrendjük szerint fentről lefelé.

Fordított oszlop

Ugyanúgy mint az oszlop esetében, a fordított oszlopban nis függőlegesen rendezve jelennek meg az elemek, de a sorrendjük szerint lentről fölfelé alakul a sorrendjük.

Rugalmas törés - flex-wrap

A flex-wrap szabályozza az elemek több sorba törését. Ha nincs törés, az elemek összenyomódnak, és arra törekednek, hogy elférjenek egy sorban.

Nincs törés - no-wrap

Alapesetben az elemek egy sorban helyezkednek el, és rugalmasan összenyomódnak.

Törés - wrap

A törés engedélyezése esetén, ha elfogy az elemek helye egy sorban, akkor új sorba törnek.

Fordított törés - wrap-reverse

A elemeink törhetnek még fölfelé is.

Tartalom rendezése - justify-content

A justify-content határozza meg, hogy merre rendeződjenek az elemek a rugalmas konténerben, illetve hogy a közöttük lévő térközöket hogyan számolja ki a böngésző.

Némi hasonlóságot mutat a szöveg rendezéssel (text align) csak itt nem szövegsorokat rendezünk balra, vagy jobbra, esetleg középre, hanem rugalmas elemeket.

Kezdőponthoz rendezés - flex-start

Végponthoz rendezés - flex-end

Középre rendezés - center

Eltartás az elemek közé - space-between

Eltartás az elemek közé - space-around

Egyenlő eltartás - space-evenly

Elemek igazítása - align-items

...

Sorok, oszlopok igazítása - align-content

...

Rugalmas elemek tulajdonságai

...

Sorrend - order

...

Rugalmas nyúlás - flex-grow

...

Rugalmas összehúzódás - flex-shrink

A flex-shrink tulajdonság határozza meg, hogy a többi elemhez képest mekkora mértékben húzódjon össze az adott elem.

Önigazítás - align-self

Ábra

A Clearfix arra a problémára ad megoldást, hogy az nem tolják szét a szülő konténerük magasságát, így például ha egy elem csak úsztatott elemeket tartalmaz, a magassága 0-val lesz egyenlő.

Az alábbi példában a nem úsztatott elem a szülő magasságát széttolja (a szülő elem vörös kerettel van körbevéve).

A gyermeket balra vagy jobbra úsztatva a szülő elem magasságára már nem lesz hatással:

Ez jellemzően akkor jelent gondot, ha szövegben úsztatunk egy képet, és a kép túllóg a szülő elem határán:

Az alábbi CSS-t elhelyezve a szülő elemen az úsztatott gyermekek befolyásolják az elem magasságát:

A Bootstrap rendelkezik egy konténer elemmel, ez a legalapvetőbb elem, ezen alapszik a Bootstrap modulháló rendszere a grid.

A konténer elem felel a webes alkalmazásunk külső margójáért.

Konténer elemet úgy tudunk létrehozni, hogy egy HTML elemen elhelyezünk egy container osztályt. Ez az elem rendszerint egy div, de más elemeken is használható a container osztály.

container-fluid

Van egy alternatív változata, ami nem rendezi középre a tartalmat, viszont gondoskodik a jobb és bal oldali egységes eltartásról. Az alternatív konténert a container-fluid osztály hozza létre:

Konténer - container

Bár az előző fejezetben taglalt konténer elem önmagában grid nélkül is alkalmazható, a grid rendszer használatához szükséges, ugyanis grid rendszer csak konténer elemben veszi fel az oldalsó eltartásokat, ennek hiányában a böngésző lap széléhez fognak érni az elemeink.

Konténer elemet a container, vagy container-fluid osztállyal tudunk létrehozni:

Sor - row

A sor elem fogja össze a modulháló oszlopait, benne rendeződnek beállításaiknak megfelelő szélességű cellákra.

Sor elemet a row osztállyal tudunk létrehozni, és jellemzően a sorokat közvetlenül konténer elemekben helyezzük el:

Oszlop - column

Automatikus oszlopméretezés (auto layout)

A modulháló oszlopait a col osztállyal hozhatjuk létre, és közvetlenül egy sor elemben kell elhelyezni őket:

A col osztállyal létrehozott oszlopok sorba rendeződnek, egyenlő arányban töltik ki a rendelkezésre álló helyet:

A következő példában különböző számú oszlopokat tartalmazó sorokat hasonlíthatunk:

Rögzített oszlop méretek

A Grid rendszerben lehetőség van egy 12 oszlopos modulhálónak megfeleltetni az oszlopokat szélességben, ezt a col-x osztályokkal tehetjük meg, ahol az x helyére az elfoglalt oszlopok száma kerül. Ez alapján a col-1 egy oszlop széles, ez a legkisebb oszlop méret, a col-12 pedig a legnagyobb oszlopméret, ami a teljes rendelkezésre álló helyet kitölti. Például ha 3 egyforma széles oszlopot szeretnénk egymás mellett megjeleníteni mindegyiken a col-4 osztályt kell alkalmaznunk (12/3=4):

Egy soron belül az oszlop méreteket kombinálhatjuk:

Reszponzív oszlopok

Az oszlopok beállításait képernyő felbontástól függően befolyásolhatjuk, böngésző ablak szélességétől függően adhatunk meg az oszlopainknak külőnböző méretet:

Ahogy megfigyeljük minden mérettartomány egy fix értéken és a fölött lép érvénybe. 576 pixel (kicsi) felbontás alatt az alapértelmezett érték érvényesül, így ezt érdemes mindíg beállítani. Ha egy adott tartományra nem adunk meg értéket, az annál kisebb, vagy az alapértelmezett beállítás fog érvényesülni.

col- osztály után fűzve a mérettartomány rövidítését lépésenként tudjuk beállítani az adott oszlopot:

A következő példában az oszlopaink szélessége legkisebb képernyő méreten (mobil) teljes képernyő szélesség, kicsi képernyő méreten (tablet) fél képernyő szélesség, közepes képernyő méreten egyharmad képernyő szélesség, és így tovább, ahogy növekszik a képernyő méret egyre több elem fér el egymás mellett:

Legjellemzőbb használat, hogy az elemeinket mobilon függőlegesen rendezzük, egyébként meg egymás mellett vízszintesen:

Bootstrap beágyazása külső szolgáltatótól (CDN)

A Bootstrap külső szolgáltatónál elhelyezett CSS állományát egyszerűen beemelhetjük HTML állományainkba egy link segítségével (ezt a HTML dokumentum fejlécében kell elhelyezni):

Egyes interaktív szolgáltatások eléréséhez szükség van a Bootstrap JavaScript állományára is, ehhez a következő 3 sort el kell helyezni a HTML állomány lezáró body eleme előtt:

Amennyiben nem használunk interaktív elemeket, mint például a felugró ablakok, vagy lenyíló menük, akkor nem szükséges beemelni a JavaScript állományokat.

A következő példa dokumentumba be van emelve az összes CSS és JavaScript állomány:

Bootstrap bemelése a HTML állomány mellé

A CSS állomány bekötéséhez a HTML dokumentum fejlécében helyezzünk el egy link-et:

Válasszuk a bootstrap.min.css elnevezésű állományt, ez ez összes szolgáltatást tartalmazza, és tömörített formátumú.

A JavaScript állományok beemeléséhez a Bootstrap állományain kívül szükségünk lesz a jQuery keretrendszerre, és a popper.js felugró ablak kezelőre is. Az összes JavaScript állományt helyezzük el a html dokumentum mellett (a Bootstrap js mappája erre megfelel), és a body elem záró része előtti sorban helyezzük el a következő 3 hivatkozást:

A következő példa dokumentumba be van emelve az összes CSS és JavaScript állomány:

Az alábbi linken a fenti példa HTML dokumentum, és az összes hivatkozott állomány egyben letölthető:

Hasznos eszközök

Bootstrap témák

A Bootstrap keretrendszer könnyen témázható, mi is létre tudunk belőle hozni egyedi témát, ehhez a Bootstrap forrásállományait szükséges szerkeszteni. A forrásállományok szerkesztése haladó nehézségű feladat, szerencsére elérhetőek előre elkészített színsémák a Bootswatch.com weboldalon a témák menüpontban.

A téma használatba vételéhez töltsük le a témához kapcsolódó bootstrap.min.css állományt, és kössük be a HTML állományunkba.

Bootstrap Modulháló Chrome böngészőhöz

Ezzel az eszközzel a bootstrap modulhálóját jeleníthetjük meg a Chrome böngészőben, ami könnyíti a felület kialakítását.

Hogy helyi, a számítógépünkön található állományokon is használni tudjuk ezt a bővítményt, engedélyeznünk kell a következő opciót (Chrome-ban bővítmények kezelése):

Bootstrap kódkiegészítő VScode bővítmény

A Visual Studio Code alapból nem kezeli a Bootstrap kód részleteket, ezzel a bővítménnyel elérhetővé válnak a Bootstrap HTML struktúrái a b4 kulcsszóra.

A Bootstrap-nek módosíthatjuk a beállításait, így tudunk egyedi megjelenést biztosítani a felhasználói felületeknek, a számos lehetőség közül például használhatunk egyedi színeket, betűtípust, vagy módosíthatjuk a modulháló beállításait.

Stílus forrásállományok fordítása

Ahhoz hogy érvényesíteni tudjuk a beállításainkat, a Bootstrap stílusait a Sass forrás állományaiból kell fordítanunk, ezt rendeszerint egy fejlesztői keretrendszerrel végezzük, de lehetőség van erre a Visual Studio Code szövegszerkesztőben is egy bővítmény segítségével. Ehhez töltsük le a Live Sass Compiler bővítményt:

Telepítéshez nyissuk meg a Visual Studio Code bővítmény kezelőjét (Extensions), és a keresőbe írjuk be a bővítmény nevét (Live Sass Compiler ).

A találati listában a bővítmény neve mellett nyomjuk meg az Install gombot. Telepítés után a következő elem jelenik meg a Visual Studio Code láblécén:

Erre a gombra kattintva a Visual Studio Code le fogja fordítani CSS állományra az Sass forrás állományokat (ezeknek a kiterjesztése .scss).

Bootstrap forrás állományok bekötése

A forrás állományokat a Bootstrap letöltés oldalán találjuk:

Kattintsunk a Download Source gombra:

Egy tömörített zip állomány fog letöltődni, amit tömörítsünk ki. Csak az scss almappára és teljes tartalmára van szükségünk, ezt helyezzük el a HTML állomány mellett, amiben alkalmazni akarjuk:

Hozzunk létre egy style.scss nevű állományt, amibe behívjuk a Bootstrap forrását (az scss mappában található bootstrap.scss állományt kell hivatkozni):

Ha elmentettük az állományt, és megnyomjuk a Watch Sass gombot, a Visual Studio Code legyártja a CSS állományunkat:

Végül be kell kötnünk a HTML állományba a legyártott CSS állományt, egy szokásos link segítségével, amit helyezzünk el a HTML állomány fejlécében:

Ha mindent jól csináltunk, és megnyitjuk az állományunkat egy böngészőben, a Bootstrap komponensei megkapják az alapértelmezett Bootstrap stílusokat. A gomb elem például a következő képpen fog kinézni:

Egyedi beállítások alkalmazása

A Bootstrap beállításait az scss mappában a _variables.scss állományban találjuk, ezt direkt módon nem módosítjuk, mert fölül tudjuk írni a beállításait a saját style.scss állományunkban, a @import előtt. Például megváltoztathatjuk az elsődleges (primary) színt:

Fordítás után ez megváltoztatja többek között a gombunk színét is a korábbi kékről vörösre:

Minden beállítás változókban van tárolva ezek mindíg $ jellel kezdődnek az scss állományokban, az új érték után el kell helyezni egy !default kapcsolót ez felülírja a később bekötött Bootstrap beállítás értékét.

Példák további beállításokra

Alapértelmezett betűtípus felülírása

Ebben a példában egy Google betűkészlettel írjuk felül az alapértelmezett fontot:

Ahhoz, hogy a font betöltődjön be kell kötni a HTML állományba.

Modulháló beállításainak módosítása

A következő példában a Bootstrap modulháló oszlopainak a számát 12-ről 16-ra módosítjuk, az oszlopok közötti csatornák (gutter) szélességét 30 pixelről 20 pixelre csökkentjük:

Példa állományok

Az alábbi linken a fenti példa HTML és SCSS állományok letölthetőek:

Tipográfia

A Bootstrap a HTML elemeket előformázza, a szöveges tartalmakat egy látja el, minden operációs rendszernek a megfelelő rendszer fontkészletét töltve be.

A megszokott címeken kívül lehetőség van nagy fontméretű, kiemelt címeket is használni, a display-1, display-2, display-3, display-4 CSS osztályokkal:

Hasonlóan a címekhez, a bekezdéseknek is van egy kiemelt verziója, amit a lead osztállyal hozunk létre. A példában csak az első bekezdésre tesszük rá:

Képek

Reszponzív képek

Reszponzív, környezetéhez adaptálódó méretű képet az img-fluid CSS osztállyal tudunk készíteni:

Ezek a képek nem nyomják szét a szülő elemüket, autómatikusan felveszik a rendelkezésre álló helyet szélességben.

Képek úsztatása szövegben

Kép szövegbe ágyazását a float left, és a float-right CSS osztályok teszik lehetővé:

Kép lekerekített sarkokkal

A kép sarkának lekerekítéséhez lássuk el egy rounded osztállyal:

Állítható a lekerekítés mértéke is, a rounded osztály mellett használhatjuk a rounded-sm és a rounded-lg osztályokat.

További kép stílusok