Weblapot formázó alapismeretek
1. Mi a kezdő címke és mi a záró címke.
Mindegyik címkét a matematikában is használt, kisebb < mint és a nagyobb > mint jelek határolják.
A kezdő címkékben nincsen pervonal ( / ), a záró címkékben van pervonal ( / ).
Nézzünk egy példát:
Bekezdéseinket, leírásainkat a kezdő p címke és a záró p címke közé írjuk.
<p> Szöveg megírása </p>
Kezdő p címke, nincs pervonal a p előtt : <p>
Záró p címke, van pervonal a p előtt : </p>
Most csak a p címkét szemléltettem, de minden kezdő és záró címkénél így kell eljárni.
Kivétel az img címke, melyet a fotók megjelenítéséhez alkalmazunk.
Itt a záró img címkénél nem kell az első kisebb < mint jel.
Példa: <img src="képfájlnév.YYY" width="200" height="109" />
2.Terület meghatározása
A képernyő területén elhelyezendő, helyek pontos meghatározása.
A monitorok képernyője, egyfajta rácsszerkezetben van elrendezve:
A rács pontjait nevezzük: képpontoknak
Angol elnevezése: pixel
Rövidítve: px
Megjegyzés:
A régebbi illetve kis képernyős monitorok vízszintesen 800 képpontot tudnak megjeleníteni.
Melyből lejön, az oldalsó görgetősáv, és marad körülbelül 780 képpont.
Jelenleg is a 800 képpont környéki weblapszélességet tekintik, a használható
legnagyobb, méretnek.
Képernyő pontjainak, pozíció megadása:
- X koordináta, a vízszintes ( width )
- Y koordináta, a függőleges ( height )
Egy hüvelyk körülbelül. 72 px vagy képpont
Egy centiméter körülbelül. 28.5 - 32 px vagy képpont
Egy átlag 12-es btűméret kb. 10 - 16 px
Monitor képpontjainak vizuális szemléltetése.
3. Margók, azaz szegélyek meghatározása
Mondhatnánk úgy is, hogy a weben megjelenő dokumentum területének, határa
Három margó, azaz szegély áll rendelkezésünkre:
- border, látható margó, vastagságát és színét is meghatározhatjuk.
- margin, nem látható külső margó, azaz nem jelenik meg a weblapon.
- padding, nem látható belső margó, azaz nem jelenik meg a weblapon.
Minden elemnek lehet belső margója, padding .
Néhány példa, a belső margó alkalmazására.
- Megírt dokumentumunk szövege, a monitor széleitől mennyivel legyen beljebb
- Ha képet illesztünk a dokumentumba, akkor a szöveg ne érjen a képhez.
Margók helyzete megadható:
- Betűméretben ( em )
- Képpontban ( px )
- Százalékban ( % )
Például:
- Margó-fent = margin-top: 10% ;
- Margó-jobb = margin-right: 8em ;
- Margó-lent = margin-bottom: 5px ;
- Margó-bal = margin-left: 15% ;
Minden margó értékét, az óramutató járásával egyezően olvassa be a program.
Következő sorrendben: fenti, jobbos, lenti, balos
Az em mérete:
1 em = a felhasználó által alapbeállításként, megadott betűméret
Ezt kell venni 100%-nak vagyis ez az 1 em
Margók, azaz keretek vizuális szemléltetése.
4. Stilusok rangsorolása.
A stílus minél közelebb van a dokumentumunkhoz, annál nagyobb ráhatással rendelkezik a dokumentumunk valóságbeli megjelenésében.
Az ábrán, öt stílust láthatunk.
A piros színnel kiemelt stílusok, a mindenkori alapstílusok.
Ezek a stílusok akkor is megjelenítik a dokumentumunkat, ha nem készítünk külön stíluslapot.
A hármas - négyes - ötös stíluslapok tartalmát, a weblapkészítő határozza meg.
E három stíluslap közül, elég egyet is készíteni, hogy melyik a legoptimálisabb a dokumentumunk megjelenítéséhez, azt saját magunk döntjük el.
A stílusok vizuális szemléltetése.
Stílusok ismertetése.
A weblapok megjelenítéséhez jelenleg több fajta, egyik a másiktól enyhén eltérő megjelenítési tulajdonságokkal rendelkező, böngésző programok vannak forgalomban, ezért saját stíluskészlettel rendelkeznek.
Böngésző stílus:
Ezek a stílusok adják a mindenkori alapértelmezést.
Például:
Fekete szöveg, fehér háttér, betűméret.
A böngésző programok alapbeállításuknál fogva, ugyan úgy olvassák be a dokumentumunk anyagát, mint ahogyan mi is tesszük azt akár könyvek, akár levelek olvasásánál.
A beolvasás menete: Balról jobbra és fentről lefelé haladva olvasunk.
Számítógép nyelven az így beolvasott, és a monitoron előttünk megjelenő szövegrészt nevezzük szövegfolyamnak.
Az általunk megírt XHTML lap, teljes tartalma is szövegfolyamnak minősül, és ennek megfelelően olvassák be a böngészőprogramok, beleértve a végrehajtási utasításokat is.
Felhasználói stílus:
Ez az egyetlen olyan stílus, melyet a weblapkészítő ( dokumentum írója) nem tud befolyásolni.
Egyik oka: Mindenki a saját számítógépén, az olvashatóság tekintetében olyan betűméretet állít be, mely neki a legoptimálisabb.
Szövegközi stílus:
Ezt a stílust, az XHTML lapon megírt szövegünknél használjuk, lehetőleg ritkán vagy egyáltalán ne használjuk, csak amennyiben szükségét látjuk, vagy nem használunk külső stíluslapot.
Dokumentumunk szövegénél helyezzük el, vagyis a kezdő < címkében >, azaz elemben.
Mivel közvetlen a dokumentumunk szövegénél, azaz a szövegtörzsnél helyezkedik el, ebből adódóan ez van legközelebb az összes stílus közül.
Katonai rangsorban ez lenne a legmagasabb rendfokozat, így az általunk megírható, azaz elkészithető stílusok közül, ez van legközelebb a dokumentumunkhoz. Mondhatnánk, beépül a dokumentumunk elejébe, hogy meghatározza annak megjelenési formáját.
Beágyazott, vagy belső stílus.
Ha dokumentumunkhoz nem szükséges külön stíluslap, akkor közvetlen az XHTML lapunkon határozzuk meg a közzéteendő anyagunk stílusát.
A stílus meghatározást, mindig a dokumentumunk fejlécében kell elhelyezni,
- a head tartományon belül
- közvetlen a dokumentum címét lezáró title címke után.
A kezdő és záró címkék vagy elemek közötti különbség, hogy a záró elemekben és címkékben van
per ( / ) jel, a nyitó címkékben és elemekben nincs.
Egy egyszerű példa a bekezdéseink formázására:
Az "X" helyére tetszés szerinti, akár tizedes számot is írhatunk (pl. 0.5em, 0.7em, 0.9em, stb.)
Az "Y" helyére, az általunk kiválasztott színnek a kódját írjuk ( #000, #ccc, stb.)
<head>
<title> a dokumentumunk elnevezése </title>
<style type="text / css"> p { font: Xem Arial; color: #YYY; } </style>
</head>
Külső stílusok.
A stíluslapra való hivatkozást mindig a dokumentumunk fejlécében kell elhelyezni,
- a head tartományon belül
- közvetlen a dokumentum címét lezáró title címke után.
A kezdő és záró címkék vagy elemek közötti különbség, hogy a záró elemekben és címkékben van per ( / ) jel, a nyitó címkékben és elemekben nincs.
Első példa: (közeli stílus)
Ez a stíluslap csatolási forma azt jelenti, hogy közvetlen a title szakaszban megnevezett, dokumentumunkhoz készült.
<head>
<title> a dokumentumunk elnevezése </title>
<link href="a stíluslapunk fájlneve és kiterjesztése.css" rel="stylesheet" type="text/css" />
</head>
Második példa: (távolabbi, vagy másik mappában lévő stíluslap)
Készíthetünk olyan stíluslapot is melyet több és külön témával foglalkozó dokumentumunkhoz is, felhasználunk.
Mondhatnánk úgy is, hogy ezekhez, a dokumentumainkhoz, importálunk stíluslapot egy másik helyről.
Ezekben, az esetekben az @import utasítást kell alkalmaznunk.
5. Címsorok
Címsoroknak az XHTML nyelvben hat szintje lehet. h1, h2, h3, h4, h5, h6,
- Címsorokat a h címke és az utána álló szám jelképezi
- Gyakorlatban, a dokumentumban lévő címsorokhoz használjuk
- Ezek közül legfontosabb a h1 szintű címsor, mely egyben a weblap fő címsora.
- Minden címsor, a címsorra jellemző kezdő címkével kezdődik és a címsorra jellemző záró címkével, fejeződik be.
Példa a h1-es címsor megírására. ( A további címsoroknál is így kell eljárni. )
<h1> Írjuk ide a címsor szövegét </h1>
Böngésző programok a h1-es betűmérethez viszonyítva, csökkenő betűméretet alkalmaznak a további címsoroknak.
Ezeket a betűméreteket megváltoztathatjuk úgy, hogy az XHTML - lapunkhoz hozzácsatolunk egy CSS, azaz stíluslapot.
A stíluslapon, minden egyes címsornak, más és más betűméretet határozhatunk meg.
A weblapunkat olvasó, olvashatósági szempontokra tekintettel, akkora betűméretet állít be mely neki megfelelő.
Az olvasó által beállított betűméret, minden betűt egységesen nagyobb, vagy kisebb méretűre változtat.
Címsorok betűméreteinek vizuális bemutatója.
A h1 címsorból egy xhtml - lapon lehetőleg csak egyet használjunk azt is az ott lévő dokumentumunk címéhez (elnevezéséhez)
A h2 címsortól a h6 címsorig annyit alkalmazunk minden xhtml - lapon, amennyire szükségünk van.
Például:
A h2 címsorból tízszer van szükség, a h4 címsorból hússzor van szükség akkor ennyiszer, alkalmazzuk.
Ha rábízzuk a böngésző programokra, hogy a címsorok milyen formában jelenjenek meg.
Akkor a továbbiakban semmi teendőnk a címszavak betűméretével és színével.
Ha úgy döntünk, hogy a címsorok megjelenésébe mi is beleszólunk.
Akkor az xhtml - lapunkhoz tartozó css, azaz stíluslapon, a címsoroknak egyedi megjelenési meghatározásokat írhatunk.
Meghatározhatjuk minden egyes címsor, betűméretét, betű alakját, betű színét, ha akarjuk még alá is húzhatjuk és az aláhúzásnak is adhatunk színt.
Címsorokról bővebben: ------------- lásd: Tartalom - Címsorok formázása témakörben. ------------
6. A div szakaszok.
Div szakaszok, elkülönülő területek, azaz blokkszerű elemek.
A szakaszokat, id vagy class jellemzővel kell egymástól megkülönböztetni.
Amikor elkészítjük a weblapunkat, azt valamilyen logikai felépülés alapján készítjük el, azaz elkülönülő témaköröket, főcímet, alcímeket, bekezdéseket készítünk, és fotókat helyezünk el.
Elkülönülő területek például:
- Főcím
- Tartalom
- Lábléc
- Navigációk, azaz hivatkozások
- Reklámcsíkok
- Stb.
A div szakaszoknak önálló, általunk választott tetszőleges nevet, azonosítót kell adni.
Az így azonosított div szakaszok, külön-külön formázhatók a CSS, azaz stíluslapon megadott meghatározásokkal.
Elnevezést, azaz azonosítót mindig a kezdő div címkében kell megadni, melyet kétféleképpen tehetünk meg.
Az ( X ) helyére az általad választott elnevezést, azonosítót írd.
Első példa:
<div id="xxxxxxxxxx">
Második példa:
<div class="xxxxxxxxx">
7. Az id jellemző és a class jellemző.
Feladatuk: Minden kezdő címkét tetszés szerinti egyedi azonosítóval tudjunk ellátni, azaz egymástól megkülönböztetni.
Az id jellemző:
- Egyedinek kell lennie, hogy elkülönüljön a többitől
- Egy XHTML - lapon belül, ugyan azzal az elnevezéssel, azaz azonosítóval csak egyszer szerepelhet.
- Betűvel kell kezdődniük, és nem tartalmazhatnak szóközt.
- Egyedi tulajdonsággal rendelkező div szakaszokhoz használjuk.
- Főleg olyan div szakaszokhoz, melyeket navigációs, azaz hiperszöveges hivatkozásra használunk.
A class jellemző, azaz osztályazonosító:
- Ugyan azon névvel, azaz azonosítóval többször is szerepelhet egy XHTML - lapon belül. Így több témakörhöz is felhasználható.
- Nem csak div szakaszhoz, hanem minden elemhez hozzárendelhető
- A vele kijelölt elemek, a stíluslapon, külön - külön egyedi stílusokkal is formázhatók
- Betűvel kell kezdődniük, és nem tartalmazhatnak szóközt.
Hasonlat.
Földünkön nagyon sok ország található, melyek területileg is változóak, ilyenek a weblapok is, nincs két egyforma.
Az országhatárok egymástól való távolsága, szélessége is eltérő, ilyenek a számítógép monitorok is. Hogy kinek milyen monitorja van, azt a weblap tervezője nem tudhatja.
Ezért, a weblap készítésnél jelenleg is a 800px szélesség az elfogadott, azaz minden monitoron könnyen áttekinthető.
Vegyünk alapul egy olyan várost, melynek szélessége 800px, azaz minden országhatáron belül (monitoron) elfér.
A város határvonala, kontúrvonala egy adott területet jelöl a térképen. Számítógép nyelven ez egy div terület, azaz div szakasz.
A div szakaszt is el kell látni névvel, azaz azonosítóval, mint ahogy a városokat is ellátták egyedi névvel, így tudjuk őket egymástól megkülönböztetni.
Weblapkészítésnél ezen div szakaszt, container néven azonosítjuk.
<div id="container"> </div>
A városhatáron belül vannak:
- Egyedi, azaz állami területek, hivatalok. Például: Belváros, Polgármesteri Hivatal.
Ezeket a területeket megkülönböztetés végett, a Földhivatalnál egyedi azonosítóval látják el.
Számítógép nyelven, ezek különböző div szakaszok. Az állami területekre vonatkozó div szakaszok nevét, azaz azonosítóját id jellemző után adjuk meg, ilyenek a címsor, a hivatkozások, és egyedi tulajdonsággal rendelkező div szakaszok, melyekből egy weblapon, csak egy szerepelhet.
- Magánterületek, melyek lehetnek különbözőek és egyformák, valamint az ott lakók névre, korra, nemre, magasságra, súlyra, eltérőek.
Számítógép nyelven ezen div szakaszok nevét, azaz azonosítóját class osztályazonosító után adjuk meg. Ezekből a div szakaszokból, egy adott weblapon ugyan azon névvel, azaz azonosítóval több is szerepelhet.
Például: Statisztikát készítünk egy lakótelepről, az épületek színe alapján. Mely állhat, három sárga, kettő szürke és egy kék színű házból.
Weblapon a div szakaszok nevét, azaz azonosítóját a házak színe alapján adjuk meg, és annyi egyforma azonosító névvel ellátott div szakaszt hozunk létre, amennyi sárga, szürke és kék színű lakóház van a lakótelepen.
Egy adott div szakaszba, egy adott házra jellemző adatokat írjuk be. Az azonos nevű div szakaszoknak, nem kell egymás után következni, bármilyen sorrendet készíthetünk.
Div szakaszok megírása:
<div class="sarga"> <p> ............................................... </p> </div>
<div class="szurke"> <p> ............................................... </p> </div>
<div class="kek"> <p> ................................................ </p> </div>
<div class="sarga"> <p> ................................................ </p> </div>
<div class="sarga"> <p> ................................................ </p> </div>
<div class="szurke"> <p> ................................................ </p> </div>
A pontozott részekre írjuk, az adott házra jellemző tulajdonságokat.
Ezeknek a div szakaszoknak, egyedi megjelenési formát határozhatunk meg a css, azaz stíluslapon. Például megadhatjuk a háttérszínt, betűformát stb.
Css, azaz stíluslapon három sorban meghatározhatjuk, hogy a sárgáé sárga, a szürkéé szürke, a kéké kék színű legyen a háttér, és milyen betűformák, vagy betűszín jelenjen meg a weblapon.
Ha az xhtml - lapunkon, száz házról készítünk statisztikát, és az xhtml - lapunkhoz készítünk egy css, azaz stíluslapot, akkor nem kell százszor leírni a háttérszín, és betűformák meghatározásait.
Css, azaz stíluslapra a következő meghatározásokat kell beírni:
.sarga {width: 790px; background-color: #fc0; margin-top; 5px; margin-left: 5px; }
.szurke {width: 790px; background-color: #ccc; margin-top; 5px; margin-left: 5px; }
.kek {width: 790px; background-color: blue; margin-top; 5px; margin-left: 5px; }
Div szakaszokról bővebbet, a vizuális ismertetőben láthatunk.
Színekről bővebben, a webszínek témakörben olvashatunk.
8. Megjegyzésjelek
Minden címkétől és elemtől független, azaz különálló sorként kell elhelyezni.
Megjegyzésjelek közé írt szöveget a böngésző programok nem veszik figyelembe, azaz nem jelenítik meg.
Ha dokumentumunkban olyan megjegyzéseket szeretnénk elhelyezni, melyek ne jelenjenek meg a weblapot nézők előtt, de nekünk akár a későbbiekben is fontos információval szolgáljon. Akkor ezeket megjegyzésjelek közé írjuk.
Megjegyzésjelek alkalmazása:
XHTML lapon:
Megjegyzés elé helyezzük el a kisebb, mint < jelet, ezt követi a felkiáltójel és kettő kötőjel, a megjegyzés megírását, lezárjuk két kötőjel és a nagyobb, mint > jellel.
<!-- megjegyzésünk leírása -->
Stíluslapon:
Megjegyzés elé helyezzük el a pervonalat és a csillag karaktert, ( /* ) megjegyzésünk után írjuk be fordított sorrendbe az előző jeleket, azaz a csillag karaktert és a perjelet ( */ )
/* megjegyzésünk leírása */
9. Egyezményes jelölések.
Egyezményes jelölések.
- Ha egy szó alá van húzva, azt hivatkozásnak tekintik. (Aki sokat internetezik, az már észrevette, hogy azok az igazi hivatkozások, melyeknél megjelenik egy mutató kézfej, függetlenül attól, hogy alá van húzva, vagy sem. )
- Az olyan kis ábrák, melyeken valamilyen felírat látható, általában hivatkozások.
- Ha a weblap bal felső sarkában lévő, webhely emblémára kattintunk, általában a kezdőlapra (honlapra) jutunk.
- A nagyméretű betűkkel szedett szöveg, általában címsor.
- A hivatkozások listája, gyakran egy színes függőleges oszlopban jelenik meg, a weblap jobb, vagy bal szélén.
- A webhelyen belüli helyekre mutató, főbb hivatkozások, a webhely minden lapján egyformák.
- A nagy webhelyek többségén, van egy könnyen megtalálható keresőmező.
- Egyes ikonoknak, például a postaládát, vagy a bevásárlókocsit ábrázolóknak, egyezményes jelentésük van.
Megjegyzés:
Jól tesszük, ha ikonjaink alá beírjuk annak jelentését, mert nem sok olyan ikon van, mely szöveges segítség nélkül is, azonnal érthető. )
Pozíciók, helyzetmegadások.
10. Position: absolute
Pozíció: abszolút; fentről: yyypx; balról: yyypx; szélessége: yyypx;
Position: absolute; top: YYYpx; left: YYYpx; width: YYYpx;
A fenti ( top ) méretet, minimum 100 px - re vegyük, hogy a címsor alá kerüljön.
Azt az elemet, melyet abszolút helyzetmegadással adunk meg, eltávolítjuk a szövegfolyamból, és az adott elem, tároló - tömbjéhez képest állítjuk be a helyzetét.
A tároló - tömb lehet, a dokumentum egy másik eleme, azaz szakasza, vagy a kezdeti tároló - tömb, ez a legtöbb böngészőben, egyenlő a kezdő html címke és a záró html címke közötti területtel, azaz szakasszal.
Ha, e szakasz nincs beágyazva egyetlen más elembe, vegyük úgy, mintha nem lenne semmi a weblapunkon, és ekkor a pozíciót a monitor bal felső sarkától kiindulva kell megadni.
Ezzel a megoldással, a hivatkozások bárhol elhelyezhetők a weblapunkon. (Akár ráhelyezhetjük egy szövegre is, de ez nem egy jó megoldás.)
11. Position: fixed
Pozíció: fix; fentről: yyypx; balról: yyypx; szélessége: yyypx;
Position: fixed; top: YYYpx; left: YYYpx; width: YYYpx;
A fenti ( top ) méretet, minimum 100 px - re vegyük, hogy a címsor alá kerüljön.
A fix helyzetmegadást használó elemek, akkor is a megadott képernyő pozíció helyen maradnak, ha a weblapot lejjebb görgetjük.
Használható az egyes elemekhez vagy a teljes weblaphoz készült háttérképekhez is
Megjegyzés:
A fixed meghatározás, Internet Explorer 6 böngészőben nem működik.
Ezért egy olyan kijelölőhöz kell stílusszabályt írni, melynek ( * html ,fixed ) a neve.
Ezt kizárólag az Internet Explorer 6 böngésző használja.
Stíluslapon így néz ki : * html ,fixed { position: fixed; }
.
12. Position: relative
Pozíció: relatív; fentről: yyypx; balról: yyypx; szélessége: yyypx;
Position: relative; top: YYYpx; left: YYYpx; width: YYYpx;
Most marad a szövegfolyamban és az őt megelőző elem után helyezkedik el.
Így a fenti pozíciót (top ) csökkentsük például: 10 vagy 20 px - méretre.
13. Position: static
Ha a dokumentum szakasza, másfajta helyzet meghatározást örököl, és nem úgy jelenik meg, ahogy azt szeretnénk.
Akkor vissza kell állítani az eredeti szövegfolyamba, melyet a static meghatározással tehetünk meg.
14. Fájlnevek használata
Lehetőleg alkalmazzunk rövid, de célratörő elnevezéseket.
Az elnevezések ékezetes betűket és szóközt ne tartalmazzanak.
Vannak olyan esetek, hogy a kis és nagybetűket a programok megkülönböztetik, ezért jobb, ha kezdetben minden fájl és azonosító elnevezést kisbetűvel írunk.
A fájl teljes elérési útvonala, a lemezegység betűjelét, a szerver nevét, a mappa elérési útvonalát, a fájlnevet és a kiterjesztést is beleértve, legfeljebb 255 karakterből állhat.
A fájlnevekben nem szerepelhetnek a következő karakterek:
perjel ( / ), visszaperjel ( \ ), nagyobb jel ( > ), kisebb jel ( < ), csillag ( * ), kérdőjel ( ? ), idézőjel ( " ), függőleges vonás ( | ), kettőspont ( : ) és pontosvessző ( ; ).