Gyakorló feladatok a HTML5 és CSS3 témakörhöz

Abonyi-Tóth Andor, ELTE Informatikai Kar

1

Feladatok megoldása

A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!

2

A HTML5 legfontosabb szöveg szintű elemei témakör

3

Feladat

A feladatban szereplő link: http://hu.wikipedia.org/wiki/Boris_Becker

A feladat szövege: http://sharetext.org/23mZ

4

Feladat

A feladat szövege: http://sharetext.org/TeGQ

5

Kitekintés a stíluslapok használatába, tipikus szövegformázások

6

Bekezdés igazítás

A feladat szövege: http://sharetext.org/VjU5 7

balra

középre

jobbra

sorkizárt

Bekezdés betűcsalád

A feladat szövege: http://sharetext.org/VjU5 8

serif

sans-serif

cursive

fantasy

Egyedi font

A http://www.google.com/fonts oldalon keress Neked tetsző betűcsaládot, amely támogatja a magyar ékezeteket is. Írd ki ezzel a verset!

A feladat szövege: http://sharetext.org/gjs8 9

Betűméret állítás

A feladat szövege: http://sharetext.org/VjU5 10

100%

12px

150%

12pt

Betű formázás

A feladat szövege: http://sharetext.org/VjU5 11

dőlt

vastag

kiskapitális

Ritkított betűköz

Szöveg formázás

A feladat szövege: http://sharetext.org/VjU5 12

Szavak közti távolság

Sortávolság

Csupa nagybetű

Szöveg árnyékok

13

Bekezdés behúzás

A feladat szövege: http://sharetext.org/VjU5 14

Alá, fölé, áthúzás

A feladat szövege: http://sharetext.org/NzKd 15

Csoportosító elemek

16

<p>, <div> és <hr> elemek

A feladat szövege: http://sharetext.org/VjU5 17

<pre> elem használata

18

A vers elérhető itt: http://www.poet.hu/vers/56198

Listák használata

19

A szöveg elérhető itt: http://sharetext.org/1zmY http://sharetext.org/Wou6

Ábrák (figure, figcaption)

20

A szöveg elérhető itt: http://sharetext.org/jPCV

Ábrák (figure, figcaption)

21

A szöveg elérhető itt: http://sharetext.org/QY1i

Vége

22