|
|
Weblapot formázó alapismeretek.
Mobilváltozat!
Asztali változathoz,
kattints a képre!
Asztali változat részletesebb, és több témakört tartalmaz.
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
Képernyő pontjainak, pozíció megadása:
- X koordináta, a vízszintes ( width )
- Y koordináta, a függőleges ( height )
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 ( % )
Minden margó értékét, az óramutató járásával egyezően olvassa be a program.
Következő sorrendben: fenti, jobbos, lenti, balos
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.
A stílusok vizuális szemléltetése.
Stílusok ismertetése.
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 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.
Általunk megírt XHTML lap tartalma is, szövegfolyamnak minősül.
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.
Dokumentumunk szövegénél helyezzük el, a kezdő <címkében>.
Beágyazott, vagy belső stílus.
Ha, nem szükséges külön stíluslap, akkor közvetlen az XHTML lapunkon határozzuk meg.
Egy egyszerű példa a bekezdéseink formázására:
<head>
<title> a dokumentumunk elnevezése </title>
<style type="text / css"> p { font: 1em Arial; color: black; } </style>
</head>
Külső stílusok.
A stíluslapra való hivatkozást mindig a dokumentumunk fejlécében kell elhelyezni.
<head>
<title> a dokumentumunk elnevezése </title>
<link href="a stíluslapunk fájlneve és kiterjesztése.css" rel="stylesheet" type="text/css" />
</head>
5. Címsorok
Címsorok: h1, h2, h3, h4, h5, h6,
Legfontosabb a h1 szintű címsor, mely a weblap fő címsora.
Példa a h1-es címsor megírására.
<h1> Írjuk ide a címsor szövegét </h1>
Címsorok betűméreteinek vizuális bemutatója.
A h1 címsorból egy xhtml - lapon lehetőleg csak egyet használjunk.
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.
6. A div szakaszok.
Div szakaszok, elkülönülő területek, azaz blokkszerű elemek.
Szakaszokat, id vagy class jellemzővel kell egymástól megkülönböztetni.
A div szakaszoknak önálló, általunk választott tetszőleges nevet, azonosítót kell adni.
Első példa:
<div id="egyedi_azonosító">
Második példa:
<div class="azonosító">
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ő, azonosító:
- 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 is, 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.
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.
XHTML lapon:
<!-- megjegyzés leírása -->
Stíluslapon:
/* megjegyzés leírása */
9. Egyezményes jelölések.
Egyezményes jelölések.
- Ha egy szó alá van húzva, megjelenik egy mutató kézfej.
- 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.
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.
Stíluslapon: { 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.
Fájl teljes elérési útvonala:
A lemezegység betűjelét, vagy 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 ( : ),
pontosvessző ( ; ).
Asztali változat részletesebb, és több témakört tartalmaz.
