HTML

készült: 2014. október 22.
frissítve: 2022.03.27.

Szeretnél játszva kódolni tanulni? Ez az oldal cicákkal és kiselefántokkal magyarázza el a programozást. Próbáld ki ezzel a linkkel, és mindketten kapunk tőlük 4000 Ft kedvezményt!
Jó hír a webszabányokat használoknak: Vége a MS böngészöknek, vége az EDGE projektnek, készül az Chromium alapú EDGE! Harangi László | 2018 december 7.



Elmélet (gyakorlattal)


Tankönyv

Elmélet és Gyakorlat EN-->HU
HTML5 & CSS3 összefoglaló (Tk)
ELTE: WEB ismeret (hu)
Webmesterke (hu)
Minden, ami WEB (en)

Jegyzetek

Weblap készítés lépései
HTML5 & CSS3 bevezető
CMS rendszerek
WEB programozási nyelvek
WEB kvcsilla

Segédanyag

Html kezdőknek
Kompozer gyorstalpaló
Kompozer gyorstalpaló II.


HTML források
HTML kódolás
WEBFEJLESZTÉS haladó
Tamás Feri: HTML alapok
Html + css


Weboldal készítése
Weboldal készítése (tutorial.hu)


HTML TESZT

cyber-iskola html tesztek


Web shop

Webshop teszt bolt



Gyakorlat


Leírás

Példa CSS3 használatára
MDN Web Docs (Mozilla Developer Network) (En)
HTML referencia (En)
CSS referencia (En)
HTML Living Standard (En)
Vári Csaba: HTML alapok (Tk)
Full stack, Frontend, Backend

Validálás, Tesztelés

Validator használata
HTML validálás
CSS validálás
JS validálás

Hasznos gyakorlati oldalak

Mérei Tamás

Online szerkesztők

JSBI
CODEPEN

Hasznos programok

Brackets prg
Brackets ötletek
Visual Studio Code prg

Feladatok

HTML és CSS feladatok
...



Programok

Brackets

BracketsRelease1-13 (Chrome!)
Brackets
Emmet telepítése Brackets-be
Emmet kód összefoglaló
Emmet kód összefoglaló (pdf)
...

NotePad++

NotePad++
Emmet telepítése Notepad++
...

Visual Studio

Google Chrome
Visual Studio Code
Visual Studio kiegészítő
Live Server Extension (Ritwick Dey)
VS hotkeys
...

GIT

GitHub Server regisztráció
Git Desktop prg a kliensre
Git keretprg
Git-hub hotkeys
GitHub server (kiszolgáló)
GitHub Guide
...

Egyéb

Kompozer (NVU) grafikus


online .ICO image converter 1.
online .ICO image converter 2.
online .ICO editor 1
online .ICO editor 2
...
Inkscape



Hasznos címek

faviocon leírás
faviocon készítése
faviocon készítése
Böngészők HTML és CSS támogatottsága
Validator
aaa
css
css táblázat nélkül
youtube
Web programozás
CSS3please

Segédprogramok, Képek

Grafikus megjelenítés
Ingyenes képek (Hu)
Ingyenes képek (En)
Ingyenes képek (Hu)
Ingyenes képek (En)
IKON kollekció (En)
Ingyenes képek (En)




Haladó szint

CSS

Bártházi András CSS készítése
Radharadhya CSS design
Html & CSS
Nagy Gusztáv Web programozás alapismeretek
CSS Gomb (button) generátor
HTML5 és CSS3 ötletek
Html 5
CSS 3
CSS3 referencia
CSS generátor


CMS rendszerek

Tartalomkezelő rendszerek
Mi a szösz a CMS rendszer?
CMS rendszerek összevetése

WordPress

WordPress kurzus
Bevezetés a Wordpress világába
Jelentkezés a mini kurzusra

WordPress (hu)
WordPress Magyarország(hu)
WordPress Wiki(hu)
WordPress Suli(hu)
WordPress oldal viszgálat
WordPress telepítése

Drupal

Drupal (hu)
Drupal Wiki (hu)

Joomla

Joomla (hu)
Joomla (hu)
Joomla Wiki (hu)


Fogalmak

SEO

Segítség a SEO-hoz

Reszponzív

Alapok (hu)

Akadálymentes

Segítség az akadálymentesítéshez (Szántai Károly)
Félre értett akadálymentesítés (Mérei Tamás)

WEB áruházról

(Jó) néhány gondolat a webáruházról

JQuery

JQuery

mobile first

mobile first

...


Grafikus elmek

Wiki Canvas
Wiki SVG
Wiki WebGL

Canvas

W3School
ELTE leírás
TFeri
...
...

SVG

...

WebGL

...


Dizájn


Betűtípus

Google Fonts (webre optimalizált betűcsaládok gyűjtőhelye)
Google Fonts betűtípus-ajánlata (WP kurzus
ajánlata, a 18 legjobb betű 1 helyen)
Open Sans betűcsoportajánlat a Google Fonts-ról
Vektoros betűk (Canvas)

Képek

Freepik – webgrafikák kiemelt gyűjtőhelye (ingyenes / fizetős)
Graphicriver / Photodune – webgrafikák és fotók kiemelt gyűjtőhelye az EnvatoMarketon belül (időszakos freebies / fizetős)
FlatIcon – tematikus ikongyűjtemények (ingyenes / fizetős)
Iconfinder – tematikus ikongyűjtemények (ingyenes / fizetős)
SVG Backgrounds – háttérként használható grafikák gyűjtőhelye (ingyenes, de hivatkozást kér)
Hero Patterns – háttérként használható végteleníthető mintázatok gyűjteménye (SVG formátum)
Ingyenes képforrások
Ingyenes képforrások
Ingyenes képforrások

Színek

Szín párok coolors
Szín kombinációk colourlovers
Szín kombinációk paletton
Színátmenetek
Adobe Color Themes – előre összeállított színsémák tárháza
Adobe Color Wheel – színsémák kialakítása színszabályok segítségével
50 weboldalnyi színséma-inspiráció a Canva ingyenes online képszerkesztő blogján
Flat UI Color picker – “flat dizájnhoz” ajánlott színek gyűjteménye

ColorPick Eyedropper bővítmény a Google Chrome Web Store-ban – színek HEX-kódjának kimutatásához


Arculattervezés




Html tematika

  1. Html általában
    2. Alapok 1.
    Alapok 2.
    Alapok referencia (en)
    Alapok 01. (Mérei Tamás hu)
    Hol is tartunk? 2019.május
    HTML tags
    HTML sorozat (EN->texthu)
    Kódbevitel 1.
    Kódbevitel 2.
  2. CSS
    3. Mire jó a CSS? (példa)
    Bevezetés referencia
    Alapok referencia
    Inline sytle referencia
    Alapok css 02./1(Mérei Tamás hu)
    Alapok css 02. /2 (Mérei Tamás hu)
    Válas Péter CSS
    CSS sorozat (EN->texthu)
    Kódbevitel 1.
    Kódbevitel 2.
    ...
  3. Szelektor
    4. Szelektorok (hu haladó is)
    Szelektorok referencia
    DOM
    ...
  4. Web mértékek
    5. CSS mértékegységek (Mérei Tamás Hu)
    Méretezés mértékegysége
    Mértékek (mozilla)
    ...
  5. Karakter
    6. Betűtípusok a weben (Mérei Tamás Hu)
    Címsorok (Hu gt)
    Színek (háttér, karakter, keret stb.) referencia (color En w3)
    Keret (karakter, box, tábla stb.) referencia (border EN w3)
    Karakter stílus (Hu gt)
    Karakter stílus (EN w3)
    Font (font Hu gt)
    Font (font EN w3)
    Fontok (font EN w3)
    Szöveg (text Hu gt)
    Szöveg (text EN w3)
    Google - külső fontok (font Hu gt)
    Google - ajánlott fontok

    Karakter kódolás (font EN w3)
    Symbolumok (font EN w3)
    Speciális karakterek (hu)
    HTML pre tagok(font EN w3)
    Szöveg pre tagok(Hu Elte)
    Quotations(En)
    Quotations(En)
    Quotations példa
    Google font (haladó)
    Google font készítő
    Font ikon használta
    Font ikon
    Pszeudo kódok
    ...
  6. Bekezdés
    7. Szövegtagolás (hu)
    Címsorok (hu)
    Bekezdés
    Címek
    ...
  7. Elválasztó vonal
    8. HR elválasztóvonal beállítás
    CSS3 referencia
  8. Háttér, disajn
    9. Háttér (hu)
    Háttér referencia
    Színezés
    Szinezés, színpárok
    ...
  9. Képek
    10. Képek (hu)
    Képek referencia
    Képek, színek
    Képek helye: html vagy css?
    Image map készítése (Mérei Tamás Hu)
    Handy Image mapper

    Image mapper

    W3School (En)
    Online image-map 1.
    Online image-map 2.
    Letölthető image-map 1.
    Letölthető image-map 2.
    MAP és JS esemény

    Extra

    Kép - szöveg kártya #1
    Kép - szöveg kártya #2
    ...
  10. Lista
    11. Lista 1 (hu)
    Lista 2 (hu)
    Lista referencia (w3 en)
    UL lista (w3 en)
    OL lista (w3 en)
    Definiciós lista
    ...
  11. Tábla
    12. Tábla 1.
    Tábla 2.
    Tábla 3.
    Tábla referencia
    ...
  12. Body - Doboz
    13. Doboz modell
    Doboz (hu)
    Oldalszerkezet elemek (hu)
    Margó, padding (hu)
    Negatív margó (hu)
    Box modell referencia (En)
    Margó referencia (En)
    Padding referencia (En)
    Igazítás (tábla) referencia (En)
    Vonal (hu)
    Doboz mérete (box-sizing)
    Doboz mérete (box-sizing) (Mérei Tamás Hu)
    3 oszlop
    ...
  13. Keret - border
    14. Keret (hu)
    Lekerekített doboz CSS-ben (Mérei Tamás Hu)
    ...
  14. Inline - Block
    15. Block - Inline elem referencia
    Inline-Block elem
    ...
  15. Dobozok pozicionálása
    16. Pozicionálás
    CSS pozicionálás (Mérei Tamás Hu)
    Doboz pozíció (hu)
    Doboz pozíció (hu)
    Dobozok egymáshoz való viszonya
    Tartalom pozícionálása (En)
    ...
    ...
  16. Reszponzív
    1. media
      2. Alapok (hu)
      Responsive webdesign alapok (Mérei Tamás Hu)
      Reszponzív oldal (Mérei Tamás Hu)
      Reszponzív slider / fader JavaScript nélkül
      ...
    2. Flexbox modell
      3. Flex-Box modell(froggy) (Hu)
      Flex-Box (Mérei Tamás Hu)
      Flex-Box modell
      Flexbox leírás (En)
      Reszponzív tábla (Mérei Tamás - flex)
      Flex-Box példák (En)
      CSS Grid Generator
      CSS Grid Generator
      ...
    3. Bootsrapt
      4. Bootstrap használata (hu)
      Bootstrap használata 5.x beta(hu) w3School Bootsrapt 4.x (En)
      Reszponziv_keret: GetBootsrapt 4.4 (En)
      Bootsrapt sorozat (EN->texthu)
      GetBootsrapt környezete 4.3 (En)
      Reszponziv Bootstrap grid 3x (Mérei Tamás Hu)
      Reszponziv Bootstrap grid 4x (Mérei Tamás Hu)
      Bootstrap 4 setup (Mérei Tamás Hu)
      Bootstrap 4.alfa 1. - 52. (En)
      Bootsrapt grid
      ...
      ...
    4. Extra
      5. Reszponzív menü
      Bootstrap űrlapok 4 setup (Mérei Tamás Hu)
      Scrollbar színezgetés CSS-sel (Mérei Tamás Hu)
      Float an Image Without Text Wrapping Using CSS Flex
      ::before & ::after pseudo selector-ok használata (Mérei Tamás Hu)
      ...
      CSS animáció GSAP-el (Mérei Tamás Hu)
      SVG animáció GSAP használatával (Mérei Tamás Hu)
      ...
      ...
  17. Menü készítése
    18. CSS háromszög (Mérei Tamás Hu)
    Menü 1.(Mérei Tamás Hu)
    Menü 2.(Mérei Tamás Hu)
    Menü kódja (Mérei Tamás Hu)
    HTML + CSS Menü almenükkel (Mérei Tamás Hu)
    Menü almenükkel (Mérei Tamás Hu)
    Reszponzív menü (Mérei Tamás Hu)
    Reszponzív menü (Mérei Tamás Hu)
    ...
  18. Effektusok CSS-sel
    19. 2D & 3D transforms (move, rotate, scale, and skew)
    CSS transition (Mérei Tamás Hu)
    CSS effektek (en)
    CSS transition matrix
    CSS transition 15 min
    CSS transition
    3D tranzformáció
    transforms CSS generator
    transforms CSS generator
    Csilli-villi CSS - sel
    HTML5 banner készítés (Mérei Tamás Hu)
    ...
  19. JQuery
    20. JQuery (2014)
    Magyar (2013)
    ...
  20. Head
    21. Fej (hu)
    head referencia
    meta referencia
    viewport meta (1994!)
    ...
  21. Űrlap
    22. Űrlap elemek referencia html (w3 en)
    Űrlap elemek referencia css (w3 en)
    HTML + CSS űrlap (Mérei Tamás Hu)
    Űrlap elemek (hu)
    Egyedi kinézetű checkbox és radio button készítése (Mérei Tamás Hu)
    SELECT legördülő (Mérei Tamás Hu)
    Form elemei
    ...
  22. Hivatkozások (link) - Gomb
    23. Link (hu)
    CSS :link Selector (unvisited link) (en)
    CSS :visited Selector (visited link) (en)
    CSS :hover Selector (mouse over link) (en)
    CSS :active Selector (selected link)(en)
    ...
  23. JavaScript
    24. JavaScript
    ...
  24. Multimédia
    25. Média (hu)
    Multimédia beágyazás
    Média referencia
    Videó referencia
    Audió referencia
    Pluginek referencia
    Youtube referencia
    CSS animáció GSAP-el
    ...
  25. Generátorok
    26. CSS generátorok
    CSS generátorok
    CSS generátorok
    Animált betöltési ikonok
    ...
  26. Összetett feladatok
    27. Memóriakártya (css, js)
    Memóriakártya (css, js)11 részben
    Memóriakártya variáció (css, js)
    ...
  27. Összefoglaló
    28. Összefoglaló leírások
    ...