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.

Meta tagok

Egy weboldal készítése során fontos rész a head-ben szereplő meta tagok, mivel a keresőoptimalizálás már lényeges része a  fejlesztésnek. A felhasználók általában már a 2. oldalig sem jutnak el a keresőkben, éppen ezért figyelnünk kell a meta tagokra, mert ha rosszul állítjuk be nem csak hátrébb csúszhat, de el is tűnhet a honlapunk.

Az oldal karakterkódolásának megadása:

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

Az oldalt generáló motor készíti el ezt a meta tagot, amennyiben valamilyen CMS-t használunk, mint Wordpress, Joomla, vagy Drupalt:

<meta name="generator" content="" />

Ez a sor a Google webmaster tools tulajdonjogát adja meg. Érdemes ezt integrálni az oldalba, mert így javítani tudjuk weboldalunk hibáit, mert a Google értesítést küld erről.

<meta name="verify-v1" content="a1ST4w................=" /> 

Ebben a részben az oldal leírását kell megadni, a keresőben szövegként ez jelenik meg általában. Nem kell kisregényt írni ide, elég 1-2 mondatban összefoglalni az oldal lényegét. 255 karakter maximális terjedelem az ideális:

<meta name="description" content="Meta tagok felsorolása, ismertetése weboldal készítés során fontos szempontok figyelembe vételével..." /> 

A kulcsszavakat a content részben vesszővel elválasztva adhatjuk meg. Maximum 8-10 szót írjunk be. Érdemes olyanokat választani, melyekre a felhasználók rákeresnek.

<meta name="keywords" content="meta, meta tagok, keresőoptimalizálás, ..." /> 

Keresőrobotok működését szabályozó meta tag. Értékei lehetnek: all, none, index, noindex, follow, nofollow. Jelen beállítás során mi engedélyezzük a robotoknak, hogy kövessék és indexeljék oldalunkat.

<meta name="robots" content="index, follow" /> 

A tartalom típusának megadása:

<meta name="resource-type" content="document" /> 

 A weboldal szerzőjének megadására van lehetőség ebben a metában:

<meta name="Author" content="szabo.henrietta@mester-team.hu"> 

A honlapot létrehozó személy nevét adhatjuk meg a következő módon:

<meta name="generator" content="Szabó Henrietta"> 

Az oldalt kiadó személy, vagy szervezet mail címe.

<meta name="Publisher" content="szabo.henrietta@mester-team.hu"> 

A szerzői jogok tulajdonosát lehet megadni a copyright meta content részében:

<meta name="copyright" content="Sz.Henrietta 2013." /> 

A megjelenés országa, valamint a megjelenés nyelve:

<meta name="country" content="Hungary"> 

<meta name="content-language" content="hu, hun, hungarian"> 

Ebben a metaban azt adhatjuk meg, hogy a robotok lehetőleg mikor látogassanak vissza az oldalunkra.

<meta name="revisit-after" content="5 days">

Egyéni submit gombok CSS3-mal, árnyékolás

Múltkor egyéni menüsort készítettünk, most egy űrlap gombját fogjuk egyedivé tenni. Ha weboldalt készítünk, általában látványterv alapján készítjük el a sitebuildet, de nem kell mindig képet tenni az egyes elemek mögé, mert ez is lassítja az oldal megjelenését.

Először is létrehozunk html-ben egy űrlapot, hogy legyen mit megformáznunk:

<form method="post" action="valami.php">
            <label>Név: </label><input type="text" size="40" name="nev"><br />
            <label>Üzenet: </label><textarea rows="5" cols="40"></textarea><br />
            <input type="submit" name="submit" id="button" value="Küldés">
</form>

CSS3-ban a formázást egyszerűen meg tudjuk adni űrlapok esetében. Általánosítva, ha nem használunk id-t, vagy class-t, így néz ki: input[type="submit"]. Ekkor az input elemek submit típusára adjuk meg a formázást.
A gombunk lekerekített lesz, ezt már ismerjük: border-radius-szal adható meg.
Hátterének adhatunk színátmenetet, vagy 1 színből is állhat (jelen esetben átmenetes lesz). A betű színe is megadható, félkövérítjük, hogy jobban olvasható legyen.
A dizájn során a grafikusok szeretik túl effektelni ezeket a részeket, így lett újabb trend során általános használat az árnyékolás, akár a teljes doboz köré, vagy csak a betű köré. Alap állás szerint először csak a gomb köré rakunk árnyékot, amit box-shadow-val tudunk megtenni. Ennél összesen 8 értéket tudunk megadni:

• horizontális eltávolodás
• vertikális eltávolodás
• elhalványodás
• spread, mely az árnyék nagyságát adja meg
• RGB-ben a 3 szín megadás
• átlátszóság, melynek értéke 0.1 és 1 közötti

Most a formázás összességében így néz ki:

 input[type="submit"]{
                border:none;
                background: #bfd255; /* Old browsers */
                background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 41%, #72aa00 57%, #9ecb2d 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(41%,#8eb92a), color-stop(57%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
                width:120px;
                height:25px;
                color:#FFFFFF;
                font-weight:bold;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                margin:5px 0;
                -webkit-box-shadow:  1px 1px 2px 2px rgba(40, 140, 40, 1);
                box-shadow:  1px 1px 2px 2px rgba(40, 140, 40, 1);
            }

A hover eseménynél a formázást módosítjuk és itt is alkalmazzuk a transitionst, hogy effektesebb legyen, ezzel a felhasználó számára élvezhetőbbé tehetjük az oldalt. Itt a szövegnek adunk árnyékot, melyet a text-shadow-val tudunk megtenni. Itt a következő értékeket kell megadni:

• horizontális távolság
• vertikális távolság
• blur-radius, ami a szín erősségét jelöli
• árnyék színe itt hexadecimáls formában

Ennek a css kódja a következő:

input[type="submit"]:hover{
                -webkit-transition: all 500ms linear;
                -moz-transition: all 500ms linear;
                -ms-transition: all 500ms linear;
                -o-transition: all 500ms linear;
                transition: all 500ms linear;
                color:#75AC03;
                background:#BCD053;
                text-shadow: 2px 1px 3px #FFFFFF;
                filter: dropshadow(color=#FFFFFF, offx=2, offy=1);
               
            }

Végeredményben kaptunk egy egyedi gombot (jelen leírás a teljesség igénye nélkül készült), mely fölé az egeret húzva lassan megváltozik a háttere és színe, így nemcsak, hogy nem kell képet alkalmaznunk mindkét állapotában, hanem a tervezés során szabadabban alkothatjuk meg az ilyen elemeinket.

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.

background - újdonság CSS3-ban

Egy kód megírása során figyelnünk kell arra, hogy optimalizált legyen, az oldal gyorsan betöltődjön, hiszen manapság ha egy weboldal betöltődése több, mint 1-2 másodpercig eltart, a felhasználó azonnal odébb áll, hiszen gyakorta sok hasonló honlapot talál.
Egy weboldalnak esztétikus megjelenést kölcsönöz a megfelelő háttérkép kiválasztása, vagy egy szín, ami az oldal alapját adja. Új trendként elterjedt a színátmenetes háttérkép, melyhez már nem szükséges egy képet szerkesztenünk, mert CSS3-ban megoldották ezt a problémánkat, csakúgy, mint a több kép egyszeri kezelését is.
Kezdjünk egy kis ismétléssel. CSS-ben megadhatunk háttérszínt hexadecimális, RGB, vagy név megadással. (Az RGB megadás során negyedik paraméterben az áttetszőség adható meg.)

background-color: #0000ff;
background-color:(0,0,255);
background-color: blue;

Megadhatunk egy konkrét képet:

background-image:url('hatter.jpg');

Háttérkép esetén külön megadhatunk dolgokat, mint ismétlődjön-e a kép, illetve mely tengely mentén (repeat, x-repeat, y-repeat).

background-repeat: no-repeat;

Illetve megadhatjuk a pozícióját (center, top, bottom, left, right). Ezeket párba állítva is megadhatjuk, ekkor ez első érték bal, közép vagy jobb oldal, a másik érték, fent, középen, vagy lent. Ugyanakkor ezeket px-ben is megadhatjuk.

background-position: left top;

Ha body-nak adunk meg háttérképet, akkor beállíthatjuk azt is, hogy a kép mindig ugyanúgy ott maradjon, vagy a szöveggel együtt mozogjon (fixed, scroll).

background-attachment:fixed;

Ezeket egy sorban is meghatározhatjuk, így első paraméter lesz a szín, amit a kép hivatkozás követ, ezután a pozíció meghatározása, majd az ismétlődés megadása.

background: #0000FF url('hatter.jpg') center top no-repeat;

A CSS3 lehetőséget ad arra, hogy több háttérképet adjunk meg egy divnek, ezt nevezzük multi-backgroundnak.

background: url(bg1.png), url(bg2.jpg);

Emellett kódból meg tudjuk valósítani, hogy színátmenetes legyen egy háttér. Ehhez több sorban kell megadnunk az értékeket, hogy minden böngészőre hasson, illetve korábbi változatokra is.

firefox 3.6-tól érvényes
background: -moz-linear-gradient(top,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);

Chrome,Safari4-től
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8));



Chrome10-től, Safari5.1-től
background: -webkit-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);


Opera 11.10-től
background: -o-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);



IE10-től
background: -ms-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); 

W3C
background: linear-gradient(to bottom,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);



IE 6-9
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 );

A sokféle megadás ellenére is érdemes egy alap színt meghatározni arra az esetre, ha valamely böngésző nem képes az átmenet megjelenítésére.

A képen nem ismétlődés miatt van középen egy erősebb sáv, a gradiens lett így meghatározva.
Remek segítség ehhez a http://www.css3generator.com/, melyben megadhatjuk a színeket és a kódot legenerálja a számukra.

További hasznos információkat a http://www.w3.org/TR/css3-background/ oldalon találtok.

Margin és padding - igazítás CSS-sel

Régebbi időkben elterjedt volt a táblázatos kialakítás, így egyszerű volt több oszlopos elrendezést kialakítani.

Ma a dobozmodellt használjuk egy oldal kialakításnál, mert a honlapon megjeleníteni kívánt elemek mindegyike téglalap alakú területet foglal el. W3C szabvány szerint igazíthatjuk a dobozon belül elhelyezkedő szöveget, ami azért is fontos, mert így a böngészők többsége jól fogja megjeleníteni a kívánt tartalmat. 

Adhatunk belső margót, paddingot. Ekkor a doboz keretétől toljuk el a szöveget. Megadási formája lehet:

• padding-top – felső belső margó
• padding-right – jobb belső margó
• padding-left – bal belső margó
•  padding-bottom – alsó belső margó

Vagy másképp: padding: 5px 10px 15px 20px; Ekkor egy sorban megadjuk az összes értéket a következő sorrendben: felső (5px), jobb (10px), alsó (15px), bal (20px). Amennyiben a felső és alsó, illetve a jobb és bal megegyezik, akkor elég azt a kettő értéket megadni: padding:5px 10px;
Az értéket mindig px-ben kell megadni.

A doboznak adhatunk külső margót is, ekkor egy másik doboztól való távolságát határozzuk meg. Megadási formája lehet:

•  margin-top – felső külső margó
•  margin-right – jobb külső margó
•  margin-left – bal külső margó
•   margin-bottom – alsó külső margó

Másképp is megadhatjuk, paddinghoz hasonló módon vagy 4 érték megadásával, a sorrend ugyanaz (felső, jobb, alsó, bal), ha pedig a két szemközti megegyezik, akkor két érték megadásával.

A következő egyszerű példánál látható a lényeg. Készítünk egy divet, melynek az alapot fogja szolgálni, tartalomnak nevezzük el. Ez a kiinduló dobozunk. Ebbe teszünk egy bekezdés <p></p> tagek között. 

HTML kód:

<body>

           <div class="tartalom">

                   <p>

                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum blandit leo at auctor. Aliquam scelerisque purus vel felis gravida id pellentesque lectus imperdiet. Aenean non neque nisl, eget vehicula nunc. Etiam eget purus felis. Maecenas consequat magna eu augue consequat iaculis. Etiam vitae enim lorem. Donec nibh nibh, vestibulum quis consectetur nec, cursus eget arcu. Etiam sed neque quis erat facilisis varius lobortis quis dolor.<br /><br />

                     </p>

            </div>

</body>

CSS kód:

.tartalom{

                width:600px;

                margin:0 auto;

}

.tartalom p{

                background:lightblue;

                padding:10px;

                margin:30px 10px;

                text-align:justify;

}

A tartalom divünk mérete 600px és középre igazítjuk margin: 0 auto-val. (HTML5-ben a <center></center> tagek nem érvényesülnek.) A szövegnek megadtunk egy 10px-es belső margót, ezt a lila szín jelzi az alábbi képen. A külső margó alul, felül 30px, jobbra, balra 10px, ezt a sárga szín szemlélteti.

Ezeket tudjuk használni szövegek és képek igazítása során.

Amennyiben egymás mellé helyezünk dobozokat, a külső margót hozzá kell számolni, mert gyakran amiatt csúsznak egymás alá a divek.

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.