Zdá sa, že prečo vedieť HTML tagy pre text, ak teraz v takmer všetkých admin je pohodlný vizuálny editor, ktorý sa dá automaticky? Faktom je, že formátovanie obsahu na webe je radikálne odlišné od práce v kancelárskych aplikáciách. Nestačí len text dať atraktívny vzhľad, pretože správny dizajn závisí nielen od zobrazenia webových stránok, ale aj od propagácie vo vyhľadávačoch.

HTML tagy a atribúty: základy syntaxe

Každý text má skrytý kód, ktorý "vysvetľuje" počítaču, čo a ako sa má zobraziť na obrazovke. Všetky informácie sa zaznamenávajú pomocou množiny univerzálnych prvkov.


HTML značky pre text sú v podstate príkazy, ktoré pridávajú na stránku určité bloky alebo menia ich vzhľad. Správny formát zápisu vyzerá takto: Nezabudnite, že všetky značky nie sú spárované. Napríklad
(preskočiť riadok) alebo (pridať vodorovnú čiaru) sa nemusí vôbec zatvárať.

Prečo nemôžem kopírovať články z programu Word a iných programov do editora stránok

Hoci moderné kancelárske aplikácie používajú rovnaké HTML značky pre text, v 99% prípadov natívny kód nie je vhodný pre webové stránky. Dokonca aj vtedy, ak sa samotný dokument normálne zobrazí v samotnej aplikácii, vloženie na formátovanie môže byť vyblednuté. Okrem toho, vzhľadom na veľké množstvo nepotrebných značiek a atribútov vyhľadávacie nástroje nemôžu primerane analyzovať obsah stránky. Čo zase komplikuje pokrok vášho zdroja. Ak chcete získaťČistý a relevantný kód, musíte najprv vymazať text z tagov HTML vytvorených bežným editorom. Existuje niekoľko spôsobov, ako to urobiť:

"Utekať" cez článok "Poznámkový blok" a až potom ho vložiť na stránku. Aplikácia utierá celý HTML, takže potom budete musieť text znovu upraviť (pomocou nástrojov editora alebo manuálne).

Napíšte a uverejňujte články cez LiveWriter. Populárny editor blogu okamžite generuje správny kód. A na samostatnej karte môžete vidieť, ako text vyzerá na webe.

Použite HTML Cleaner. Táto služba online nezničí celý kód, ale len ďalšie fragmenty. Pomocou filtrov vyberiete, ktoré značky chcete uložiť. Existuje tiež výkonný vizuálny editor pre formátovanie, ktorý pridáva už optimalizované príkazy do kódu.

Pred zverejnením nového záznamu vždy skontrolujte HTML. Nemali by obsahovať iné značky než tie, ktoré momentálne kontrolujeme.

Odseky

Tento prvok je prítomný prakticky vo všetkých článkoch. Každý odsek by mal byť umiestnený v takomto kontajneri - zjednodušuje formátovanie a umožňuje uložiť jeden štýl na všetkých stránkach webu. Pre jednoduchosť je značka vždy napísaná z nového riadku.

Zarovnanie

Samostatná značka HTML "Text alignment" sa už dlho používa. Namiesto toho bol vytvorený univerzálny atribút ALIGN. Ak chcete zmeniť polohu textového bloku na stránke, musíte vybrať jednu z troch hodnôt - CENTER, RIGHT alebo LEFT. Podobne môžete nastaviť vyrovnanie ďalších prvkov - napríklad,hlavičky.
V niektorých situáciách sa na zosúladenie používajú iné značky HTML. Text v strede, napríklad, môže byť usporiadaný pomocou prvku. Ako pohodlné je samostatná značka? Na rozdiel od atribútu pracuje s akýmkoľvek obsahom vrátane fotografií, videí, blesku atď.

Záhlavie a titulky

Systém titulkov vám umožňuje vytvoriť logickú štruktúru obsahu. Keď je text rozdelený do sémantických blokov, pre čitateľa je oveľa jednoduchšie sústrediť sa a naučiť sa nové informácie. Vyhľadávacie nástroje tiež analyzujú hlavičky, aby pochopili, čo vyvoláva stránka vyhľadávania. To je dôvod, prečo SEO špecialisti odporúčajú používať tematické kľúče v nich. V jazyku HTML sa používa šesť úrovní titulkov - od

po

. V tomto systéme existuje jasná hierarchia:

. Hlavný názov (názov článku, produkt v online obchode atď.). V texte môže byť iba jedna

. Spravidla obsahuje hlavný kľúč.

. Druhá úroveň titulkov rozdelila text na sémantické bloky. Ak napríklad urobíte hodnotenie notebooku, môžete urobiť niekoľko

názvov rôznych modelov.

. Tretia úroveň je potrebná, ak je text medzi dvoma

rozdelený na malé bloky. V našom príklade môžu byť kritériá hodnotenia - "Výkon", "Pamäť", "Grafická karta" atď. Pre každý model.

,

,

. V praxi sú veľmi zriedkavé. Ale všeobecný princíp je rovnaký - musia byť "zabudované" do blokupodpoložky najvyššej úrovne.

Dávajte pozor na správnu hierarchiu. Keď sa vrátite k nášmu príkladu, znamená to, že nemôžete okamžite zadať mená modelov ako

alebo

. A ešte viac ho používajte pre homogénne podkapitoly rôznych úrovní (povedzme, notebook, ktorý sa umiestnil na poslednom mieste v rebríčku pomocou

).
Ale tu je schéma, ktorá vám pomôže okamžite pochopiť a zapamätať si správnu štruktúru hlavičiek HTML.

Zoznamy

Akékoľvek výpisy a inštrukcie sa najlepšie vykonajú vo forme zoznamov pomocou špeciálnych značiek HTML pre text (typická chyba je len niekoľko odsekov začínajúcich pomlčkou alebo číslom). Štruktúra týchto blokov je veľmi jednoduchá. Najprv určite typ zoznamu - označený alebo očíslovaný. Všetky prvky sa nachádzajú medzi otváracou a zatváracou značkou. Každá položka zoznamu začína novým riadkom a má formát

. Počet prvkov nie je obmedzený.

Výber písma: a jej atribúty

Čo môžem zmeniť pomocou značky HTML? Veľkosť textu, písmo a farba - a bez pridania nových tried CSS. Je veľmi výhodné, ak potrebujete vybrať len jednu vetu alebo fragment. má niekoľko atribútov:

tvár. Umožňuje vám zmeniť písmo textu. Môžete zadať niekoľko možností pomocou čiarky (Tahoma, Verdana). Ak používateľ nemá prvé písmo nainštalované, systém jednoducho použije alternatívu.

Veľkosť. Ak chcete zvýšiť alebo znížiť text, v úvodzovkách zadajte hodnotu od 1 do 7.

Farba, V závislosti od dizajnu môžete vybrať jeden zo štandardných odtieňov (červený, zelený, modrý) alebo zadať ľubovoľný farebný kód, ktorý si vyberiete.

Nepoužívajte odsek namiesto podpoložiek. Je lepšie dať rovnaké parametre registrácie so správnou značkou.

Typy výberu textu

Čiernobiely text je zdĺhavý, dokonca aj v odsekoch podľa odseku. Ak chcete pritiahnuť pozornosť a zvýšiť záujem čitateľa, odporúča sa graficky zdôrazniť kľúčové body. Tu sú niektoré príkazy, ktoré vám pomôžu vyrovnať sa s touto úlohou. . Extrémne populárna značka HTML. Odvážny text okamžite zachytilo oko, a preto s jeho pomocou je vhodné zdôrazniť dôležité diela a fakty. Veľa značiek zamieňa a. Vizuálne nie je žiadny rozdiel, ale fungujú inak. Prvý jednoducho zmení vzhľad textu a druhý vykoná funkciu ukazovateľa a zvýrazní najdôležitejšie fragmenty (tematické kľúčové slová a frázy pre SEO). , Elegantná a prísna kurzíva je ideálna pre navrhovanie vedeckých pojmov, cudzích slov a rôznych citácií. V serióznych publikáciách sa názvy umeleckých diel líšia aj šikmým textom. , Zdá sa, že toľko sporov nespôsobilo žiadne HTML značky. Podčiarknutie textu sa zriedka používa, pretože táto metóda prideľovania historicky zakotvených hypertextových odkazov. Ak používate články, všimnite si, že je to vhodné iba pre krátke úryvky - nie viac ako 1 riadok. , Zaujímavá značka, ktorá vám umožní preškrtnúť časť textu. Veľmi relevantné v reklame - napríklad zdôrazniťkontrast medzi starými a novými cenami. , Najjednoduchší spôsob zvýšenia veľkosti písma bez ďalších parametrov. , Pracuje na rovnakom princípe ako predchádzajúca značka. Text vnútri klesá vzhľadom na hlavný. , Správny názov pre takýto formát je horný index. V podstate je táto značka určená pre matematické kroky a poznámky pod čiarou. Znižuje veľkosť písma a posúva zvýraznený text. , Nižší index sa často nachádza v rôznych formách. Zvolený fragment sa nachádza pod hlavným textom.

Semi-kontajnery

Keďže niektoré bloky boli nájdené v mnohých textoch, začali vytvárať pre nich špeciálne značky. Zjednodušuje formátovanie, pretože ak má každý typ obsahu vlastnú sadu štýlov, stačí zdôrazniť určitý text a špecifikovať, ktoré informácie obsahuje.. Označenie pre pridávanie kódov počítača. Nepostrádateľné pri programovaní článkov s príkladmi - príkazy sa nevykonávajú, ale zobrazujú sa ako obyčajný text. . Určené na vytváranie cenových ponúk - napríklad kľúčové výňatky z rozhovoru. . Prináša kus textu do samostatného bloku. V predvolenom nastavení má zvýraznený fragment väčší ľavý okraj, ale v CSS môžete tiež zmeniť veľkosť, štýl písma a farbu textu. . Ďalšia značka, ktorá obsahuje informácie o autorovi vrátane odkazu.

Separačná linka

Jednoduchým znakom môže byť logické ukončenie veľkej priečky. neplatí pre rovnomerné značky. To znamenáktorý uzatvára prvok formátu, nie je potrebný. Použitím atribútu WIDTH môžete nastaviť oddeľovač kratší nastavením požadovanej veľkosti v pixeloch alebo ako percento šírky okna. Tým, že sa naučíte, ako správne používať značky na formátovanie textu v jazyku HTML, môžete nielen jednoducho čítať svoje články, ale aj zvýšiť efektivitu SEO.