Struktura dokumentu HTML: hlavní značky, příklad

HTML je jazyk značkování. Mnoho lidí to považuje za programování, ale ne. V jazyce HTML neexistují žádné proměnné, výpočty, matice nebo jiné prvky přítomné v žádném programovacím jazyce.

Pomocí HTML může vývojář vytvořit pouze vzhled stránek. Je důležité si uvědomit, že žádné stránky neexistují bez označení. HTML je základem pro vytváření webových stránek. Zbytek funkce je přidán různými programovacími jazyky.

Vytváření html dokumentu

V libovolném editoru můžete vytvořit jednoduchou stránku. Dokonce i "Poznámkový blok" bude dělat. Doporučuje se novým vývojářům používat jiné editory, které mají funkce automatické náhrady a další výzvy. Díky tomu můžete vytvářet hotové stoly, odkazy, obrázky a další prvky. A v poznámkovém bloku musí být každý dopis napsán ručně.

Zpravidla se "Poznámkový blok" používá pouze v případech, kdy neexistují žádné další nástroje. Nejprve je vytvořen textový dokument a poté uložen ve formátu html. Všechny stránky na webu musí obsahovat rozšíření html.

Html jazyk je hierarchický. To znamená, že pro html dokument existuje zvláštní struktura. Co to je? Uvažujme níže z důvodu jasnosti.

Struktura html dokumentu. Příklad:

Struktura je vždy stejná. Pokud chcete něco změnit, prohlížeč ji nebude moci zpracovat. V důsledku toho nedostanete to, co jste zamýšleli.

Obrázek výše ukazuje strukturu libovolného html souboru. První položka označuje typ souboru. Tato značka je zadána jednou. Používáte-li speciální editory, celá struktura bude vytvořena automaticky. Budete muset upravit výchozí hodnoty.

Struktura html dokumentu je hlavní značky:

Z těchto tří značek je kostra celého webu. Dávejte pozor na obrázek. Všechny tyto značky mají uzavírací značku se znakem "/". Pokud píšete ručně, zvykláte na obě značky - otevření a zavření.

Nad tím bylo řečeno, že stránky stránek mají příponu .html. To znamená, že pokud vytvoříte textový dokument, ale současně zapíšete správný kód, prohlížeč bude stále zobrazovat pouze text. Neexistuje žádná konverze kódu.

Hlavní část

Na obrázku pod odstavcem 3 je uvedena kapitola. Tato část uvádí informace o službě. Můžete například zadat kódování (položka 4) a název stránky (krok 5).

Titul by měl být vždycky. Bez něj nemůže žádný vyhledávač určovat název obsahu (text) na webové stránce. A to je špatné pro propagaci webových stránek. Navíc prohlížeč v horní části nezadává název stránky. To je pro uživatele nepohodlí.

Struktura html dokumentu je taková, že název

Kromě toho se v části hlavy uvádí informace o připojení skriptů, souborů stylů, pokynů pro vyhledávače nebo jakékoliv jiné údaje, které by uživatel neměl vidět, ale jsou důležité pro prohlížeč nebo programátory.

Připojování stylů

Struktura html dokumentu vám umožňuje připojit styly různými způsoby. Kromě toho mohou být v každém prvku napsány jednotlivě. Tato metoda se však nedoporučuje, protože kód je příliš velký a nepohodlný.

Vyhledávače doporučují, aby všechny styly byly vykresleny v samostatném souboru a prvky jednoduše používají různé třídy.

Soubor je připojen následovně.

Atribut href určuje cestu k souboru. Pokud dojde k chybě v cestě, styly se nebudou načíst. Také je vyžadován atribut typu, což znamená, že jde o soubor css.

Další možností je definovat styly přímo v sekci hlavy.

Ale tato možnost také není příliš doporučena. Tyto metody jsou velmi odlišné v tom, že soubor css může být jeden pro celé stránky a všechny změny v něm budou okamžitě aplikovány na všechny stránky. A pokud použijete metodu zobrazenou na obrázku výše, budete muset provést změny všech existujících stránek na webu.

Pokud třída, kterou vytváříte, bude použita pouze na jedné stránce, pak je tato volba správná pro vás.

Připojování skriptů

Skripty jsou připojeny následovně.

Zde jsou dva atributy: typ a src. V prvním označte, že se jedná o soubor jаvascript a druhý je místo, kde je soubor umístěn. Pokud uděláte překlep, nic nebude fungovat.

Těleso sekce

Struktura html dokumentu je taková, že je nutné umístit obsah, který bude uživatel viditelný pouze v části těla. Název značky hovoří sama za sebe.

Toto určuje celý kód hlavní stránky, který může obsahovat neomezený počet prvků. Čím je kód delší, tím déle bude zpracován.

Zvažte nejzákladnější značky, které můžete použít v oblasti těla. Neexistuje tolik základních. Vše ostatní se dozvíte, jak vaše znalosti a praxe roste.

Základní značky

Struktura html dokumentu vyžaduje povinnou objednávku prvků psaní. Značky by měly být vždy obklopeny závorami kolem okrajů <>. Bez toho prohlížeč nechápe, že jde o tag. Po úvodní závorce vždy následuje název prvku (tagu). Pokud povolíte mezery < a název, bude prohlížeč považovat za text.

Zvažte příklad značky obrázku. Všimněte si, že tato značka se nezavírá, na rozdíl od odkazů, odstavců a mnoha dalších.

Pořadí atributů nezáleží. Ale jejich psaní je velmi důležité. Vždy najde nejprve název atributu, pak rovnoměrné znaménko, pak hodnota atributu je zapsána v uvozovkách. Hodnota může být odlišná - digitální nebo text.

Atribut src ve všech značkách označuje cestu k souboru, který chcete načíst. Atribut Alt ve všech prvcích označuje krátký popis. V tomto případě je načten obrázek bird.jpg s popisem fotografie ptáka.

Navíc, v tag img, můžete určit rozměry, pouze šířku nebo výšku, název, zarovnání, třídu stylů nebo rámeček.

Zvažte další hlavní značky, které jsou uvedeny v části těla.

Tabulky

Jak si to všechno dokážu představit v mé hlavě

Začínající vývojáři si nemohou vždy představit, že to všechno je spekulativní. Podívejte se na několik příkladů struktury webových stránek, a pak budete jasné.

K dispozici je tato možnost:

A toto:

Používání stylů

Jak bylo uvedeno na začátku, můžete připojit styly k souboru i specifikovat v sekci hlavy. V každém případě je popis tříd zcela stejný.

Můžete například zadat styl hlavičky. Poté musíte napsat h1 (protože styl bude pro hlavičku druhé úrovně), otevřete závorky a zapíšete, jaké vlastnosti budou v tomto elementu. Pokud znáte základní angličtinu, neměli by být žádné problémy. Všechny vlastnosti se nazývají lidský jazyk.

Chcete-li určit tento styl pro několik prvků najednou, napište je oddělené čárkami.

Výsledkem je červená záhlaví.

Výše uvedené metody jsou vhodné pro návrh standardních prvků. Ale můžete také vytvořit své vlastní třídy. Jejich jméno by mělo začínat tečkou, pak je napsáno libovolné jméno.

Musíte je používat takhle.

Poznámka: Pokud jste zadali nastavení stylu pro standardní prvek, nemusíte psát třídu slov. Styl bude použit standardně. V atributu třídy můžete zadat pouze ty styly, které začínají s určitou periodou.