A weboldalon belül lehetnek főcímek, fejezetcímek, alcímek stb. Ezt a HTML címsor1, címsor2… (header1, header2…) címkékkel oldja meg (h1, h2…). Pl:
<h1>Egy a legnagyobb címsor</h1>
<h2>Egy egy kisebb címsor</h2>
Feladatok:
<style>h1: {color: brown}; </style>
<h2 style="color:#8B008B;">...</h2>
A bekezdések, azon belül a szövegrészek, a címsorok, táblázatcellák stb. szövegjellemzőinek beállítására lehetőség van HTML címkékkel és CSS-sel. A CSS elsőbbséget élvez!
Betűkészletek (font): Azok a betűtípusok, amiket az oldal a megjelenő szövegben használ. A képernyős megjelenítésekhez talp nélküli, könnyen olvasható betűtípusokat választunk, és ne legyen kettőnél több betűtípus az oldalon (egyik a címeké, másik a sima szövegé).
CSS3 fontok: https://webfejlesztes.gtportal.eu/?f0=2_font
Részletesebben a fontokról (angol): https://www.w3schools.com/css/css_font.asp
Karakterformázás HTML elemekkel: https://webfejlesztes.gtportal.eu/?f0=1_szoveg_02
<b>Ez a szöveg félkövér (bold).</b> <i>Ez a szöveg dőlt betűs (italic).</i>
További HTML címkék: strong (fontos), em (emphasized, hangsúlyozott), mark (marked, megkülönböztetett), small (kicsi), del (deleted, törölt), ins (inserted, beszúrt), sub (subscript, alsóindex), sup (superscript, felső index).
Karakterformázás CSS-sel: https://webfejlesztes.gtportal.eu/?f0=2_szoveg
Angolul (és részletsen): https://www.w3schools.com/css/css_text.asp
Beállítható a szöveg (karakterek) színe, háttérszíne, betűtípusa, betű családja, vastagsága (font-weight), mérete (size; többféle mértékegységgel), távolsága a blokk szélétől (padding; https://www.w3schools.com/css/css_padding.asp), igazítása (pl. text-align: justify; a sorkizárt igazítás csal CSS-sel lehetséges; https://www.w3schools.com/css/css_text_align.asp), az aláhúzás (decoration), betűtávolság, sortávolság, árnyék-effektek.
A szöveg tagolása: https://webfejlesztes.gtportal.eu/?f0=1_szoveg_08
Ami fontos: bekezdés, üres sor (<br>), vízszintes vonal (<hr>), megjegyzés. A vonalak hosszának meghatározása többféleképpen is történhet:
<hr> |
100% szélességű vízszintes vonal. |
<hr width="50%"> |
A szélessége 50%. |
<hr width="200px"> |
200px szélességű vonal. |
<hr style="width: 350px; border: 1px solid red;"> |
CSS-sel meghatározott szélesség és vonaljellemzők. |
<p>Ez egy megtört soros <br>bekezdés</p> |
A bekezdésen belül sortörés van. |
A hivatkozások (linkek) biztosítják a böngészés lényegét (hypertext), a honlapok összekapcsolását.
A hivatkozásokat többféleképpen lehet használni:
A hivatkozott weboldal (vagy weboldalon belüli hely) megjelenhet ugyanabban az ablakban, de nyithat új böngészőablakot is.
Háromféle link szín állítható be CSS-sel:
HTML megvalósítása
<a href=”valami.hu/masik.html” target=”_blank”>Ugorj a másik oldalra, és új ablakban nyíljon meg!</a>
<a href=”#ugrascelja”>Ugorj ide a weboldalon belül</a> ... <p id=”ugrascelja”>Ide ugrottál a weboldalon belül.</p>
<a href=”valami.html#generator”>Másik oldal adott pontja</a>
Ilyenkor a valami.html oldalon kell lennie egy olyan elemnek, aminek az id jellemzője: id=”generator”.
E-mail link: <a href=”mailto:valaki@valami.com”>Küljd email-t!</a>
A hivatkozások (linkek) biztosítják a böngészés lényegét (hypertext), a honlapok összekapcsolását.
A hivatkozásokat többféleképpen lehet használni:
A hivatkozott weboldal (vagy weboldalon belüli hely) megjelenhet ugyanabban az ablakban, de nyithat új böngészőablakot is.
Háromféle link szín állítható be CSS-sel:
HTML megvalósítása
<a href=”valami.hu/masik.html” target=”_blank”>Ugorj a másik oldalra, és új ablakban nyíljon meg!</a>
<a href=”#ugrascelja”>Ugorj ide a weboldalon belül</a> ... <p id=”ugrascelja”>Ide ugrottál a weboldalon belül.</p>
<a href=”valami.html#generator”>Másik oldal adott pontja</a>
Ilyenkor a valami.html oldalon kell lennie egy olyan elemnek, aminek az id jellemzője: id=”generator”.
E-mail link: <a href=”mailto:valaki@valami.com”>Küljd email-t!</a>
A listák (list) lehetnek számozottak vagy felsorolásjellel megjelölt listák. A felsorolásjel lehet bármilyen karakter vagy kép, alapértelmezés szerint teli karika. A számozás is többféle lehet (pl. 1., 2.,… vagy a., b…. vagy I., II….). A listák egymásba is ágyazhatók.
A táblázatok (table) sorokból (row) és oszlopokból (column) állnak. Ezek össze is vonhatók. Beállítható
A táblázatok egymásba is ágyazhatók.
A honlapot fel lehet dobni fotógalériával és flash animációkkal is, azonban a nagy méretű képek és média fájlok betöltése komolyan lassítja a honlap betöltését. Flash animációkat ma már nem használunk, mert a böngészők nem támogatják. Vigyázzunk, mert a média tartalmak és a szövegek általában szerzői jogi védelem alatt állnak, és nem használhatók a tulajdonos/szerző engedélye nélkül.
A képek jellemzői közé tartozik a forrásuk, a feliratuk, a buboréksúgó (az a szöveg, ami megjelenik, ha az egeret a kép fölé húzzuk) és azt alt (alternatív, magyarázó) szöveg (a gyengén látók számára vannak olyan böngészők, amelyek felolvassák a weblap tartalmát; azok ezt az alt szöveget olvassák fel).
Általában jpg, png és gif típusú képeket használunk, de a weboldalba beágyazhatók svg ábrák is (vektorgrafikusan írja le a pontok, görbék, szövegek…. helyét). A képeket általában egy külön gyűjtőmappába gyűjtjük. Fontos, hogy a kép forrásának megjelölésénél pontosan adjuk meg, hogy a képet melyik mappában találja a böngésző. A HTML fájllal egy mappában levő képeknél elég csak a kép fájlnevét megadni.
A formázásnak CSS-sel sok lehetősége van, ilyenek pl. az átlátszóság és a sarkak lekerekítése.