Alap HTML5 tagek

A HTML5 megalkotása során olyan tageket határoztak meg, mellyel az oldal összefüggő részeit lehet megadni, így elkülönül a megjelenés a tartalomtól. A formázás különálló stíluslapokon meghatározható, ezáltal a kód jobban átlátható a fejlesztő számára.

Nézzünk meg néhány elemet, melyet leggyakrabban használunk egy weboldal készítés során, a teljesség igénye nélkül:

<header> az oldal fejlécét határozza meg, vagy a bevezetést tartalmazó elemeket.
<footer> a honlap láblécét definiálja.
<nav> a navigációs rész helyét jelöli ki, melyen belül a linkcsoportoknál csak a fő menüt kell megjelölni.
<section> a weboldal egy összefüggő részét jelöli.
<hgroup> ezzel a résszel is fejlécet lehet összefogni, melyben több h1-h6 tag szerepelhet, így többszintű címet készíthetünk.
<aside> a tartalomhoz kapcsolódó rész, például széljegyzet.
<figure> összetartozó képek, vagy összetartozó kép és szöveg meghatározására alkalmas.
<time> dátumot, vagy az időt jelöli.
<mark> megjelölés, kiemelés, mely különösen hasznos kereséskor, mert ezzel ki lehet emelni a kulcsszavakat.

Ezeknek a hasznossága abban rejlik, hogy a stíluslapon külön id, vagy class megadása nélkül formázhatóak, span tag-be sem kell tenni a szöveges részeket. Valamint a keresők felismerik az oldal tartalmi részeit, ami nagy előny, így a tartalom helyett nem a menü fog megjelenni a kereső listájában.

Egyéni menü CSS3-mal

Múltkor áttekintettük, hogy milyen egyéni hátteret lehet készíteni kép felhasználás nélkül, csupán CSS3-mal. Most menüszerkezetet fogunk készíteni CSS3-mal és animációt is teszünk rá.

Először is készítsünk egy menüt, melyben van pár menüpont. HTML5-öt használva a body-n belül nav tagek közt tudjuk definiálni.

<nav>

<a href="#">Kezdőlap</a>

                <a href="#">Rólunk</a>

                <a href="#">Szolgáltatásaink</a>

                <a href="#">Elérhetőség</a>

</nav>

A menüpontoknak bármilyen formázást adhatunk, így meghatározzuk a betű színét és akár hátteret is kaphat. Kiindulásként kap egy narancsos betűszínt, kivastagítjuk, az aláhúzást eltűntetjük a linkről és kap egy kis paddingot, hogy legyen távolság a pontok között.

nav a{

text-decoration:none;

color:#FF7E22;

                font-weight:bold;

                padding:10px;

}

Így most egy átlagos menü megjelenése van és most jön a lényeg. CSS3-ban meg lehet adni transition-t, mellyel késleltetett változást idézhetünk elő és így olyan hatása lesz, mintha egy animáció futna le a háttérben. Ennél is figyelni kell a böngészőkre –webkit, -moz, -ms, és –o előtaggal tudjuk működésre bírni a különböző böngészőkben. Ezt a hover eseményre tesszük rá és csupán a betűszínt módosítjuk, illetve háttérszínt adunk neki.

nav a:hover{

-webkit-transition: all 600ms linear;

                -moz-transition: all 600ms linear;

                -ms-transition: all 600ms linear;

                -o-transition: all 600ms linear;

                transition: all 600ms linear;

                color:#FEFEFE;

                background:#FF7E22;

}

Ennek eredménye az lesz, ha bármely menüpont fölé visszük az egeret, annak 600ms alatt megváltozik a betűszíne és megjelenik a háttér. Az all megnevezés azt jelöli, hogy mindenre érvényes a transition, értéke lehet: all, color, background, height, weight, outline.
A linear az animáció típusát jelöli, melynek értéke lehet a javascriptből jól ismert: easy, linear, easy-in, easy-out, easy-in-out.
Az átváltás ideje secondban és milisecondban adható meg.

Ezzel a technikával könnyedén egyedivé tehetjük bármely menü szerkezetünket és remekül alkalmazható legördülő menü esetében is, így nem terheljük a felhasználó gépét, és nem áll fenn a veszélye annak, hogy nem engedélyezte böngészőjében a javascriptet, és ezért nem jelenne meg valami.

HTML5 űrlap

Minden weboldal elengedhetetlen kelléke egy kapcsolatfelvételi űrlap készítése. HTML5 által az adatellenőrzés sokkal könnyebbé vált, mert bevezetésre került az email és url, mely piros keretet kap az újabb böngészőkben, ha a felhasználó rosszul töltötte ki.
Az űrlap elemeket <form></form> közé tesszük. A form tagnek adhatunk name értéket. Az actiont általában üresen hagyjuk, ha ugyanabban a fájlban kezeljük az átadott értékeket. Amennyiben más fájlban, akkor annak neve kerül ide. A method POST, vagy GET értéket kap. (Ezt PHP keretein belül fogom részletezni).
Egy űrlapon belül megadhatunk egy-, vagy többsoros szöveges beviteli mezőket, legördülő listákat, vagy választókat, azon belül is ha egyetlen választ jelölhet be a látogató, akkor radiogombot használjuk, ha több válaszadási lehetősége van, akkor checkboxot.

<form name="mesterteam"  method="POST" action="">   
            <input type="text" name="nev" id="nev" placeholder="Neved"> 
            <input type="email" name="email" id="email" placeholder="E-mail címed" > 
            <input type="url" name="weblap" id="weblap" placeholder="Weboldal címed" > 
            <input type="tel" name="tel" id="tel" placeholder="Telefonszámod" > 
            <textarea name="uzenet" id="uzenet" placeholder="Ide írd az üzenetedet"></textarea> 
        <h3>Érdeklődés:</h3> 
        <select id="erdeklodes" name="erdeklodes"> 
            <option value="weboldal készítés">Weboldal készítés</option> 
            <option value="keresőoptimalizálás">Keresőoptimalizálás</option> 
            <option value="kódoptimalizálás">Kódoptimalizálás</option>  
            <option value="karbantartás">Karbantartás</option> 
        </select> 
        <h3>Sürgős:</h3> 
            <input type="radio" id="igen" name="surgos" value="igen"> 
            <label for="igen">Igen</label> 
            <input type="radio" id="nem" name="surgos" value="nem" checked="checked"> 
            <label for="nem">Nem</label>    
   
         <input type="reset" name="torles" id="torlogomb" value="Törlés"> 
        <input type="submit" name="kuldes" id="kuldogomb" value="Küldés"> 
   </form> 

Minden mezőnél fontos, hogy megadjuk a name attribútumot, mert azon keresztül tudunk hivatkozni rá az adatok feldolgozása során. Emellett ha formázni szeretnénk, megtehetjük id alapján, vagy class-t is adhatunk neki. A placeholder a kitöltendő mezőben jelenít meg szöveget.
Az input típusa lehet: text, email, url, tel.
A textarea több soros beviteli mező, rows és cols értékek megadásával tudjuk megadni a méretét. Ennek záró tagje is van, oda kell figyelni, hogy az input mezőkkel ellentétben ezt lezárjuk, valamint, hogy ne tegyünk közé sortörést, vagy üres szóközöket, mert az azt eredményezheti, hogy a mezőben nem a legelején fog villogni a kurzor.
A select mező által legördülő listát készíthetünk; ennek is meg kell adni a name változót. Értékeit option tagek között határozhatjuk meg.
Jelen esetben egy radio gombos választót mutatok be, de a checkbox is ugyanilyen elven működik. Alapértelmezetten a nem válasz van kijelölve, melyet a checked="checked" adtam meg.

Az űrlapok legfontosabb eleme a submit gomb, mert a formoknál ez indítja el a feldolgozást. A reset gomb törli az űrlapban megadott értékeket.

A későbbiek folyamán dizájnt is fogunk csinálni az űrlaphoz, ebben a részben csupán a html részt taglaltam.

Videó beágyazás HTML5-tel

Korábbi változatában a mozgóképeket <object> tag-ek között elhelyezve lehetett beágyazni az oldalba. Ahhoz, hogy a videó megtekinthető legyen a felhasználónak magának kellett gondoskodnia arról, hogy a böngészőjéhez a megfelelő bővítmény telepítve legyen.

A HTML5 által szabványosított <video> tag által nincs szükség további pluginek használatára és CSS-sel megformázható. Figyelni kell a videó kódolására, mivel különböző böngészők más kódolási eljárást használnak.

• Az egyik a WebM Project, melyet a Chrome, Opera és Firefox is támogat. Ennek a létrehozásával a jogdíjmentes videó formátum létrehozása volt a cél, így bárki számára hozzáférhető. Fájlkiterjesztés: .webm.
• Másik jogdíjmentes formátum a Theora. Ezt a Xiph.org Alapítvány fejleszt az Ogg projekt keretében. Fájlkiterjesztés: .ogv, .ogg
• A H.264 MPEG MPEG konténer formátum, a Safari, Chrome és Internet Explorer által támogatott, nem jogdíjmentes. Kiterjesztése: .MP4.

Egyszerre több fájlt is meg lehet adni külön <video> tag-ek között, amennyiben több videó, valamint audió sávba konvertáljuk a mozgóképet, hogy minden böngészőből elérhető legyen.

<video src="video.ogg" controls="controls" type="video/ogg" width="300" height="200" preload="none" >
Böngészője nem támogatja a videó lejátszását.
</video>

src – a fájl megadásának helye, elérési útvonallal

controls – irányító elemeket is megjeleníti

type – video típusa

width – megjelenített video ablak szélessége, érdemes megadni

height – megjelenített video ablak magassága, érdemes megadni

preload – előre letöltés, értéke lehet: none, metadata (automatikusan letöltődnek a videó tulajdonságai), auto (teljes tartalom automatikus letöltése)

A <video> tag-ek közötti szöveg azok számára fog megjelenni, akiknek a böngészőjében nem támogatott a megadott videó lejátszása.

Egyéb paraméterek, amelyeket meg lehet adni:

autoplay – a lejátszás automatikusan elindul, nincsen értéke

loop – a video végtelenített lejátszása, szintén nem kell értéket adni

poster – kép adható meg, értéke a fájl elérési útja, fájlnév és kiterjesztés

muted – hang elnémítása

Érdemes egy videót úgy betenni egy oldalba, hogy preload-dal előre letöltjük, de nem indítjuk el automatikusan a lejátszást, csupán egy figyelemfelkeltő poster-t adjunk meg neki, így a weboldalunk felhasználóbarát marad.

Kéthasábos HTML sablon

Most elkészítünk egy oldalt, egy alap sablon mintával, mely a későbbiekben könnyen újra hasznosítható lesz. Ahogy ígértem kéthasábos elrendezésű, dives kialakítású lesz. Régebben táblázattal alakították ki az oldalakat, de ez már elavult technika.

Először a html kódot írjuk meg

<!DOCTYPE html>

<html>

            <head>

                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                        <meta name="description" content="Kéthasábos minta oldal elkészítése">

                        <meta name="keywords" content="weblap, minta, kéthasábos">

                        <link rel="stylesheet" type="text/css" href="style.css">

            </head>         

            <body>

                        <header>

                        </header>

                        <div class="tarto">

                                   <div class="bal">

                                   </div>

                                   <div class="jobb">

                                   </div>

                        </div>

                        <footer>

                        </footer>

            </body>

</html>

Deklaráljuk a DOCTYPE-ot, majd megadjuk a meta tagokat a head részben és link tagben hivatkozunk a külső css-re, melyben a tényleges formázást fogjuk elvégezni.
Ezután a body részében csinálunk egy fejrészt, melyet html5 szabvány szerint headerként adunk meg. Következik egy tartó div, mely a két oszlopot magába foglalja, ezt most a könnyebben érthetőség végett neveztem el jobb és bal-nak. Class-ként adjuk meg, akkor a css-ben ponttal hivatkozunk rá. Megadhatjuk id-ként is ekkor # jelet kell elé tenni. A különbség a kettő között, hogy az id által megadott div egyszer szerepelhet az oldalon, de class-ra többször is hivatkozhatunk.

A css-be a következő részletet írjuk:

body{background:#BBEE99;}

header{

            width:1024px;

            margin:0 auto;

            height:150px;

            background: #b4e391;

}

.tarto{

            width:1024px;

            margin:0 auto;

}

.bal{

            width:200px;

            float:left;

            min-height:100%;

            background:#66FF00;

.jobb{

            width:804px;

            float:left;

            background:#ffffff;

}

footer{

            clear:both;

            width:1024px;

            margin:0 auto;

            height:50px;

            background: #ffffff;

}         

Minden div-nek fontos, hogy méretet adjunk. Jelen esetben 1024px szélességű weboldalt készítünk, melyet középre igazítunk margin: 0 auto-val. A height adja meg a magasságot, a background pedig a háttérszínt.

A bal és jobb classt balra lebegtetjük (float:left;), így ha a méretük alapján elférnek egymás mellett, akkor úgy fog kinézni, ahogy akartuk.

Ha már egy alap oldalt csinálunk tegyünk bele menüt és tartalmat. A fejrészbe kerülhet logó, szlogen, vagy akár megosztó gombok is. Most csak egy címet írunk ki rá h1-es tagek között és hogy ne legyen olyan egyhangú, a háttérnek CSS3-mal színátmenetet adunk. Ezt már csak az explorer régebbi változata nem támogatja, éppen ezért kell megadni egy alap színt is. Így nem kell képként beilleszteni színátmenetes  részeket és az oldal gyorsabban megjelenik majd.

HTML kód:

<header>

            <h1>Első weboldalam</h1>

</header>

CSS formázás:

header{

            width:1024px;

            margin:0 auto;

            height:150px;

            background: #b4e391; /* Old browsers */

            background: -moz-linear-gradient(top,  #b4e391 0%, #61c419 50%, #ffffff 100%); /* FF3.6+ */

            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */

            background: -webkit-linear-gradient(top,  #b4e391 0%,#61c419 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */

            background: -o-linear-gradient(top,  #b4e391 0%,#61c419 50%,#ffffff 100%); /* Opera 11.10+ */

            background: -ms-linear-gradient(top,  #b4e391 0%,#61c419 50%,#ffffff 100%); /* IE10+ */

            background: linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#ffffff 100%); /* W3C */

            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

header h1{

            padding:40px;

}

A háttér megadásánál minden sornál láthatod, hogy mely böngészőre lesz hatással, azért kell ennyi féle képpen megadni.

A h1-nek adunk egy padding-ot, mely 40pixellel le és betolja a szöveget.

Most a bal oldal lesz a menü helye, a jobb oldal a tartalomé. A menüszerkezetet listaként definiáljuk és <a href=””></a> tagek között adjuk meg az oldalak linkjét.

HTML kód:

<div class="bal">

            <ul>

                        <li><a href="index.html">Főoldal</a></li>

                        <li><a href="bemutatkozas.html">Bemutatkozás</a></li>

                        <li><a href="esemenyek.html">Események</a></li>

                        <li><a href="Kapcsolat.html">Kapcsolat</a></li>

            </ul>

</div>

CSS formázás:

.bal{

            width:200px;

            float:left;

            min-height:100%;

            background:#66FF00;

}

.bal ul{

            list-style-type:none;

}

.bal li{

            width:200px;

            padding:10px;

            height:20px;

}

.bal li a{

            color:#004400;

            display:block;

            padding:5px 0 5px 20px;

            font-size:18px;

}

.bal li a:hover{

            background-color:#004400;

            color:#66FF00;

}

A listának nem lesz lista jelölője, ezért állítjuk be a list-style-type:none-t. A linknél tudjuk megadni a szöveg színét, a hoverrel adjuk meg azt, hogy hogyan nézzen ki, ha az egér fölötte van. Adhatunk a linknek class-t, mellyel jelölhetjük, hogy épp melyik link az aktív, hogy a látogató számára egyértelmű legyen, hol van.

A jobb oldal egy egyszerű szöveget tartalmaz; a címet <h1></h1> között adjuk meg, a tartalmat pedig <p></p> között, jelen esetben egyszerű ipsum szöveget, mely mindig jó szolgálatot tesz, amikor azt akarjuk tesztelni, hogyan fog kinézni az oldal egy hosszabb szöveggel. Ebbe teszünk egy képet is a példa kedvéért. A <br /> a sortöréseket jelöli.

HTML kód:

<div class="jobb">

            <h1>Főoldal</h1>

            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin consequat ante, nec dictum ligula tempor sit amet. Fusce sagittis lacinia ullamcorper. Donec justo libero, pulvinar in vehicula non, euismod sodales lorem. Mauris erat lectus, fermentum at venenatis in, eleifend in libero. Mauris convallis malesuada odio at consequat. Duis non leo quis justo tempus volutpat sit amet sit amet purus. Suspendisse potenti. Sed lobortis tortor ut ante blandit eget laoreet lacus bibendum. Aenean sollicitudin commodo lorem in lacinia. Nunc bibendum feugiat bibendum. Aliquam adipiscing neque et nisi pretium scelerisque. Nulla eleifend vehicula sodales. Donec erat arcu, congue condimentum semper quis, convallis ut leo.<br /><br />

Pellentesque fringilla commodo tortor, ut dignissim diam feugiat at. Fusce ornare sem risus. Duis vestibulum lobortis scelerisque. Mauris at est id purus malesuada porta. In pulvinar iaculis arcu, non faucibus tellus tempus non. Praesent pellentesque orci at ante sodales consequat. Suspendisse quis leo et metus condimentum aliquam nec eget libero. Quisque aliquam, justo et vehicula sagittis, ipsum libero posuere diam, vitae mattis libero libero eu risus.

<br /><br />

<img src="rozsa.jpg" alt="rozsa" title="rozsa" width="150">

Nam a nibh id felis commodo dignissim vel non velit. Nunc viverra adipiscing sollicitudin. Phasellus vehicula egestas ipsum, a tristique orci fermentum sed. Donec dictum congue leo, vel scelerisque dolor volutpat a. Suspendisse consectetur tempor faucibus. Mauris dapibus, purus et congue tempus, lorem nisl volutpat eros, eu pulvinar nunc magna sit amet diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas in magna nisl. Suspendisse vitae lorem magna, id elementum magna.

            </p>

</div>

CSS formázás:

.jobb{

            width:804px;

            float:left;

            background:#ffffff;

            padding:10px;

}

.jobb h1{

            margin:10px 0;

}

.jobb p{

            text-align:justify;

            line-height:120%;

}

.jobb img{

            float:right;

            padding:5px;

}

A többi oldal kialakítása ugyanígy néz ki. Ha a menü <a href=…> tagjában megadott néven mented el az aloldalakat, akkor kész az első statikus oldalad. A kinézeten könnyedén tudsz javítani, jelen esetben nem törekedtem a szép design kialakítására.