Základy HTML Cheat Sheet: Tagy, atribúty a ďalšie

Vytváranie webových stránok začína HTML. Skrášliť ich a urobiť z nich interaktívne príde neskôr. Aby ste však mohli začať vytvárať funkčné statické webové stránky, potrebujete porozumieť HTML. (Chcete rýchly úvod do tohto značkovacieho jazyka? Prečítajte si naše HTML FAQ.)

Ako súčasť učenia sa jazyka existuje dlhý zoznam prvkov, ktoré musíte pridať do svojho slovníka HTML. A táto úloha sa môže na prvý pohľad zdať skľučujúca, preto sme prišli s nasledujúcim cheat sheet. Poskytuje vám jednoduchý spôsob, ako objaviť/pochopiť/vyvolať prvky HTML kedykoľvek ich potrebujete.

Cheat sheet pokrýva značky a atribúty pre štruktúrovanie webových stránok, formátovanie textu, pridávanie formulárov, obrázkov, zoznamov, odkazov a tabuliek. Zahŕňa aj značky, ktoré boli zavedené v HTML5 a HTML kódoch pre bežne používané špeciálne znaky.

BEZPLATNÉ STIAHNUTIE: Tento cheat sheet je dostupný ako a PDF na stiahnutie od nášho distribučného partnera, TradePub. Na prvý prístup budete musieť vyplniť krátky formulár. Stiahnuť ▼ HTML Essentials Cheat Sheet.

HTML Essentials Cheat Sheet

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

...

Skratka	Akcia
Základné značky
...	Prvá a posledná značka dokumentu HTML. Všetky ostatné štítky ležia medzi týmito otváracími a zatváracími štítkami.
...	Určuje kolekciu metadát pre dokument.
	Popisuje názov stránky a zobrazuje sa v záhlaví prehliadača.
...	Zahŕňa všetok obsah, ktorý sa zobrazí na webovej stránke.
Informácie o dokumente
Uvádza základnú adresu URL a všetky relatívne odkazy na dokument.
Ďalšie informácie o stránke, ako je autor, dátum zverejnenia atď.
Odkazy na externé prvky, ako sú šablóny so štýlmi.
	Obsahuje informácie o štýle dokumentu, ako je CSS (Cascading Style Sheets).
	Obsahuje odkazy na externé skripty.
Formátovanie textu
... ALEBO ...	Zvýrazňuje text tučným písmom.
...	Text sa zobrazuje kurzívou a je tučný.
...	Text sa zobrazuje kurzívou, ale nie tučným písmom.
...	Prečiarknutý text.
...	Cituje autora citátu.
...	Označí vymazanú časť textu.
...	Zobrazuje sekciu, ktorá bola vložená do obsahu.
...	Na zobrazovanie citátov. Často sa používa s tag.
...	Pre kratšie úvodzovky.
...	Pre skratky a plné tvary.
...	Uvádza kontaktné údaje.
...	Pre definície.
...	Pre útržky kódu.
...	Na písanie indexov
...	Na písanie horných indexov.
...	Na zmenšenie veľkosti textu a označenie nadbytočných informácií v HTML5.
Štruktúra dokumentu
...	Rôzne úrovne nadpisov. H1 je najväčší a H6 je najmenší.
...	Na rozdelenie obsahu do blokov.
...	Zahŕňa vložené prvky, ako je obrázok, ikona, emotikon, bez narušenia formátovania stránky.
...	Obsahuje obyčajný text.
	Vytvorí nový riadok.
	Nakreslí vodorovnú čiaru na zobrazenie konca sekcie.
zoznamy
...	Pre objednaný zoznam položiek.
...	Pre neobjednaný zoznam položiek.
...	Pre jednotlivé položky v zozname.
...	Zoznam položiek s definíciami.
...	Definícia jedného pojmu v súlade s obsahom tela.
...	Popis pre definovaný pojem.
Odkazy
...	Značka kotvy pre hypertextové odkazy.
...	Značka na prepojenie s e-mailovými adresami.
...	Anchor tag pre zoznam kontaktných čísel.
...	Anchor tag na prepojenie na inú časť tej istej stránky.
...	Prejde do časti div webovej stránky. (Varianta vyššie uvedenej značky)
snímky
	Na zobrazenie obrazových súborov.
Atribúty pre tag
src=”url”	Odkaz na zdrojovú cestu obrázka.
alt="text"	Text, ktorý sa zobrazí po umiestnení kurzora myši nad obrázok.
výška=””	Výška obrázka v pixeloch alebo percentách.
šírka = " "	Šírka obrázka v pixeloch alebo percentách.
zarovnať=””	Relatívne zarovnanie obrázka na stránke.
border=””	Hrúbka okraja obrázka.
	Odkaz na mapu, na ktorú sa dá kliknúť.
	Názov obrázku mapy.
Oblasť obrázka na obrázkovej mape.
Atribúty pre tag
tvar = ""	Tvar oblasti obrázka.
súradnice=””	Súradnice oblasti obrázka mapy.
Formuláre
...	Nadradená značka pre formulár HTML.
Atribúty pre tag
action=”url”	Adresa URL, na ktorú sa odosielajú údaje formulára.
metóda = " "	Určuje protokol odoslania formulára (POST alebo GET).
enctype=” ”	Schéma kódovania údajov pre odoslania POST.
automatické dopĺňanie	Určuje, či je automatické dopĺňanie formulára zapnuté alebo vypnuté.
novalidovať	Určuje, či sa má formulár pred odoslaním overiť.
akceptovať-charsets	Určuje kódovanie znakov pre odosielanie formulárov.
cieľ	Ukazuje, kde sa zobrazí odpoveď na odoslanie formulára.
...	Prvky súvisiace so skupinami vo forme/
...	Určuje, čo má používateľ zadať do každého poľa formulára.
...	Popis prvku Fieldset.
Určuje, aký typ vstupu má používateľ prevziať.
Atribúty pre tag
typ=””	Určuje typ vstupu (text, dátumy, heslo).
meno=””	Určuje názov vstupného poľa.
hodnota=””	Určuje hodnotu vo vstupnom poli.
veľkosť = ""	Nastavuje počet znakov pre vstupné pole.
maximálna dĺžka = ""	Nastavuje limit povolených vstupných znakov.
požadovaný	Urobí vstupné pole povinným.
šírka = ""	Nastavuje šírku vstupného poľa v pixeloch.
výška = ""	Nastavuje výšku vstupného poľa v pixeloch.
zástupný symbol =””	Popisuje očakávanú hodnotu poľa.
vzor=””	Určuje regulárny výraz, ktorý možno použiť na hľadanie vzorov v texte používateľa.
min=””	Minimálna hodnota povolená pre vstupný prvok.
max=””	Maximálna hodnota povolená pre vstupný prvok.
zdravotne postihnutých	Zakáže vstupný prvok.
...	Na zachytenie dlhších reťazcov údajov od používateľa.
...	Určuje zoznam možností, z ktorých si môže používateľ vybrať.
Atribúty pre tag
meno=””	Určuje názov rozbaľovacieho zoznamu.
veľkosť = ""	Počet možností poskytnutých používateľovi.
viacnásobný	Nastavuje, či si používateľ môže vybrať viacero možností zo zoznamu.
požadovaný	Určuje, či je na odoslanie formulára potrebný výber možnosti/možností.
automatické zaostrovanie	Určuje, že rozbaľovací zoznam sa automaticky aktivuje po načítaní stránky.
...	Definuje položky v rozbaľovacom zozname.
hodnota=””	Zobrazí text pre danú možnosť.
vybraný	Nastaví predvolenú možnosť, ktorá sa zobrazí.
...	Značka na vytvorenie tlačidla na odoslanie formulára.
Objekty a iFrame
	Popisuje vložený typ súboru.
Atribúty pre
výška = ""	Výška objektu.
šírka = ""	Šírka objektu.
typ=””	Typ média, ktoré objekt obsahuje.
	Vložený rámec na vkladanie externých informácií.
meno=””	Názov prvku iFrame.
src=””	Zdrojová adresa URL obsahu v rámci.
srcdoc=””	Obsah HTML v rámci.
výška = ""	Výška prvku iFrame.
šírka = " "	Šírka prvku iFrame.
Pridáva ďalšie parametre na prispôsobenie prvku iFrame.
...	Vkladá externú aplikáciu alebo doplnok.
Atribúty pre
výška = ""	Nastavuje výšku vloženia.
šírka = ""	Nastavuje šírku vloženia.
typ=””	Typ alebo formát vloženia.
src=””	Zdrojová cesta vloženého súboru.
Tabuľky
...	Definuje všetok obsah tabuľky.
Popis tabuľky.
Hlavičky pre každý stĺpec v tabuľke.
Definuje údaje tela pre tabuľku.
Popisuje obsah päty tabuľky.
Obsah pre jeden riadok.
	...	Údaje v jednej položke hlavičky.
	...	Obsah v rámci jednej bunky tabuľky.
Zoskupuje stĺpce na formátovanie.
Jeden stĺpec informácií.
Nové značky HTML5
...	Určuje hlavičku webovej stránky.
	Určuje pätu webovej stránky.
...	Označuje hlavný obsah webovej stránky.
...	Určuje článok.
	Určuje obsah bočného panela stránky.
...	Určuje konkrétnu sekciu na webovej stránke.
...	Pre popis dodatočných informácií.
...	Používa sa ako nadpis pre vyššie uvedenú značku. Je vždy viditeľný pre používateľa.
...	Vytvorí dialógové okno.
...	Používa sa na zahrnutie grafov a obrázkov.
	Opisuje a element.
...	Zvýrazňuje konkrétnu časť textu.
	Sada navigačných odkazov na webovej stránke.
...	Konkrétna položka zo zoznamu alebo ponuky.
...	Meria údaje v rámci daného rozsahu.
...	Umiestňuje indikátor priebehu a sleduje pokrok.
...	Zobrazí text, ktorý nepodporuje anotácie Ruby.
...	Zobrazuje podrobnosti o typografickom znaku východnej Ázie.
...	Rubínová anotácia pre východoázijskú typografiu.
...	Identifikuje čas a dátum.
Zalomenie riadku v obsahu.
¹Znakové objekty HTML5
"ALEBO &quot ;	Úvodzovky
< ALEBO &lt ;	Znamienko menšie ako (
> ALEBO &gt ;	Znamienko väčšie ako (>)
ALEBO &nbsp ;	Nerozbitný priestor
© OR &kopírovať ;	Symbol autorských práv
™ ALEBO &ucirc ;	Symbol ochrannej známky
@ALEBO &Uuml ;	symbol „zavináč“ (@)
& ALEBO &	Symbol ampersandu (&)
• ALEBO ö	Malá guľka
¹Pri písaní znaku HTML ignorujte medzeru pred bodkočiarkou.

Vytvorte si webovú stránku pre praktické skúsenosti

Akonáhle ste pochopili základy HTML kódu a mať pracovné znalosti CSS a JavaScript, skúste si vytvoriť webovú stránku Ako vytvoriť webovú stránku: Pre začiatočníkovDnes vás prevediem procesom tvorby kompletnej webovej stránky od začiatku. Nerobte si starosti, ak to znie ťažko. Prevediem vás ním na každom kroku. Čítaj viac . Tiež si určite uložte naše cheat sheet vlastností CSS3 Cheat Sheet Essential CSS3 PropertiesOsvojte si základnú syntax CSS pomocou nášho cheat sheetu vlastností CSS3. Čítaj viac a cheat sheet JavaScript The Ultimate JavaScript Cheat SheetZískajte rýchle osvieženie prvkov JavaScriptu pomocou tohto cheatu. Čítaj viac pre budúce použitie!