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.