Dobrý deň, milí čitatelia blogu! Tento článok bude hovoriť o značky na formátovanie textu. Výraznými príkladmi je zvýraznenie textu tučným písmom alebo kurzívou. Zvážime aj vplyv niektorých značiek na vnútornú optimalizáciu stránky a pravidlá ich písania. O tom si môžete prečítať v článku nižšie. Mimochodom, podobné prvky textového dizajnu nájdete v mnohých textových editoroch, napríklad vo Worde.
Tagy sú rozdelené do 2 typov: blokové a vložené. Pri použití prvého môžete zmeniť obsah časti textu (riadky, jednotlivé fragmenty alebo slová) a tie druhé sú . Formátovacie značky, ktorým sa budeme venovať v tomto článku, sú prevažne vložené.
Pravidlá a poradie písania značiek
Už viete, čo sú otváracie a zatváracie značky. Ak nie, prečítajte si článok na samom začiatku tohto materiálu. Stručne povedané, existujú dva typy značiek: jednoduché (napríklad zalomenie riadku) a kontajner (spárovaný). Takže všetky značky formátovania textu sú spárované. To znamená, že každý prvok má otváraciu a zatváraciu značku a zvýraznenie musí byť umiestnené medzi nimi. Správny výber frázy by vyzeral napríklad takto: Vybraný úryvok
Keď prehliadač spracuje tento fragment, zobrazí sa nasledujúci text: Vybraný fragment. Mimochodom, všetky značky sa nezobrazujú v kanáli RSS ().
Hlavnou vecou pri písaní značiek je nezabudnúť ich zavrieť. V opačnom prípade bude všetok text na stránke tučný (v príklade so značkou ). Existujú však prípady, keď potrebujete vybrať určitý fragment súčasne tučným písmom aj kurzívou. Neexistuje však žiadna značka, ktorá vykonáva túto akciu. Z tejto situácie existuje len jedna cesta: použiť dve značky súčasne. Nezáleží na tom, v akom poradí ich použijete. Preto píšte text so značkami, ako je tento:
Vybraný úryvok
alebo takto:
Vybraný úryvok
Stále dostanete Vybraný úryvok kurzíva a tučné písmo zároveň. Je však vhodnejšie použiť prvú možnosť, pretože pôvodne bola jediná a správna. Tiež nezabudnite, že každý prehliadač môže spracovať značky inak (), v závislosti od nastavení. Teraz prejdime k samotným formátovacím značkám.
Tvorba textu tučným a kurzívou - značky , , a
Najpopulárnejšie značky formátovania textu - zvýraznenie tučný a kurzívou. Zvyčajne sa používajú na prisúdenie dôležitosti akémukoľvek fragmentu. Prvý prípad slúži na výber fragmentu obsahujúceho užitočná informácia alebo kľúčové slová. Kurzíva slúži na rovnaký účel ako tučný text, ale informácia je menej dôležitá, pretože kurzíva je na pozadí hlavného textu menej viditeľná ako tučný text.Najprv zvážte urobiť text tučným písmom. Pre túto akciu sa používajú dve značky − a . Rozdiely v vzhľadč. Hoci vzhľadom na to, že každý prehliadač môže interpretovať každý prvok odlišne, mali by ste vidieť určité rozdiely. Takto vyzerá text v značkách a vo forme už spracovanej prehliadačom:
Text v silných značkách
Text v značkách b
A takto vyzerajú tieto dva riadky v zdrojovom kóde stránky:
Text v silných značkách Text v značkách b
Rovnakú situáciu môžeme pozorovať aj v prípade značky kurzívou a . Pokúste sa nájsť rozdiely medzi týmito dvoma príkladmi:
Text v em tagoch
Text v značkách I
ale zdroj:
Text v em tagoch Text v značkách I
Takže uvažované výberové značky uvedené tučným písmom a kurzívou sa v skutočnosti nelíšia, ale prečo potom potrebujeme napríklad značku ak existuje ? Koniec koncov, posledný obsahuje iba jeden znak (nepočítajúc zátvorky), a preto sa ľahšie píše. A ide o to, že značky a ovplyvniť . Ak kľúčové slová obklopíte týmito tagmi, priaznivo to ovplyvní propagáciu stránky.Hlavne to nepreháňať – text by mal mať maximálne 5% tučného textu v tagu a rovnaké množstvo kurzívy v značke .
Ak chcete len zvýrazniť nejaký bod v texte, použite značku alebo . Vo všeobecnosti si myslím, že aj vyhľadávače považujú text v týchto značkách za dôležitejší, ale ďalej interná optimalizácia stále majú menší účinok ako a .
Zvýraznite textové značky lomky − , a
Teraz sa pozrime na niekoľko značiek, ktoré pri zdobení textu používajú ťah. Pre vás najznámejší textové editory — tag
alebo podčiarknite. Tento tag neovplyvňuje hodnotenie (pokiaľ viem), ale pomôže zvýrazniť nejaký text a zamerať sa naň. Uviedol som príklad použitia tohto tagu trochu vyššie. Ďalšie dve podobné značky - a . Oba plnia funkciu prečiarknutého textu. Túto značku môžete použiť v akejkoľvek situácii: ak aktualizujete dokument (alebo skôr jeho časť), môžete prečiarknuť starý a pridať nový; ak sa chystáte napísať niečo, čo sa odchyľuje od témy materiálu; niečo, čo nespĺňa morálne a etické normy.
Rozdiely medzi týmito dvoma značkami sú len v nich písanie, v dôsledku čoho je vhodnejšie použiť prvý, pretože po prvé, je pohodlnejšie písať a po druhé, na vašej stránke bude menej HTML kódu a vyhľadávače to milujú.
Tag a atribúty - nastavenie písma textu
Teraz zvážte značku, ktorá sa nepoužíva bez atribútov. Pomocou neho môžete nastaviť parametre pre konkrétny text. Vo všeobecnosti je teraz vhodnejšie použiť (kaskádové štýly), pretože pomocou nich môžete výrazne zmenšiť celý HTML kód stránky. Zvážte teda rovnakú značku . Pre neho existuje všetko tri atribúty:
- tvár- samotné písmo. Napríklad Arial, Courier alebo Verdana. Môžete uviesť niekoľko, pretože. nie všetci používatelia majú rozsiahlu sadu písiem a napísaním niekoľkých písiem do atribútu tváre si prehliadač bude môcť vybrať, ktoré z nich použije, alebo skôr, ktoré sa nachádza v systéme;
- veľkosť je atribút, ktorý určuje veľkosť textu. Môže byť vyjadrený v ľubovoľných jednotkách aj v pixeloch;
- farba- farba textu. Tento atribút je možné použiť v kódoch farieb HTML aj vo verbálnych kódoch. Prvé vyzerajú ako #FFFFFF (kde F je ľubovoľné číslo alebo písmeno od A do F), zatiaľ čo druhé sú napísané jednoduchými slovami(napríklad červená - červená).
Takto vyzerá text v značke pomocou každého atribútu:
Tento text má veľkosť 6 pixelov
Tento text je červený Tento text je napísaný písmom Arial Tento text je červený a má veľkosť 5 pixelov.A tu je to, čo uvidíte po spracovaní napísaného kódu: 
Prvky návrhu blokového textu – nadpisy -, odstavec
, odstavec
Nakoniec sa pozrieme na blokové prvky, ktoré sú použité takmer v každom dokumente. Sú to značky nadpisov a odsekov. Uvažujme o prvom. Nadpisy sa dodávajú v 6 typoch a každý má svoj vlastný štítok. Každý druh nosí len to svoje sériové číslo a napísané štítkami
, ,..., . Takto vyzerajú všetky hlavičky pri spracovaní:
. Takto vyzerajú všetky hlavičky pri spracovaní:
Číslo za nadpisom zodpovedá číslu v značke
Teraz si povedzme o značke výberu odseku
Funkciou tohto tagu je oddeliť text medzi iný podobný text prázdnym riadkom. Ak sa pozriete na zdrojový kód akéhokoľvek dokumentu, môžete vidieť nasledovné:
Zelené obdĺžniky obsahujú jeden odsek, červené obdĺžniky ďalší. A takto vyzerá tento kód po spracovaní prehliadačom (šípka ukazuje na prázdny riadok):
Výsledkom je pomerne zreteľné oddelenie jedného odseku od druhého, čo je výhodné - čítanie sa stáva pohodlnejším.
Toto je koniec článku o formátovacie značky dokumentu. Je ich oveľa viac, ako som opísal v tomto článku. Niektorým je len potrebné povedať dosť veľa, v dôsledku čoho im budú venované samostatné články s úplnou recenziou.!
V aktuálnom článku si povieme, ako zvýrazniť text. kurzívou HTML. Rovnako ako pri tučnom texte, kurzíva môže byť vytvorená tromi spôsobmi:
- Tag i HTML;
- Tag em HTML;
- Vlastnosť CSS štýl písma.
Uvažujme o všetkých troch možnostiach, ako urobiť kurzívu v HTML, diskutovať o jemnostiach tohto problému a ktoré metódy sú v určitých situáciách pohodlnejšie a správnejšie.
Kurzíva: značka
Tag i(kurzíva), analogicky so značkou b pre tučný text fyzicky zvýrazní text kurzívou (to znamená, že sa zmení iba štýl textu). Aplikácia značky i:
Tvorca webových stránok "Nubex"
Požadovaná časť textu sa teda umiestni medzi značky .
Kurzíva: značka
Hoci tag i zostáva v platnosti, z hľadiska optimalizácie stránky je lepšie použiť značku em na zvýraznenie logicky dôležitých častí textu. To znamená, že vyhľadávacie roboty berú do úvahy dôležitosť textu umiestneného medzi značkami. :
Tvorca webových stránok "Nubex"
výsledok:
Tvorca webových stránok "Nubex"
Ale nezabudnite, že text uzavretý v značkách i a em, hoci sa zobrazujú takmer rovnakým spôsobom (vo všetkých moderných prehliadačoch), vo svojej podstate nie sú úplne identické, ako je uvedené vyššie. Preto musíte podľa potreby použiť značky: tag em HTML orámuje dôležité časti textu a použije vizuálnu kurzívu pomocou značky i alebo CSS štýly. Pozrime sa teraz na používanie štýlov CSS na kurzívu.
Kurzíva s CSS
Ak chcete nastaviť štýly zobrazenia písma v CSS, použite vlastnosť štýl písma, ktorý môže nadobúdať hodnoty: šikmé(text kurzívou), kurzíva(kurzívou) a normálne(bežné písmo).
Stojí za to si to pripomenúť kurzíva písmo a naklonený v podstate nie sú rovnaké. Kurzíva je špeciálne písmo, ktoré je analogické k ručne písanému textu a naklonený vytvorené naklonením bežného písma doprava.
Použitie atribútu štýl písma na praxi:
Naše stránky sú naozaj obrovský krok vo vývoji webu.
Robíme to naozaj kvalitu stránky.
Musíte si však uvedomiť, že niektoré prehliadače píšu s vlastnosťou štýl písma: šikmé; nemôže byť interpretovaný ako kurzíva, ale ako kurzíva.
Teraz budeme študovať hlavné značky. Začnime s tým, aké značky sú potrebné na stránke a tvoria jej štruktúru.
Blokovať . Štruktúra najjednoduchšej stránky
Stránka webu je normálna textový súbor s predĺžením .html. V tomto súbore je uložený text HTML stránky spolu so značkami. Tento súbor musí mať nasledujúce značky: tag , ktorý by mal obsahovať text celej stránky (všetko, čo je napísané mimo tohto tagu, bude prehliadač ignorovať) a v jeho vnútri by mali byť ešte dva tagy: tag
pre obsah a značku stránky - pre hlavný text, ktorý je viditeľný na obrazovke prehliadača.V obsahu služby, ktorý sa nachádza vo vnútri značky
, prichádza veľa rôznych vecí, ale zatiaľ potrebujeme len dve z nich. Toto je značkaAko tento príklad vyzerá v prehliadači, pozrite si tento odkaz.
Myslím, že po prečítaní základnej štruktúry stránky máte stále nejaký zmätok v tom, ako to celé vyzerá v praxi. Natočil som preto špeciálne video, v ktorom vám ukážem, ako si spraviť svoju prvú HTML stránku a spustiť ju v prehliadači (v ňom budem hovoriť aj o názve stránky, o kódovaní, o dizajne kódu). Pozrite si to a až potom pokračujte v čítaní:
Teraz, keď som sa naučil tvoriť jednoduché stránky, prejdeme na informácie o užitočných značkách, ktoré je možné použiť v rámci značky
. Budú to značky pre odseky, nadpisy, zoznamy, odkazy a ďalšie užitočné veci. Tak poďme na to.Blokovať . odseky
Jedným z hlavných prvkov stránky sú odsekov. Možno ich prirovnať k odsekom v knihe – každý odsek začína na Nový riadok a má takzvanú červenú čiaru (to je vtedy, keď sa prvý riadok textu odseku odsadí mierne doprava). V predvolenom nastavení nie je žiadna červená čiara, ale dá sa to ľahko urobiť (o tom neskôr).
Odsek je vytvorený pomocou značky
Touto cestou:
Toto je odsek.
Toto je ďalší odsek.
A ešte jeden odsek.
Toto je odsek.
Toto je ďalší odsek.
A ešte jeden odsek.
Blokovať . Nadpisy h1, h2, h3, h4, h5, h6
Okrem odsekov sú na stránke dôležité titulky. Možno ich prirovnať aj k nadpisom z knihy – každá kapitola má svoj nadpis (názov tejto kapitoly) a je rozdelená na odseky, ktoré majú aj svoje nadpisy. No, hlavný text stránky je v odsekoch.
Vytvárajú sa titulky pomocou značiek
,
,
,
,
,
. Majú rôzny stupeň dôležitosti. V názve h1 by mal mať názov celej HTML stránky, v h2- titul bloky stránky, v h3- názov podblokov atď.
,
,
,
. Majú rôzny stupeň dôležitosti. V názve h1 by mal mať názov celej HTML stránky, v h2- titul bloky stránky, v h3- názov podblokov atď.
,
. Majú rôzny stupeň dôležitosti. V názve h1 by mal mať názov celej HTML stránky, v h2- titul bloky stránky, v h3- názov podblokov atď.
Všetky nadpisy sú predvolene tučné a majú inú veľkosť (dá sa to zmeniť cez CSS, ale o tom neskôr). Pozrite si príklad:
Nadpis h1
nadpis h2
nadpis h3
nadpis h4
nadpis h5
nadpis h6
Toto je prvý odsek.
Toto je druhý odsek.
Toto je tretí odsek.
Takto bude kód vyzerať v prehliadači:
Nadpis h1
nadpis h2
nadpis h3
nadpis h4
nadpis h5
nadpis h6
Toto je prvý odsek.
Toto je druhý odsek.
Toto je tretí odsek.
Blokovať . Mastný
Už viete, aké sú predvolené hlavičky mastný. Môžete však urobiť aj obyčajný text tučným písmom – stačí ho vložiť do štítku . Pozrite si príklad:
Toto je obyčajný text a toto je mastný text.
Takto bude kód vyzerať v prehliadači:
Toto je obyčajný text a toto je mastný text.
by mal byť použitý v rámci inej značky, ako je napríklad odsek. V tomto prípade odseky vytvárajú celkovú štruktúru stránky (odseky a nadpisy) a značku b Zvýrazňuje jednotlivé časti textu tučným písmom.
Blokovať . Kurzíva
Okrem mastných môžete aj vy kurzíva pomocou značky :
Toto je obyčajný text a toto je kurzíva text.
Takto bude kód vyzerať v prehliadači:
Blokovať . zoznamy
Spolu s odsekmi a nadpismi je tu ďalší dôležitý prvok stránky – tento zoznamy. Takéto prvky poznajú snáď všetci používatelia internetu. Predstavujú vymenovanie niečoho (zoznamu) bod po bode. Vedľa každej položky zoznamu je zvyčajne vyplnený kruh (tzv značka zoznam).
Zoznamy sa vytvárajú pomocou značky
- , ktorý musí obsahovať značky
- . Tag ul nastavuje samotný zoznam a v značkách li mali by sa stanoviť položky zoznamu (to znamená, že jedno li zodpovedá jednej značke zoznamu). Majte na pamäti, že značky li nemožno použiť samostatne. Pozrite si príklad:
Toto je titulný názov - Prvá položka v zozname.
- Druhá položka na zozname.
- Tretia položka na zozname.
Takto bude kód vyzerať v prehliadači:
- Prvá položka v zozname.
- Druhá položka na zozname.
- Tretia položka na zozname.
Zoznamy vytvorené pomocou značky ul, sa volajú neusporiadaný zoznamy. Toto meno im bolo dané, pretože existujú aj také objednal zoznamy, ktoré budú mať namiesto bodkových značiek číselné značky. Takéto zoznamy majú namiesto značky ul značku
- a položky takýchto zoznamov sa vytvárajú aj prostredníctvom značiek li.
- Prvá položka v zozname.
- Druhá položka na zozname.
- Tretia položka na zozname.
- Prvá položka v zozname.
- Druhá položka na zozname.
- Tretia položka na zozname.
- farba - nastavuje farbu textu;
- veľkosť – veľkosť písma v ľubovoľných jednotkách.
- face – používa sa na nastavenie rodiny písma textu, ktorý sa má použiť vo vnútri značky . Podporované sú viaceré hodnoty oddelené čiarkami.
- - nastaví tučné písmo v html. Tag podobný v činnosti ako predchádzajúci;
- - veľkosť je väčšia ako predvolená;
- - menšia veľkosť písma;
- - kurzíva (kurzíva). Podobná značka ;
- — text s podčiarknutím;
- prečiarknutý;- — zobrazenie textu iba malými písmenami;
- - veľkými písmenami.
- V pixeloch;
- V absolútnom vyjadrení ( xx-small, x-small, small, medium, large);
- V percentách;
- V bodoch (pt).
- normálny - normálny pravopis;
- kurzíva - kurzíva
- šikmé - písmo so sklonom doprava;
- zdediť – zdedí pravopis nadradeného prvku.
- tučné - nastaví písmo html na tučné;
- tučnejšie - tučnejšie v porovnaní s normálom;
- svetlejšie - menej nasýtené v porovnaní s normálom;
- normálny - normálny pravopis;
- 100-900 – nastavuje hrúbku písma v číselnom vyjadrení.
- titulok - pre tlačidlá;
- ikona - pre ikony;
- menu - menu;
- message-box - pre dialógové okná;
- malé titulky - pre malé ovládacie prvky;
- stavový riadok - písmo stavového riadku.
Urobme si usporiadaný zoznam pomocou značky ol:
Toto je titulný názov Takto bude kód vyzerať v prehliadači:
Výhodou objednaných zoznamov je, že môžem na ľubovoľné miesto vložiť novú položku zoznamu - a číslovanie sa prestaví samo (teda nemusím ho sledovať v prípade akýchkoľvek zmien, ako by to bolo, keby som zariadil ručne).
Blokovať . Odkazy
Odkazy sú prvky, ktoré robia internet internetom. Kliknutím na odkazy sa môžeme presúvať z jednej stránky webu na druhú. Ak by neexistovali, internet by bol len zbierkou stránok, ktoré spolu nemajú nič spoločné.
Toto je titulný názov Odkaz na stránku phphtml.net.Takto bude kód vyzerať v prehliadači:
Odkazy sú absolútne a príbuzný, navyše môžu viesť na vašu stránku aj na niekoho iného. Tieto ťažké chvíle je lepšie ukázať, ako ich opísať textom, preto som pre vás natočil nasledujúce video. Pozrite si to a až potom pokračujte v čítaní:
Blokovať . snímky
Poďme teraz zistiť, ako umiestniť obrázok na stránke na vašom webe. Na to slúži značka.
, ktorý má povinný atribút src, ktorý ukladá cestu k súboru obrázka.
Ako to funguje, pozrime sa na nasledujúci príklad:
Toto je titulný názov 
Takto bude kód vyzerať v prehliadači:
Upozorňujeme, že značka
nevyžaduje uzatváraciu značku.
Blokovať . Odkazy vo forme obrázkov
Odkaz môže byť nielen text, ale aj obrázok- na to stačí tag
vložte štítok , ako je to urobené v nasledujúcom príklade. Kliknite na obrázok - a budete nasledovať odkaz na webovú stránku phphtml.net (pre návrat ku knihe neskôr kliknite na tlačidlo "späť" v prehliadači):
Toto je titulný názov
Takto bude kód vyzerať v prehliadači:
Blokovať . Zalomenie riadku
Pamätajte si, čo sa stane, ak vytvoríte napríklad dva odseky vedľa seba - v tomto prípade bude text, ktorý sa nachádza v každom z nich, začínať Nový linky.
Pozrime sa na to na nasledujúcom príklade:
Toto je titulný názov Toto je prvý odsek.
Toto je druhý odsek.
Takto bude kód vyzerať v prehliadači:
Toto je prvý odsek.
Toto je druhý odsek.
Sú však situácie, keď by sme chceli mať jeden odsek, no časť textu v ňom začína na novom riadku. Prečo by to mohlo byť potrebné? Napríklad chcem napísať báseň, ale nechcem rozdeliť každý jej riadok na samostatný odsek, pretože by to nebolo veľmi logické.
Ak to chcete urobiť, na miesto, kde by mal byť koniec riadku, napíšte značku
. Upozorňujeme, že táto značka je špeciálna a nemá uzatváraciu značku.Pozrime sa, ako to funguje na nasledujúcom príklade:
Toto je titulný názov Toto je prvý riadok textu
a toto je ta druha.Takto bude kód vyzerať v prehliadači:
Toto je prvý riadok textu
a toto je ta druha.Blokovať . HTML komentáre
Takmer všetky programovacie jazyky majú niečo ako "komentáre".
V html hrá veľkosť písma dôležitú úlohu. Priťahuje pozornosť používateľa dôležitá informácia zverejnené na webovej stránke. Aj keď nie je dôležitá len veľkosť písmen, ale aj ich farba, hrúbka a dokonca aj rodina.
Značky a atribúty pri práci s html písmami
Hypertextový jazyk má veľkú sadu nástrojov na prácu s písmami. Koniec koncov, formátovanie textu je hlavnou úlohou html.
Dôvodom vytvorenia jazyka HTML bol problém zobrazovania pravidiel formátovania textu prehliadačmi.
Zvážte značky, ktoré sa používajú na prácu s písmami v html, a ich atribúty. Hlavným je tag . Pomocou hodnôt jeho atribútov môžete nastaviť niekoľko charakteristík písma:Je podporovaná kladná hodnota atribútu od 1 do 7.
Formátuje sa iba text, ktorý sa nachádza medzi časťami značky párového písma. Zobrazí sa zvyšok textu štandardné písmo predvolene nastavené.
Aj v html existuje množstvo párových značiek, ktoré definujú iba jedno pravidlo formátovania. Tie obsahujú:
Obyčajný text
Miniatúra
Miniatúra
Viac ako zvyčajne
Menej ako zvyčajne
Kurzíva
Kurzíva
S podčiarknutím
PrečiarknutýMožnosti atribútov štýlu
Okrem popísaných značiek existuje niekoľko ďalších spôsobov, ako zmeniť písmo v html. Jedným z nich je použitie atribútu generic style. Pomocou hodnôt jeho vlastností môžete nastaviť štýl zobrazenia písma:
1) font-family - vlastnosť nastavuje rodinu fontov. Je možné vymenovať viacero hodnôt.
Zmena písma v html na nasledujúcu hodnotu sa uskutoční, ak predchádzajúca rodina nie je nastavená na operačný systém užívateľ.Syntax zápisu:
font-family: font-name [, font-name[, ...]]
2) font-size - veľkosť je nastavená od 1 do 7. Toto je jeden z hlavných spôsobov, ako môžete zväčšiť písmo v html.
Syntax zápisu:font-size: absolútna veľkosť | relatívna veľkosť | hodnota | úrok | dediť
Môžete tiež nastaviť veľkosť písma:
Veľkosť písma: 7
veľkosť písma: 24px
Veľkosť písma: x-veľké
veľkosť písma: 200%
veľkosť písma: 24pt
3) font-style - nastavuje štýl písma. Syntax:
štýl písma: normal | kurzíva | šikmé | dediť
hodnoty:
Príklad, ako zmeniť písmo v html pomocou tejto vlastnosti:
štýl písma: zdediť
štýl písma: kurzíva
štýl písma:normálny
štýl písma:šikmý
4) font-variant - prevedie všetky veľké písmená na veľké. Syntax:
font-variant: normal | malé čiapky | dediť
Príklad, ako zmeniť písmo v html pomocou tejto vlastnosti:
font-variant:dediť
font-variant:normal
font-variant:malé veľké písmená
5) font-weight - umožňuje nastaviť hrúbku písania textu (sýtosť). Syntax:
váha písma: tučné|tučné|svetlejšie|normálne|100|200|300|400|500|600|700|800|900
hodnoty:
font-weight:bold
font-weight:bolder
váha písma:ľahšia
font-weight:normal
váha písma: 900
váha písma: 100
vlastnosť písma a farba písma html
Písmo je ďalšou vlastnosťou kontajnera. Interne kombinoval hodnoty niekoľkých vlastností určených na zmenu fontov. Syntax písma:
font: font-size font-family | dediť
Písma používané systémom v štítkoch na rôznych ovládacích prvkoch možno nastaviť ako hodnotu:
font:ikona
font: titulok
font:menu
font:správa-box
malý nadpis
font:stavový riadok
font:italic 50px bold "Times New Roman", Times, pätka
Ak chcete nastaviť farbu písma v html, môžete použiť vlastnosť color. Umožňuje vám nastaviť farbu, ako pomocou kľúčového slova, tak aj vo formáte rgb. A tiež vo forme hexadecimálneho kódu.
Aby naša WEB stránka vyzerala reprezentatívnejšie, rozdelíme text na odseky a zvýrazníme nadpis. HTML má 6 úrovní nadpisov sekcií dokumentu, očíslovaných od 1 do 6. Nadpisy sú deklarované dvojicou značiek s číslami zodpovedajúcimi úrovni, napr.
- nadpis sekcie prvej úrovne a - nadpis sekcie šiestej úrovne. Nadpisy sa od bežného textu líšia veľkosťou a šírkou písmen. Nadpis prvej úrovne h1 sa zvyčajne zobrazuje veľmi veľká potlač, zatiaľ čo nadpis h6 šiestej úrovne je veľmi malý.tituly
Nezamieňajte si názvy častí dokumentu s predtým diskutovaným názvom dokumentu, ktorý je definovaný prvkom
.Prvú vetu používame ako nadpis textu - Stačí ho obmedziť tagmi
a
.Vložte značky do textu súboru other.html
a
tak, že obmedzujú prvú vetu textu a tento kus kódu má nasledujúcu formu:Vitajte na stránke spoločnosti SD!
Pozrime sa na získaný výsledok.
Súbor uložte výberom príkazu z ponuky programu Poznámkový blok Súbor - Uložiť (Súbor - Uložiť).
Operáciu uloženia je potrebné vykonať vždy pred zobrazením dokumentu, pretože súbor otvorí na prezeranie načítaním do pamäte RAM počítača z disku. Ak po úprave HTML kódu súbor neuložíte, v prehliadači neuvidíte žiadnu konfiguráciu.
Obnovte okno prehliadača kliknutím na jeho tlačidlo na paneli úloh.
Stlačte tlačidlo F5 alebo tlačidlo Obnoviť na paneli nástrojov pracovného okna programu. Súbor other.html sa znova načíta a v okne prehliadača uvidíte, ako vyzerá nadpis prvej úrovne.
Pozrite sa, ako budú vyzerať názvy ďalších 5 úrovní, zmenou čísel v značkách: h2, h3 atď. Po každej konfigurácii nezabudnite uložiť súbor a obnoviť obrázok v okne prehliadača.
Po dokončení experimentov znova obnovte značky v súbore other.html
.Pomocou 6 úrovní nadpisov, ktoré poskytuje HTML, môžete vytvoriť ľahko čitateľný dokument s intuitívnou štruktúrou. Pamätajte, že váš dokument sa bude vždy čítať výrazne lepšie, ak bude mať presné členenie na sekcie a podsekcie.
Zarovnanie nadpisov
Štandardne je nadpis zarovnaný na ľavú stranu stránky. Ale môže byť aj zarovnaný vpravo alebo na stred. Na zarovnanie vpravo v značke
používa sa atribút align="right" a na centrovanie align="center". Povolené je aj zrejmé označenie zarovnania na ľavej strane - align="left".
Pridať k značke
atribút align="center" na vycentrovanie nadpisu. Tento prvok by mal mať nasledujúcu formu:
Vitajte na stránke spoločnosti SD!
V budúcnosti vám nebudeme pripomínať nutnosť uložiť súbor s úvodným kódom a aktualizovať obrázok v prehliadači pred prezeraním.
Ako urobiť text tučným v HTML
Teraz prejdime k zvyšku textu. Zväčšite jeho veľkosť a urobte text tučným kurzívou. Párové značky sa používajú na nastavenie tučného štýlu .
Prilepte súbor other.html otvorenie a zatváranie tagy tak, aby obmedzovali text Tu sa dozviete... Tento prvok by mal mať nasledovnú formu:
Ako urobiť text kurzívou v HTML
Štýl kurzívy sa nastavuje pomocou značiek .
Do počiatočného kódu vložte značku HTML a tak, aby upravený prvok mal nasledujúci tvar:
Tu sa dozviete o našej činnosti, o softvérových produktoch našej spoločnosti a o zariadeniach, ktoré vyrábame.
Prvky značiek môžu byť vnorené, ako v tejto štruktúre, kde je prvok … vnorené v prvku …. Moderné prehliadače dokážu správne spracovať vnorené značky. Preto sa musíte uistiť, že nie je porušený poriadok hniezdenia. Prehliadač bude zablokovaný, ak je vnorenie porušené. Napríklad nasledovné by bolo nesprávne: …. Hniezdenie je veľmi základnou súčasťou celkovej kultúry písania HTML kódu.
Ako urobiť text podčiarknutý v HTML
S pár značkami môžete nastaviť podčiarknutý štýl časti textu oddeleného týmito značkami a pomocou dvojice značiek - zobraziť text v ďalekopisnom písme.
Je potrebné poznamenať, že nedávno značka zjednodušené a podčiarknutie sa vykonáva pomocou štýlov. ekvivalent . Áno nový analóg vyzerá ťažkopádnejšie, ale bohužiaľ je pravdivejšie. Hlavná vec v tomto prospech je, že objemný variant je cross-browser, inými slovami, je vhodný pre všetky prehliadače, keď oba Nie všetky prehliadače podporujú.
Ako zvýšiť text v HTML
Teraz zväčšíme veľkosť písma textu. Dá sa to urobiť rôznymi spôsobmi.
značky zväčšiť veľkosť písma textu medzi nimi.
Pridajte značky na začiatok a koniec vyššie uvedenej časti kódu a takže prvok má nasledujúci tvar:
Tu sa dozviete o našej činnosti, o softvérových produktoch našej spoločnosti a o zariadeniach, ktoré vyrábame.
Používanie značiek môžete zmenšiť veľkosť písma textu v porovnaní s pôvodným písmom.
Ďalšou metódou určenia veľkosti písma sú značky. s atribútom size. Hodnoty tohto atribútu sú celé čísla od 1 do 7. Hodnota 1 zodpovedá najmenšej veľkosti písma a hodnota 7 zodpovedá najväčšiemu.
Použitie namiesto značiek zobraziť značky , pozrite sa, ako sa mení veľkosť písma textu s rôznymi hodnotami atribútu size - od 1 do 7.
Ako hodnotu pre atribút size môžete použiť aj čísla od 1 do 7 so znamienkom + (plus) alebo - (mínus). V tomto prípade sa veľkosť písma zodpovedajúcim spôsobom zväčšuje alebo zmenšuje v porovnaní s pôvodným písmom, napríklad so značkami zväčší veľkosť písma v porovnaní s aktuálnym o jednu úroveň. Skontrolujte.
Nastavte 5 ako hodnotu atribútu size pre príslušný text: . HTML kód pre tento kus by mal vyzerať takto:
Tu sa dozviete o našej činnosti, o softvérových produktoch našej spoločnosti a o zariadeniach, ktoré vyrábame..
V značkách atribút color možno použiť aj na určenie farby písma ohraničenej textovými značkami. Hodnoty tohto atribútu sú rovnaké ako pre predtým diskutované atribúty, ktoré popisujú farbu pozadia a textu dokumentu.
Štandardne je odsek s textom Here You'll Know... zarovnaný doľava. Vycentrujte ho vodorovne pomocou značiek
. Môžete tiež zarovnať odsek na pravú stranu strany pomocou značiek. alebo vľavo - pomocou značiek . Nalepovacie štítky
obmedziť ich na určený odsek. Všimnite si, že na vycentrovanie odseku sme použili značky
, na rozdiel od atribútu align="center", ktorý sme použili v značkách . Pozornosť! Pre značky 2010 ,
, , sa považujú za zastarané, a preto je potrebné používať analógy zo štýlov. To neznamená, že ich nemôžete použiť, ale ak môžete, skúste sa ich zbaviť. =
= = = =
Existuje aj veľké množstvo ďalších zastaraných značiek, ktoré nie je možné opísať v tomto článku, preto je lepšie sa okamžite oboznámiť so špecializovanými webovými stránkami o tejto problematike. Ale tie hlavné som tu zverejnil o niečo vyššie
Výberové kódy
Jazyk HTML umožňuje dva prístupy k výberu písma fragmentov textu. Na jednej strane môžete priamo naznačiť, že písmo v určitej časti textu môže byť tučné alebo kurzíva, inými slovami, je zrejmé, že naznačíte štýl písma textu, ako sme to urobili v tomto experimente. Na druhej strane je možné označiť akýkoľvek text ako nejaký logický štýl, ktorý je krajší ako zvyčajne, pričom tento štýl ponecháva prehliadač. Logický štýl tak ukazuje úlohu textu, napríklad jeho veľký význam v porovnaní s bežným textom alebo fakt, že ide o citát. Vo svojej vlastnej práci môžete použiť nasledujúce značky, ktoré definujú logické štýly. Pozrite sa, ako fungujú rôzne prehliadače.
- používa sa na definovanie slova. Text sa štandardne zobrazuje kurzívou.
- na zvýraznenie slov a zosilnenie. Text sa štandardne zobrazuje kurzívou.
- na zvýraznenie názvov kníh, filmov, predstavení atď., ktoré sa štandardne zobrazujú kurzívou.
- pre fragmenty programového kódu. Zobrazené na displeji písmom s pevnou šírkou.- používa sa pre text, ktorý používateľ zadáva z klávesnice. V rôznych prehliadačoch sa môže zobraziť v rôznych typoch písma. Značka je zastaraná.
- slúži na zobrazenie hlásení programu. Zobrazuje sa písmom s pevnou šírkou. Značka je zastaraná.
- pre obzvlášť dôležité fragmenty. Zvyčajne sú zvýraznené tučným písmom.
- používa sa na označenie, že časť textu alebo slovo je znaková premenná, inými slovami text, ktorý možno nahradiť rôznymi výrazmi. Štandardne sa zobrazuje kurzívou. Značka je zastaraná.
Špecifikácia HTML 4.0 ponúka pokročilejšiu metódu na špecifikovanie štýlov pre text a iné časti pomocou jazyka CSS Cascading Style Sheets. Šablóny štýlov sú obrovským úspechom v oblasti webdizajnu, rozširujúc možnosti zlepšovania vzhľadu stránok. Šablóny štýlov uľahčujú definovanie riadkov, odsadenia, farieb použitých pre text a pozadia, veľkosti a štýlu písma atď. Ako hodnota atribútu style sa používajú dvojice tvaru "vlastnosť: hodnota". Napríklad v časti kódu popisujúcej nadpis sekcie,
atribút style="color: blue" určuje, že vlastnosť color je nastavená na modrú, t. j. text nadpisu prvej úrovne by sa mal zobrazovať modrou farbou.
Zarovnanie štýlu
Pozrime sa, ako použiť jazyk kaskádových štýlov na určenie štýlu textu, ktorý začína slovami Tu sa dozviete ...
Na určenie hrúbky písma použite vlastnosť font-weight s hodnotami lighter (narrow), bold (bold), bolder (bold), napríklad style="font-weight: bold".
Ak chcete definovať štýl kurzívy, použite vlastnosť font-style s hodnotou kurzíva. Preto, aby bol text tučný kurzívou, mali by ste nájsť atribút štýlu takto: style="font-weight: bold; font-style: italic". Poznámka: charakteristiky je možné zadať v ľubovoľnom poradí a musia byť oddelené bodkočiarkou.
Ak chcete určiť veľkosť písma, mali by ste použiť vlastnosť font-size, ktorej hodnoty možno zadať v relatívnych alebo absolútnych hodnotách. Relatívne hodnoty sú percentá a absolútne hodnoty sú body (pt), pixely (px), centimetre (cm), milimetre (mm). Napríklad:
style="font-size: 200 %"
style="font-size: 16pt"
style="font-size: 100px"
Zadaním absolútnych a nie relatívnych veľkostí zbavíte používateľov, ktorí si prezerajú vaše stránky, možnosť zväčšiť alebo zmenšiť veľkosť písma pomocou príkazu ponuky prehliadača v súlade s ich víziou a rozlíšením monitora. Písma sa zobrazia iba vo vami zadanej veľkosti. Preto je lepšie určiť veľkosť písma v percentách. V tomto prípade bude veľkosť písma menšia alebo väčšia o uvedené percento, ako keď bolo navrhnuté HTML pomoc predvolená značka.
Na určenie metódy vodorovného zarovnania textu sa používa vlastnosť zarovnania textu s hodnotami vľavo (doľava), vpravo (vpravo), na stred (v strede), zarovnať (na šírku). Týmto spôsobom, aby ste naznačili, že text Tu sa naučíte ... by mal byť formátovaný tučnou kurzívou s veľkosťou 150 % počiatočného písmena a zarovnaný na stred, jeho štýl by mal vyzerať takto:
style="font-weight: bold; font-style: italic; font-size: 150 %; text-align: center"
Tento atribút použijeme v značkách<р>, ktoré umožňujú prezentovať text ako samostatný odsek.
Upraviť HTML prvok, vrátane textu Tu sa dozviete ... odstránením štítkov
, , , a vkladanie značiek<р>as atribútom style, takže tento prvok má nasledujúcu formu: <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Tu sa dozviete o našej činnosti, o softvérových produktoch našej spoločnosti a o zariadeniach, ktoré vyrábame.
Vidíte, jazyk HTML umožňuje rôzne techniky úpravy. Žiaducejší je však jazyk CSS.
Ďalšie možnosti zarovnania a štýlu
Videli sme len jedno použitie jazyka štýlov, kde je definícia štýlu umiestnená konkrétne v značke prvku, ktorý popisujete.
To sa vykonáva pomocou atribútu style, ktorý sa používa s väčšinou štandardných značiek HTML. CSS má však aj iné využitie.
V štandardnom HTML, bez zavádzania šablón štýlov, ak chcete priradiť určité parametre k akémukoľvek prvku, ako je farba, veľkosť, poloha na stránke a podobne, musíte tieto vlastnosti načrtnúť pre každý prvok zakaždým, aj keď Na jednu stranu je potrebné umiestniť 10 strán.ki také časti, ktoré sa navzájom nelíšia. Rovnaký kúsok HTML kódu musíte vložiť na stránku 10-krát, čím sa zväčší veľkosť súboru a čas sťahovania zo siete.
Stylesheets fungujú iným, pohodlnejším a ekonomickejším spôsobom. Ak chcete priradiť určité vlastnosti k akémukoľvek prvku, musíte najprv tento prvok načrtnúť a nájsť tento popis ako štýl a v budúcnosti jednoducho označiť, že prvok, ktorý chcete vhodne upraviť, by mal mať vlastnosti štýlu, ktorý ste opísali . Pohodlné, však?
Okrem toho môžete popis štýlu uložiť nie do textu svojej webovej stránky, ale do samostatný súbor- to vám umožní použiť popis štýlu na ľubovoľnom počte WEB stránok. A ďalšou súvisiacou výhodou je možnosť zmeniť dizajn ľubovoľného počtu strán, pričom sa opraví iba popis štýlu v jednom samostatnom súbore.
Okrem toho vám jazyk štýlov umožňuje ešte viac pracovať s dizajnom písma stránok najvyššia úroveň než štandardné HTML.
V súčasnosti má jazyk CSS pomerne veľké množstvo možností pre časti HTML, ktoré môže ovládať. Aplikovaním „bezpečných“, inými slovami kompatibilných s väčšinou prehliadačov CSS prvkov – charakteristika písma, farby častí a pozadí, text a charakteristika okrajov – si môžete výrazne uľahčiť prácu a zatraktívniť svoje WEB stránky z hľadiska textového dizajnu.