☰ open

VSC + HTML + CSS

Struktura
Tag Význam tagu Ukázka
<DOCTYPE /> verze HTML W3Shools
<html> <head> <body> základní struktura dokumentu W3Shools
<link /> <style > navázání CSS stylů W3Shools
<meta /> informace pro prohlížeče W3Shools
<title> titulek v hlavičce W3Shools
Textové tagy
Tag Význam tagu Ukázka
<abbr> zkratka W3Shools
<b> <i> <s> <u> tučné, italika,přeškrtnuté, podtržené W3Shools
<cite> citace z díla W3Shools
<code> <kbd> <samp> <var> kód, klávesa, výstup, proměnná W3Shools
<del> <ins> odstraněný/přidaný text W3Shools
<dfn> definice termínu W3Shools
<H1> - <H6> nadpisy (od nejvýznamějšího) W3Shools
<p> odstavec W3Shools
<q> řádková citace W3Shools
<strong> <em > <mark> významové zvýraznění W3Shools
<sub> <sup> dolní/horní index W3Shools
<wbr> místo zalomení slova W3Shools
Layout
Tag Význam tagu
<article> hlavní obsah - článek
<aside> postranní panel
<details> rozbalovací informace
<figcaption> nadpis ilustrace
<figure> ilustrace
<footer> patička
<header> hlavička
<nav> navigační menu
<section> obal pro hlavní obsah - články
<summary > popisek sbaleného <details>
Tabulky
Tag Význam tagu
<caption> nadpis tabulky
<col> <colgroup> styl sloupců, skupina sloupců
<table> tabulka
<thead> <tbody> <tfoot> hlavička tabulky, tělo tabulky a patička tabulky
<th> hlavičková buňka
<tr> řádek
<td> buňka v řádku (sloupeček)
Seznamy
Tag Význam tagu
<datalist> data pro našeptávač
<dd> <dl> <dt> definice, definiční seznam, termín
<ol> <ul> <li> neuspořádaný seznam, uspořádaný seznam, položka seznamu
Multimedia
Tag Význam tagu
<area> oblast na mapě-obrázku
<audio> zvuková stopa
<canvas> plátno na kreslení
<embed /> vložení pluginu
<img> obrázek
<map> rozdělí obrázek na oblasti
<object /> vložení pluginu
<source /> zdroj videa / audia
<track /> stopa titulků pro audio / video
<video> video stopa
Formuláře
Tag Význam tagu
<button> tlačítko
<filedset > seskupuje formulářová pole
<form> formlář
<input /> vstupní pole
<keygen /> odeslání formuláře pomocí certifikátu
<label> popisek formlářových polí
<option> položka pole výběru
<output > výsledek operace
<select> pole výběru seznam nebo rozbalovací nabídka
<textarea > víceřádkové pole
Ostatní
Tag Význam tagu
<a> odkaz
<address> adresa
<bdi> <bdo> změna směru textu, směr txtu
<blockeuote > bloková citace
<br /> odřádkování
<hr / > vodorovná oddělovací čára
<command> příkaz menů nebo klávesové zkratky
<div> <span> skupina logicky souvisjících elementů(blok/řádek)
<iframe> rámec s jinou stránkou
<!-- --> komentář programátora
<menu> aplikační menu
<meter> ukazatel části z celku
<progress> ukazatel postupu v činnosti
<script> vložení skriptu
<timet> datum a čas
W3Schools Templates

HTML kousky


width:calc()

Menu

Barvy u zátržítek a boxů

Accordion

Hodiny

Single page

Pricing card

Fluid Layout with Flex

css.nothrem.cz/ css.benni.cz dev.to Github.com css tricks.com

Color

W3C CSS Color Specification
Struktura
Tag Význam tagu Ukázka
<DOCTYPE /> verze HTML W3Shools
<html> <head> <body> základní struktura dokumentu W3Shools
<link /> <style > navázání CSS stylů W3Shools
<meta /> informace pro prohlížeče W3Shools
<title> titulek v hlavičce W3Shools
Textové tagy
Tag Význam tagu Ukázka
<abbr> zkratka W3Shools
<b> <i> <s> <u> tučné, italika,přeškrtnuté, podtržené W3Shools
<cite> citace z díla W3Shools
<code> <kbd> <samp> <var> kód, klávesa, výstup, proměnná W3Shools
<del> <ins> odstraněný/přidaný text W3Shools
<dfn> definice termínu W3Shools
<H1> - <H6> nadpisy (od nejvýznamějšího) W3Shools
<p> odstavec W3Shools
<q> řádková citace W3Shools
<strong> <em > <mark> významové zvýraznění W3Shools
<sub> <sup> dolní/horní index W3Shools
<wbr> místo zalomení slova W3Shools
Layout
Tag Význam tagu
<article> hlavní obsah - článek
<aside> postranní panel
<details> rozbalovací informace
<figcaption> nadpis ilustrace
<figure> ilustrace
<footer> patička
<header> hlavička
<nav> navigační menu
<section> obal pro hlavní obsah - články
<summary > popisek sbaleného <details>
Tabulky
Tag Význam tagu
<caption> nadpis tabulky
<col> <colgroup> styl sloupců, skupina sloupců
<table> tabulka
<thead> <tbody> <tfoot> hlavička tabulky, tělo tabulky a patička tabulky
<th> hlavičková buňka
<tr> řádek
<td> buňka v řádku (sloupeček)
Seznamy
Tag Význam tagu
<datalist> data pro našeptávač
<dd> <dl> <dt> definice, definiční seznam, termín
<ol> <ul> <li> neuspořádaný seznam, uspořádaný seznam, položka seznamu
Multimedia
Tag Význam tagu
<area> oblast na mapě-obrázku
<audio> zvuková stopa
<canvas> plátno na kreslení
<embed /> vložení pluginu
<img> obrázek
<map> rozdělí obrázek na oblasti
<object /> vložení pluginu
<source /> zdroj videa / audia
<track /> stopa titulků pro audio / video
<video> video stopa
Formuláře
Tag Význam tagu
<button> tlačítko
<filedset > seskupuje formulářová pole
<form> formlář
<input /> vstupní pole
<keygen /> odeslání formuláře pomocí certifikátu
<label> popisek formlářových polí
<option> položka pole výběru
<output > výsledek operace
<select> pole výběru seznam nebo rozbalovací nabídka
<textarea > víceřádkové pole
Ostatní
Tag Význam tagu
<a> odkaz
<address> adresa
<bdi> <bdo> změna směru textu, směr txtu
<blockeuote > bloková citace
<br /> odřádkování
<hr / > vodorovná oddělovací čára
<command> příkaz menů nebo klávesové zkratky
<div> <span> skupina logicky souvisjících elementů(blok/řádek)
<iframe> rámec s jinou stránkou
<!-- --> komentář programátora
<menu> aplikační menu
<meter> ukazatel části z celku
<progress> ukazatel postupu v činnosti
<script> vložení skriptu
<timet> datum a čas
W3Schools Templates