Cheat Sheet Essentials HTML: Tagy, atributy a další

Tvorba webových stránek začíná HTML. Zkrášlit je a učinit je interaktivními přijde později. Ale abyste mohli začít vytvářet funkční statické webové stránky, potřebujete rozumět HTML. (Chcete rychlý úvod do tohoto značkovacího jazyka? Přečtěte si naše HTML FAQ.)

V rámci učení se jazyka existuje dlouhý seznam prvků, které musíte přidat do svého slovníku HTML. A tento úkol se může na první pohled zdát skličující, proto jsme přišli s následujícím cheatem. Poskytuje vám snadný způsob, jak objevit/porozumět/vyvolat prvky HTML, kdykoli je potřebujete.

Cheat sheet pokrývá značky a atributy pro strukturování webových stránek, formátování textu, přidávání formulářů, obrázků, seznamů, odkazů a tabulek. Zahrnuje také značky, které byly zavedeny v HTML5 a HTML kódech pro běžně používané speciální znaky.

STAŽENÍ ZDARMA: Tento cheat sheet je dostupný jako a PDF ke stažení od našeho distribučního partnera, TradePub. Abyste se k němu dostali poprvé, budete muset vyplnit krátký formulář. Stažení Cheat Essentials HTML.

Cheat Essentials HTML

... ... ... ... ...

...

Zkratka	Akce
Základní značky
...	První a poslední značka dokumentu HTML. Všechny ostatní tagy leží mezi těmito otevíracími a zavíracími tagy.
...	Určuje kolekci metadat pro dokument.
	Popisuje název stránky a zobrazuje se v záhlaví prohlížeče.
...	Zahrnuje veškerý obsah, který se zobrazí na webové stránce.
Informace o dokumentu
Zmiňuje základní URL a všechny relativní odkazy na dokument.
Další informace o stránce, jako je autor, datum zveřejnění atd.
Odkazy na externí prvky, jako jsou šablony stylů.
	Obsahuje informace o stylu dokumentu, jako je CSS (Cascading Style Sheets).
	Obsahuje odkazy na externí skripty.
Formátování textu
... NEBO ...	Zvýrazňuje text tučným písmem.
...	Kurzívou a tučným písmem.
...	Text je psán kurzívou, ale není tučný.
...	Přeškrtnutý text.
...	Cituje autora citátu.
...	Označí odstraněnou část textu.
...	Zobrazuje sekci, která byla vložena do obsahu.
...	Pro zobrazování nabídek. Často se používá s štítek.
...	Pro kratší citáty.
...	Pro zkratky a plné tvary.
...	Specifikuje kontaktní údaje.
...	Pro definice.
...	Pro úryvky kódu.
...	Pro psaní indexů
...	Pro psaní horních indexů.
...	Pro zmenšení velikosti textu a označení nadbytečných informací v HTML5.
Struktura dokumentu
...	Různé úrovně nadpisů. H1 je největší a H6 je nejmenší.
...	Pro rozdělení obsahu do bloků.
...	Zahrnuje vložené prvky, jako je obrázek, ikona, emotikon, aniž by došlo ke zničení formátování stránky.
...	Obsahuje prostý text.
	Vytvoří nový řádek.
	Nakreslí vodorovnou čáru pro zobrazení konce sekce.
Seznamy
...	Pro objednaný seznam položek.
...	Pro neobjednaný seznam položek.
...	Pro jednotlivé položky v seznamu.
...	Seznam položek s definicemi.
...	Definice jednoho termínu v souladu s obsahem těla.
...	Popis pro definovaný termín.
Odkazy
...	Kotevní značka pro hypertextové odkazy.
...	Značka pro propojení s e-mailovými adresami.
...	Anchor tag pro výpis kontaktních čísel.
...	Anchor tag pro odkaz na jinou část stejné stránky.
...	Přejde do části div webové stránky. (Varianta výše uvedeného tagu)
snímky
	Pro zobrazení obrazových souborů.
Atributy pro štítek
src=”url”	Odkaz na zdrojovou cestu obrázku.
alt="text"	Text zobrazený při najetí myší na obrázek.
výška=””	Výška obrázku v pixelech nebo procentech.
šířka=””	Šířka obrázku v pixelech nebo procentech.
zarovnat=””	Relativní zarovnání obrázku na stránce.
border=””	Tloušťka okraje obrázku.
	Odkaz na mapu, na kterou lze kliknout.
	Název obrázku mapy.
Oblast obrázku na obrázkové mapě.
Atributy pro štítek
tvar = ""	Tvar oblasti obrázku.
coords=””	Souřadnice oblasti obrázku na mapě.
formuláře
...	Nadřazená značka pro formulář HTML.
Atributy pro štítek
action=”url”	Adresa URL, na kterou jsou odesílána data formuláře.
metoda=””	Určuje protokol odeslání formuláře (POST nebo GET).
enctype=””	Schéma kódování dat pro odeslání POST.
automatické doplňování	Určuje, zda je automatické doplňování formuláře zapnuto nebo vypnuto.
novalidovat	Určuje, zda má být formulář před odesláním ověřen.
přijmout-znakové sady	Určuje kódování znaků pro odesílání formulářů.
cílová	Ukazuje, kde se zobrazí odpověď na odeslání formuláře.
...	Seskupí související prvky ve formuláři/
...	Určuje, co by měl uživatel zadat do každého pole formuláře.
...	Popisek prvku sady polí.
Určuje, jaký typ vstupu má uživatel převzít.
Atributy pro štítek
typ=””	Určuje typ vstupu (text, data, heslo).
jméno=””	Určuje název vstupního pole.
hodnota=””	Určuje hodnotu ve vstupním poli.
velikost = ""	Nastavuje počet znaků pro vstupní pole.
maxlength=””	Nastavuje limit povolených vstupních znaků.
Požadované	Učiní vstupní pole povinným.
šířka = ""	Nastaví šířku vstupního pole v pixelech.
výška = ""	Nastaví výšku vstupního pole v pixelech.
zástupný symbol =””	Popisuje očekávanou hodnotu pole.
vzor=””	Určuje regulární výraz, který lze použít k hledání vzorů v textu uživatele.
min=””	Minimální povolená hodnota pro vstupní prvek.
max=””	Maximální povolená hodnota pro vstupní prvek.
zakázáno	Deaktivuje vstupní prvek.
...	Pro zachycení delších řetězců dat od uživatele.
...	Určuje seznam možností, ze kterých si může uživatel vybrat.
Atributy pro štítek
jméno=””	Určuje název rozevíracího seznamu.
velikost = ""	Počet možností poskytnutých uživateli.
násobek	Nastavuje, zda si uživatel může vybrat více možností ze seznamu.
Požadované	Určuje, zda je pro odeslání formuláře nutný výběr možnosti/možností.
autofokus	Určuje, že po načtení stránky se automaticky aktivuje rozevírací seznam.
...	Definuje položky v rozevíracím seznamu.
hodnota=””	Zobrazí text pro jakoukoli danou možnost.
vybraný	Nastaví výchozí možnost, která se zobrazí.
...	Tag pro vytvoření tlačítka pro odeslání formuláře.
Objekty a iFrame
	Popisuje vložený typ souboru.
Atributy pro
výška = ""	Výška objektu.
šířka = ""	Šířka objektu.
typ=””	Typ média, které objekt obsahuje.
	Inline rámec pro vkládání externích informací.
jméno=””	Název prvku iFrame.
src=””	Zdrojová adresa URL obsahu uvnitř rámce.
srcdoc=””	Obsah HTML v rámci.
výška = ""	Výška prvku iFrame.
šířka=””	Šířka prvku iFrame.
Přidává další parametry pro přizpůsobení iFrame.
...	Vloží externí aplikaci nebo plugin.
Atributy pro
výška = ""	Nastaví výšku vložení.
šířka = ""	Nastaví šířku vložení.
typ=””	Typ nebo formát vložení.
src=””	Zdrojová cesta vloženého souboru.
Tabulky
...	Definuje veškerý obsah tabulky.
Popis tabulky.
Záhlaví pro každý sloupec v tabulce.
Definuje data těla pro tabulku.
Popisuje obsah zápatí tabulky.
Obsah pro jeden řádek.
	...	Data v jedné položce záhlaví.
	...	Obsah v rámci jedné buňky tabulky.
Seskupí sloupce pro formátování.
Jediný sloupec informací.
Nové značky HTML5
...	Určuje záhlaví webové stránky.
	Určuje zápatí webové stránky.
...	Označuje hlavní obsah webové stránky.
...	Určuje článek.
	Určuje obsah postranního panelu stránky.
...	Určuje konkrétní sekci na webové stránce.
...	Pro popis doplňujících informací.
...	Používá se jako nadpis pro výše uvedenou značku. Je vždy viditelné pro uživatele.
...	Vytvoří dialogové okno.
...	Používá se pro vkládání grafů a obrázků.
	Popisuje a živel.
...	Zvýrazňuje určitou část textu.
	Sada navigačních odkazů na webové stránce.
...	Konkrétní položka ze seznamu nebo nabídky.
...	Měří data v daném rozsahu.
...	Umístí ukazatel průběhu a sleduje pokrok.
...	Zobrazuje text, který nepodporuje anotace Ruby.
...	Zobrazuje detaily typografického znaku východní Asie.
...	Rubínová anotace pro východoasijskou typografii.
...	Identifikuje čas a datum.
Zalomení řádku v obsahu.
¹Znakové objekty HTML5
"NEBO &quot ;	Uvozovky
< NEBO &lt ;	Znaménko menší než (
> NEBO &gt ;	Znak větší než (>)
NEBO &nbsp ;	Nepřerušitelný prostor
© OR &kopírovat ;	Symbol autorských práv
™ NEBO &ucirc ;	Symbol ochranné známky
@ NEBO &Uuml ;	symbol „zavináč“ (@)
& NEBO &	Symbol ampersandu (&)
• NEBO &ouml ;	Malá kulka
¹Při psaní znaku HTML ignorujte mezeru před středníkem.

Vytvořte si web pro praktické zkušenosti

Jakmile pochopíte základy HTML kódu a mít pracovní znalost CSS a JavaScript, vyzkoušet si tvorbu webu Jak vytvořit web: Pro začátečníkyDnes vás provedu procesem tvorby kompletní webové stránky od začátku. Nedělejte si starosti, pokud to zní složitě. Provedu vás tím na každém kroku. Přečtěte si více . Nezapomeňte také uložit naše cheat sheet vlastností CSS3 Cheat List základních vlastností CSS3Zvládněte základní syntaxi CSS pomocí našeho cheat sheetu vlastností CSS3. Přečtěte si více a cheat sheet JavaScript The Ultimate JavaScript Cheat SheetZískejte rychlé osvěžení prvků JavaScriptu s tímto cheatem. Přečtěte si více pro budoucí použití!