HTML prvky

Aktuální verze stránky ještě nebyla zkontrolována zkušenými přispěvateli a může se výrazně lišit od verze recenzované 11. prosince 2015; kontroly vyžadují 50 úprav .

Element HTML  je základní strukturální jednotka webové stránky napsaná v jazyce HTML . Tento prvek můžete vidět ve zdrojovém kódu všech webových stránek po nastavení typu dokumentu na prvním řádku na stránce. DOCTYPE určuje, kterou verzi (X)HTML tato stránka používá. Prvky stránky jsou umístěny mezi úvodní značkou <HTML> a koncovou značkou </HTML>. Prvek <html> se nazývá kořenový prvek. [jeden]


Struktura dokumentu HTML

HTML  je značkovací jazyk tagovaných dokumentů , to znamená, že jakýkoli dokument v jazyce HTML je sada prvků a začátek a konec každého prvku je označen speciálními značkami, které se nazývají tagy . V HTML nezáleží na velikosti písmen, ve kterých je název značky napsán. Prvky mohou být prázdné , to znamená, že neobsahují žádný text ani jiná data (například značka zalomení řádku <br> ). V tomto případě se obvykle neuvádí uzavírací značka. Kromě toho mohou mít prvky atributy , které definují některé jejich vlastnosti (například velikost písma pro značku <font> ). Atributy jsou uvedeny v úvodní značce. Zde je příklad značkovací části dokumentu HTML:

< p > Text mezi dvěma tagy - otevírání a zavírání. </ p > <a href="http://example.com"> Zde prvek obsahuje atribut href . </a> Zde je příklad prázdného prvku : <br>

Každý dokument HTML, který odpovídá verzi specifikace HTML, musí začínat řádkem deklarace verze HTML <!DOCTYPE>, který obvykle vypadá nějak takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Pokud tento řádek není uveden, je obtížnější dosáhnout správného zobrazení dokumentu v prohlížeči .

Začátek a konec dokumentu jsou dále označeny značkami <html>, </html>resp. V rámci těchto značek jsou značky header ( <head></head>) a body ( <body></body>) dokumentu.

DOCTYPE volby pro HTML 4.01

  • Strict: Neobsahuje značky označené jako zastaralé nebo zastaralé.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional: obsahuje zastaralé značky pro kompatibilitu a snadný přechod ze starších verzí HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • S rámečky (Frameset): obdoba přechodu, ale obsahuje také značky pro vytváření sad rámců.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE pro HTML 5

Na rozdíl od předchozích verzí je zde pouze jeden tag. [2]

<!DOCTYPE html>

Základní prvky

Tagy a jejich parametry nerozlišují malá a velká písmena. To znamená, že <A HREF="http://example.com"> a <a href="http://example.com"> znamenají totéž.

V nejnovějších verzích HTML má téměř každá značka obrovské množství volitelných parametrů – obvykle minimálně 15. Poskytujeme pouze hlavní parametry značek.

Hypertextové odkazy

< a href = "filename" target = "_self" > název odkazu </ a >
  • Atribut hrefurčuje hodnotu adresy dokumentu, na který odkaz odkazuje.
  • filename — název souboru nebo internetová adresa, na kterou se chcete odkazovat.
  • название ссылки - název hypertextového odkazu, který se zobrazí v prohlížeči, to znamená, že se zobrazí těm, kteří stránku navštívili.
  • target - nastavuje hodnotu okna nebo rámečku, ve kterém se otevře dokument, na který odkazuje odkaz. Možné hodnoty atributů:
    • _top — otevření dokumentu v aktuálním okně;
    • _blank - otevření dokumentu v novém okně;
    • _self - otevření dokumentu v aktuálním rámci;
    • _parent — otevření dokumentu v nadřazeném rámci.

Výchozí hodnota: _self.

Kotva

Stejný prvek slouží k vytvoření tzv. „kotev“ (anchor), které lze následně použít v hypertextových odkazech směřujících na konkrétní prvek stránky. Například:

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Kotva uvnitř dokumentu </ title > </ head > < body > < p >< a name = "top" > < / a ></ p > < p > text </ p > < p >< a href = "#top" > Nahoře </ a ></ p > </ body > </ html >

Podobně lze kotvu umístit na záložku umístěnou na jiné webové stránce nebo na jiném webu: tam, kde je odkaz nasměrován, by měl být <a name="xxx"></a>, a odkud odkaz pochází, do pole se hrefpřidá znak libry a název kotvy . hodnota.

Také ID libovolného prvku může sloužit jako kotva v moderních prohlížečích.

Textové bloky

  • <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> — nadpisy 1, 2, … 6 úrovní. Používá se ke zvýraznění částí textu (nadpis 1 je největší, 6 je nejmenší).
  • <P> - nový odstavec. Můžete dát na konec odstavce </P>, ale není to povinné.
  • <BR> - nový řádek. Tato značka není uzavřena (tj. značka neexistuje </BR>)
  • <HR> - vodorovná čára
  • <BLOCKQUOTE> … </BLOCKQUOTE>  - citát. Normálně je text posunut doprava.
  • <PRE> … </PRE>  — režim náhledu (předformátovaný text). Mezery zůstávají tam, kde jsou v původním dokumentu (v ostatních značkách ignorovány). Interně lze zpracovávat vložené značky jiné než img, object, big, small, sup a sub.
  • <DIV> … </DIV>  - block (obvykle se používá k aplikaci CSS stylů )
  • <SPAN> … </SPAN>  - řetězec (obvykle se používá k aplikaci stylů CSS )

Formátování textu

  • <EM> … </EM>  - logický důraz (obvykle zobrazen kurzívou )
  • <STRONG> … </STRONG>  - zesílené logické napětí (obvykle zobrazeno tučně )
  • <I> … </I>  - text psaný kurzívou
  • <B> … </B>  - tučný text
  • <U> … </U>  - podtržení textu
  • <S> … </S> (nebo <STRIKE> … </STRIKE> ) - přeškrtnutý text
  • <BIG> … </BIG>  - zvětšení velikosti písma
  • <SMALL> … </SMALL>  - zmenšení písma
  • <BLINK> … </BLINK>  - blikající text. Pozornost! Tato značka nefunguje v aplikaci Internet Explorer 5 a nižší bez JavaScriptu
  • <MARQUEE> … </MARQUEE>  - text, který klouže po obrazovce.
  • <SUB> … </SUB>  - dolní index text. Například H <SUB>2</SUB>O vytvoří text H 2 O.
  • <SUP> … </SUP>  - text horního indexu. Například E=mc <SUP>2</SUP> vytvoří text E=mc 2 .
  • <FONT параметры> … </FONT>  — nastavení parametrů písma. Tato značka má následující možnosti:
    • COLOR=цвет - nastavit barvu. Barvu lze zadat v hexadecimálním tvaru jako #rrggbb (první 2 hexadecimální číslice jsou červená složka, další 2 jsou zelené, poslední 2 jsou modré) nebo jménem.
    • FACE=шрифтnastavení řezu písma
    • SIZE=размерnastavení velikosti písma. Velikost 1 až 7: Výchozí velikost je 3. Výchozí velikost lze změnit mnoha způsoby.
    • SIZE=+изменениеnebo  — změnit velikost písma ze standardní. Například +2 znamená, že velikost je o 2 větší než standardní velikost.SIZE=-изменение

Například,

< U > tři </ U > < VELIKOST FONTU = "+2" > velké </ FONT > < FONT COLOR = "zelená" > zelená </ FONT > píšťalky jsou signálem k zahájení útoku .

vytvoří text

Сигналом к началу атаки являются три больших зелёных свистка.

Seznamy

< UL > < LI > první prvek </ LI > < LI > druhý prvek </ LI > < LI > třetí prvek </ LI > </ UL >

vytvoří seznam

  • první prvek
  • druhý prvek
  • třetí prvek

Pokud místo <UL> ( Neuspořádaný seznam  - neuspořádaný seznam) zadáte <OL> ( Objednaný seznam  - číslovaný seznam), bude seznam očíslován:

  1. první prvek
  2. druhý prvek
  3. třetí prvek

Tyto značky mají parametry:

zadejte ="typ"

kde typ  je forma:

v <UL>  - znaky

  • square - náměstí
  • circle - obvod
  • disk - kruh: výchozí

a v <OL>  číslicích nebo písmenech

  • A nebo a (v latince) - abecední seznam: velkými nebo malými písmeny
  • I nebo i - římské číslice: velkými nebo malými písmeny (římské číslice zobrazují čísla od 1 do 3999, zbytek - arabština)
  • 1 - Arabské číslice: výchozí

se píše takto:

< oltype = " i" > < li > První </ li > < li > Druhý </ li > < li > atd. </ li > </ ol >

a vytvoří následující:

  1. První
  2. Druhý
  3. Atd.

Parametr start ="start" (pouze pro <OL> ), který definuje začátek nového odpočítávání: například pokud nepotřebujete 1, 2, 3, ale 24, 25, 26

Píše se to takto:

< ol start = "24" > < li > Dvacet čtyři </ li > < li > Dvacet pět </ li > < li > atd. </ li >

a vytvoří následující:

  1. Dvacet čtyři
  2. Dvacet pět
  3. Atd.

a nakonec pro značku , <LI> parametr  - pokud potřebujete přeskočit z jedné číslice na druhou: například ne 1, 2, 3, 4, ale 1, 2, 22, 23 value="следующий"

< ol > < li > Jeden </ li > < li > Dva </ li > < hodnota li = "22" > Dvacet dva </ li > < li > Dvacet tři </ li >

vytvoří následující:

  1. Jeden
  2. Dva
  3. Dvacet dva
  4. Dvacet tři

Konečně třetím a posledním seznamem je seznam definic :

< DL > < DT > Kočka </ DT > < DD > mňoukající mazlíček </ DD > < DT > Kočka </ DT > < DD > kočičí manžel </ DD > < DT > Krokodýl </ DT > < DD > velký Afričan šelma s ostrými zuby </ DD > </ DL >

vytvoří následující:

Kočka mňoukající mazlíček Kočka kočičí manžel Krokodýl velká africká šelma s ostrými zuby

Mimochodem, značky <LI>, <DT>, <DD>nemusí být zavřené.

Rozdíly v zobrazování číslovaných seznamů

S nekladnými hodnotami v číslování se prohlížeče chovají jinak. Například Internet Explorer ignoruje value=0atd value=-1., zatímco jiné prohlížeče jako Chrome , Firefox danou hodnotu zobrazují. Internet Explorer přitom neignoruje start=0atd start=-1., tzn. může začít seznam s nekladnou hodnotou, ale nemůže přejít na nekladnou hodnotu v číslování.

HTML značení Tento prohlížeč Chrome, Firefox internet Explorer
<ol start=-2><li><li hodnota=0><li hodnota=2></ol>
  1.  
  2.  
  3.  
 -2, 0, 2 -2, -1, 2

V abecedním seznamu ( type=Anebo type=a) některé prohlížeče, jako je Chrome, Firefox, zobrazují nekladné hodnoty jako čísla, zatímco Internet Explorer (v režimu Quirks , tj. pokud stránka neurčuje HTML 4.01 nebo 5 ve značce !DOCTYPE HTML) zobrazí záporné hodnoty jako písmena se znaménkem mínus a nula se symbolem @.

HTML značení Tento prohlížeč Chrome, Firefox Internet Explorer (režim Quirks)
<ol type=A start=-1><li><li><li></ol>
  1.  
  2.  
  3.  
 -1, 0, A -A, @, A

Prázdnou nebo nečíselnou hodnotu ( value=, value=A, value=B) některé prohlížeče, jako je Chrome, Firefox, ignorují, zatímco Internet Explorer ji vnímá jako value=1.

HTML značení Tento prohlížeč Chrome, Firefox internet Explorer
<ol start=-2><li><li hodnota=B><li hodnota=2></ol>
  1.  
  2.  
  3.  
 -2, -1, 2 -2, 1, 2

Při zobrazování čísel římskými číslicemi ( type=Inebo type=i) jsou rozdíly, protože Internet Explorer (v režimu Quirks , tedy pokud stránka v tagu neuvádí HTML verzi 4.01 nebo 5 !DOCTYPE HTML) zobrazuje některá čísla nesprávně.

HTML značení Tento prohlížeč Chrome, Firefox Internet Explorer (režim Quirks)
<ol type=I start=3300><li><li><li><li></ol>
  1.  
  2.  
  3.  
  4.  
MMMCCC
MMMCCCI
MMMCCCII
MMMCCCIII 		MMMCCC
MMMCCC
MMMCCC
MMMCCC

Všechna čísla z intervalu od 1 do 1880 zobrazuje Internet Explorer správně, ale ne všechna z intervalu od 1881 do 3999. U 603 čísel, 67 skupin po 9 číslech (xxx1-xxx9) není v záznamu římských číslic zahrnuta nejméně významná číslice. A to s největší pravděpodobností není proto, aby se zkrátil dlouhý záznam, protože 3888 – číslo s nejdelším (mezi 1 a 3999) římským číslem (MMMDCCCLXXXVIII) – zobrazuje se správně.

Skupiny čísel nesprávně zobrazené v Internet Exploreru (v režimu Quirks ) jsou v tabulce označeny křížkem:

01-09 11-19 21-29 31-39 41-49 51-59 61-69 71-79 81-89 91-99
1800 ✘
2300 ✘ ✘ ✘
2700 ✘ ✘ ✘
2800 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3100 ✘
3200 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3300 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3400 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3500 ✘
3600 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3700 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3800 ✘ ✘ ✘
3900 ✘ ✘ ✘ ✘ ✘ ✘ ✘

Objekty

  • EMBED - vkládání různých objektů: dokumentů jiných než HTML a mediálních souborů
  • APPLET - vkládání Java appletů
  • SCRIPT - vkládání skriptů.

Obrázky

  • IMG - vložit obrázek. Tato značka není uzavřena.
    • SRC - jméno nebo URL
    • ALT - alternativní název (zobrazí se, pokud prohlížeč zakazuje zobrazování obrázků)
    • TITLE - stručný popis obrázku (zobrazí se, když na obrázek najedete myší)
    • WIDTH, HEIGHT - rozměry (pokud neodpovídají skutečným rozměrům obrázku, pak se obrázek „roztáhne“ nebo „zmenší“)
    • ALIGN — nastavuje parametry zalamování textu (nahoře, uprostřed, dole, vlevo, vpravo)
    • VSPACE, HSPACE - nastavení rozměrů vertikálního a horizontálního prostoru kolem obrázku

Příklad:

< IMG SRC = url ALT = "text" TITLE = "text" WIDTH = "velikost (px, %)" HEIGHT = "velikost (px, %)" >

Z obrázku lze vytvořit odkaz:

< A HREF = url >< IMG SRC = url ></ A >

Obrazová mapa

  • <MAP>…</MAP> - vytvoření obrázkové mapy, která vám umožní uložit několik odkazů do jednoho obrázku.

Příklad:

< IMG width = "500" height = "200" usemap = "#somemap" src = "url" > < MAP name = "somemap" > < AREA shape = "rect" coords = "6, 7, 140, 196" href = "url1" > < AREA shape = "circle" coords = "239, 98, 92" href = "url2" > < AREA shape = "polygon" coords = "386,16, 344,56, 350,189, 385,132, 489,96.190 href = "url3" > </ MAP >

Tabulky

  • TABLE - vytvoření tabulky. Možnosti značek:
    • BORDER — tloušťka dělicích čar v tabulce
    • CELLSPACING - vzdálenost mezi buňkami
    • CELLPADDING- odsazení od rámečku k obsahu buňky.
  • CAPTION - název tabulky (tato značka je volitelná)
  • TR - řádek tabulky
  • TH - záhlaví sloupce tabulky (tato značka je volitelná)
  • TD - buňka tabulky
  • height - výška stolu
  • width - šířka stolu

Například,

< TABLE BORDER = "1" CELLSPACING = "0" > < CAPTION > Úlovek krokodýla Mumbe Yumba </ CAPTION > < TH > Rok </ TH > < TH > Úlovek </ TH > < TR > < TD > 1997 < / TD > < TD > 214 </ TD > </ TR > < TR > < TD > 1998 </ TD > < TD > 216 </ TD > </ TR > < TR > < TD > 1999 </ TD > < TD > 207 </ TD > </ TR > </ TABLE >

Vytvoří tabulku:

Úlovek krokodýlů v Mumbe-Yumbe
Rok Úlovek
1997 214
1998 216
1999 207

Tag TABLE má také parametr CELLPADDING. Definuje vzdálenost v pixelech mezi okrajem buňky a jejím obsahem. Pokud například nahradíte první řádek tabulky s

< HRANICE TABULKY = "1" CELLSPACING = "0" CELLPADDING = "5" >

tabulka bude vypadat takto:

Úlovek krokodýlů v Mumbe-Yumbe
Rok Úlovek
1997 214
1998 216
1999 207

Dalším parametrem značek TABLE, TR, TH, TD je ALIGN. Definuje zarovnání. Možné hodnoty jsou center(uprostřed), left(vlevo), right(vpravo).

Parametr ALIGNin TDor THurčuje zarovnání pro obsah uvnitř dané buňky, in TR - pro obsah všech buněk v řádku, TABLE - pro samotnou tabulku na stránce. Pro každou buňku je zarovnání převzato z TDnebo TH, pokud není nastaveno - z TR, pokud není nastaveno buď - na střed pro THnebo doleva pro TD.

Pokud například nahradíte první řádky tabulky s

< TABLE BORDER = "1" CELLSPACING = "0" ALIGN = "center" > < CAPTION > Úlovek krokodýla Mumbe Yumba </ CAPTION > < TH > Rok </ TH > < TH > Úlovek </ TH > < TR > < TD > 1997 </ TD > < TD ALIGN = "CENTER" > 214 </ TD >

tabulka bude vypadat takto:

Úlovek krokodýlů v Mumbe-Yumbe
Rok Úlovek
1997 214
1998 216
1999 207

Neuzavřené tagy TD , TR a TH vedou k nesprávnému zobrazení, zejména při práci s vnořenými tabulkami.

Formuláře

Vytváření formulářů v HTML je poměrně složité. Zde jsou uvedeny pouze názvy hlavních značek.

  • FORM - vytvoření formuláře
  • INPUT - vstupní prvek (může mít různé funkce - od zadávání textu po odeslání formuláře)
  • TEXTAREA - textová oblast (víceřádkové pole pro zadávání textu)
  • SELECT - seznam (obvykle ve formě rozbalovací nabídky)
  • OPTION - položka seznamu

Symboly

Chcete-li vytvořit symbol, není nutné jej hledat na klávesnici: stačí zadat značku; například, chcete-li získat ¢ , musíte napsat &cent;, mezeru bez přerušení  - &nbsp;, přízvuk  - &#x301;atd.

Názvy barev

Následující barvy jsou definovány v HTML.

název Hexadecimální barva
Černá #000000
stříbrný #c0c0c0
kaštanové #800000
Červené #ff0000
námořnictvo #000080
modrý #0000ff
nachový #800080
fuchsie #ff00ff
zelená #008000
Limetka #00ff00
olivový #808000
žlutá #ffff00
modrozelená #008080
aqua #00ffff
šedá #808080
bílý #ffffff

Základní znaky

Kód Symbol Význam
< < méně
> > více
& & ampersand
  nezalomitelná mezera (na této mezeře není čára pro zalomení přerušena)
&sekta; § odstavec
№ Ne. pokoj, místnost
&kopírovat; © autorská práva _ _
® ® registrovaná ochranná známka _
™ ™ ochranná známka _ _ _
° ° stupně
« " úvodní citát v ruštině
" » závěrečný citát v ruštině
&helli; … elipsa
– — pomlčka
• • tlustá tečka
± ± plus nebo mínus
&mínus; − mínus

Znaky klávesnice ' a " v ruštině nejsou uvozovky. Na webových stránkách je také nesprávné nahrazovat №, ©, ®, ™, °C za N, (c), (R), TM, C.

Pomlčka, pomlčka a mínus jsou tři různé znaky.

  1. Symbol klávesnice – nazývá se pomlčka a používá se uvnitř slov.
  2. Mínus je širší než spojovník . Používá se k zápisu záporných čísel a operacím odčítání.
  3. Pomlčka je ještě širší než mínus . Používá se mezi slovy a odděluje se mezerami a před - neoddělitelné . K označení číselných intervalů se také používá pomlčka , ale není ohraničena mezerami.

Další podrobnosti: Artemy Lebedev . Pomlčka, minus a spojovník neboli rysy ruské typografie . Vedení (15. ledna 2003). Získáno 23. dubna 2013. Archivováno z originálu 9. prosince 2007.

Znaky < , > a & nelze v HTML normálně zobrazit, protože mají zvláštní význam. Jsou vždy zobrazeny pomocí <, > a & respektive.

Pro většinu speciálních znaků viz about.com .

Poznámky

  1. ↑ Kořenový prvek dokumentu HTML Popis
  2. ↑ Standard HTML . html.spec.whatwg.org . Staženo: 26. září 2021.

Odkazy