2011. október 20., csütörtök

Stílusok? Na ne...

Mindenek előtt szereznék elnézést kérni, de elfelejtettem leírni nektek, hogy a W3schools-nak van saját HTML szerkesztője. Amit itt elérhettek.

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>    
        </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:

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