Ma a sitebuild egy jelentős kihívásával kellett szembe néznem, a megrendelőm egyedi betűtípusokkal szerette volna megjeleníteni az oldalának menüpontjait és header tagjainak szövegét.
Nincs is ezzel gond, ha statikus az oldaltartalom és a menüsor. Ilyenkor képek beillesztésével megoldható a dolog mind a h1 tag-ek esetében, mind a menüpontoknál. Igen, keresőoptimalizálás szempontjából nem túl fényes a megoldás így magában, még ha a title részt ki is töltjük az <img> tegeknél, de a CSS3 ad tökéletes megoldást, a szöveg mögé beillesztjük annak kép változatát, és a szöveget elcsúsztatjuk.
De ne menjünk ilyen messzire, hiszen ez a kép beillesztős megoldás csak akkor lehetőség, ha mint fentebb írtam, statikus a tartalom. Azonban ha a menüsort szeretné bővíteni a felhasználó, illetve új tartalmat szeretne felvinni, akkor mindig csináljon képeket? Felejtős a dolog.
Sokkal elegánsabb, ha eleve nem használunk képeket, még statikus tartalmaknál sem. Keresőoptimalizálás szempontjából is sokkal jobb, az oldal is gyorsabban töltődik be.
Ám ezzel az a gond, hogy van az a fránya böngésző és operációs rendszer kompatibilitási probléma a CSS3 adta @font-face megoldás lehetőségével.
Alap probléma ugye, hogy a majd minden böngésző által támogatott otf-et az IE nem eszi meg, neki eot formátum kell. Na jó, tököl vele az ember és beparaméterezi, hogy IE esetén ott van az eot feltöltve az otf mellé, hát használja azt.
Ezután jön az újabb pofon, mert ha pixelre pontosan kiszámolt elrendezésű a weboldal kinézetének elrendezése, akkor bizony előfordul, hogy atomjaira esik szét az oldal egyik másik böngészőben nézve. Nem mindegy, hogy Win, Linux esetleg OSX alatt nézi a felhasználó egy böngészőnek ugyanabban a verziójában az oldalt. A Safari extrabold karakterkezelése kész katasztrófa, de pl a Firefox három egyáltalán nem támogatja a font-face-t, a 3.5 és 3.6 sem ugyanolyan vastagságban jeleníti meg, az Opera és a Chrome szintén egészen máshogy.Gondoljunk bele, szépen beparaméterezett, pontos méretekkel rendelkezik a weboldal, ieben ott van az eot-os megoldású megjelenítés, a többiben az otf-es, szép minden, be van lőve a dolog, hogy a különböző karaktervastagságú megjelenítések miatti, pixelben más szélességű és magasságú karakterekkel megjelenített szövegek is elférjenek. Ügyesek vagyunk. Aztán ránézünk 3-as vagy régebbi FF-el IE6-al és sirvafakadunk, a szépséges karaktertípusok helyett ott figyel a Verdana, és szétrobbantotta az oldal megjelenítési szerkezetét, a divek elmásznak, az oldal atomjaira hullik, a designelemek mint egy frissen a dobozából kiborított puzzle elemei csúfoskodnak a képernyőn.
Tudom, nem sokan használnak már FF3-at, IE6-ot, azonban abban biztosak lehetünk, hogy a megrendelőnk titkárnője/haverja/anyósa, pont ezeken nézi az irodából az oldalt, és már telefonál is a FŐNÖK-nek, aki éppen egy üzleti megbeszélésen próbál belesni sikertelenül tárgyalópartnere "pénztárcájába", vagy tárgyalópartnere titkárnőjének szoknyája alá, és ettől a sikertelenségtől kissé frusztrált. Természetesen ez a kudarcélmény amit a sikertelensége okoz eleve idegessé teszi, amit Mancika sopánkodánkodása, a haver röhögése, a "drága mama" sajnálkozó kioktatása csak az egekig hergel. Már csörög is a sitebuilder telefonja.
Ezt nem árt megelőzni.
Persze van az a munkadíj amikor csak megvonja a vállát az ember és annyit kérdez, hogy: - Lynx-ben nézték már? Vagy közli, hogy nem hajlandó IE4, IE5, IE6, FF1-2-3, és Baidu 0.5, Win3.1 és DOS alá is optimalizálni az oldalt.
Elkerülhető mindez, ha a Cufon-os vagy a SiFR-es megoldást használjuk. Nekem a SiFR nem jön be annyira, és a Cufon kezelése is könyebb, kézreálóbb szerintem. Persze ennek megvan az a hátránya, hogy csak egyetlen betűtípussal tudjuk megjeleníttetni a szövegeinket, nem kezel egyszerre több betűtípust egy oldalon. Nem, nem arról van szó, hogy ezentúl minden betű az oldalon csak Futura_ltb lesz pl, hanem hogy azoka szövegrészek melyeket átalakítani akarunk, csak azt az egy általunk választott betűtípust fogják megjeleníteni. Az átalakításra nem paraméterezett részeken használhatunk bármilyen @font-face vagy font-family formázást.
A Cufon-os megoldás:
- menjünk a http://cufon.shoqolate.com/generate/ oldalra
- töltsük le a Cufon-t (DOWNLOAD gombon jobb klikk és mentés másként).
- a kiválasztott betűtípust amivel meg szeretnénk jeleníttetni a szövegeinket töltsük fel a “Regular typeface”-hez. Természetesen valamilyen Central/Eastern Europe betűtípusról van szó , ha magyar nyelvű weboldalról van szó.
- pipáljuk ki: “The EULAs of these fonts allow Web Embedding (without Adobe flash)”:
- adjuk meg milyen típusú karaktereket konvertáljunk át: Uppercase, Lowercase, Numerals, Punctation.
- az “.. and also these single characters” mezőbe írjuk be a magyar különlegességeket: öüóőúéáűíÖÜÓŐÚÉÁŰÍ.
- fogadjuk el a szabályzatot.
- letöltés…
- hozzunk létre egy könyvtárat, legyen pl “js” könyvtár.
- a letöltött 2 javascript file-t másoljuk a “js” könyvtárba.
- a weboldalunk “<head></head>” tag közé illesszük be a Cufón javascriptek elérési útját
<script type=”text/javascript” src=”js/cufon-yui.js”></script>
<script type=”text/javascript” src=”js/fontunkneve.font.js”></script>
- a “</body>” zárótag elé illesszük be ezt a kódot:
<script type="text/javascript"> Cufon.replace('h1'); </script>
Természetesen nem csak a <h1> tag-ekhez használható a megoldás, hanem bármilyen kijelöléshez :)
Honlap készítés weboldal készítés weblap készítés Budapest
0 comments
Hozzászólok:
Bejegyzést készítette Impavidus Mortalium cs, 24 jún 2010 napján
tagek: Weboldal keszites, honlap keszites, webfejlesztes, webdesign, weblap keszites, design
Impavidus Galéria képgaléria script (IG)
A honlap készítés során sokszor akadnak meg az alap html ismeretekkel rendelkező emberek a képgaléria elkészítésénél. Ha egyenként kell behívogatni és paraméterezni az oldalon a képeket, ráadásul még valami tetszetős megjelenítéssel is szeretnék megjeleníttetni a képeket, az hosszadalmas programozást, hozzáértést igényel.
Nekik lehet segítség a következő ingyenes script, melynek telepítése, használata a végletekig le van egyszerűsítve.
A képgaléria demója megtekinthető itt.
Az ingyenes IG képgaléria script egyszerűen beüzemelhető képgaléria készítő script.
A galériába a képek feltöltése ftp kapcsolaton keresztül a script "kepek" könyvtárába.
A script installálása nagyon egyszerű:
- a script letöltése
- a script kicsomagolása
- a config.php fájl valamilyen text-editorral történő módosítása (pl.: notepad++)
- a config.php fájl elmentése
- a képek bemásolása a "kepek" mappába
- a "galeria" mappa feltöltése ftp-n keresztül a tárterületre
készen is van
A script automatikusan generálja a thumbnaileket képeinkről, amelyek rájuk kattintva lightbox effektel nyit meg a kép teljes méretére.
AZ IG script, képgaléria kategóriák kezelésére is képes korlátlan számú galériával és algalériával.
Az algalériák létrehozása végtelenül egyszerű, a "kepek" mappában új mappát hozunk létre és elnevezzük. Korlátlan mélységben hozhatunk létre galériákat ily módon, a script automatikusan kezeli a mappákban lévő almappákat és képeket.
Figyeljünk oda, hogy feltöltés előtt méretezzük át képeinket, mert a script nem méretezi át azokat, így a lightbox megjelenítéskor a teljes méretben nyílnak meg a képek.
A képgaléria testreszabása nagyon egyszerű, a config fájlban megadható paraméterekkel testreszabható.
- Ha megnyitjuk a config.php fájlt texteditorral, a következőt találjuk benne:
// Galéria testreszabása
$thumbs_pr_page = "12"; //egy oldalon hány miniatűr jelenjen meg?
$gallery_width = "612px"; //a képgaléria szélessége. megadható px vagy % módon is
$backgroundcolor = "#dbfaff"; //a galéria háttérszíne. megadható színnévvel és hex kóddal is, pl #FFF
$templatefile = "igalery"; //a kinézetért felelős fájl neve
$title = "IG képgaléria script"; // A galéria neve ami a címsorban megjelenik
$slogan = "képgaléria weboldalra"; //a galéria tulajdonosának URL címe, vagy neve
$label_home = "Kezdőlap"; //A navigációs sorban megjelenő nyitólap neve
$label_page = "Oldal"; //Oldalnavigáció szövege
$label_noimages = "Nincs kép a mappában"; //Üres mappa szövege
$label_loading = "kép betöltése..."; //miniatűr képek betöltési szövege
$thumb_size = 120; //miniatűr képek magasság és szélesség maximális mérete.
$label_max_length = 30; //mappák nevének maximális karakterszáma, szóköz esetén használj alsóvonást: _ Ne használj ékezetes karaktereket!
// Ne tölts fel olyan képeket, melyeknek a nevében ékezetes karakter, vagy szóköz szerepel!
A mennyiben nem egyértelmű a beállítások leírása, írj nekem egy levelet és segítek a beállításban.
Vállalkozó szellemű html tudorok saját designt is készíthetnek a képgalériájuknak. ehhez segítséget találnak pl. ezen az oldalon.
A script megjelenéséért felelős fájl nevét átírjuk és készítsünk egy ilyen névvel egy .html fájlt majd helyezzük el a szerveren az "igalery.html" fájl mellett.
A kinézet elkészítésénél a <head> szekciónak tartalmaznia kell a következő kódrészletet:
<title><% title %></title>
<script type="text/javascript" src="<% gallery_root %>js/jquery.min.js"></script>
<script type="text/javascript" src="<% gallery_root %>js/slimbox2.js"></script>
<link rel="stylesheet" href="<% gallery_root %>css/slimbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<% gallery_root %>css/css.css" type="text/css" media="screen" />
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: <% gallery_width %>;
font: 14px Georgia, "Times New Roman", Times, serif;
background: <% bgcolor %>;
}
</style>
Ezzel a kódrészlettel a a képek litebox jellegű megjelenítését és az oldalunk középre rendezését, emellett a config.php fájlban megadott galéria szélességet és az oldal háttérszínét adjuk meg.
A <body> szekcióban a
a <% title %> kódrészlet a galéria címét, mely megjelenik a böngésző címsorában jeleníti meg
a <% slogan %> kódrészlet a szlogenünket, akár egy rövid leírást, vagy a galéria tulajdonosának nevét tudjuk megjeleníteni.
a <% navig %> kódrészlet a breadcrumb-ot jeleníti meg, mely biztosítja a kényelmes közlekedést a galériák közt és megmutatja éppen hol tartózkodunk az oldalon.
a
<% thumbnails %> kódrészlet jeleníti meg a képgalériánk miniatűrjeit
a <% navigation %> kódrészlet biztosítja azt, hogy több oldalon megjelenő képlistánkban közlekedni tudjunk az egyes oldalak közt.
Amennyiben ezt az ingyenes scriptet módosítjuk tiszteljük meg a fejlesztő munkáját azzal, hogy a <% credit %> kódrészletet elhelyezzük az oldalon!
Mindezek után már csak a CSS fájlunk elkészítése van hátra, amelyben a weboldal készítés során a szerkezetében használt elemek formázását adjuk meg.
Megvásárolható testreszabások:
A script Google Adsense és Amazon Adsense lehetőségekkel ellátott verziója;
10 000 Ft + Áfa
A script megjelenésének változtatása (egyedi design);
10 000 Ft + Áfa
A script beépítése már meglévő weboldalba, portálrendszerbe;
20 000 Ft + Áfa
Honlap készítés weboldal készítés weblap készítés Budapest
1 comment
Hozzászólok:
Bejegyzést készítette Impavidus Mortalium h, 21 jún 2010 napján
tagek: honlap keszites, webfejlesztes, kepgaleria
weboldal készítés, honlap készítés, weblap készítés Budapest
Aki honlap készítésre adja a fejét, annak tisztában kell lennie azzal, hogy mindenféle ismeretek nélkül nem fog jól működő és hasznos weboldalt készíteni. Még akkor sem, ha mindenféle csodaeszközöket használ a weboldal elkészítéséhez, mint Microsoft Frontpage, Adobe GoLive, Adobe Dreamweaver, Amaya, Namo, NVU, Trellix, melyeknek a használatához nem igazán kell programozói tudás, vagy webszerkesztési ismeretek.
Ezekkel a szoftverekkel mint a Microsoft Wordben dolgoznánk úgynevezett WYSIWYG (What You See Is What You Get) /amit látsz azt kapod/ oldalakat lehet készíteni, gyorsan, könnyedén.
Pont ez a legnagyobb hátránya ezeknek a programoknak, hogy nem igen tanul meg velük az ember weboldalt készíteni, nem érti meg az oldalfelépítés, kialakítás alap szabályait sem.
A leggyakoribb hiba a kezdő weblap készítők esetében, hogy azt hiszik, amit látnak azt kapják valóban. Ez nem egészen így van, a legtöbb esetben megkapja az ember látványra amit szeretne, azonban a kód amit a szoftver készít a legtöbb esetben teljesen felesleges kódrészleteket is beletesz a forráskódba, a szoftverek nagy része emellett valid kódot egyáltalán nem képes elkészíteni. Az esetek nagy részében a keresőrobotok számára olvashatatlan, értelmezhetetlen kódrészekkel szórja tele a forráskódot. Ez növeli a forráskód nagyságát, ezáltal az oldal letöltési sebességét, nem utolsó sorban pedig a különböző programok által generált a megjelenítéshez szükséges javascripteket és azok által megjelenített tartalmat a keresőrobot nem jeleníti meg, vagy annál megakad és nem megy tovább, úgy értékeli nincs tovább tartalom, és huss repül a következő weboldalra.
Nagyon gyakori az "amit látsz azt kapod" módszer sajátosságából és a webszerkesztési ismeretek teljes hiányából fakadó használhatatlan weboldalszerkezet kialakítás is. Nevesen a frameszerkezetes weboldalakról beszélek. A WYSIWYG webszerkesztőben szépen megjelenő weboldal frameszerkezet esetén minimum 2 különálló weboldalból áll, de nem ritka az akár 4-5 különálló weboldalból összeálló látszólag egyetlen weboldal sem. A kezdő weblap készítő ilyenkor boldogan tekint a weboldalára és büszkén veregeti a vállát milyen szépet alkotott.
Mindez részben igaz is, lehet valóban mutatós és látszólag jól működő az a weboldal, azonban egy weboldal célja az, hogy az interneten megtalálható legyen.
Itt van a bibi. Amikor frame szerkezetes oldalt hozunk létre akkor az egyik frameben minden esetben a menüsor van elhelyezve. Jellemzően ez a frame az amely a főoldalunkon megjelenik.
A hiba megértéséhez tudnunk kell, hogy a keresőrobotok, - melyek beindexelik weboldalainkat, hogy a böngészőben a kereséskor megjelenő találatokban megjelenjen a weboldal - miként is működnek. A keresőrobot a weboldalunkon található más oldalainkra mutató linkeken keresztül közlekedve járják be az oldalunkat. Értelemszerűen a legfőbb linkforrás a menüsorunkat tartalmazó frame, mely a nyitólapunkkal jelenik meg. Tudnunk kell, hogy ennek a framenek általában nincs semmi más tartalma, csupán a linkek. másik frame-ben jelenik meg a linkek által meghívott tartalom. Igen ám, de ezeken a tartalmi oldalakon a kezdő webszerkesztő nem igen szokott elhelyezni további közlekedésre a robotok számára alkalmas linkeket.
A történet tehát a következő: Jön a keresőrobot, boldogan vigyorog, hogy hopp itt egy link gyorsan megnézem hova mutat. Meg is nézi... aztán ül egy darabig, mert nincs hova mennie tovább, nincs link. No mindegy, gondolja, megvonja a vállát, beindexeli a tartalmat (jó esetben) és huss átrepül egy másik domainre. Aki még mindig nem érti, annak még egyszer elmondom, a kereső robot nem úgy látja a weboldalunkat mint mi.
A keresőrobot nem lát képeket (sokszor ez már maga gond a weboldal készítés során, hogy képek a linkek és nincs megadva úgynevezett "alt" szöveg a képrehelyezett linknél, ezért nem tudja helyesen értelmezni a robot. Igazából közlekedni tud rajta keresztül, csakhát nem tudja megfelelően értelmezni a keresés és a későbbiek során a keresések találati listájában elhelyezés szempontjából, hogy milyen tartalom, kötődik a tartalomhoz)
Tehát ott tartunk, hogy a frameszerkezet az esetek döntő többségében a webszerkesztési ismeretek hiányosságai miatt megakadályozza a weboldal céljának elérését, a weboldal teljes tartalmának feltérképezését. Ez a kisebbik gond, hiszen majd legközelebb pár nap/hét, x idő múlva jön a robot megint és akkor majd a másik menüpontot is bejárja: megy oda, csücsül, néz bambán, hogy megint elakadt és huss elrepül másik domainre.
Tehát ugyan szépen lassan csak beindexelődik minden oldalunk, azonban itt jön a pofonsor következő epizódja.
Megjelent a beindexelt tartalom URL címe, ott van a weboldalunk a találati listában, rákattint a látogató és megérkezik a beindexelt weboldalra. Nos ő ott is ragad, mint a robot, merthogy nincs egy link az oldalon amin keresztül mehetne a többi oldalunkra. Bizony, csak az a weblap jelenik meg ami a frameszerkezetes oldalban a tartalmi framebe behívásra került. A menüsor nem.
Magyarán van egy olyan honlapunk ami használhatóan csak és kizárólag a nyitólapjáról elérhető funkcionális szempontból. A nagy pofon most jön. A nyitólap bizony előfordulhat, hogy nem kerül be a találati listába, vagy csak a találati lista száznyolcvanadik oldalán, ugyanis a fő frame amiben a menüsor van, nem tartalmaz a robot és a keresők számára értékelhető tartalmat, csupán linkekeket. Ezt pedig nem értékeli túl jól egyetlen kereső sem, megpróbál olyan oldalakat előre tenni a találati listában, melyek a kereső ember számára, hasznos tartalmat jelenítenek meg, 8-10 link pedig nem számít annak, főleg ha ráadásul nem is szöveges hanem képi linkek "alt" attribútum nélkül.
Mindez statikus weboldalaknál jellemző hiba, dinamikus felépítésű frameszerkezetes weboldalaknál kiküszöbölhető a probléma, (jellemzően azonban a kezdő honlap készítők statikus weboldalakat készítenek) illetve statikus weboldalakból álló frameszerkezetes oldal esetén a megfelelő linkek elhelyezésével lehet irányítani a látogatót a nyitólapunkra, ami mellett minden meta taget is fontos megadni a forrásban.
A legjobb azonban a frameszerkezetet elkerülni.
Ha valaki saját honlap készítésébe vág bele, mindenképpen vannak dolgok melyeket meg kell tanulni, el kell sajátítani olyan szinten, hogy önállóan alkalmazni tudjuk a tanultakat. Első lépésként felejtsük el a WYSIWIG típusú szerkesztő programokat, ha valóban érteni és tudni szeretnénk mit csinálunk. Használjunk Notepad-et pl a forráskód elkészítéséhez.
Mit kell tudnunk feltétlenül a honlapkészítéshez? Ismernünk kell a HTML nyelvet és a CSS-t
Először is tisztázzuk, mi az a HTML és mi az a CSS.
Mi az a HTML?
A HTML ( HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki, és mára már internetes szabvánnyá vált a W3C (World Wide Web Consortium) támogatásával. Az aktuális változata a 4.01, mely az SGML* (Standard Generalized Markup Language, szabványos általános jelölőnyelv**) egy konkrét alkalmazása (azaz minden 4.01-es HTML dokumentum egyben az SGML dokumentumszabványnak is meg kell, hogy feleljen). Ezt tervek szerint lassan kiszorította volna az XHTML*** (ami a szintén SGML alapú XML**** leíró nyelven alapul), de az is lehetséges (egyre valószínűbb), hogy a HTML 5 veszi át a helyét.
* Az SGML egy absztrakt szintaxist biztosít, amit sokféle alkalmazásban használhatunk. A szabványos szintaktika lehetővé teszi, hogy az ilyen formátumú dokumentumokat egy általános célú értelmezővel (parser) könnyen beolvashassuk, írhassuk vagy formailag ellenőrizhessük. SGML-ben a jelölések (tag) jelentése nincs meghatározva, ez mindig az SGML-t használó alkalmazás feladata (például a HTML-ben, ami az egyik legismertebb SGML alkalmazás, a jelöléseknek már konkrét jelentésük van, és a jelölések értékkészlete véges).
** A jelölőnyelvek közé olyan mesterséges nyelvek tartoznak, melyek segítségével egy szöveget egy meghatározott cél érdekében (pl. számítógépes értelmezés, strukturálás, megjelenítés) valamilyen jelölésrendszerrel láthatunk el. Az egyik legismertebb jelölő nyelv a HTML, ami ma a World Wide Web legelterjedtebb dokumentumformátuma.
*** Az XHTML a HTML megfogalmazása XML-ben (a HTML SGML-ben van definiálva). Gyakorlatilag nincs jelentős eltérés a két nyelv között, csak a formai követelmények lettek szigorúbbak:
- Mindent (csak a DOCTYPE-ot nem) kisbetűvel kell írni!
- Minden elemet le kell zárni! Az üres elemeket önmagukban egy szóközzel és egy / jellel: <br />.
- Az elemeket csak egymásba ágyazva lehet használni! Nem jó: <b><i>Szöveg</b></i> Jó: <b><i>szöveg</i></b>
- A jellemzőket idézőjelek közé írjuk! Rossz: <table border=1> Jó: <table border="1">
- A jellemzőknek legyen értéke! Rossz: <input disabled /> Jó: <input disabled="disabled" />
****
Az XML (Extensible Markup Language, Kiterjeszthető Leíró Nyelv) a W3C által ajánlott általános célú leíró nyelv, speciális célú leíró nyelvek létrehozására. Az SGML egyszerűsített részhalmaza, mely különböző adattípusok leírására képes. Az elsődleges célja strukturált szöveg és információ megosztása az Interneten keresztül. Az XML-en alapuló nyelvek (például RDF, RSS, MathML, XSIL, SVG) formális módon vannak leírva, így lehetővé téve a programok számára a dokumentumok módosítását és validálását a formátum előzetes ismerete nélkül.
A HTML általában szöveges állományokban található meg olyan számítógépeken, melyek az internethez kapcsolódnak. Ezek az állományok tartalmazzák azokat a szimbólumokat, amelyek a megjelenítő programnak leírják, hogyan is kell megjeleníteni illetve feldolgozni az adott állomány tartalmát. Megjelenítő program lehet pl esetünkben egy webböngésző.
Négyfajta szimbólum (leíró elem) található meg a HTML-ben:
- strukturális elemek, amelyek leírják az adott szöveg "célját" például <h1>CÍMSOR</h1> mint első szintű címsor (alcím).
- prezentációs szimbólumok, melyek leírják, az adott szöveg hogy nézzen ki. például <strong>vastag</strong> vastag kinézetet eredményez. (Ez a forma azonban ma már elavultnak számít, helyette a CSS használata javasolt, ugyanis a legújabb irányelv szerint szét kell választani a tartalmat (amit a HTML kódol) és a formát (amit CSS-ben szokás kódolni), és ezáltal mindenki számára elérhetővé tehetőek a weblapok: felolvasó gépeknek, amit a gyengén látók használnak, szöveges böngészőknek, és könnyebb nyomtatóbarát verziót készíteni.)
- hiperszöveg (hypertext) elemek, melyek segítségével kapcsolat létesíthető a dokumentum egyes elemei és más dokumentumok között (például a <a href="http://google.hu/">Google</a> a Wikipedia szót mint egy kapcsolatot (angol szóval: link) a megadott URL-hez***** jeleníti meg)
- eszköz elemek, melyek segítségével gombok, listák, beviteli mezők hozhatók létre
*****
A webcím, más néven URL (mely a Uniform Resource Locator [egységes erőforrás-azonosító] rövidítése), az interneten megtalálható bizonyos erőforrások (például szövegek, képek) szabványosított címe.
Egy HTML állomány három fő részre bontható:
- A Dokumentum Típus Definíció az állomány legelején, ami a használni kívánt DTD-t adja meg, pl:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- a HTML fejléc <head>, ami technikai és dokumentációs adatokat tartalmaz, melyeket az internet böngésző nem jelenít meg, tehát átlag felhasználó ezeket nem látja és
- a HTML törzs <body>, amely a megjelenítendő információkat tartalmazza.
Tehát egy internetes oldal alapszerkezete a következőképpen nézhet ki:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Az oldal címe</title>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-2">******
[esetleges további fejléc-információk]
</head>
<body>
Az oldal tartalmi része
</body>
</html>
****** Karakterkódolás:
Egy HTML dokumentum alapértelmezésként ISO-8859-1, azaz nyugat-európai kódolást használ. Gyakran előforduló hiba szokott lenni, hogy nincs beállítva a charset paraméter a fejléc content attribútumában, annak ellenére, hogy a dokumentum nem nyugat-európai kódolású szöveget tartalmaz. Magyar nyelvű oldalak esetén ilyenkor gyakran az „ő” és „ű” betűk helyett „õ” és „û” karaktereket látunk (ekkor valószínűleg "ISO-8852-2" vagy "windows-1251" volna a helyes charset érték), de az is lehet, hogy minden ékezetes betű teljesen olvashatatlanná válik (ha például a megjelenítendő szöveg UTF-8 kódolású). A charset paraméter értékeként több száz kódolás és érvényes alternatív név (alias) megadható.
Numerikus karakter referenciák:
Akármilyen kódolást használ is egy HTML dokumentum, bármilyen Unicode karakter megjeleníthető a szövegben annak UCS kódjával „&#” és „;” jelek között. Például a magyar kis „ő” betű UCS kódja a decimális 337 (vagy hexadecimális 151), ezért függetlenül a használt kódolástól, a HTML dokumentumban elhelyezett ő vagy ő mindig az „ő” betűt fogja megjeleníteni.
Mi az a CSS?
A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok. A HTML oldalaink megjelenését befolyásoló egyszerű nyelvről van szó, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), többek között befolyásolhatjuk a színüket, méretüket, elhelyezkedésüket, margóikat, stb. Az egymásba ágyazhatóság (kaszkádolás) arra utal, hogy több stíluslapot, meghatározást is megadhatunk egyszerre, illetve egy stílus lehet több elemre is érvényes, amit egy másik stílussal felüldefiniálhatunk. A stílusok öröklődnek az oldal hierarchiája szerint, ha például a gyökér elemre definiálunk egy stílust, akkor az többnyire az oldal összes elemére érvényes (a tulajdonságok örökölhetőségétől függően).
A HTML nyelvet fejlesztői a kezdetekben nem professzionális megjelenítést lehetővé tevő, hanem a tartalom egyszerű közlését megoldó leírónyelvnek tervezték, ennek függvényében került kialakításra is. A nyelv megjelenése egyre több ember számára tette lehetővé, hogy publikálhasson a weben, és az internet terjedése is egyre több és több új felhasználót hozott. A felhasználók elkezdtek egyre többre vágyni, az évek során felmerült annak az igénye, hogy lehessen a nyomdai megjelenéshez hasonlóan befolyásolni a weboldalak kinézetét. Így a HTML kiegészült bizonyos formázási lehetőségekkel.
A CSS elsődleges célja, hogy szétválassza a dokumentumok megjelenését a tartalomtól. A CSS előtt a HTML dokumentumok csaknem minden megjelenéshez kapcsolódó része a HTML kódon belül volt; a betűtípusok, színek, háttér stílusok, elrendezések, dobozok, keretek és méretek külön meg voltak adva, gyakran ismétlődően, a HTML kód közepén. A CSS használatával a webfejlesztők ezeket az információkat áthelyezhetik a stíluslapra, mely így egy sokkal egyszerűbb, kevésbé redundáns HTML kódot eredményez. A HTML dokumentumok kisebbek lesznek, és mivel a webböngészők gyakran tárolják a CSS stíluslapokat a gyorsítótárban, ezért a hálózati forgalom is jelentősen csökkenhet.
Például a h2 HTML elem megadja, hogy a benne foglalt szöveg második szintű címsor. Ez kisebb jelentőségű, mint a h1 címsor, viszont nagyobb, mint a h3 címsor. A h2 ezen tulajdonsága strukturális.
Szokás szerint a címsorok csökkenő méretben vannak megjelenítve, így a h1 a legnagyobb, mivel ez jelzi, hogy fontosabb a többi címsornál. A címsorok ezen kívül a nagyobb nyomaték kedvéért többnyire félkövér betűtípussal rendelkeznek. Így a h2 elem általában félkövér betűtípussal, a h3-nál nagyobb, de a h1-nél kisebb betűmérettel jelenik meg. A h2 elem ezen tulajdonsága prezentációs.
A CSS előtt a webfejleszetők, ha módosítani akarták a h2 elemek színét, betűtípusát, méretét, vagy más jellemzőit, akkor a HTML font elemét kellett használniuk a címsor minden egyes használatakor. Egy középre igazított, dőltbetűs, vörös, Times New Roman típusú címsorhoz a következőt kellett használni:
<h2 align="center"><font color="red" size="+4" face="Times New Roman, serif"><em>A CSS használata</em></font></h2>
Az új formázási lehetőségek sokféle megjelenítést lehetővé tettek, de a nyelv ezzel elvesztette a puritán egyszerűségét, a dokumentumok a megjelenési paraméterezések miatt egyre bonyolultabbá és összetettebbé váltak. A weboldalak forrásának sokszor akár több mint a fele már nem is a tartalomról, hanem a megjelenésről szólt, megnövelve ezzel a dokumentumok méretét és komplexitását. Ezt még fokozta, hogy a szabvány kiforratlanságából, illetve a böngészőgyártók érdekkülönbségeiből adódóan a weboldal készítők rákényszerültek a különböző böngészők sajátosságaival is szembesülni, és ezeket kikerülendő, mindenféle bonyolult trükköket használni, ha "szép", a megrendelő elképzeléseinek megfelelő oldalakat akartak készíteni. A kiegészítő prezentációs jelölések miatt a HTML dokumentum sokkal bonyolultabb lesz, és nehezebb karbantartani is. Ha azt szeretnénk, hogy minden ilyen címsor így ugyanígy jelenjen meg, akkor mindegyikre külön használni kell ezt a kiegészítést. Továbbá a dokumentumot olvasó felhasználónak nincs lehetősége módosítani a megjelenésen, ha Ő például kék színű címsorokat szeretne, mivel az oldal szerzője egyértelműen megadta a címsorok színét.
A CSS használatával a h2 elem csak strukturális információt hordozhat, míg a stíluslap megadja a prezentációs tulajdonságokat. A fenti kód itt így nézne ki:
<h2>A CSS használata</h2>
Az alábbi stílus pedig definiálja az összes h2 címsor megjelenését a teljes dokumentumban, vagy webhelyen:
h2 {
text-align: center;
color: red;
font-size: large;
font-family: "Times New Roman", serif;
font-style: italic;
}
A megjelenés így elvált a tartalomtól. A CSS ilyen típusú előnyei miatt a W3C a HTML prezentációs elemeit és attribútumait már elavultként jelölte be. Így a HTML csak a strukturális, míg a CSS a prezentációs információkat írja le.
Mint látható a fenti példában, minden egyes címsor (h1) esetén meg kellett határoznunk a megjelenést (font), ezáltal sokkal kevésbé áttekinthető a HTML forrás.
További probléma, hogy a betűk méretének meghatározásához nincs más lehetőség (a szabvány szerint), csak az előre (1-től 7-ig meghatározott) méretek közül kiválasztani a megfelelőt. Amennyiben egy összetettebb oldalról van szó, még áttekinthetetlenebbé válhat a forráskód, nehezebbé téve az utólagos módosítást.
Ezt a nehézkességet váltja ki a CSS formázás.
A megoldás a body elemen kívül a head szekcióban elhelyezett, vagy oda külső fájlból behívott style elemekben van.
Ebben meghatározzuk, hogy a HTML állományban levő összes címsor (h1) elem a fentiekben meghatározottnak megfelelően jelenjen meg. Csak egyszer kellett ezt megtenni, továbbá a kódunk is sokkal átláthatóbb lett. A pontos méretet is meghatározhattuk, akár pixelben megadva, de további mértékegységek is rendelkezésünkre állnak.
Amennyiben valamiért utólag módosítanunk kell az oldalon a megjelenést,csak egy helyen kell ezt megtennünk, s mindenhol meg is változik.
Az egyszerűbb szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál. Hakülső állományban helyezzük el a stílusdefiníciókat, akkor korlátlan számú dokumentum megjelenését is befolyásolni tudjuk egyszerre, továbbá ha a böngésző gyorsítótárazza a meghatározásokat, az adatforgalom tovább csökken.
weboldal készítés, honlap készítés, weblap készítés Budapest
4 comments
Hozzászólok:
Bejegyzést készítette Impavidus Mortalium h, 22 márc 2010 napján
tagek: honlap keszites, webfejlesztes
