HTML tagy pro text: zarovnání, velikost, písmo

Zdá se, proč znáte HTML značky pro text, jestliže teď má téměř každý admin pohodlné vizuální editor, který je automaticky nastavuje?

Faktem je, že formátování obsahu na webu je zásadně odlišné od práce v kancelářských aplikacích. Nestačí jen aby text vypadal atraktivně, protože správný vzhled záleží nejen na zobrazení webové stránky, ale také na propagaci ve vyhledávačích.

HTML tagy a atributy: základy syntaxe

Každý text má skrytý kód, který "vysvětluje" počítači, co a jak by měl být zobrazen na obrazovce. Všechny informace se zaznamenávají pomocí sady univerzálních prvků.

Ve skutečnosti značky HTML pro text jsou příkazy, které na stránku přidávají určité bloky nebo mění jejich vzhled. Správný formát záznamu je:

Všimněte si, že všechny značky nejsou spárovány. Například,
(přeskočení řádku) nebo (přidání vodorovné čáry) nemusí být vůbec zavřeno.

Proč nelze kopírovat články z aplikace Word a jiných programů do editoru webu

Ačkoli moderní kancelářské programy používají stejné texty HTML pro text, v 99% případů není přirozený kód vhodný pro webové stránky. Dokonce i v případě, že je dokument zobrazen normálně v samotné aplikaci, formátování se může při vložení na webu nezdařilo. Kvůli velkému počtu nepotřebných značek a atributů však vyhledávače nemohou dostatečně analyzovat obsah stránky. To zase činí obtížnou podporu vašeho zdroje.

Chcete-li získat čistý a relevantní kód, musíte nejprve vymazat text z tagů HTML vytvořených běžným editorem. Existuje několik způsobů, jak to provést:

1. "Spustit" článek přes "Poznámkový blok" a teprve po této vložení na webu. Aplikace vymaže všechny HTML, takže po tom budete muset znovu formátovat text (pomocí nástrojů editoru nebo ručně).
2. Napište a publikujte články přes LiveWriter. Populární editor blogu okamžitě generuje správný kód. A na samostatné kartě můžete vidět, jak bude vypadat text na webu.
3. Použijte nástroj HTML Cleaner. Tato služba online nezničí celý kód, ale pouze další fragmenty. Pomocí filtrů zvolíte, které značky chcete uložit. Existuje také výkonný vizuální editor pro formátování, který do kódu přidává optimalizované příkazy.

Před zveřejněním nového záznamu vždy zkontrolujte HTML. Nemělo by obsahovat jiné značky než ty, na které se nyní budeme zabývat.

Odstavce

Tento prvek je přítomen téměř ve všech článcích. Každý odstavec by měl být umístěn uvnitř takového kontejneru - zjednodušuje formátování a umožňuje zachovat jeden styl na všech stránkách webu. Zjednodušíte značku

vždy napište nový řádek.

Zarovnání

Samostatná značka HTML "Zarovnat text" nebyla dlouhou dobu používána. Namísto toho byl vytvořen univerzální atribut ALIGN. Chcete-li změnit pozici textového bloku na stránce, musíte vybrat jednu ze tří hodnot - CENTER, RIGHT nebo LEFT. Podobně můžete nastavit zarovnání pro další prvky - například záhlaví.

V některých situacích se pro zarovnání používají jiné značky HTML. Text v centru, například, může být uspořádán pomocí prvku

Rubriky a podpoložky

Systém podtitulů umožňuje vytvořit logickou strukturu obsahu. Když je text rozdělen na sémantické bloky, je mnohem snazší soustředit čtenáře a naučit se nové informace. Vyhledávací stroje také analyzují záhlaví, aby pochopili, jaké požadavky propagují stránku. Proto SEO odborníci doporučují používat tematické klíče.

HTML používá šest úrovní titulků - od

• . Hlavní název (název článku, zboží v internetovém obchodě atd.). V textu může být pouze jeden

• ...

  . Podpoložky druhé úrovně rozdělují text na sémantické bloky. Například, pokud hodnocení notebooků, můžete udělat několik

  se jmény různých modelů.

• ...

  . Třetí úroveň je potřeba, pokud text mezi dvěma

  také zlomené na malé bloky. V našem příkladu mohou být pro každý model kritéria hodnocení - "Výkon", "Paměť", "Grafická karta" atd.

• ,

  ,

  . V praxi jsou extrémně vzácné. Ale obecný princip je stejný - musí být "vnořeni" v bloku s podtitulem nejvyšší úrovně.

Sledujte správnou hierarchii. Návrat k našemu příkladu to znamená, že nemůžete okamžitě zadat jména modelů jako

nebo

. A ještě více využívat podtitulek různých úrovní pro homogenní bloky významu (například přidělit notebook, který získal poslední místo v hodnocení s pomocí

).

A zde je schéma, které vám pomůže okamžitě pochopit a zapamatovat si správnou strukturu hlaviček v HTML.

Seznamy

Jakékoli výčty a instrukce jsou lépe formátovány jako seznamy pomocí speciálních HTML tagů pro text (typická chyba je jen několik odstavců

,které začínají pomlčkou nebo číslicí).

Struktura těchto bloků je velmi jednoduchá. Nejprve definujeme typ seznamu - označený

...

...

Všechny prvky se nacházejí mezi otvíracími a uzavíracími štítky. Každá položka v seznamu začíná novým řádkem a má formát

Výběr písmo: a jeho atributy

Co mohu změnit pomocí této značky HTML? Velikost textu, jeho písmo a barva - a bez přidání nových tříd v CSS. To je velmi výhodné, když potřebujete vybrat pouze jednu větu nebo fragment.

má několik atributů:

• Tvář. Umožňuje změnit písmo textu. Můžete vypsat několik možností oddělených čárkami (Tahoma, Verdana). Pokud uživatel nemá první písmo instalováno, systém jednoduše použije alternativu.
• Velikost. Chcete-li text zvýšit nebo snížit, uveďte v uvozovkách hodnotu od 1 do 7.
• Barva. V závislosti na provedení můžete zvolit jeden ze standardních odstínů (červená, zelená, modrá) nebo zadejte libovolný barevný kód, ze kterého si můžete vybrat.

Nepoužívejte odstavce s formátováním , namísto titulků. Je lepší nastavit stejné nastavení pro správnou značku.

Způsoby výběru textu

Monotónní textové pneumatiky, dokonce i s rozdělením podle odstavců. Chcete-li přitáhnout pozornost a zahřát zájem čtenáře, doporučujeme graficky zvýraznit klíčové body. Zde je několik příkazů, které vám pomohou s tímto úkolem zvládnout.

.... Extrémně populární značka HTML. Tučný text okamžitě zachycuje vaše oko, a proto s jeho pomocí je vhodné zdůraznit důležité teze a fakta.

Mnoho zaměnit značky a . Vizuálně není žádný rozdíl, ale pracují různými způsoby. První jednoduše změní vzhled textu a druhý provede funkci ukazatele a zvýrazní nejdůležitější fragmenty (tematické klíčová slova a fráze pro SEO).

.... Elegantní a přísná kurzíva je ideální pro návrh vědeckých pojmů, cizích slov a různých citací. Ve vážných publikacích nakloní text také rozlišovat názvy uměleckých děl.

.... Možná tolik sporů nezpůsobilo žádné tagy HTML. Zvýrazněte text Zřídka se používá, protože tato metoda přidělování byla historicky přidělena hypertextovým odkazům. Pokud používáte v článcích si povšimněte, že je vhodný pouze pro krátké úlomky - ne více než 1 řádek.

.... Zajímavá značka, která vám umožní účastnit se text přeškrtnutí. Velmi relevantní v reklamě - například zdůraznit kontrast mezi starými a novými cenami.

.... Nejjednodušší způsob, jak zvýšit velikost písma bez dalších parametrů.

.... Pracuje na stejném principu jako předchozí značka. Vnitřní text se snižuje vzhledem k hlavnímu textu.

^.... Správným názvem pro tento formát je horní index. V zásadě je tato značka určena pro matematické stupně a poznámky pod čarou. To snižuje velikost písma a posune vybraný text nahoru.

_.... Dolní index se často nachází v různých vzorcích. Vybraný fragment je umístěn pod hlavním textem.

Sémantické kontejnery

Protože některé bloky byly nalezeny v mnoha textech, byly pro ně vytvořeny speciální značky. To zjednodušuje formátování, protože pokud má každý typ obsahu vlastní sadu stylů, stačí vybrat fragment textu a uvést, jaké informace obsahuje.

.... Značka pro přidání počítačových kódů. Je to nenahraditelné v článcích o programování s příklady - příkazy nejsou provedeny, ale jsou zobrazeny jako prostý text.

.... Je určen pro formulování citací - například klíčové výňatky z rozhovoru.

...

. Další značka, která obsahuje informace o autorech, včetně odkazů.

Separační čára

Pomocí jednoduchého pruhu můžete označit logické ukončení velké části. neplatí pro spárované značky. To znamená, že uzavírací prvek formátu není potřeba.

Při použití atributu WIDTH můžete zkrátit oddělovač zadáním příslušné velikosti v pixelech nebo procentech šířky okna.

Tím, že se naučíte, jak správně používat značky pro formátování textu ve formátu HTML, můžete nejen snadno číst články, ale také zvýšit efektivitu SEO.