Existujú univerzálne a neuniverzálne atribúty. Univerzálne sú vhodné pre takmer všetky visačky a neuniverzálne sú vhodné pre jednu alebo viac, ale nie všetky...

Atribút sa zapisuje do značky za jej hodnotu, ale pred lomenú zátvorku. Najprv sa umiestni samotný atribút, potom znamienko rovnosti a potom samotná hodnota v úvodzovkách. Vyzerá to takto:

Text

Čo vyplýva z tohto príkladu? Otvorili sme odsek a vo vnútri značky sme nastavili atribút align, ktorý je zodpovedný za zarovnanie textu. Ďalej vložíme znak „=“, čo znamená, že tomuto atribútu priradíme hodnotu. Ďalej v úvodzovkách píšeme práve túto hodnotu. V tomto prípade je to „stred“. To znamená, že text v tomto (a iba v tomto!) odseku bude vycentrovaný. Skúste to sami.

Nezabudnite však skontrolovať webovú stránku htmlbook. Tam určite nájdete, čo sa k čomu hodí. Toto je jednoducho referencia pre každého webového vývojára, najmä začiatočníka.

Zarovnať

Ako ste už pochopili, tento atribút znamená zarovnanie textu. Zvyčajne sa umiestňuje do tých značiek, ktoré sú zodpovedné za samotný obsah (text, obrázky atď.). Vo všeobecnosti to môžete vložiť do nadpisov (

,...,

), v odsekoch (

), obrázky , blokový prvok (

).

Možné hodnoty atribútov:

• doľava – zarovnanie doľava (predvolené)
• vpravo — pravé zarovnanie
• stred — zarovnanie na stred
• zarovnať - zarovnanie na celú šírku

Skúste cvičiť a uvidíte, ako sa zmení usporiadanie vašich prvkov.

Názov

Známe meno, však? Naozaj. Existuje taká značka a my ju umiestnime medzi A . Teraz však hovorím konkrétne o atribúte a hodí sa takmer ku každej značke, pretože je univerzálna. A je to potrebné ako nápoveda pri vznášaní sa. A ide o to, že túto indíciu napíšete sami. Vyzerá to asi takto:

Koľko je 5-3?

Čo tu vidíme? Na začiatku otvoríme odsek, potom si zapíšeme samotný atribút a priradíme mu hodnotu „Prečo si hlúpy? Budú 2." Ďalej napíšeme zobrazený text a na konci tag zatvoríme

.

Čo sa stane po tomto? Uložte dokument a presvedčte sa sami. Keď umiestnite kurzor myši na text, mal by sa zobraziť popis.

Viaceré hodnoty

Jeden tag môže obsahovať ľubovoľný počet atribútov. Hlavná vec je, že zodpovedajú tomuto označeniu. Tu je príklad:

Obsah

Ako vidíte, všetko je tu celkom jednoduché, stačí napísať všetky atribúty oddelené medzerou do jedného tagu. Od tento príklad vidíme, že obsah bude zarovnaný doprava a keď nad ním prejdeme kurzorom myši, zobrazí sa tooltip. Je to jednoduché. Dúfam, že je všetko jasné?

No a teraz sa vráťme k našej Lukomorye, ktorú sme robili na minulej lekcii.

Živý príklad

• Zarovnajte celý text v dokumente s „Lukomorye“ na stred (spolu s nadpismi),
• V nadpise prvej úrovne uveďte nápovedu „Autorom diela je A.S. Puškin"

Ak nemáte dokončený súbor z predchádzajúcej lekcie, vezmite si ho a vložte všetky potrebné atribúty, aby všetko fungovalo podľa úlohy.

A podľa tradície si na začiatku robte všetko sami. A ak to nefunguje, pozrite si kroky, ktoré som napísal nižšie.

Potom uložte html dokument a spustite ho. Pozrime sa, čo máme. Je všetko správne? Myslím, že by ti malo všetko vyjsť. Napriek tomu mám pocit, že mnohí z vás sú unavení z uvádzania atribútov v každom štvorverší. Ukážem vám, ako si tento proces uľahčiť.

Ak potrebujete pridať rovnaký atribút do nejakého veľkého segmentu, značka nám s tým pomôže

. DIV je jednoducho prázdny prvok bloku, ktorý slúži ako nejaký druh kontajnera pre zoskupenie. Môžete sem vložiť rôzne atribúty, aby ste ich mohli aplikovať na spoločný fragment. A ak vo všeobecnosti chcete použiť atribút na celý dokument, môžete ho vo všeobecnosti napísať do hlavnej značky .

Vo všeobecnosti v tomto prípade nemusíte vkladať atribút align="center" do každej značky. Musíte len dať

pred nadpisom a zatvorte ho s

na konci celého textu. No vo vnútri

nastavte align="center" , ale iba raz. Podľa môjho názoru je to oveľa rýchlejšie a pohodlnejšie a nakoniec sa stane to isté.

Tak ako? Rozumiete všeobecnému princípu? Len budeme pokračovať v štúdiu ešte viac. Hlavná vec je, že rozumiete princípu usporiadania značiek a atribútov. V prípade potreby položte svoje otázky. Rád na ne odpoviem.

Pre úplné zaškolenie v princípe tvorby webovej stránky odporúčam pozrieť si výborný video kurz “ HTML5 a CSS3 od začiatku až po profesionálov Naučíte sa tam HTML, CSS, naučíte sa rozmiestňovať vizitky, blogy a dokonca aj internetové obchody. Kurz je jednoducho úžasný pre začínajúceho webového vývojára.

Tak na dnes končím. Dúfam, že sa vám článok páčil a bol pre vás užitočný. Nezabudnite sa prihlásiť na odber aktualizácií môjho blogu, aby ste boli vždy informovaní o najzaujímavejších veciach a nezmeškali nové lekcie. No pre dnešok sa s vami lúčim. Prajem veľa úspechov pri zvládnutí látky. čau čau!

S pozdravom Dmitrij Kostin.

Prehliadač	internet Explorer			Netscape			Opera			Safari	Mozilla	Firefox
Verzia	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Podporované	Áno	Áno	Áno	Áno	Áno	Áno	Áno	Áno	Áno	Áno	Áno	Áno	Áno

Popis

Tag je kontajner na zmenu charakteristík písma, ako je veľkosť, farba a typ písma. Hoci túto značku stále podporujú všetky prehliadače, považuje sa za zastaranú a jej používanie sa odporúča opustiť v prospech štýlov.

Syntax

Text

Záverečná značka

Požadovaný.

možnosti

farba Nastavuje farbu textu. face Určuje typ písma. veľkosť Nastavuje veľkosť písma v konvenčných jednotkách.

Príklad 1: Použitie značky

P Prvé písmeno tejto vety je napísané písmom Arial, zvýraznené červenou farbou a zväčšené.

Popis parametrov tagu

parameter COLOR

Popis

Nastaví farbu textu vo vnútri kontajnera .

Syntax

...

Argumenty

Hodnotu farby je možné nastaviť dvoma spôsobmi.

1. Podľa mena

Prehliadače podporujú niektoré farby podľa ich názvu.

2. Podľa hexadecimálnej hodnoty

Na určenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už jej názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného. Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave. Aby nedošlo k zámene pri určovaní číselnej sústavy, pred hexadecimálne číslo vložte symbol hash #, napríklad #666999. Každá z troch farieb – červená, zelená a modrá – môže nadobúdať hodnoty od 00 do FF. Farebný symbol je teda rozdelený na tri zložky #rrggbb, kde prvé dva symboly označujú červenú zložku farby, stredné dva - zelenú a posledné dva - modrú.

Podobne ako CSS

Predvolená hodnota

Predvolená farba prehliadača.

Parameter FACE

Popis

Parameter face sa používa na určenie typu písma použitého pre text. Môžete uviesť niekoľko názvov písiem oddelených čiarkami. Ak sa v tomto prípade nenájde prvé zadané písmo, prehliadač použije ďalšie písmo v zozname.

Syntax

...

Argumenty

Ľubovoľný počet názvov písiem oddelených čiarkami. Univerzálne rodiny písiem:
serif - pätkové písma (starožitné), ako napríklad Times;
sans-serif - bezpätkové písma (písma bez pätiek alebo bez pätiek), typickým predstaviteľom je Arial;
kurzíva - kurzívne písma;
fantázia - ozdobné písma;
monospace - monospace fonty, šírka každého znaku v tejto rodine je rovnaká.

Podobne ako CSS

Predvolená hodnota

Predvolené písmo v prehliadači.

Parameter SIZE

Popis

Určuje veľkosť písma v ľubovoľných jednotkách od 1 do 7. Štandardne používaná priemerná veľkosť je 3. Veľkosť písma možno zadať ako absolútnu hodnotu (napríklad size="4" ) alebo ako relatívnu hodnotu (napríklad , size="+1" , size="-1" ). V druhom prípade sa veľkosť mení vzhľadom na základnú. Veľkosť písma je ovplyvnená nielen zadaným parametrom veľkosti, ale aj výberom typu písma. Písmo Arial teda vyzerá väčšie ako písmo Times a písmo Verdana je o niečo väčšie ako písmo Arial. Zohľadnite túto vlastnosť pri výbere písma a jeho veľkosti.

Syntax

...

Argumenty

Celé číslo od 1 do 7 alebo zmena hodnoty nahor alebo nadol pomocou symbolov + a -.

Element

Teraz už viete, že veľkosť textu zobrazeného na obrazovke môžete ovládať pomocou značiek A . Ako môže programátor zmeniť ďalšie parametre písma? Na to slúži smernica. .

Ako viete, veľkosť písma v štandarde HTML je označená podmienenými bodmi a celkovo ich je sedem. Nie všetky prehliadače však chápu pojem klauzula rovnako. Napríklad pri zobrazení dokumentu v prehliadači Microsoft Internet Explorer sú veľkosti všetkých fontov rozdielne, s výnimkou bodov 2 a 3 – zobrazujú sa fontom rovnakej výšky, ktorá sa rovná predvolenej hodnote a závisí od používateľské nastavenia prehliadača. V Netscape Navigatore sú položky 4 a 5, ako aj b a 7, zobrazené presne rovnako, majú väčšiu výšku ako položka 3, čo je normálna veľkosť písma.

POZNÁMKA Uvedomte si, že niektoré prehliadače, ako napríklad Microsoft Internet Explorer, umožňujú prispôsobiť text zobrazený v dokumentoch HTML zmenou predvolenej veľkosti písma prehliadača. To znamená, že parametre prvku , ako aj iné značky, ktoré riadia veľkosť písma, sa môžu meniť v závislosti od používateľských nastavení. Z rovnakého dôvodu efekt narušenia rozloženia stránky, ktorá je optimalizovaná na prezeranie v prehliadači s štandardné nastavenia. Môžete sa tomu vyhnúť tak, že všetky prvky dokumentu uzatvoríte do neviditeľnej tabuľky s pevnou šírkou určenou v pixeloch.

IN všeobecný pohľad syntax záznamu značky nasledovne:

text

Hodnota atribútu FACE je názov písma, ktoré plánujete použiť na zobrazenie textu v značkách . Ak napríklad namiesto parametra "hodnota!" vo vyššie uvedenom príklade nahradíte "Arial" označený značkou , text sa zobrazí týmto písmom.

UPOZORNENIE Pamätajte, že množina písiem nainštalovaných na počítačoch, ktoré navštívia vašu stránku, sa môže líšiť a ak zadáte v atribúte FACE značky Ak v systéme používateľa nie je k dispozícii písmo, text na obrazovke monitora používateľa sa stane nečitateľným. Aby ste sa vyhli chybám pri zobrazovaní textu v prehliadačoch pre koncových používateľov, používajte iba štandardné fonty, ktoré obsahuje väčšina prehliadačov: Arial a New Times Roman. Je lepšie tento atribút úplne vynechať, čo umožní prehliadaču nahradiť predvolené písmo pri interpretácii kódu.

Atribút SIZE určuje veľkosť písma, v ktorom sa má text zobraziť. Parameter tohto atribútu, v našom príklade označený ako „hodnota2“, môže byť opísaný buď v absolútnej alebo relatívnej hodnote. Absolútna hodnota sa vzťahuje na použitie celého čísla v rozsahu od 1 do 6, ktoré udáva výšku písma v bodoch. Relatívna hodnota, označená celým číslom so znamienkom plus alebo mínus (napríklad +2 alebo -1), je počet bodov, ktoré by sa mali pripočítať alebo odčítať od predvolenej veľkosti písma používanej prehliadačom. Áno, záznam označuje, že veľkosť textu označeného takouto značkou bude o jeden bod väčšia ako normálny text dokumentu.

Namiesto hodnoty atribútu COLOR sa nahrádza buď digitálny kód požadovanej farby alebo symbolický štítok označujúci túto farbu.

Je zrejmé, že pri použití značky ktorýkoľvek z jeho atribútov možno vynechať. Príkladom takéhoto príkazu môže byť nasledujúci riadok HTML kódu:

úryvok textu

POZOR Pamätajte, že niektoré staršie prehliadače nepodporujú smernicu . Medzi nimi je textový prehliadač pre platformy kompatibilné so systémom UNIX s názvom Lynx.

Obsah

Zdalo by sa, prečo poznať HTML tagy pre text, ak teraz takmer každý admin panel má vhodný ten, ktorý ich nastavuje automaticky?

Faktom je, že formátovanie obsahu na webovej stránke je zásadne odlišné od práce v kancelárskych aplikáciách. Tu nestačí len dať textu atraktívny vzhľad, pretože od správneho dizajnu závisí nielen zobrazenie webovej stránky, ale aj jej propagácia vo vyhľadávačoch.

HTML tagy a atribúty: Základná syntax

Akýkoľvek text má skrytý kód, ktorý počítaču „vysvetlí“, čo a ako má zobraziť na obrazovke. Všetky informácie sa zaznamenávajú pomocou súboru univerzálnych prvkov.

Textové značky HTML sú v podstate príkazy, ktoré pridávajú alebo menia určité bloky na stránku. vzhľad. Správny formát záznamu vyzerá takto:

Upozorňujeme, že nie všetky značky sú spárované. Napríklad,
(preskočenie riadku) príp

---

(pridanie vodorovnej čiary) nie je potrebné uzatvárať vôbec.

Prečo nemôžete skopírovať články z Wordu a iných programov do editora webových stránok

Aj keď moderné kancelárske programy používať rovnaké HTML tagy pre text, v 99% prípadov je natívny kód pre webové stránky nepoužiteľný. Aj keď sa dokument v samotnej aplikácii zobrazuje normálne, po vložení na webovú lokalitu sa formátovanie môže stratiť. Navyše kvôli veľká kvantita extra tagy a atribúty, vyhľadávače nedokážu adekvátne analyzovať obsah stránky. Čo zase sťažuje propagáciu vášho zdroja.

Ak chcete získať čistý a relevantný kód, musíte najskôr vymazať text značiek HTML, ktoré vytvorili bežný redaktor. Existuje niekoľko spôsobov, ako to urobiť:

1. „Spustite“ článok cez Poznámkový blok a až potom ho vložte na stránku. Aplikácia vymaže všetky HTML, takže potom budete musieť znova formátovať text (pomocou nástrojov editora alebo manuálne).
2. Píšte a publikujte články pomocou LiveWriter. Populárny editor blogy okamžite vygenerujú správny kód. A na samostatnej karte môžete vidieť, ako bude text na stránke vyzerať.
3. Použite HTML Cleaner. Táto online služba neničí celý kód, ale iba nepotrebné fragmenty. Pomocou filtrov si vyberiete, ktoré značky chcete uložiť. Existuje aj mocný vizuálny editor pre formátovanie, ktoré do kódu pridáva už optimalizované príkazy.

odseky

Tento prvok je prítomný takmer vo všetkých článkoch. Každý odsek by sa mal nachádzať vo vnútri takéhoto kontajnera – to zjednodušuje formátovanie a umožňuje zachovať jednotný štýl na všetkých stránkach webu. Pre pohodlie štítok

Vždy píšte s Nový riadok.

Zarovnanie

Samostatný HTML tag "Text Alignment" sa už dlho nepoužíva. Namiesto toho bol vytvorený všeobecný atribút ALIGN. Ak chcete zmeniť polohu textového bloku na stránke, musíte vybrať jednu z 3 hodnôt - CENTER, RIGHT alebo LEFT. Rovnakým spôsobom môžete nastaviť zarovnanie pre ďalšie prvky, napríklad nadpisy.

V niektorých situáciách sa na zarovnanie používajú iné značky, napríklad pomocou prvku môžete umiestniť polohu

.... Prečo je užitočná samostatná značka? Na rozdiel od atribútu funguje s akýmkoľvek obsahom vrátane fotografií, videí, blesku atď.

Nadpisy a podnadpisy

Systém podnadpisov umožňuje vytvárať logickú štruktúru obsahu. Keď je text rozdelený do zmysluplných blokov, čitateľ sa oveľa ľahšie sústredí a absorbuje nové informácie. Vyhľadávače tiež analyzujú nadpisy, aby pochopili, na aké dopyty propagovať stránku. To je dôvod, prečo SEO experti odporúčajú používať v nich aktuálne kľúčové slová.

HTML používa šesť úrovní podnadpisov – od

predtým

. V tomto systéme existuje jasná hierarchia:

• ...

  . Hlavný článok, produkt v internetovom obchode atď.). V texte môže byť len jeden

  . Spravidla obsahuje hlavné kľúčové slovo.

• ...

  . Podnadpisy druhej úrovne rozdeľujú text do zmysluplných blokov. Ak napríklad hodnotíte notebooky, môžete urobiť niekoľko

  s názvami rôznych modelov.

• ...

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

  je tiež rozdelená na malé bloky. V našom príklade by to mohli byť hodnotiace kritériá – „Výkon“, „Pamäť“, „Video karta“ atď. pre každý model.

• ,

  ,

  . V praxi sú veľmi zriedkavé. Ale všeobecný princíp je rovnaký – mali by byť „vnorené“ do bloku s podnadpisom najvyššej úrovne.

Uistite sa, že zachovávate správnu hierarchiu. Ak sa vrátime k nášmu príkladu, znamená to, že nemôžete okamžite zadať názvy modelov ako

alebo

. A ešte viac použite podnadpisy rôznych úrovní pre bloky s homogénnym významom (napríklad zvýraznite laptop, ktorý sa umiestnil na poslednom mieste v rebríčku pomocou

).

Tu je diagram, ktorý vám pomôže okamžite pochopiť a zapamätať si správnu štruktúru nadpisov v HTML.

zoznamy

Všetky zoznamy a pokyny je lepšie formátovať vo forme zoznamov pomocou špeciálnych značiek HTML pre text ( typická chyba- len pár odsekov

ktoré začínajú spojovníkom alebo číslom).

Štruktúra takýchto blokov je veľmi jednoduchá. Najprv určíme typ zoznamu – odrážkový alebo očíslovaný.

Všetky prvky sú medzi otváracou a zatváracou značkou. Každá položka zoznamu začína na novom riadku a má formát . Počet prvkov nie je obmedzený.

Voľba a jej vlastnosti

Čo je možné zmeniť pomocou tohto písma a farby - a bez pridávania nových tried do CSS. To je veľmi výhodné, keď potrebujete zvýrazniť iba jednu vetu alebo fragment.

má niekoľko atribútov:

• Tvár. Umožňuje zmeniť písmo textu. Môžete uviesť niekoľko možností oddelených čiarkami (Tahoma, Verdana). Ak používateľ nemá nainštalované prvé písmo, systém jednoducho použije alternatívu.
• Veľkosť. Ak chcete text zväčšiť alebo zmenšiť, zadajte hodnotu medzi 1 a 7 do úvodzoviek.
• Farba. V závislosti od prevedenia si môžete vybrať jeden zo štandardných odtieňov (červená, zelená, modrá) alebo zadať kód ľubovoľnej farby podľa vlastného výberu.

Nepoužívajte odseky naformátované pomocou , namiesto podnadpisov. Je lepšie nastaviť rovnaké parametre dizajnu so správnou značkou.

Spôsoby zvýraznenia textu

Monotónny text je únavný, dokonca rozčlenený na odseky. Na upútanie pozornosti a vzbudenie záujmu čitateľa sa odporúča kľúčové body zvýrazniť graficky. Tu je niekoľko príkazov, ktoré vám pomôžu zvládnuť túto úlohu.

... . Veľmi populárny HTML tag. Tučný text okamžite upúta, a preto je vhodné ho použiť na zvýraznenie dôležitých bodov a faktov.

Mnoho ľudí si mýli značky A . Neexistuje žiadny vizuálny rozdiel, ale fungujú inak. Prvý jednoducho mení vzhľad textu a druhý slúži ako „index“ a zvýrazňuje najdôležitejšie fragmenty (tematické Kľúčové slová a frázy pre SEO).

... . Elegantná a prísna kurzíva je ideálna pre dizajn vedeckých výrazov, cudzích slov a rôznych úvodzoviek. V serióznych publikáciách sú názvy umeleckých diel zvýraznené aj kurzívou.

... . Snáď žiadna iná HTML značka nespôsobila toľko kontroverzií. Podčiarknutie textu sa používa zriedka, pretože túto metódu Zvýraznenia boli historicky priradené k hypertextovým odkazom. Ak používate v článkoch upozorňujeme, že je to vhodné len pre krátke fragmenty – nie viac ako 1 riadok.

... . Zaujímavá značka, ktorá vám umožní urobiť časť veľmi relevantnou v reklame - napríklad zdôrazniť kontrast medzi starými a novými cenami.

... . Najjednoduchší spôsob, ako zväčšiť veľkosť písma bez akýchkoľvek ďalších možností.

... . Funguje na rovnakom princípe ako predchádzajúci tag. Text umiestnený vo vnútri je oproti hlavnému zmenšený.

^... . Správny názov pre tento formát je horný index. Táto značka je určená hlavne pre matematické tituly a poznámky pod čiarou. Zmenší veľkosť písma a presunie vybratý text nahor.

_... . Dolný indexčasto sa vyskytujú v rôznych vzorcoch. Vybraný fragment sa nachádza pod hlavným textom.

Zmysluplné nádoby

Keďže niektoré bloky sa našli v mnohých textoch, začali sa pre ne vytvárať špeciálne značky. To zjednodušuje formátovanie, pretože ak má každý typ obsahu vlastnú sadu štýlov, stačí zvýrazniť časť textu a uviesť, aké informácie obsahuje.

... . Značka na pridávanie počítačových kódov. Nevyhnutné v článkoch o programovaní s príkladmi - príkazy sa nevykonávajú, ale zobrazujú sa ako čistý text.

... . Určené na formátovanie citátov – napríklad kľúčových úryvkov z rozhovoru.

. Umiestňuje časť textu do samostatného bloku. V predvolenom nastavení má výber viac ľavého výplne, no v CSS môžete zmeniť aj veľkosť, štýl písma a farbu textu.

...

. Dodatočná značka, ktorý obsahuje informácie o autorovi vrátane odkazov.

Demarkačná čiara

---

Na označenie logického konca veľkého úseku možno použiť jednoduchú čiaru.

---

sa nevzťahuje na spárované značky. To znamená, že uzatvárací prvok formátunepotrebné.

Pomocou atribútu WIDTH môžete oddeľovač skrátiť zadaním vhodnej veľkosti v pixeloch alebo percentách šírky okna.

Keď sa naučíte správne používať značky na formátovanie textu v HTML, uľahčíte si nielen čítanie článkov, ale aj zvýšite efektivitu SEO.