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.
- názov časti prvej úrovne a - názov 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ým písmom, zatiaľ čo nadpis h6 šiestej úrovne sa zvyčajne zobrazuje veľmi malým písmom.Nezamieňajte si názvy sekcií dokumentu s predtým diskutovaným názvom dokumentu definovaným prvkom
.Prvú vetu používame ako názov textu - Na to stačí obmedziť ho značkami
Vložte značky do textu súboru other.html
Pozrime sa na získaný výsledok.
Uložte súbor výberom príkazu ponuky Poznámkový blok Súbor - Uložiť.
Operáciu uloženia je potrebné vykonať vždy pred zobrazením dokumentu, pretože súbor otvorí na prezeranie jeho načítaním do pamäte RAM počítača z disku. Ak súbor po úprave HTML kódu neuložíte, v prehliadači neuvidíte žiadne konfigurácie.
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á hlavička prvej úrovne.
Pozrite sa, ako budú vyzerať názvy ďalších 5 úrovní, keď zmeníte čísla v značkách: h2, h3 atď. Po každej konfigurácii nezabudnite uložiť súbor a aktualizovať obrázok v okne prehliadača.
Po dokončení experimentov znova obnovte značky v súbore other.html
.Pomocou 6 úrovní nadpisov, ktoré vám dáva k dispozícii jazyk HTML, môžete vytvoriť ľahko čitateľný dokument s intuitívne jasnou štruktúrou. Pamätajte, že váš dokument sa bude vždy oveľa lepšie čítať, ak bude prehľadne rozdelený na sekcie a podsekcie.
Štandardne je nadpis zarovnaný k ľavému okraju strany. Dá sa však zarovnať aj doprava alebo na stred. Pre správne zarovnanie v značke
Pridať k značke
V budúcnosti nebudeme pripomínať nutnosť uložiť súbor s úvodným kódom a pred prezeraním obnoviť obrázok v prehliadači.
Teraz prejdime k zvyšku textu. Zväčšíme jeho veľkosť a spravme text tučným kurzívou. Na nastavenie tučného štýlu sa používajú párové značky .
Vložte úvodný do súboru other.html a zatváranie tagy, aby obmedzili text Tu sa dozviete... Tento prvok by mal mať nasledujúcu podobu:
Š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, softvérové produkty o 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é do prvku …. Moderné prehliadače dokážu správne spracovať vnorené značky. Preto musíte zabezpečiť, aby nedošlo k porušeniu investičného poriadku. Prehliadač bude ťažké ovládať, ak je vnorenie porušené. Napríklad tento záznam by bol nesprávny: …. Súlad s vnorením je veľmi dôležitou súčasťou všeobecnej kultúry písania HTML kódu.
Použitie niekoľkých značiek môžete nastaviť podčiarknutý štýl textu, ktorý je obmedzený 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 zdôraznené pomocou štýlov. ekvivalent . Áno, nový analóg vyzerá ťažkopádnejšie, ale bohužiaľ je to pravdivejšie. Hlavná vec v prospech toho je, že objemná verzia je vhodná pre rôzne prehliadače, inými slovami, vhodná pre všetky prehliadače, keď Nie všetky prehliadače to podporujú.
Teraz zväčšíme veľkosť písma textu. To sa dá dosiahnuť rôznymi metódami.
Tagy zväčšiť veľkosť písma textu uzavretého 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 je použitie značiek s atribútom size. Ako hodnoty pre tento atribút sa používajú celé čísla od 1 do 7. V tomto prípade hodnota 1 zodpovedá najmenšej veľkosti písma a hodnota 7 zodpovedá najväčšej.
Použitie namiesto značiek zobraziť značky , pozrite sa, ako sa mení veľkosť písma textu pre rôzne hodnoty atribútu size - od 1 do 7.
Ako hodnotu atribútu size môžete použiť aj čísla od 1 do 7 so znamienkom + (plus) alebo - (mínus). IN v tomto prípade veľkosť písma sa zodpovedajúcim spôsobom zväčšuje alebo zmenšuje v porovnaní s počiatočným, napríklad značky veľkosť písma sa oproti aktuálnej zväčší o jednu úroveň. Pozrite si to.
Nastavte 5 ako hodnotu atribútu size pre príslušný text: . HTML kód pre tento kus by mal byť takýto:
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 obmedzenej textovými značkami. Význam tohto atribútu je rovnaký ako pre predtým diskutované atribúty, ktoré popisujú farbu pozadia a textu dokumentu.
Štandardne je odsek s textom Tu sa dozviete... zarovnaný doľava. Vycentrujte ho vodorovne pomocou značiek
Vložte značky
Upozorňujeme, že na vycentrovanie odseku sme použili značky
Pozornosť! Pre značky 2010 ,
=
=
Existuje aj veľké množstvo ďalších zastaraných značiek, ktoré nie je možné načrtnúť v tomto článku, takže je lepšie okamžite sa zoznámiť so špecializovanými webovými stránkami o tejto problematike. Ale tie hlavné som tu zverejnil o niečo vyššie
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, môžete jasne uviesť štýl písma textu, ako sme to urobili v tomto experimente. Na druhej strane môžete ľubovoľný text označiť ako logický štýl, ktorý sa líši od bežného štýlu, pričom interpretáciu tohto štýlu ponechajte prehliadaču. Logický štýl teda ukazuje úlohu textu, napríklad jeho obrovský 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. Skontrolujte, ako fungujú rôzne prehliadače.
- používa sa na definovanie slova. Text sa štandardne zobrazuje kurzívou.
- zvýrazniť slová a posilniť ich. Text sa štandardne zobrazuje kurzívou.
- na zvýraznenie názvov kníh, filmov, predstavení atď. sa štandardne zobrazuje kurzívou.
- pre fragmenty programového kódu. Zobrazuje sa na displeji písmom s pevnou šírkou.
- používa sa pre text, ktorý používateľ zadáva z klávesnice. Môže sa zobraziť v rôznych prehliadačoch rôzne fonty. 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 symbolická 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 špecifikácie štýlov pre text a iné časti – pomocou špeciálny jazyk kaskádové štýly CSS (Cascading Style Sheets). Štýlové predlohy predstavujú obrovský pokrok WEB oblasti dizajn, rozširujúci možnosť zlepšiť vzhľad stránok. Šablóny štýlov uľahčujú definovanie riadkov, odsadenia, farieb použitých pre text a pozadie, veľkosti a štýlu písma atď časti HTML možno opísať pomocou atribútu style, ktorý je umiestnený vo vnútri úvodnej značky prvku. Ako hodnota atribútu štýlu sa používajú dvojice tvaru „vlastnosť: hodnota“. Napríklad v časti kódu popisujúcej hlavičku sekcie,
Pozrime sa, ako použiť jazyk kaskádových štýlov na určenie štýlu textu, ktorý začína slovami Tu sa naučíte...
Ak chcete určiť hrúbku písma, použite vlastnosť font-weight s hodnotami svetlejšie (úzky), tučné (polotučné), tučné (tučné), napríklad style="font-weight: bold".
Ak chcete určiť štýl kurzívy, použite vlastnosť font-style s hodnotou kurzíva. Preto, aby ste dali textu štýl tučnej kurzívy, mali by ste nájsť atribút štýlu takto: style="font-weight: bold; font-style: italic". Poznámka: charakteristiky môžu byť uvedené v ľubovoľnom poradí a musia byť oddelené bodkočiarkou.
Ak potrebujete 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 body (pt), pixely (px), centimetre (cm), milimetre (mm) sa používajú ako absolútne hodnoty. 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 prezerajúcich si vaše stránky možnosti 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 veľkosti, ktorú určíte. 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ý počet percent, ako keď bolo navrhnuté HTML pomoc predvolená značka.
Na určenie metódy vodorovného zarovnania textu použite vlastnosť zarovnania textu s hodnotami vľavo (doľava), vpravo (vpravo), na stred (na stred), zarovnať (šírka). Ak teda chcete uviesť, že text Tu sa naučíte... by mal byť formátovaný tučnou kurzívou s veľkosťou 150 % originálu a zarovnaný na stred, jeho štýl by mal byť nasledujúci:
style="font-weight: bold; font-style: italic; font-size: 150 %; text-align: center"
Tento atribút budeme používať v značkách<р>, ktoré vám umožňujú prezentovať text ako samostatný odsek.
Upraviť HTML prvok, vrátane textu Tu sa dozviete... odstránením značiek
<р 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, HTML umožňuje rôzne techniky úpravy. Súčasne použitie jazyka kaskádových tabuliek CSS štýly je viac žiadúce.
Videli sme len jeden prípad použitia pre jazyk š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 hárkov š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ď 10 strán musia byť umiestnené na jednej strane ki takých častí, 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 potrebný na jeho stiahnutie z internetu.
Štýly fungujú iným, pohodlnejším a ekonomickejším spôsobom. Ak chcete prvku priradiť určité vlastnosti, musíte tento prvok raz načrtnúť a nájsť tento popis ako štýl a potom jednoducho označiť, že prvok, ktorý chcete vhodne navrhnúť, musí 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.
Jazyk štýlov navyše umožňuje ešte viac pracovať s dizajnom písma stránok najvyššia úroveň než štandardné HTML.
IN aktuálny čas Jazyk CSS má pomerne veľké množstvo parametrov pre časti HTML, ktoré môže ovládať. Použitím „bezpečného“, inými slovami kompatibilného s najväčší počet prehliadačov CSS prvky- charakteristika písma, farby častí a pozadia, charakteristika textu a okrajov - výrazne si uľahčíte prácu a zatraktívnite svoje WEB stránky z hľadiska textového dizajnu.
alebo študijné značky, ktoré formátujú text HTML
Predstavujeme vám jednu z kľúčových a najjednoduchších lekcií tutoriálu.
Pozri nižšie značky, ktoré formátujú text HTML:
→ monopriestor HTML text(jednopriestorové písmo).Výsledok: ... jednopriestorové písmo
Výsledok: ...veľkosť písma je väčšia ako normálne
výsledok: ... kurzíva
Výsledok: prečiarknutý text (prečiarknuté písmo)
Výsledok: horný index
Vyššie uvedené formátovacie techniky by sa mali používať len pre malé časti textu. Použite to CSS ak chcete nastaviť konkrétne písmo pre celú stránku, alebo napríklad pre niekoľko riadkov.
Kurzíva je jedným z najpopulárnejších spôsobov, ako zvýrazniť časť textu a dať mu nejaký význam. Je ideálny pre citácie, poznámky pod čiarou, názvy a vlastné mená. V HTML sú dve špeciálne značky na zobrazenie kurzívy. V CSS je kurzíva riadená vlastnosťou font-style.
Rovnaké písmo môže vyzerať inak v štýle kurzívy.
Obrázok ukazuje tri bloky textu napísané rovnakým písmom Playfair Display. Prvý z nich má obvyklý rímsky štýl, zatiaľ čo druhý a tretí majú kurzívu. Sú otvorené v rovnakom Prehliadač Google Chrome, ale vyzerá úplne inak.
Faktom je, že niektoré písma majú svoje vlastné znakové sady kurzívy. Ak prehliadač nemá prístup k tejto množine, ale narazí na text, ktorý by mal byť vykreslený ako kurzíva, pokúsi sa ho prepísať sám.
V druhom bloku je práve takáto verzia spracovaná prehliadačom a v treťom originálna kurzíva fontu Playfair Display, ktorý má jedinečný štýl, skôr písaný rukou. Prehliadač jednoducho nakloní každý znak textu pod určitým uhlom, čím simuluje kurzívu.
Pri zisťovaní, ako urobiť kurzívu v CSS alebo HTML, je dôležité mať na pamäti, že v prípade špecifických písiem musíte prehliadaču poskytnúť prístup k ich sadám kurzívy. V niektorých prípadoch môže byť výsledok algoritmov naklonenia prehliadača neuspokojivý.
Na zobrazenie textu kurzívou v HTML existujú dve špeciálne značky: i (od slova kurzíva) a em. Štýl textového fragmentu v ktoromkoľvek z týchto deskriptorov bude rovnaký.
Rozdiel je v logickom výbere. Značka em označuje osobitný význam fragmentu. To je dôležité pre vyhľadávacie roboty a čítačky obrazovky, ktoré zvýraznia zadaný text pomocou intonácie.
V CSS je kurzíva riadená príkazom štýlu písma. Môže nadobúdať jednu z troch základných hodnôt:
V súčasnosti väčšina moderných prehliadačov zaobchádza so šikmými hodnotami a kurzívou rovnako, ale prvá bola pôvodne považovaná za výsledok algoritmov špecifických pre prehliadač, ktoré nakláňajú každý znak doprava.
Ak prehliadač nerozpozná písmo, ktoré hľadáte, kurzíva bude vyzerať presne rovnako ako šikmá.
Na rozdiel od značky em nedáva výberu žiadnu zvláštnu dôležitosť, ale skôr zodpovedá deskriptoru i.
Úvodzovky sa často používajú kurzívou. Skúsme, aby to vyzeralo pekne.
Citát ( štýl písma: kurzíva; ľavý okraj: 5 pixelov, plná fialová; ľavý výplň: 20 pixelov; )
Okrem ozdobného okraja na pravej strane a zarážok má blok úvodzoviek pravidlo štýlu písma s hodnotou kurzíva.
Použite ho na nastavenie kurzívy v CSS.
V tomto článku si povieme, ako zvýrazniť text kurzíva HTML. Rovnako ako pri tučnom texte, kurzíva môže byť vytvorená tromi spôsobmi:
Pozrime sa na všetky tri možnosti, ako urobiť kurzívu v HTML, diskutujme o zložitosti tohto problému a o tom, ktoré metódy sú v určitých situáciách pohodlnejšie a správnejšie.
Tag i(kurzíva), podobne ako značka b Pre tučný text, slúži na fyzické zvýraznenie textu kurzívou (to znamená, že sa zmení iba štýl textu). Použitie značky i:
Tvorca webových stránok "Nubex"
Požadovaná časť textu sa teda umiestni medzi značky .
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 vziať 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, aj keď sú zobrazené takmer identicky (vo všetkých moderné prehliadače), vo svojej podstate nie sú úplne totožné, 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 aplikuje vizuálnu kurzívu pomocou značky i alebo CSS štýly. Pozrime sa teraz na použitie štýlov CSS na vytvorenie textu kurzívou.
Ak chcete nastaviť štýly zobrazenia písma v CSS, použite vlastnosť štýl písma, ktorý môže nadobúdať nasledujúce 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ú to isté. 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 v praxi:
Naše stránky sú skutočne obrovský krok vo vývoji webu.
Robíme to naozaj kvality stránky.
Musíte si však uvedomiť, že niektoré prehliadače majú text s vlastnosťou font-style:oblique; nemožno interpretovať ako text kurzívou, ale ako text kurzívou.
Určuje, či je štýl písma obyčajný, kurzíva alebo kurzíva. Keď je text nastavený na kurzívu alebo kurzívu, prehliadač zavolá systém, aby našiel vhodné písmo. Ak sa zadaný font nenájde, prehliadač použije na simuláciu špeciálny algoritmus požadovaný typ text. Výsledok a kvalita môžu byť neuspokojivé, najmä pri tlači dokumentu.
štýl písma: normal | kurzíva | šikmé | dediť
kurzíva Kurzíva štýl.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Výsledok tento príklad
znázornené na obr. 1.
Objektový model
Prehliadače
Verzie programu Internet Explorer do 7.0 vrátane nepodporujú hodnotu zdedenia.
