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.
2013. május 15., szerda
2013. május 8., szerda
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:
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">
2013. május 4., szombat
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:
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:
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.
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
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
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.
Feliratkozás:
Bejegyzések (Atom)