Weblapok címsorai !
1. Címsorok típusai
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.
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 a címsor típusoknak egyedi megjelenési formát készíthetünk a css, azaz stíluslapon.
Lásd a harmadik témakörben.(Címsorok megkülönböztetése.)
2. Címsorok megírása.
Címsorok megírása html - lapon.
Az első sor a h1 - es, a második a h2 - es címsorra vonatkozik. Az elsőt a másodiktól az különbözteti meg, hogy a kezdő és záró címkében milyen szám helyezkedik el a h betű után.
A további címsorok megírásánál is így járunk el, csak a kezdő és záró címkébe a címsornak megfelelő számértéket kell beírni. ( 1-től 6-ig )
Az Y-ok helyére, a megfelelő címet vagy témakör elnevezését kell beírni.
<h1> YYYYYYYYYY YYYYYYYYY YYYYYYYYYYYYY </h1>
<h2> YYYYYYYYYY YYYYYYYYY YYYYYYYYYYYYY </h2>
Címsorok megjelenéséhez rendelt meghatározások megírása a css, azaz stíluslapon.
Első példa a h1 - es címsorra vonatkozik.
Most % -ban adjuk meg 130%, színe sötétszürke #333 lesz,
A margót és a keretet ( border ), nem kötelező megadni.
Szöveg alatt és jobb oldalán megjelenítjük a keretet "border" (látható keret), egyenes (solid) vonallal.
Például: Keret kiemeléses trükkel, kell aláhúzni a szöveget is. border-bottom: keret lent
A következő meghatározást, a stíluslapon hozzuk létre.A zárójelek közötti meghatározásokat, tetszés szerint megváltoztathatjuk.
Most a jobb áttekinthetőség miatt írtam a meghatározásokat külön sorba. A valóságba írjuk egy sorba, azaz folyamatosan.
h1 { font-size: 130%;
color: #333 ;
margin-left: 1.5em ;
border-right: 2px solid #000;
border-bottom: 2px solid #000; }
Másik példa a h2 - es sorra vonatkozik.
Legyen ez most egy h2-es címsor.
Értékek megegyeznek az előző példával, csak kisebb betű, kisebb margó érték, a keretet most a címsor alatt és főlőtt, fogjuk megjeleníteni. A címsor fölé, felveszünk egy láthatatlan margót.
Megjegyzés:
a padding belső margó, a képernyőn nem jelenik meg, de a megadott vastagsági értéke, a szöveget, vagy képet a megadott irányba elmozdítja. )
A következő meghatározást, a stíluslapon hozzuk létre.A zárójelek közötti meghatározásokat, tetszés szerint megváltoztathatjuk.
h2 { font-size: 110%; color: #333 ; margin-left: 1em ; border-top: 2px dotted #ccc;
border-bottom: 2px solid #000; padding-top: 1.5em; }
A következő stílus meghatározás, minden címsorra alkalmazható.
A kékkel kiemelt részek tetszés szerint megváltoztathatóak.
h2 {font-size: 1.4em; color: blue; font-style: normal; text-align: center; letter-spacing: 0.2em; border-bottom: 2px solid black ; padding: 0 0 0 0; }
3. Címsorok megkülönböztetése.
Ha úgy döntünk, hogy a címsorok megjelenésébe mi is beleszólunk.
Akkor a címsor típusoknak egyedi megjelenési formát készíthetünk a css, azaz stíluslapon.
Ha minden h2-es címsornak egyforma megjelenési formát szeretnénk, akkor nem kell külön azonosító a kezdő címkébe.
Például:
XHTML - lapon a címsor megírása: <h2> címsor szövegét ide írjuk </h2>
CSS, azaz stíluslapon a meghatározások megírása:
h2 { ide, a két zárójel közé írjuk a h2-es címsorra jellemző meghatározásokat. }
------------------------------------------------------------------------------------------
Ha minden h2-es címsornak más és más megjelenési formát szeretnénk,
Az xhtml - lapunkon az egyforma típusú címsorok ( például: h2-es ) közül valamelyiket, vagy többet is, más és más megjelenési formában szeretnénk megjeleníteni, akkor a következő lehetőségek közül választhatunk:
1. A címsorokat egymástól egyedi azonosítóval kell megkülönböztetni.
Azonosítókat a kezdő címkében kell elhelyezni és class osztályazonosítóhoz kell rendelni. ( Azonosítók elnevezésében ékezetes betűket nem alkalmazunk.)
Például:
XHTML - lapon így adjuk meg.
Első címsor azonosítója, azaz elnevezése legyen egyes, <h2 class="egyes">
Hármas címsor azonosítója, azaz elnevezése legyen harmas, <h2 class="harmas">
CSS, azaz stíluslapon.
.egyes { ide, a két zárójel közé írjuk az egyes címsorra jellemző meghatározásokat. }
.harmas { ide, a két zárójel közé írjuk a hármas címsorra jellemző meghatározásokat. }
------------------------------------------------------------------------------------------
2. Div szakaszban helyezzük el a h2-es címsort. A div szakasz azonosítóját, id jellemzőhöz vagy class osztályazonosítóhoz rendelhetjük. ( Azonosítók elnevezésében ékezetes betűket nem alkalmazunk.)
Például:
XHTML -lapon.
A div szakasz azonosítója, azaz elnevezése legyen egyedi. <div class="egyedi">
CSS, azaz stíluslapon.Az egyedi azonosítóhoz rendeljük a címsor típusát.
.egyedi h2 {Ide, a két zárójel közé írjuk az egyedi azonosítóval rendelkező div szakaszban elhelyezett h2-es címsorra, vagy címsorokra jellemző meghatározásokat. }
Megjegyzés:
Azon címsorokhoz, melyeket egyforma stílusban szeretnénk megjeleníteni, azokhoz egyforma azonosítót rendelünk az XHTML - lapon
Azon címsorokhoz, melyeket más és más megjelenési formában szeretnénk megjeleníteni, azokhoz különböző, azaz egyedi azonosítót kell rendelni az XHTML -lapon.
A stíluslapon meghatározhatjuk minden egyes címsor, pozícióját, betűméretét, betűalakját, betűszínét, háttérszínét, betűk egymástól való távolságát, aláhúzási vonal vastagságát, típusát és színét.
4. Címsorok aláhúzása
Címsorok kiemelése, aláhúzása.
Például : A stíluslapon, h1-es címsorra vonatkozóan,
h1 {border-bottom: 3px solid #000; }
Jelentése: szegély-lent: 3 képpont vastag, egyenes vonal, színe fekete
Akárcsak a külső margókat és belső margókat, a border látható keretet is felvehetjük a meghatározások közé, például az elemek vagy címszavak aláhúzására.
Készíthetünk, keretes szegélyeket is, ha megadjuk a felső és alsó részére, valamint jobb és bal oldalára vonatkozó adatokat.
Szegélyek, a belső margók külső szélét veszik körül kívülről, ez a látható keret, a border.
A bemutató ábrát, lásd a bemutató - alapismeretek témakörben.
Címsorok aláhúzásához használható vonaltípusok:
- egyenes: solid
- pontozott: dotted
- dupla: double
- kiemelkedő: outset
- bemélyített: groove
- süllyesztett: inset
A vonalak vastagságát megadhatjuk:
- képpontban: (px)
- betűméretben: ( em )
- százalékban: (%)
- kulcsszavakkal: ---------- vékony = thin ------------- közepes = medium ------------- vastag = thick
Címsorok aláhúzásának bemutatása:
Aláhuzás teljes szélességben.
Csak a szöveg aláhuzása.(span trükkel)
Jelkép és szöveg aláhuzása.(span trükkel)
Csak a szöveg aláhuzása.(strong trükkel)
Jelkép és szöveg aláhuzása.(strong trükkel)
Címsorok megírása az XHTML - lapon. H24. kép
Ismertető:
A h2-es címsorok tartalmaznak egy jelképet és a címsor szövegét.
Könnyebb áttekinthetőség végett, a jelképre vonatkozó meghatározások zöld, a címsor szövege piros színnel van kiemelve.
Az első h2-es sorban nem jelöltünk ki külön szövegrészt.
A második és harmadik h2-es sorban, span címkével határoljuk be azt a részt, melyet aláhúzunk.
A kezdő és záró span címkével határolt terület, mely kék színnel van kiemelve egyedileg formázható, függetlenül a többi szövegrésztől.
A kezdő span címkében elhelyezünk egy egyedi azonosítót.
Első h2-es sor: Aláhúzás a monitor vagy div szakasz teljes szélességében.
Második h2-es sor: Csak a szöveget.
Harmadik h2-es sor: Csak a jelképet és a szöveget.
H24
<h2><img src="YYY.jpg" alt="..." width="20" height="20"/>Jelkép a címsor szövege előtt.</h2>
<h2><img src="YYY.jpg" alt="..." width="20" height="20" /> <span class="alahuzas"> Csak ez a szöveg lesz aláhuzva.</span> </h2>
<h2><span class="alahuzas"><img src="YYY.jpg" alt="..." width="20" height="20" /> Csak a jelkép és szöveg aláhuzása.</span> </h2>
Címsor meghatározások megírása stíluslapon. CSS 24. kép
Ismertető:
Az első h2-es sorra vonatkozó meghatározások között találjuk a border-bottom meghatározást, melynek jelentése vonal megjelenítése alul. Ezzel a meghatározási sorral a vonal, teljes szélességben látható lesz.
A második h2-es meghatározási sorban, border: none; meghatározás látható, melynek jelentése vonal megjelenítés nem kell.
A vonal megjelenítést border-bottom a span egyedi azonosítójához ( alahuzas) írjuk.
A vonal, csak a span kezdő és záró címkével határolt területen jelenik meg. Lásd H 24. képen
A span azonosítójához írt padding szerepe: A jobbos és balos belső margóval beállíthatjuk, hogy a vonal mennyivel legyen hosszabb az aláhúzandó szövegrésznél.
Próbaképpen a második és a negyedik nulla helyett írjunk be 1em értéket, és ellenőrizzük, hogy mennyivel lesz hosszabb a vonal mint a szöveg.
A zöld színnel kiemelt részeket, tetszés szerint megváltoztathatjuk.
CSS 24
h2{ font-size: 1.4em; font-style: normal; color: black; letter-spacing: 0.4em;
border-bottom: 2px solid blue; padding: 0 0 0 0; }
h2{ font-size: 1.4em; font-style: normal; color: black; letter-spacing: 0.4em;
border: none;}
.alahuzas { border-bottom: 2px solid blue; padding: 0 0 0 0; }
5. Betűméretek.
Betűméretet megadhatjuk : % -ban vagy em - be.
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
A böngésző programokban, a h1-es címsor betűméretéhez viszonyul a dokumentumban leírt
további címsor betűmérete.
Címsorok: <h1>, <h2>, <h3>, <h4>. <h5>, <h6>.
Ha rábízzuk a böngésző programokra, hogy a címsorok milyen formában jelenjenek meg, akkor a címsorok betűmérete hasonlóan jelennik meg, mint a következő ábrán láthatóak.
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.
Betűméret meghatározása stíluslapon: hY { font-size: 130%; }
Az Y helyére írjuk a címsor típusszámát.
font-size: jelentése betűméret
A kettőspont után írjuk be az általunk megfelelő betűméret nagyságát, melyet pontosvesszővel kell lezárni.
A betűméretet megadhatjuk százalékban ( pl. 130%; ) vagy em értékben ( pl. 2em; )
Címsoraink megjelenési formáját, többféleképpen is meghatározhatjuk.
Ahhoz, hogy egy adott címsort, egy adott weblapon, más és más formában jelenítsük meg, a következő négy lehetőséget alkalmazhatjuk. Ezt szemléltetik a H 22. kép és a hozzá tartozó CSS 22. képen látható meghatározások.
Egyes sorban: Az általánosan használt megoldás.
Kettes sorban: Közvetlen a kezdő címkében, elhelyezünk egy úgynevezett azonosítót. Kettő h5 - ös címsort láthatunk, de mindegyiknek más elnevezést azaz azonosítót adtunk, egyes és kettes néven. Mivel mindegyik egyedi azonosítóval rendelkezik, ezért egymástól eltérő megjelenési formát adhatunk mindegyiknek.
Harmadik sorban: A címsor egy div szakaszban található, a div szakasz elnevezése id jellemzőhöz van rendelve, elnevezése harmas, ( ékezetet az azonosítókban nem alkalmazunk ). Ezzel az azonosítóval, azt határozhatjuk meg, hogy ezen div szakaszon belül, mindegy mennyi h5 - ös címsort készítettünk, azok megjelenési formája azonos lesz.
Negyedik sorban: Megegyezik a harmadik sorhoz leírtakkal. Annyiban különbözik, hogy a div szakasz elnevezését ítt nem id jellemzőhöz, hanem class osztályazonosítóhoz rendeltük, azonosító elnevezése a negyes nevet kapta.
Megjegyzés:
Ha a div szakasz azonosítóját id jellemzőhöz rendeljük, akkor ezen néven a div szakasz egy weblapon belül csak egyszer szerepelhet, a következő div szakaszt más azonosítóval kell ellátni.
Ha a div szakasz azonosítóját class osztályazonosítóhoz rendeljük, akkor ezen néven a div szakasz egy weblapon belül többször is szerepelhet, a következő div szakasz is rendelkezhet ugyan ezen elnevezésen.
Címsorok megírása az XHTML - lapon. H22. kép
H 22.
1. <h5>Megjelenés címsor azonosítóval.</h5>
2. <h5 class="egyes"> Megjelenés, class egyes azonosítóval.</h5> <h5 class="kettes"> Megjelenés, class kettes azonosítóval.</h5>
3. <div id="harmas"> <h5>Megjelenés, div szakaszban id azonosítóval, harmas.</h5> </div>
4. <div class="negyes"> <h5>Megjelenés, div szakaszban class azonosítóval, negyes.</h5> </div>
A címsorokhoz tartozó meghatározások megírása stíluslapon. CSS 22. kép
Ismertető:
A címsorokra vonatkozó meghatározások itt is számozott sorokban láthatóak, hogy könnyebben tudjuk összehasonlítani a H 22. képen látottakkal.
Az egyes sorban látható általános megoldás azt jelenti, hogy egy weblapon belül minden olyan címsor, mely a h5 címsor típussal rendelkezik, az itt leírt meghatározások alapján jelenik meg a monitoron.
De ezt a stíluslapon megváltoztathatjuk, ha a 2-es 3-as 4-es sorokban leírtakat beírjuk a css, azaz stíluslapra. Ez azt eredményezi, hogy a html - lapon szereplő h5-ös címsorokba beírt témakörök elnevezése, más és más formában jelenik meg.
Címsorok a jobb megkülönböztetés végett, változó betűméreteket és mindegyik más betűszint kapott.
CSS 22.
1. h5 { font-size: 190%; color: #393;} 2. .egyes { font-size: 170%; color: #399;} .kettes { font-size: 150%; color: #339;} 3. #harmas h5{ font-size: 130%; color: #993;} 4. .negyes h5{ font-size: 100%; color: #999;}
Most nézzük meg, hogy a H 22. képen megírtak, a CSS 22. képen, azaz stíluslapon megírt meghatározások eredményeként, hogyan jelennek meg a monitoron. Címsorok a sorszámozásnak megfelelő sorrendben jelennek meg.
Megjelenés, címsor azonosítóval
Megjelenés, class egyes azonosítóval
Megjelenés, class kettes azonosítóval
Megjelenés, div szakaszban id azonosítóval, harmas
Megjelenés, div szakaszban class osztályazonosítóval, negyes
6. Címsorok háttérképpel.
Címsoraink megjelenési formáját, többféleképpen is meghatározhatjuk.
- Címsorok szövege háttérképen van elhelyezve.
- Címsorok szövegénél jelképet alkalmazunk.
- Címsorok szövege háttérszínnel, háttérszín teljes szélességben látható.
- Címsorok szövege háttérszínnel, háttérszín csak a szöveg hosszában látható.
Címsor a háttérképen teljes szélességben.
1. Címsor a háttérképen.
Megírása az XHTML - lapon és CSS azaz stíluslapon. HCSS 1. kép.
HCSS 1.
Háttérképes címsor teljes szélességben.
Megírása html - fájlban:
<div id="cim"><h2> Címsor a háttérképen.</h2> </div>
Meghatározások megírása CSS - fájlban:
#cim { width: 800px; height: 120px; background-image: url(YYY.jpg);
background-repeat: no-repeat; }
#cim h2{ text-align: center; font-size: 2em; font-style: italic; color: #FFF;
letter-spacing: 0.5em; padding: 1.5em 0 0 0; border: none; }
Címsor a háttérképen, háttérkép a szöveg szélességben.
2. Címsor a háttérképen.
3. Címsor a háttérképen.
4. Címsor a háttérképen.
Megírása az XHTML - lapon és CSS, azaz stíluslapon HCSS 2. kép
HCSS 2.
Háttérképes címsorok a szöveg szélességében.
Megírása html - fájlban:
<div id="alcim"><h2> Címsor a háttérképen.</h2> </div>
Meghatározások megírása CSS - fájlban.
Háttérkép balra:
.alcim{width: 400px; height: 25px; background-image: url(YYY.jpg)
background-repeat: no-repeat; }
.alcim h2 {text-align: center; font-size: 1.4em; font-style: normal; color: #FFF;
letter-spacing: 0.2em; padding: 0 0 0 0; border: none; }
Háttérkép középre: Megegyezik az előzővel, csak a következőket kell beírni.
.alcim{ margin-left: 10em; }
Háttérkép jobbra: Megegyezik az előzővel, csak a következőket kell beírni.
.alcim{ margin-left: 20em; }
7. Címsorok háttérszínnel
Címsorok háttérszínnel, háttérszín teljes szélességben.
1. Címsor háttérszínnel.
2. Címsor háttérszínnel.
3. Címsor háttérszínnel.
4. Címsor háttérszínnel.
Megírása az XHTML - lapon és CSS, azaz stíluslapon HCSS 3. kép
Ismertető:
A h2-es címsort megkülönböztetjük a többi h2-es címsortól, azaz hozzárendelünk egy egyedi azonosítót, tetszés szerinti névvel.
Jelen esetben hsztsz lesz az azonosító név.
Hól helyezkedik el a címsor a monitoron.
Cím szövege baloldalon: text-align: left;
Cím szövege középpen: text-align: center;
Cím szövege jobbra: text-align: right;
Cím szövege tetszés szerint: padding balos ( left ) margójával kell behatárolni.
HCSS 3.
Háttérszín teljes szélességben.
Megírása html - fájlban:
<h2 class="hsztsz"> Címsor háttérszínnel.</h2>
Meghatározások megírása CSS - fájlban.
.hsztsz{font-size: 1.4em; color: #393; background-color: #639; letter-spacing: 0.4em;
border: none; padding: 0 0 0 0; }
.hsztsz{ text-align: YYYYYY;}
Háttérszín csak a szöveg hosszában látható.
1. Címsor háttérszínnel.
2. Címsor háttérszínnel.
3. Címsor háttérszínnel.
Megírása az XHTML - lapon és CSS, azaz stíluslapon HCSS 4. kép
Ismertető:
A h2-es címsort megkülönböztetjük a többi h2-es címsortól, azaz hozzárendelünk egy egyedi azonosítót tetszés szerinti névvel.
Jelen esetben hszszh lesz az azonosító név.
Címsor szövegét span meghatározások közé írjuk, és ezt is ellátjuk egyedi azonosítóval.
Jelen esetben a span azonosítója a következő elnevezést kapja, szines
Szöveg és háttérszín elhelyezkedése a monitoron:
Balra: text-align: left;
Középre: text-align: center;
Jobbra: text-align: right;
Tetszés szerinti: {margin-left: Yem; }
HCSS 4.
Háttérszínt adunk a szövegnek megfelelő hosszúságban.
Megírása html - fájlban:
<h2 class="hszszh"> <span class="szines">Címsor háttérszínnel.</span> </h2>
Meghatározások megírása CSS - fájlban.
.hszszh{ font-size: 1.4em; color: #fff; letter-spacing: 0.4em; border: none; padding: 0 0 0 0; }
.hszszh{ text-align: YYYY; }
.szines{ background-color: blue; padding: 0 1em 0 1em; }
8. Címsorok jelképpel
Jelkép a címsor előtt.
Jelkép a címsorban.
Jelkép a címsor után.
Megírása az XHTML - lapon. H 23. kép
Ismertető:
Ezekhez a címsorokhoz nem kell CSS, azaz stíluslapon meghatározásokat készíteni, csak abban az esetben, ha a címsor pozícióját illetve a betűk megjelenési formáját meg akarjuk változtatni.
Három címsor és jelkép elhelyezkedési formát láthatunk.
Az, hogy a címsor szövege, vagy a jelkép jelenik meg a sorban először, ez attól függ, hogy milyen sorrendben írtuk meg a címsort.
A jelképre vonatkozó meghatározások zöld színnel vannak kiemelve, a címsor szövege piros színnel van kiemelve.
Ha megfigyeljük az ábrán látható három címsort, a színekkel kiemelt részekből rögtön kiderül, hogy a jelkép mikor hól helyezkedik el.
A címsor típusa tetszés szerint megváltoztatható, jelenleg h2-es
Az Y helyére írjuk a jelkép fájl nevét.
A pontok helyére a képre jellemző elnevezést.
A jelkép mérete: Jelenleg vízszintesen és függőlegesen is 20 képpont méretű, de ez tetszés szerint megváltoztatható.
H 23.
Jelképes címsorok.
Megírása html - fájlban:
<h2><img src="YYY.jpg" alt="..." width="20" height="20" />Jelkép a címsor előtt.</h2>
<h2>Jelkép<img src="YYY.jpg" alt="..." width="20" height="20" />a címsorban.</h2>
<h2>Jelkép a címsor után.<img src="YYY.jpg" alt="..." width="20" height="20" /></h2>
9. Reklámformájú címsorok készítése.
Reklámcímeket, nem billentyűzetről írjuk be, az XHTML - lapra.
Most, kész képet kell beilleszteni.
Elkészítésük: Rajzprogramokkal történik, majd elkészültük után képformátumban mentjük. A kész képet beillesszük a weblapunkba.
Beillesztés történhet: Normál képként, vagy háttérképként.
Reklámcím betűinek formázása, elkészítése:
- A legegyszerűbb rajzprogrammal, rajzolhatjuk, színezhetjük.
- A szöveget szövegszerkesztőben is elkészíthetjük: Majd átmásoljuk valamelyik rajzprogramunkba, ahol a háttér és egyéb színeket tetszés szerint tovább alakítjuk. Elkészülte után, képformátumba mentjük. Például: JPG
A következő részben, bemutatok olyan reklámszöveget, melyek mindenki számára elérhető, legegyszerűbb rajzprogrammal készültek.
