Az első leckében írtam róla, hogy a modern oldalak HTML kódja nem tartalmaz formázást. Ez így igaz (még mindig :D), azonban egy pár alap dolgot mégis meg kell beszélnünk ezzel kapcsolatban.
Szövegformázások:
- Mikor használjuk? - Biztosan használtatok már valamilyen szövegszerkesztőt. Na, pont akkor és arra használjuk a HTML-ben a szövegformázást, mint szövegszerkesztésben. Hogy mire, az mindenki döntse el maga :D (pl.: aláhúzás, áthúzás, félkövér, dőlt...)
Példa:
<html>
<body>
<p><b>Ez a szöveg félkövér lesz</b></p>
</body>
</html>
Ezt kell látnod:
Elemzés:
<b> - a félkövér betűtípus tag-je (ami a nyitó <b> és záró </b> tag között van az félkövér lesz)
További formázási lehetőségek:
<big> - ezzel a tag-gel a szöveg nagyobb betűméretű lesz
<i> - ezzel a tag-gel a szöveg dőlt lesz
<strong> - ezzel a tag-gel a szöveg "erős" lesz. Olyan mint a félkövér. Próbáld ki!
<sub> - alsó index
<sup> - felső index
<pre> - ha ezt a tag-ez használjuk, akkor a böngészőben is a forráskódban használt formázással jelenik meg
<address> - ezt a tag-et gyakran címek megadásánál hasznáják (hasonlít a dőlt-höz)
<del> - áthúzás
<ins> - aláhúzás
FONTOS! - Mindegyiknél használjunk zárótag-et! (pl.: <i>-nél </i>, <b>-nél </b>...)
FIGYELEM! "Érdekesség" következik.
Ismerkedjünk meg az abbr tag-gel.
Példa:
<html>
<body>
<p><abbr title="Ez a szöveg akkor jelenik meg, ">ha ide ráhúzom az egeret</abbr></p>
</body>
</html>
Ezt kell látnod:
Elemzés:
<abbr> - tag
title - attribútum. Értékének azt a szöveget kell megadni, melyet akkor szeretnénk látni, ha a nyitó <abbr> és záró </abbr> tag között lévő szövegen tartjuk az kurzort.
Nem világos? Próbáld ki, és azonnal meg fogod érteni :)
Most pedig tényleg egy olyan tag jön, amit nem kell megtanulni, csak érdekesség:
<html>
<body>
<bdo dir="rtl">
Ez a szöveg "tükrözve fog megjelenni"
</bdo>
</body>
</html>
Nem hiszem, hogy sok magyarázatot igényel, de azért elmondom, amit tudni érdemes:
Ha a <bdo> tag dir attribútumának értékének "rtl"-t adunk meg, akkor a szöveg tükrözve jelenik meg.
Nem világos? Próbáld ki :D
Idézetek:
Ha hosszú idézetet szeretnénk megjeleníteni, akkor az a <blockquote> nyitó és </blockquote> záró tag közé írjuk. Ez esetben nincsen idézőjel, hanem egy szövegdoboz szerű területben látjuk az idézetünket.
Ha az idézet rövid, akkor azt a <q> nyitó és </q> záró tag közé írjuk. Ekkor egyszerűen idézőjelek között jelenik meg.
Betűtípusok:
A betűtípusokat manapság már CSS-ben adjuk meg, azonban egy kis alapismeretet mindenképpen kell szereznünk.
- Mikor használjuk? - Ha a szöveg méretén, kinézetén szeretnénk változtatni.
Példa:
<html>
<body>
<p>
<font size="5" face="arial" color="blue">Ez a szöveg 5-ös betűméretű, arial
betűtípusú és kék színű.
</p>
</p>
</body>
</html>
Ezt kell látnod:
Elemzés:
<font> - tag.
size - attribútum. Értékének a szöveg méretét adjuk meg.
face - attribútum. Értékének a szöveg betűtípusát adjuk meg.
color - attribútum. Értékének a szöveg színét adjuk meg.ű
FIGYELEM! A formázás ezen módja ELAVULT. A font tag a (legújabb) HTML5-ben nem is szerepel... Éppen ezért megnézzük a formázás helyes módját is.
Példa:
<font> - tag.
size - attribútum. Értékének a szöveg méretét adjuk meg.
face - attribútum. Értékének a szöveg betűtípusát adjuk meg.
color - attribútum. Értékének a szöveg színét adjuk meg.ű
FIGYELEM! A formázás ezen módja ELAVULT. A font tag a (legújabb) HTML5-ben nem is szerepel... Éppen ezért megnézzük a formázás helyes módját is.
Példa:
<html>
<body>
<p style="font-family:arial; font-size:100%; color:blue">
Ez a szöveg 5-ös betűméretű, arial
betűtípusú és kék színű.
</p>
</p>
</body>
</html>
Ugyan az fogod látni mint előző esetben.
Elemzés:
Ez a formázási mód, gyakorlatilag a CSS... vagyis inkább úgy mondanám, hogy egy CSS kód összefésülése a HTML kóddal. Egyébként ez sem valami modern, de amíg nem ismerjük a CSS-t, addig megteszi.
Ez esetben a formázás az egész bekezdésre vonatkozik. A p tag style attribútumában megadjuk a következőket:
font-family - betűtípus
font-size - betűméret
color - szín
És ami a példában nem szerepel:
background-color - háttérszín (ha a body tag után írjuk, akkor az oldal háttérszínét adjuk meg)
text-align - a szöveg igazítását adhatjuk meg.
A mai napra legyen is elég ennyi. Legközelebb a képekkel és a táblázatokkal folytatjuk.
Nincsenek megjegyzések:
Megjegyzés küldése