Weblap címsorok.

1. Címsorok típusai

Címsoroknak 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> YYYYYY YYYYYY </h1>
<h2> YYYYYY YYYYYY </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.

Vissza a lap elejére

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.

<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.

     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; }

Vissza a lap elejére

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

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.

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

Vissza a lap elejére

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; }

Vissza a lap elejére

 

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; }

Vissza a lap elejére

---

 

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;}

Vissza a lap elejére

 

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; }

Vissza a lap elejére

 

---

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>

Vissza a lap elejére

---

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.

Vissza a lap elejére

---