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 marker 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:
  • 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.

  Urobme si usporiadaný zoznam pomocou značky ol:

  1. Prvá položka v zozname.
  2. Druhá položka na zozname.
  3. Tretia položka na zozname.

  Takto bude kód vyzerať v prehliadači:

  1. Prvá položka v zozname.
  2. Druhá položka na zozname.
  3. Tretia položka na zozname.

  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 sa ním riadiť v prípade akýchkoľvek zmien, ako by to bolo, keby som to zariadil ja 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 súborom stránok, ktoré spolu nemajú nič spoločné.

  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ť . Obrázky

  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:

  

  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):

  

  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 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, ale č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 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".

  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 oddielu š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 zobrazuje veľmi malým písmom.

  Tituly

  Nezamieňajte si názvy sekcií dokumentu s predtým diskutovaným názvom dokumentu, ktorý je definovaný prvkom .

  Prvú vetu používame ako nadpis textu - Na to ho stačí 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 prezeraní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 tagoch: 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é vám dáva k dispozícii jazyk 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é rozdelenie 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ť potrebu 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 zvýraznite text tučnou 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ť nasledujúcu 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že upravený prvok má nasledujúcu podobu:

  Tu sa dozviete o našej činnosti, o softvérové ​​produkty o našej spoločnosti a 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 schopný správne spracovať vnorené značky. Preto sa musíte uistiť, že sa neporuší poradie hniezdenia. Prehliadač bude zablokovaný, ak je vnorenie porušené. Nesprávne by bolo napríklad toto: …. 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ší. Hlavná vec v tomto prospech je, že objemný variant je cross-browser, inými slovami, je vhodný pre všetky prehliadače, keď 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 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 na určenie veľkosti písma sú značky. 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šia veľkosť font a hodnota 7 je najväčšia.

  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

  ich obmedzenie 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ť.

  =

  =

  =

  =

  =veľké množstvo rozšírené funkcie;">

  Existuje aj veľké množstvo ďalších zastaraných značiek, ktoré nemožno 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 s nejakým logickým štýlom, ktorý je krajší ako zvyčajne, takže prehliadač bude tento štýl interpretovať. 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 bola ukončená.

  - slúži na zobrazenie hlásení programu. Zobrazuje sa písmom s pevnou šírkou. Značka bola ukončená.

  - 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 bola ukončená.

  Špecifikácia HTML 4.0 ponúka pokročilejšiu metódu špecifikácie š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ýlov 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 ...

  Ak chcete určiť váhu 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 môžu byť uvedené 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.

  Ak chcete určiť metódu horizontálneho zarovnania textu, použite vlastnosť zarovnania textu s hodnotami vľavo (vľavo), vpravo (vpravo), v strede (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 bude mať 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 vám umožňuje používať rôzne metódyštýlový dizajn. Zároveň využitie jazyka kaskádových tabuliek css štýly je viac žiaduce.

  Ďalšie možnosti zarovnania a štýlu

  Videli sme iba 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 pri väčšine štandardov HTML tagy. 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 WEB stránky, ale do samostatného súboru - 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.

  AT aktuálny čas Jazyk CSS má pomerne veľké množstvo možností pre časti HTML, ktoré môže ovládať. Použitím „bezpečného“, inými slovami, kompatibilného s najväčším počtom prehliadačov css prvky- charakteristika písma, farby častí a pozadí, charakteristika textu a okrajov - môžete si výrazne uľahčiť prácu a zatraktívniť svoje WEB stránky z hľadiska textového dizajnu.

  Tag v HTML označuje časť textu kurzívou.

  HTML tag odkazuje na značky fyzického formátovania. Zmeňte štýl písma pomocou značky je štylistický.

  Do HTML text kurzívou sa dá urobiť aj pomocou značky. V tomto prípade bude text považovaný za logicky vybraný (významovo), „podčiarknutý“.

  Špecifikácia HTML5 odporúča uprednostniť značky logického formátovania: dôležité textové fragmenty – tag, akcenty – tag, podnadpisy – tagy, zvýraznenie textu – tag. Kurzívou text so značkou nasleduje len vtedy, ak sa charakter výberu nezhoduje so žiadnou z logických formátovacích značiek.

  Všetky typy výberu textu sú popísané v článku:.

  Syntax

  text v kurzíve

  Zobraziť v prehliadači

  Príklad použitia v HTML kóde

  
  
  
  
  
  
  

  Čistý text, ktorý možno umiestniť na ľubovoľnú stránku. Tu je text v kurzíve