HTML és CSS alapok

Tartalomjegyzék

  1. a HTML szintaktikája és strukturális elemei
  2. a CSS szintaktikája
  3. blokkszintű elemek és formázásuk
  4. karakterszintű (inline) elemek és formázásuk
  5. multimédia elemek
  6.  
  7. felhasznált források

a HTML szintaktikája és strukturális elemei

[a HTML elemek szerkezete]

[nyitó- és zárótagok]

példa: alap.html (forráskód megnézése: CTRL U)

az oldal kódjának ellenőrzése: The W3C Markup Validation Service

[üres elemek (zárótag nélkül; pl. <hr> vagy <hr />)]

példa: kep.html (forráskód megnézése: CTRL U)

[globális attribútumok]

[a HTML strukturális elemei]

[a dokumentum általános szerkezete]

[a dokumentum fejrésze]

példa: sorozat.html (forráskód megnézése: CTRL U)

[a dokumentum tözsrésze]


a CSS szintaktikája

[a CSS formátumleírások helye és hatóköre]

[globális CSS formátumleírások szerkezete]

[egy elem formátumának megadása (pl. p {text-align: center;} )] [a formázandó elemek megadásának néhány további lehetősége]

példa: css_alap.html (forráskód megnézése: CTRL U)


blokkszintű elemek és formázásuk

[fejsorok, bekezdések]

[tipikus CSS formázások]

példa: szekciok.html (forráskód megnézése: CTRL U)

[listák]

[sorszámozatlan lista]

[sorszámozott lista]

[tipikus CSS formázások]

[táblázatok]

[tipikus CSS formázások]

példa: tablazat.html (forráskód megnézése: CTRL U)


karakterszintű (inline) elemek és formázásuk

[szövegek formázása]

[tipikus CSS formázások]

[hipertext hivatkozások (linkek)]

[képek]

<img src="kepek/Smiley.svg"
     width="300" height="300"
     alt="Smiley from Wikipedia"
     longdesc="https://commons.wikimedia.org/wiki/File:Smiley.png"
     title="Készítette: Originally created by en:User:Robbrown, modified by en:User:Zetawoof; - Taken from en:Image:Smiley.png, GPL, https://commons.wikimedia.org/w/index.php?curid=62252 (2018-11-24)">
Smiley from Wikipedia

multimédia elemek

[videó klipek]

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <!--source src="movie.mp4" type="video/mp4"-->
  <!--source src="movie.webm" type="video/webm"-->
  <track src="movie_hu.vtt" kind="subtitles" srclang="hu" label="Hungarian">
  <track src="movie_en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

(a videó forrása: https://www.w3schools.com/html/movie.ogg, 2018-11-23)

[audió klipek]

[grafika készítése]

[fontosabb JavaScript függvények]

példák: abra.html, abrak.html (forráskód megnézése: CTRL U)


Források

Meloni, Julie C. ‐ Morrison, Michael 2011. Tanuljuk meg a HTML és CSS használatát 24 óra alatt. [SAMS Teach Yourself HTML and CSS in 24 Hours.] Budapest: Kiskapu.
https://people.inf.elte.hu/zirtaai/html_ebooks/html_css_24ora_alatt.pdf (2018-11-23)
(ismertető: moly.hu, 2018-11-23)

Suehring, Steven; Valade, Janet 2014. PHP, MySQL, JavaScript és HTML5. Budapest: Panem Könyvk. (Tantusz könyvek)

W3Schools Online Web Tutorials.
https://www.w3schools.com/ (2018-11-23)

HTML5 Canvas.
https://www.w3schools.com/html/html5_canvas.asp (2019-03-01)

HTML Element Reference.
https://www.w3schools.com/tags/default.asp (2018-11-23)

HTML Canvas Reference.
https://www.w3schools.com/tags/ref_canvas.asp (2019-03-01)

CSS Reference.
https://www.w3schools.com/cssref/default.asp (2018-11-23)

CSS Default Browser Values for HTML Elements.
https://www.w3schools.com/cssref/css_default_values.asp (2019-03-01)

HTML Color Names.
https://www.w3schools.com/tags/ref_colornames.asp (2018-11-23)

Web Akadálymentesítési Útmutató.
http://www.w3c.hu/forditasok/WCAG20/ (2018-04-25)

WHATWG Wiki.
https://wiki.whatwg.org/wiki/Main_Page (2019-03-01)

Presentational elements and attributes.
https://wiki.whatwg.org/wiki/Presentational_elements_and_attributes (2019-03-01)

Young Rewired State 2018. Kódolj! Budapest: Scolar K.


Boda István, 2019.