Toto je prostý text a toto je kurzíva text.

Takto bude kód vypadat v prohlížeči:

Blokovat . Seznamy

Spolu s odstavci a nadpisy je zde ještě jeden důležitý prvek stránky – tento seznamy. Takové prvky znají snad všichni uživatelé internetu. Představují výčet něčeho (seznamu) bod po bodu. Vedle každé položky seznamu je obvykle vyplněný kruh (tzv popisovač seznam).

Seznamy se vytvářejí pomocí značky

, který musí obsahovat značky
• . Štítek ul nastavuje samotný seznam a ve značkách li položky seznamu by měly být stanoveny (to znamená, že jedno li odpovídá jedné značce seznamu). Mějte na paměti, že značky li nelze použít samostatně. Viz příklad:
  • První položka na seznamu.
  • Druhá položka na seznamu.
  • Třetí položka na seznamu.

  Takto bude kód vypadat v prohlížeči:

  • První položka na seznamu.
  • Druhá položka na seznamu.
  • Třetí položka na seznamu.

  Seznamy vytvořené pomocí značky ul, jsou nazývány neuspořádaný seznamy. Toto jméno jim bylo dáno, protože existují také objednal seznamy, které budou mít značky číslic místo značek teček. Takové seznamy mají místo značky ul značku

  a položky těchto seznamů jsou také vytvářeny prostřednictvím značek li.

  Udělejme uspořádaný seznam pomocí značky ol:

  1. První položka na seznamu.
  2. Druhá položka na seznamu.
  3. Třetí položka na seznamu.

  Takto bude kód vypadat v prohlížeči:

  1. První položka na seznamu.
  2. Druhá položka na seznamu.
  3. Třetí položka na seznamu.

  Výhodou objednaných seznamů je, že mohu na libovolné místo vložit novou položku seznamu - a číslování se samo přestaví (tj. nemusím se jím řídit v případě jakýchkoli změn, jak by to bylo, kdybych si to zařídil já ručně).

  Blokovat . Odkazy

  Odkazy jsou prvky, které dělají internet internetem. Kliknutím na odkazy se můžeme přesunout z jedné stránky webu na druhou. Pokud by neexistovaly, byl by internet jen sbírkou stránek, které spolu nemají nic společného.

  Odkaz na stránky phphtml.net.

  Takto bude kód vypadat v prohlížeči:

  Odkazy jsou absolutní A relativní, navíc mohou vést jak na vaše stránky, tak na stránky někoho jiného. Je lepší tyto těžké chvíle ukázat, než je popisovat textem, proto jsem pro vás natočil následující video. Podívejte se na to a teprve poté pokračujte v čtení:

  Blokovat . snímky

  Pojďme nyní zjistit, jak umístit obraz na stránce vašeho webu. K tomu slouží značka. , který má povinný atribut src, který ukládá cestu k souboru obrázku.

  Jak to funguje, podívejme se na následující příklad:

  

  Takto bude kód vypadat v prohlížeči:

  Vezměte prosím na vědomí, že značka nevyžaduje uzavírací značku.

  Blokovat . Odkazy ve formě obrázků

  Odkaz může být nejen text, ale i obrázek- k tomu stačí tag vložte štítek , jak je provedeno v následujícím příkladu. Klikněte na obrázek - a budete následovat odkaz na webovou stránku phphtml.net (pro pozdější návrat ke knize klikněte v prohlížeči na tlačítko "zpět"):

  

  Takto bude kód vypadat v prohlížeči:

  Blokovat . Zalomení řádku

  Pamatujte, co se stane, když uděláte například dva odstavce vedle sebe – v tomto případě bude text, který leží v každém z nich, začínat Nový linky.

  Podívejme se na to na následujícím příkladu:

  Toto je první odstavec.

  Toto je druhý odstavec.

  Takto bude kód vypadat v prohlížeči:

  Toto je první odstavec.

  Toto je druhý odstavec.

  Jsou však situace, kdy bychom chtěli mít jeden odstavec, ale část textu v něm začíná na novém řádku. Proč to může být potřeba? Například chci napsat báseň, ale nechci rozdělit každý její řádek na samostatný odstavec, protože by to nebylo příliš logické.

  Chcete-li to provést, na místo, kde by měl být konec řádku, napište značku
  . Všimněte si, že tato značka je speciální a nemá uzavírací značku.

  Podívejme se, jak to funguje na následujícím příkladu:

  Toto je první řádek textu
  a tohle je ta druhá.

  Takto bude kód vypadat v prohlížeči:

  Toto je první řádek textu
  a tohle je ta druhá.

  Blokovat . HTML komentáře

  Téměř všechny programovací jazyky mají něco jako "komentáře".

  Aby naše WEB stránka vypadala lépe, rozdělíme text do odstavců a zvýrazníme nadpis. HTML má 6 úrovní nadpisů částí dokumentu, číslovaných od 1 do 6. Nadpisy jsou deklarovány dvojicí značek s čísly odpovídajícími úrovni, např.

  - nadpis sekce první úrovně a
  - nadpis sekce šesté úrovně. Nadpisy se od běžného textu liší velikostí a šířkou písmen. Nadpis první úrovně h1 je obvykle zobrazen velmi velkým písmem, zatímco nadpis šesté úrovně h6 je zobrazen velmi malým písmem.

  Tituly

  Nezaměňujte názvy sekcí dokumentu s dříve diskutovaným názvem dokumentu, který je definován prvkem .

  První větu používáme jako nadpis textu - K tomu stačí omezit tagy

  A

  .

  Vložte značky do textu souboru other.html

  A

  takže omezují první větu textu a tento kus kódu má následující podobu:

  Vítejte na stránce společnosti SD!

  Podívejme se na získaný výsledek.

  Soubor uložte výběrem příkazu z nabídky programu Poznámkový blok Soubor - Uložit (Soubor - Uložit).

  Operaci uložení je nutné provést vždy před zobrazením dokumentu, protože soubor otevře k prohlížení načtením do paměti RAM počítače z disku. Pokud po úpravě HTML kódu soubor neuložíte, neuvidíte v prohlížeči žádnou konfiguraci.

  Obnovte okno prohlížeče kliknutím na jeho tlačítko na hlavním panelu.

  Stiskněte tlačítko F5 nebo tlačítko Obnovit na panelu nástrojů pracovního okna programu. Soubor other.html se znovu načte a v okně prohlížeče uvidíte, jak vypadá nadpis první úrovně.

  Podívejte se, jak budou vypadat názvy dalších 5 úrovní, změnou čísel ve značkách: h2, h3 atd. Po každé konfiguraci nezapomeňte soubor uložit a obnovit obrázek v okně prohlížeče.

  Po dokončení experimentů znovu obnovte značky v souboru other.html

  .

  Pomocí 6 úrovní nadpisů, které vám dává k dispozici jazyk HTML, můžete vytvořit snadno čitelný dokument s intuitivní strukturou. Pamatujte, že váš dokument se bude vždy číst výrazně lépe, pokud bude mít přesné rozdělení na sekce a podsekce.

  Zarovnání nadpisu

  Ve výchozím nastavení je záhlaví zarovnáno na levou stranu stránky. Ale může být také zarovnaný vpravo nebo na střed. Pro zarovnání vpravo ve značce

  používá se atribut align="right" a pro centrování align="center". Povolena je také zřejmá indikace zarovnání vlevo - align="left".

  Přidat ke značce

  atribut align="center" pro vystředění nadpisu. Tento prvek by měl mít následující podobu:

  Vítejte na stránce společnosti SD!

  V budoucnu nebudeme připomínat nutnost uložit soubor s počátečním kódem a aktualizovat obrázek v prohlížeči před zobrazením.

  Jak udělat text tučným v HTML

  Nyní přejdeme ke zbytku textu. Zvětšete jeho velikost a změňte text na tučnou kurzívu. Spárované značky se používají k nastavení tučného stylu .

  Vložte soubor other.html otevření a zavírání tagy tak, aby omezovaly text Zde se dozvíte... Tento prvek by měl mít následující podobu:

  Jak udělat text kurzívou v HTML

  Styl kurzíva se nastavuje pomocí značek .

  Vložte značku HTML do počátečního kódu A takže upravený prvek má následující tvar:

  Zde se dozvíte o naší činnosti, o softwarových produktů o naší společnosti a zařízení, které vyrábíme

  Prvky značek lze vnořit, jako v této struktuře, kde prvek … vnořeno v prvku …. Moderní prohlížeče dokáže správně zpracovat vnořené značky. Proto je třeba zajistit, aby nedošlo k porušení řádu vnoření. Pokud je vnoření přerušeno, prohlížeč bude zablokován. Například následující by bylo nesprávné: …. Vnořování je velmi zásadní součástí celkové kultury psaní HTML kódu.

  Jak udělat text podtržený v HTML

  S pár štítky můžete nastavit styl podtržení textu odděleného těmito značkami a pomocí dvojice značek - zobrazit text dálnopisným písmem.

  Je třeba poznamenat, že v poslední době značka zjednodušené a podtržení se provádí pomocí stylů. ekvivalent . Ano, nový analog vypadá těžkopádněji, ale bohužel je pravdivější. Hlavní věc v tomto prospěch je, že objemná varianta je cross-browser, jinými slovy, je vhodná pro všechny prohlížeče, kdy oba Ne všechny prohlížeče podporují.

  Jak zvýšit text v HTML

  Nyní zvětšíme velikost písma textu. To lze provést různými způsoby.

  značky zvětšit velikost písma textu uzavřeného mezi nimi.

  Přidejte značky na začátek a konec výše uvedeného kódu A takže prvek má následující tvar:

  Zde se dozvíte o naší činnosti, o softwarových produktech naší společnosti a o zařízení, které vyrábíme.

  Pomocí značek můžete zmenšit velikost písma textu oproti původnímu.

  Další metodou pro určení velikosti písma jsou značky. s atributem size. Jako hodnoty pro tento atribut se používají celá čísla od 1 do 7. V tomto případě hodnota 1 odpovídá nejmenší velikost font a hodnota 7 je největší.

  Použití místo značek zobrazit značky , podívejte se, jak se mění velikost písma textu s různými hodnotami atributu size - od 1 do 7.

  Můžete také použít čísla od 1 do 7 se znaménkem + (plus) nebo - (mínus) jako hodnotu pro atribut size. V tomto případě se velikost písma odpovídajícím způsobem zvětší nebo zmenší ve srovnání s počátečním, například tagy zvětší velikost písma oproti stávajícímu o jednu úroveň. Šek.

  Nastavte 5 jako hodnotu atributu size pro příslušný kus textu: . HTML kód pro tento kus by měl vypadat takto:

  Zde se dozvíte o naší činnosti, o softwarových produktech naší společnosti a o zařízení, které vyrábíme..

  Ve značkách atribut color lze také použít k určení barvy písma oddělené textovými značkami. Hodnoty tohoto atributu jsou stejné jako u dříve diskutovaných atributů, které popisují barvu pozadí a textu dokumentu.

  Standardně je odstavec s textem Here You'll Know... zarovnán doleva. Vycentrujte jej vodorovně pomocí značek

  . Odstavec můžete také zarovnat na pravou stranu stránky pomocí značek. nebo vlevo - pomocí značek .

  Nalepovací štítky

  jejich omezení na určený odstavec.

  Všimněte si, že jsme použili značky k vystředění odstavce

  , na rozdíl od atributu align="center", který jsme použili ve značkách
  .

  Pozornost! Pro značky 2010 ,

  , , jsou považovány za zastaralé, a proto je nutné používat analogy ze stylů. To neznamená, že je nemůžete používat, ale pokud můžete, zkuste se jich zbavit.

  =

  =

  =

  =

  =velké množství rozšířené funkce;">

  Existuje také velké množství dalších zastaralých značek, které nelze v tomto článku popsat, proto je lepší se okamžitě seznámit se specializovanými weby na tuto problematiku. Ale ty hlavní jsem zde zveřejnil o něco výše

  Výběrové kódy

  Jazyk HTML umožňuje dva přístupy k výběru písma fragmentů textu. Na jedné straně můžete přímo naznačit, že písmo v určité části textu může být tučné nebo kurzíva, jinými slovy je zřejmé, že je zřejmé, jaký typ písma je u textu uveden, jako jsme to udělali v tomto experimentu. Na druhou stranu je možné označit jakýkoli text jako s nějakým logickým stylem, který je hezčí než obvykle, takže tento styl bude interpretován prohlížečem. Logický styl tak ukazuje roli textu, například jeho velký význam ve srovnání s běžným textem nebo fakt, že se jedná o citát. Ve své vlastní práci můžete použít následné značky, které definují logické styly. Podívejte se, jak fungují různé prohlížeče.

  - používá se k definování slova. Text je standardně zobrazen kurzívou.

  - zvýraznit slova a zesílit. Text je standardně zobrazen kurzívou.

  - pro zvýraznění názvů knih, filmů, představení atd., které se ve výchozím nastavení zobrazují kurzívou.

  - pro fragmenty programového kódu. Zobrazeno na displeji písmem s pevnou šířkou.

  - používá se pro text, který uživatel zadává z klávesnice. V různých prohlížečích může být zobrazen v různých fontech. Značka již není podporována.

  - slouží k zobrazení hlášení programu. Zobrazeno písmem s pevnou šířkou. Značka již není podporována.

  - pro zvláště důležité fragmenty. Obvykle zvýrazněno tučně.

  - se používá k označení, že část textu nebo slovo je znaková proměnná, jinými slovy text, který lze nahradit různými výrazy. Ve výchozím nastavení zobrazeno kurzívou. Značka již není podporována.

  Specifikace HTML 4.0 nabízí pokročilejší metodu pro specifikaci stylů pro text a další části pomocí jazyka CSS Cascading Style Sheets. Styly jsou obrovským počinem v oblasti webdesignu, rozšiřující možnosti vylepšovat vzhled stránek. Šablony stylů usnadňují definování řádkování, odsazení, barev použitých pro text a pozadí, velikosti a stylu písma a tak dále. Jako hodnota atributu style se používají dvojice ve tvaru "vlastnost: hodnota". Například v části kódu popisujícího nadpis sekce,

  atribut style="color: blue" určuje, že vlastnost color je nastavena na modrou, tj. text nadpisu první úrovně by měl být zobrazen modře.

  Zarovnání stylu

  Podívejme se, jak použít jazyk kaskádových stylů k určení stylu textu, který začíná slovy Zde se dozvíte ...

  Chcete-li určit tloušťku písma, použijte vlastnost font-weight s hodnotami lighter (narrow), bold (bold), bolder (bold), například style="font-weight: bold".

  Chcete-li definovat styl kurzívy, použijte vlastnost font-style s hodnotou kurzíva. Proto, aby byl text tučný kurzívou, měli byste najít atribut style takto: style="font-weight: bold; font-style: italic". Poznámka: charakteristiky lze umístit v libovolném pořadí a musí být odděleny středníkem.

  Pokud chcete určit velikost písma, měli byste použít vlastnost font-size, jejíž hodnoty lze zadat v relativních nebo absolutních hodnotách. Relativní hodnoty jsou procenta a absolutní hodnoty jsou body (pt), pixely (px), centimetry (cm), milimetry (mm). Např:

  style="font-size: 200 %"

  style="font-size: 16pt"

  style="font-size: 100px"

  Zadáním absolutních spíše než relativních velikostí připravíte uživatele prohlížející si vaše stránky o možnost zvětšit nebo zmenšit velikost písma pomocí příkazu nabídky prohlížeče v souladu s jejich vizí a rozlišením monitoru. Písma se zobrazí pouze ve vámi zadané velikosti. Proto je lepší určit velikost písma v procentech. V tomto případě bude velikost písma menší nebo větší o uvedené procento, než když bylo navrženo HTML nápověda výchozí značka.

  Chcete-li určit metodu vodorovného zarovnání textu, použijte vlastnost text-align s hodnotami doleva (doleva), doprava (doprava), na střed (uprostřed), zarovnat (na šířku). Tímto způsobem, aby bylo uvedeno, že text Zde se naučíte ... by měl být formátován tučnou kurzívou o velikosti 150 % počáteční a zarovnané na střed, jeho styl by měl být následující:

  style="font-weight: bold; font-style: italic; font-size: 150 %; text-align: center"

  Tento atribut použijeme ve značkách<р>, které umožňují prezentovat text jako samostatný odstavec.

  Upravit HTML prvek, včetně textu Zde se dozvíte ... odstraněním štítků

  , , , a vkládání značek<р>As atributem style, takže tento prvek má následující podobu:

  <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Zde se dozvíte o naší činnosti, o softwarových produktech naší společnosti a o zařízení, které vyrábíme.

  Vidíte, jazyk HTML vám umožňuje používat různé metody stylový design. Zároveň využití jazyka kaskádových tabulek css styly je více žádoucí.

  Další možnosti zarovnání a stylu

  Viděli jsme pouze jedno použití jazyka šablony stylů, kde je definice stylu umístěna konkrétně ve značce prvku, který popisujete.

  To se provádí pomocí atributu style, který se používá u většiny standardů HTML tagy. CSS má ale i jiné využití.

  Ve standardním HTML, bez zavádění šablon stylů, abyste mohli přiřadit určité parametry jakémukoli prvku, jako je barva, velikost, pozice na stránce a podobně, musíte tyto vlastnosti pro každý prvek pokaždé nastínit, i když Na jednu stránku je potřeba umístit 10 stran.ki takové části, které se od sebe neliší. Musíte vložit stejný kus HTML kódu do stránky 10krát, čímž se zvětší velikost souboru a doba stahování ze sítě.

  Stylesheety fungují jiným, pohodlnějším a ekonomičtějším způsobem. Chcete-li libovolnému prvku přiřadit určité funkce, musíte nejprve tento prvek nastínit a najít tento popis jako styl a v budoucnu jednoduše označit, že prvek, který chcete vhodně stylizovat, by měl převzít vlastnosti stylu, který jste popsali. . Pohodlné, že?

  Navíc můžete popis stylu uložit nikoli do textu vaší WEB stránky, ale do samostatného souboru – to vám umožní použít popis stylu na libovolném počtu WEB stránek. A další související výhodou je možnost změny designu libovolného počtu stránek, oprava pouze popisu stylu v jednom samostatném souboru.

  Kromě toho vám jazyk stylů umožňuje ještě více pracovat s designem písma stránek nejvyšší úroveň než standardní HTML.

  V aktuální čas Jazyk CSS má poměrně velké množství možností pro části HTML, které může ovládat. Použitím „bezpečného“, jinými slovy, kompatibilního s největším počtem prohlížečů css prvky- vlastnosti písma, barvy částí a pozadí, charakteristika textu a ohraničení - můžete si výrazně usnadnit práci a zatraktivnit své WEB stránky z hlediska textového designu.

  Štítek v HTML označí část textu kurzívou.

  HTML tag odkazuje na značky fyzického formátování. Změňte styl písma pomocí značky je stylistický.

  Dělat HTML text kurzívou lze také provést pomocí značky. V tomto případě bude text považován za logicky vybraný (významově), "podtržený".

  Specifikace HTML5 doporučuje dát přednost logickým formátovacím značkám: důležité textové fragmenty – tag, důraz – tag, podnadpisy – tagy, zvýraznění textu – tag. Uveďte text kurzívou pomocí značky následuje pouze v případě, že charakter výběru neodpovídá žádné z logických formátovacích značek.

  Všechny typy výběru textu jsou popsány v článku:.

  Syntax

  text kurzívou

  Zobrazení v prohlížeči

  Příklad použití v HTML kódu

  
  
  
  
  
  
  

  Prostý text, který lze umístit na jakýkoli web. Zde je text kurzívou