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ář vytvářet pouzevzhled místa. 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

Vytvoření jednoduché webové stránky v libovolnéeditoru. 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 těchpřípady, kdy nejsou k dispozici žá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 nahoře ukazuje strukturu libovolnéhohtml-soubor. 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:

<html>
<head>
<body>

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í.

Bylo uvedeno výše, že stránky webových stránek majírozšíření .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 <title> je zadán pouze v sekci head. Pokud je značka <title> zadána v sekci karoserie nebo po ní, obsluha ji nevěnuje.

Kromě toho sekce hlavy specifikujeinformace o připojení skriptů, souborů stylů, pokynů pro vyhledávače nebo jakékoliv jiné údaje, které uživatel nemusí 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 sestylů 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í jsme specifikovali, že se jedná o soubor javascript 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 pro uživatele 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 povinnépořadí písemných prvků. Značky by měly být vždy obklopeny závorkami <>. 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 mezera mezi <a jménem, prohlížeč bude považovat tento text 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é musíte 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.

Kromě toho můžete v img tagu zadat kóty, pouze šířku nebo výšku, titul, zarovnání, třídu stylů nebo rámeček.

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

Tag	Jmenování
<a> ... </a>	Odkazy
<img>	Obrázky
<p> ... </ p>	Odstavec
The <br>	Přenos textu na nový řádek
<strong> ... </ strong>	Tučný text
<i> ... </ i>	kurzíva
<s> ... </ s>	Přeškrtnutý text
<u> ... </ u>	Podtržený text
<ol> </ ol>, <ul> </ ul>	Seznamy
<table> </ table>	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 určitě jasné.

K dispozici je tato možnost:

struktura hlavních značek html dokumentu

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.

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

</ p>

Hodnocení: