gyakorló feladatok a html5 és css3 témakörhöz
DESCRIPTION
Gyakorló feladatok a HTML5 és CSS3 témakörhöz. Abonyi-Tóth Andor, ELTE Informatikai Kar. Feladatok megoldása. A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!. A HTML5 legfontosabb szöveg szintű elemei témakör. Feladat. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/1.jpg)
Gyakorló feladatok a HTML5 és CSS3 témakörhöz
Abonyi-Tóth Andor, ELTE Informatikai Kar
1
![Page 2: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/2.jpg)
Feladatok megoldása
A feladatok megoldása során mindig a szemantikailag megfelelő tagek és paraméterek használatára törekedj!
2
![Page 3: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/3.jpg)
A HTML5 legfontosabb szöveg szintű elemei témakör
3
![Page 4: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/4.jpg)
Feladat
A feladatban szereplő link: http://hu.wikipedia.org/wiki/Boris_Becker
A feladat szövege: http://sharetext.org/23mZ
4
![Page 5: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/5.jpg)
Feladat
A feladat szövege: http://sharetext.org/TeGQ
5
![Page 6: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/6.jpg)
Kitekintés a stíluslapok használatába, tipikus szövegformázások
6
![Page 7: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/7.jpg)
Bekezdés igazítás
A feladat szövege: http://sharetext.org/VjU5 7
balra
középre
jobbra
sorkizárt
![Page 8: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/8.jpg)
Bekezdés betűcsalád
A feladat szövege: http://sharetext.org/VjU5 8
serif
sans-serif
cursive
fantasy
![Page 9: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/9.jpg)
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
![Page 10: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/10.jpg)
Betűméret állítás
A feladat szövege: http://sharetext.org/VjU5 10
100%
12px
150%
12pt
![Page 11: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/11.jpg)
Betű formázás
A feladat szövege: http://sharetext.org/VjU5 11
dőlt
vastag
kiskapitális
Ritkított betűköz
![Page 12: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/12.jpg)
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ű
![Page 13: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/13.jpg)
Szöveg árnyékok
13
![Page 14: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/14.jpg)
Bekezdés behúzás
A feladat szövege: http://sharetext.org/VjU5 14
![Page 15: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/15.jpg)
Alá, fölé, áthúzás
A feladat szövege: http://sharetext.org/NzKd 15
![Page 16: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/16.jpg)
Csoportosító elemek
16
![Page 17: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/17.jpg)
<p>, <div> és <hr> elemek
A feladat szövege: http://sharetext.org/VjU5 17
![Page 18: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/18.jpg)
<pre> elem használata
18
A vers elérhető itt: http://www.poet.hu/vers/56198
![Page 19: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/19.jpg)
Listák használata
19
A szöveg elérhető itt: http://sharetext.org/1zmY http://sharetext.org/Wou6
![Page 20: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/20.jpg)
Ábrák (figure, figcaption)
20
A szöveg elérhető itt: http://sharetext.org/jPCV
![Page 21: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/21.jpg)
Ábrák (figure, figcaption)
21
A szöveg elérhető itt: http://sharetext.org/QY1i
![Page 22: Gyakorló feladatok a HTML5 és CSS3 témakörhöz](https://reader030.vdocuments.net/reader030/viewer/2022033016/5681642d550346895dd5f354/html5/thumbnails/22.jpg)
Vége
22