I D É Z E T - R Ö V I D Í T É S !
|
1. Idézetblokk ( blockquote). 2. Kiemelés, oldalidézet (callout) 3. Nem idézeteket tartalmazó szövegrészek kiemelése 4. Rövidítés (acronym ) |
1. Idézetblokk ( blockquote).
Blockquote: idézetblokk
A böngésző programok automatikusan beljebb kezdik a szövegsorokat, a bal és jobb oldalon.
Az idézetblokkot, azaz szövegblokkot kizárólag idézetek leírásakor használjuk.
Megjegyzés:
Ha csak azt szeretnénk elérni, hogy dokumentumunk egyes szakaszai beljebb kezdődjenek, mint a többi bekezdés és ez nem idézet, akkor a szövegbehúzásra használjuk a CSS, azaz stíluslapon történő meghatározást.
A kezdő és záró blockquote címke elhelyezése a dokumentumunkban:
Y-ok helyére írjuk az idézetünket.
- A kezdő <p> címke elé és a záró </p> címke után.
Megírása XHTML - lapon:
<blockquote> <p> YYY YY YYYY </p> </blockquote>
A kezdő <blockquote> címke és a záró </blockquote> címke közé, annyi p címkék közé írt bekezdést készíthetünk, amennyi az idézetünk megírásához szükséges.
- A kezdő <p> címke után és a záró </p> címke elé.
Megírása XHTML - lapon:
<p> <blockquote> YYY YY YYYY </blockquote> </p>
A kezdő <p> címke és a záró </p> címke közé, annyi blockquote címkék közé írt bekezdést készíthetünk, amennyi az idézetünk megírásához szükséges.
Mi a különbség a fenti két példa között:
Első példában alkalmazott megírásnál:
Szövegsorok a p címkék között helyezkednek el, ezért a szövegbetűk megjelenési formáját a p címkékre megírt stílus meghatározások fogják megformázni.
Második példában alkalmazott megírásnál:
Szövegsorok a blockquote címkék között helyezkednek el, ezért a szövegbetűk megjelenési formáját a blockquote címkékre megírt stílus meghatározások fogják megformázni.
Ezen bekezdések elé, figyelemfelhívó függőleges vonalat is elhelyezhetünk, a látható keret (border-left:) segítségével.
- A következő példát, a kezdő <blockquote> címkével kezdjük.
- Az Y-ok helyére írjuk meg a bekezdés szövegét.
- Bekezdés végén helyezzük el a záró </blockquote> címkét .
Példa:
<blockquote> YYYY YYYYYYYY Y YY YYYYYY</blockquote>
Amit most olvasunk, ez is a fenti példa alapján készült. Látható, hogy a szövegsorok mennyivel beljebb helyezkednek el, a monitor bal szélétől.
A piros pontok, betűk színe és formájának megjelenése, a stíluslapon megadott meghatározások eredménye.
Készíthetünk más formájú díszítést is, akár háttérképet is elhelyezhetünk a szöveg mögé.
Ez a vonal ne érjen hozzá a szöveghez, a baloldali belső margóval (padding-left:), helyezhetjük távolabb a szövegtől.
A dotted, pontozott vonalat jelent, ha folytonos vonalat akarunk, akkor a dotted helyett a solid meghatározást kell beírni.
A pontozott vonal színe legyen most piros (red), mérete 5px vastag.
A pontozott vonal és a szövegsorok közötti távolság, most legyen 10px
A betűk megjelenése normál, színe mélykék (#009)
Példa a stíluslapon történő megíráshoz:
blockquote { border-left: 5px dotted red; padding-left: 10px; font-weight: normal; color: #009;}
2.Kiemelés, oldalidézet (callout)
Újságokban az oldalidézet. (Angolul = callout).
Ha a html lapon a kiemelni kívánt szöveg olyan helyen van mely, rendelkezik olyan div szakasszal, amit, a stíluslap számára, elláttunk osztálykijelölővel (class), és annak nevet is adtunk.
Például: <div class="callout">
A div területét, azaz szakaszát, egy osztályazonosítóhoz (class) rendeltük és el is neveztük callout névre.
A bekezdés <p> ennek a területnek, azaz szakasznak, szaknyelven a leszármazottja.
Így ehhez a div szakaszhoz, a stíluslapon két különálló kijelölőt is használhatunk ezen terület megformázására:
első = .callout
második = .callout p
Például:
Az oldalidézetet egyedi vonallal szeretnénk aláhúzni.
- Vonal elején legyen egy szimbólum, vagy a végén is
- Vonal vége felfelé ívelődik, vagy az eleje is.
Készítsünk olyan GIF vagy JPG kiterjesztésű kép fájlt, hogy a vonal végén egy szimbólum legyen látható.
Vonal jobb oldalán (végén) a szimbólum, egy kicsit messzebb kerüljön a szövegtől, a belső nem látható (padding) margóval kell behatárolni.
Kép megjelenítéséhez szükséges meghatározásokat, a stíluslapon lévő callout azonosítóhoz megírt meghatározások közé kell beírni.
Ha tovább akarunk trükközni, akkor van még egy lehetőségünk.
Eddig csak a ( .callout ) kijelölőt használtuk fel, és még ott van szabadon a ( .callout p ) kijelölő is.
Ezt használjuk fel arra, hogy az alsó vonalnak a bal oldalán is legyen egy szimbólum.
Ehhez kell készíteni egy másik gif kiterjesztésű kép fájlt, mely az előző kép fájlunknak a vízszintes tükörképe.
Kép megjelenítéséhez szükséges meghatározásokat, a stíluslapon lévő callout p azonosítóhoz megírt meghatározások közé kell beírni.
Megjegyzés:
Most aztán mondhatnánk, hogy valami bajunk van, hiszen már az első alkalommal is rajzolhattunk volna olyan képet, melyen a vonal mindkét végén van egy szimbólum.
Ez így igaz, ha minden div szakasz szélességét, mely meghatározza a benne foglalt szövegsorok hosszát, egyformára állítjuk be.
A fent ismertetett trükknek az a jelentősége, hogy a képformátumú vonalat csak egyszer kell elkészíteni, és bármilyen széles div szakaszhoz felhasználhatjuk, azaz nem kell minden alkalommal újabb és újabb hosszúságú képformátumú vonalat készíteni.
Ezért a fenti két kijelölővel hoztunk létre olyan képhatást, mely követi a szövegsor hosszát, azaz nyúlik mint a gumi.
A következő részben, láthatunk egy példát az oldalidézet megjelenítésére, és annak képformátumú vonallal történő aláhúzására.
Az XHTML- lapunkra a következő rész teljes tartalmát kell beírni.
<div class="callout">
<p>A callout azonosítóval rendelkező div szakaszon belül, a dokumentumunk szövegét, mely a kezdő <p> címke és a záró </p> címke között helyezkedik el, más megjelenítési formában tudjuk megjeleníteni a további szövegrészektől.
A szövegrészeknek, oldalidézetnek megfelelő megjelenési formát hozhatunk létre.Oldalidézetek kiemeléséhez egyedi aláhúzási formákat készíthetünk.<cite>Szövegsorokban a kezdő <cite> címke és a záró </cite> címke közé írt szavak, dőlt betűvel jelennek meg.</cite>
</p>
</div>
Oldalidézet meghatározásainak megírása a stíluslapon:
.callout { text-align: left; border-left: 5px dotted #c3c; }
.callout { background: url(fotok/pirosvonal_1.gif) no-repeat right bottom; text-align: left; margin-left: 30%; padding-right: 14px; }
.callout p { font-size: 80%; margin-left: 10px; background: url(fotok/pirosvonal_2.gif) no-repeat left bottom; padding-bottom: 18px;}
cite{border-bottom: 1px solid black;}
Az XHTML -lapon megírtak, a stíluslapon megadott meghatározások hatására, a következő formában jelennek meg a monitoron.
A callout azonosítóval rendelkező div szakaszon belül, a dokumentumunk szövegét, mely a kezdő <p> címke és a záró </p> címke között helyezkedik el, más megjelenítési formában tudjuk megjeleníteni a további szövegrészektől.
A szövegrészeknek, oldalidézetnek megfelelő megjelenési formát hozhatunk létre.Oldalidézetek kiemeléséhez egyedi aláhúzási formákat készíthetünk. Szövegsorokban a kezdő <cite> címke és a záró </cite> címke közé írt szavak, dőlt betűvel jelennek meg.
Css, azaz stíluslapon a <cite> címkével határolt szövegrészekhez, tetszés szerinti meghatározásokat készíthetünk.
A cite, valójában a címhivatkozások kiemelésére szolgál.
Ilyenek például a dokumentumunkban, vagy idézetblokkok szövegsorába beírt, azon könyvek vagy újságcikkek címének kiemelése, melyekből idézünk.
A kezdö cite címkében megadhatjuk azt a hivatkozást, azaz teljes elérési útvonalat, ahól azon weblapok, dokumentumok, könyvek, újságok találhatók, melyekből idéztünk.
Van, amikor a kiemelések, bekezdések, hatékonyabban formázhatók a float ( úsztatás ) paranccsal.
3. Nem idézeteket tartalmazó szövegrészek
beljebb húzása, azaz beljebb kezdése.
Nem idézeteket tartalmazó szövegrészek kiemeléséhez, készítettem hat idézetjellegű bekezdést, melyeket egyedi azonosítóval láttam el.
Ezeket, mindenki tetszése szerint alkalmazhatja.
(Az azonosítóknál, ékezetes betűket nem alkalmazunk)
A szövegsorok beljebb kezdése, hasonlít ahhoz, mint amikor a szövegszerkesztő programokban lenyomjuk a tab billentyűt egyszer, kétszer, vagy háromszor, és ezt követően írnánk a szövegsorokat.
begytab = beljebb egy tab billentyű lenyomásával.
bkettotab = beljebb kéttő tab billentyű lenyomásával.
bharomtab = beljebb három tab billentyű lenyomásával, és így tovább hatszori tab billentyű lenyomásáig.
A következő hat kezdő <p>címkéből választhatunk, hogy a bekezdésünk elé melyiket helyezzük el, az XHTML -lapunkon.
<p class="begytab">
<p class="bkettotab">
<p class="bharomtab">
<p class="bnegytab">
<p class="bottab">
<p class="bhattab">
A következő hat egyedi azonosítóval kezdődő stílusból választhatunk, hogy melyiket helyezzük el, a stíluslapon.
Értelemszerűen, a <p> címkének adott azonosító névnek megfelelő, azonosító névvel kezdődő stílussort kel bemásolni.
Megjegyzés:
A stíluslapra bemásolhatjuk az itt lévő összes meghatározást. Ha ezt tesszük, akkor a dokumentumunk megírásánál az XHTML - lapon, csak a megfelelő azonosítóval rendelkező kezdő <p> címkét kell a bekezdésünk előtt elhelyezni.
Az itt látható stílusokat, mindenki a saját igényei szerint megváltoztathatja.
.begytab { border-left: 5px dotted green; padding-left: 10px; margin-left: 40px; margin-right: 40px; font: 0.9em Arial ; color: navy; line-height: 150%; }
.bkettotab { border-left: 5px dotted blue; padding-left: 10px; margin-left: 100px; margin-right: 100px; font: 0.8em Arial ; color: navy; line-height: 150%; }
.bharomtab { border-left: 5px dotted red; padding-left: 10px; margin-left: 160px; margin-right: 160px; font: 0.8em Arial ; color: navy; line-height: 150%; }
.bnegytab { border-left: 5px dotted fuchsia; padding-left: 10px; margin-left: 220px; margin-right: 220px; font: 0.7em Arial ; color: navy; line-height: 150%; }
.bottab { border-left: 5px dotted fuchsia; padding-left: 10px; margin-left: 280px; margin-right: 40px; font: 0.8em Arial ; color: navy; line-height: 150%; }
.bhattab { border-left: 5px dotted fuchsia; padding-left: 10px; margin-left: 340px; margin-right: 40px; font: 0.7em Arial ; color: navy; line-height: 150%; }
4. Rövidítések: acronym
Szöveg: Hypertext Markup Language
Szöveg rövidítése: HTML.
Ha a szövegünkben, rövidítéseket alkalmazunk, azt nem mindenki tudja értelmezni.
Erre jó az acronym parancs.
A szöveg olvasója, az egér mutatóját a rövidítés fölé viszi, megjelenik a helyes értelmezési szöveg.
A programban ugyanúgy járunk el, mint a könyvekben A könyv vagy a html - lapunk elején, a rövidítést részletesen ismertetjük. Ezért, a továbbiakban nem részletezzük, csak a rövidítést alkalmazzuk
Megjegyzés:
Ezt az utasítást nem a stíluslapon, hanem a html - lapon alkalmazzuk.
Példa, a szövegsorokban történő meghatározásra.
Az így beírt utasítás hatására, csak a rövidítés jelenik meg az olvasók előtt.
<acronym title="Hypertext Markup Language"> HTML </acronym>
A rövidítést itt láthatjuk, mozgassuk föléje az egér mutatóját (kurzort). HTML
A rövidítés megjelenítése, böngészőről, böngészőre változhat.
Következő példa, a stíluslapon történő meghatározást mutatja be.
Nagyon sokan, a dőlt betűs, pontozott vonallal aláhúzott gyakorlatot alkalmazzák
Példa:
acronym {font-style: italic; border-bottom: 2px dotted black;}