Začínáme s HTML: Tabulky

HTML, zkratka pro HyperText Markup Language. Je to standard, který slouží jako reference pro vývoj webových stránek v různých verzích, definuje základní strukturu a kód (nazývaný kód HTML) pro definování obsahu webové stránky, mimo jiné textu, obrázků, videí. Abychom porozuměli tomu, jak je definována struktura tohoto jazyka, začneme v tomto kurzu tím, že se seznámíme se štítky, s nimiž jsou tabulky zpracovávány, což je velmi užitečné při vytváření struktur zejména pro zpravodaje a e -maily.
Cílem tohoto tutoriálu je poskytnout vysvětlení, které grafickým designérům pomůže co nejjednodušším způsobem porozumět struktuře a logice dokumentů HTML získat základní znalosti, které jim umožní generovat soubory v tomto jazyce.

Požadavky

- Vlastníte editor kódu jako Dreamweaver CS6, Poznámkový blok ++, úžasný text mimo jiné dostupné na internetu.
- Nainstalujte si webový prohlížeč, například Chrome, Firefox, Opera, Safari, Edge nebo Internet Explorer.
Krok 1: Znalost štítků pro vytváření tabulek
tímto štítkem definujeme začátek tabulky ve struktuře HTML.
umožňuje vytvoření řádku pro tabulku
představují záhlaví sloupců, tyto sloupce se skládají z buněk.
<>> je vyjádření buněk, které budou umístěny v řádcích tabulky.
To jsou všechny popisky, které budeme potřebovat k vytvoření tabulek, v dalším kroku se naučíme, jak jsou deklarovány v rámci kódu a jejich pořadí.
Krok 2: Logická deklarace štítků.
Je důležité vědět, že v HTML musí být drtivá většina tagů otevřena, což je právě tehdy, když je deklarujeme a také musí být zavřená, následující příklad ilustruje tento koncept:

Jak vidíte, každý štítek musí mít své otevírání a zavírání. Liší se hlavně lomítkem „/“, kterým se štítek zavírá. Při každém vytvoření značky je povinné stejným způsobem deklarovat její uzavření.
Krok 3: Hierarchická deklarace štítků.
Etiketa Jedná se o první, který je deklarován k označení vytvoření tabulky, v důsledku čehož se začne vytvářet buňky, které budou obsahovat informace, které se mají zobrazit.
Tabulky se skládají ze sloupců a řádků.

Postaráme se o hierarchické pořadí, které musí mít každý štítek, vytvoříme tabulku a představíme řádky, které budeme pro tabulku potřebovat, na obrázku níže:

Kód v tabulce by měl vypadat takto:

Přestože jsou řádky tabulky již definovány, je nutné vytvořit buňky, které tvoří sloupce tabulky. Následující obrázek ilustruje tento koncept:

Kód v tabulce by měl vypadat takto:

Krok 4: Přidání obsahu do buněk
Každá značka [color = # 7030a0] [/ color] je ekvivalentní buňce v naší tabulce, takže sem lze informace přidat. Změníme v prvním štítku [barva = # 44546a] [/ color] deklaruje všechny řádky [color = # 7030a0] [/ color] podle značek záhlaví [color = # 002060][/Barva]. V [barva = # 7030a0][/ color] zbytku řádků přidáme ukázkový obsah. Kód HTML Mělo by to vypadat takto:

 
 
 
Položka
 
název
 
Příjmení
 

 
 
1
 
Pedro
 
Růže
 

 
 
2
 
John
 
Zdroje
 

Krok 5: Uložte dokument do HTML a zobrazit soubor
V programu pro úpravu kódu přejdeme do nabídky Soubor / Uložit, protože ukládáme dokument ve formátu .html

Později dokument otevřeme v prohlížeči, který preferujeme:

Tabulka, kterou jsme vytvořili, by měla vypadat jako na obrázku níže.

Zatím jsme se naučili název a funkci štítků HTML vytvářet tabulky, jejich hierarchické pořadí, jejich logické uspořádání a přidávat do nich obsah. Nyní jsme připraveni přidat grafické atributy do tabulek.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod