Bloky textu jsou zpravidla odděleny odstavci (odstavci). Ve výchozím nastavení je mezi odstavci malý svislý okraj, který se nazývá odsazení. Syntaxe pro vytváření odstavců je následující.
odstavec 1
odstavec 2
Každý odstavec začíná značkou
A končí volitelnou koncovou značkou
.V každé knize se odsazení prvního řádku, nazývané také „červená čára“, používá ke zvýraznění dalšího odstavce. To umožňuje čtenáři snadno najít nový řádek očima a zvyšuje tak čitelnost textu. Na webové stránce se tato technika obvykle nepoužívá a k oddělení odstavců se používá výplň.
Příklad 7.1 ukazuje, jak používat odstavce k vytvoření odsazení mezi řádky.
Příklad 7.1. Pomocí odstavců
Někde je ještě únor, jinde už duben.
Čas plyne, věčné počítání: rok za rokem, století za stoletím ...
Ve všem - jeho neuspěchaný pohyb, jeho běh na hřišti.
V roce je dvacet pět týdnů radosti a smutku.
V únoru je mi dvacet pět týdnů a v dubnu dvacet pět týdnů.
Na dvacet pět týdnů mlha opustí počet staletí.
Moje zvučná budka letí kamsi do oblak.
M. Ščerbakov
Výsledek tohoto příkladu je znázorněn na Obr. 7.1.
Rýže. 7.1. Odsazení webové stránky při použití odstavců
Jak můžete vidět z obrázku, při použití značky
Mezi odstavci se objevuje příliš mnoho odsazení. Můžete se jich zbavit přidáním značky do zalomení řádků
... Na rozdíl od odstavce značka zalomení řádku
nevytváří další svislé mezery mezi řádky a lze jej použít téměř v jakémkoli textu.
Takže text příkladu 7.1, s přihlédnutím k zalomení řádků, bude transformován následovně (příklad 7.2).
Příklad 7.2. Štítek
V některých zahradách kvetou mandle, v jiných fouká vánice.
Někde je ještě únor, jinde už duben.
Čas plyne, věčné počítání: rok za rokem, století za stoletím...
Ve všem - jeho neuspěchaný pohyb, jeho běh na hřišti.
V roce je dvacet pět týdnů radosti a smutku.
V únoru je mi dvacet pět týdnů a v dubnu dvacet pět týdnů.
Na dvacet pět týdnů mlha opustí počet staletí.
Moje zvučná budka letí kamsi do oblak.
M. Ščerbakov
Příklad výsledku je znázorněn na Obr. 7.2. Je vidět, že se vzdálenost mezi řádky textu zmenšila a nabyl kompaktnější podoby.
Tagy definující odstavec, mezeru, HTML blok a odstavec
Podívejme se podrobně HTML bloky a odstavce jako prvky webové stránky.
- HTML odstavec definované značkami.
- HTML odstavce obvykle obsahují text, formátovací značky, obrázky.
- HTML odstavec nemůže obsahovat prvky bloku, jako jsou záhlaví
- , blokovat
a další odstavce. - HTML blok definované značkami .
- HTML blok může obsahovat libovolné prvky webové stránky v libovolném množství.
- HTML bloky skvělé pro webové stránky a snadno se s ním manipuluje.
Zvažte kód níže:
Výsledek:
Můžeme to vidět HTML odstavce jsou vertikálně odsazeny - to je zvláštnost tagů. HTML bloky
Tagy nesmí obsahovat jiné popř
Tagy a v zásadě to samé, ale konsorcium W3C doporučilo používat malá písmena. PROTI nová verze HTML Stejně jako v moderním XHTML je používání velkých písmen při psaní značek zakázáno.
Blok
HTML prostor z tabulky speciálních znaků
HTML prostor umožňuje zvětšit mezeru mezi slovy a znaky.
Co se týče mezer mezi slovy, bez ohledu na to, kolik jich je v poznámkovém bloku, tedy ve zdrojovém kódu, na webové stránce se zobrazí pouze jedna. Pokud potřebujete zvětšit vzdálenost, použijte znak mezery z tabulky symbolů. Ptáte se: Proč potřebujeme tyto zakódované hodnoty běžných znaků? - Odpovím: Jsou potřeba k zobrazení např. takových závorek< >... Jinými slovy, pro zobrazení značek v mém editoru píšu: ... Štítky: , jak si pamatujeme, převést text na monospaced (psaný na stroji).
Způsoby zobrazení odstavce HTML
Příklady výstupu odstavce.
Pokračujeme tedy přímo ke studiu jazyk HTML... Na závěr ještě pár slov mimo téma.
V procesu prezentace materiálu bude mnoho příkladů, které vám doporučuji udělat sami. Po napsání vzorového textu se ujistěte, že vidíte, co jste dostali (myslím, že vás to bude zajímat). Pokud používáte specializovaný HTML editor, pak má takový program zpravidla svůj vlastní vestavěný prohlížeč, se kterým můžete vidět výsledky své práce.
Pokud jsou věci velmi těsné a používáte obyčejný poznámkový blok, pak k jeho zobrazení musíte uložit zdrojový text s příponou .htm nebo .html a poté si uložený soubor prohlédnout v prohlížeči. Pokud máte Windows, tak internetový prohlížeč Průzkumník je zabudován automaticky během instalace systému.
No, zdá se, že je to vše.
Pusťme se do práce.
Povinné značky (tagy)
Existuje několik základních značek HTML, které se musí objevit v těle každé webové stránky. Každá webová stránka musí obsahovat značku (tag) nachází na samém začátku. Tato značka popisuje váš dokument jako webovou stránku vykreslenou ve formátu HTML. Přímo za deskriptorem obvykle následuje značka (tag) , což indikuje přítomnost textu obsahujícího název stránky a další informace o ní.
Sekce HEAD obvykle obsahuje značku (tag)
Běžný HTML editor má již sadu výše uvedených značek (tagů) při vytváření nové stránky. Je třeba říci, že výběr názvů webových stránek je třeba brát se vší vážností. jsou používány vyhledávači k vytváření katalogů webových stránek. Vyhledávač je web, který pomáhá uživatelům rychle najít informace, které je zajímají. Vaši stránku s větší pravděpodobností najde vyhledávač se specifickou sadou klíčových slov, pokud se tato slova objeví v názvu stránky. Mezi nejoblíbenější vyhledávače by se měl jmenovat Yandex, Google, Aport, Yahoo, Rambler.
Vytvořte odstavec, mezery, nadpis
Webové prohlížeče obvykle neberou v úvahu znaky nového řádku, které uživatel zadává do textu ve fázi jeho tvorby. Chcete-li začít nový odstavec, použijte značku (tag)
.
Po otevření stránky v okně webového prohlížeče se všechny odstavce jejího textu označí značkou (tag)
, jsou odděleny prázdnými řádky pro zlepšení rozvržení a vzhledu.
Ve výchozím nastavení prohlížeč obvykle formátuje odstavec se zarovnáním doleva. Atribut zarovnat se používá k vynucení zarovnání. Pomocí něj lze odstavce zarovnávat doleva, doprava, na střed a na šířku.
Příklad:
|
HTML kód: odstavec je zarovnán doleva... odstavec je zarovnaný vpravo... odstavec je na střed... odstavec je oprávněný... |
Displej prohlížeče: odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnán doleva odstavec zarovnaný doleva odstavec zarovnán vpravo odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec vpravo zarovnán odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován odstavec je centrován a odstavec centrován odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku odstavec zarovnán na šířku |
Webové prohlížeče automaticky zalamují text do odstavců na nový řádek. Pokud je úkolem umístit libovolnou kombinaci slov na jeden řádek, pak k tomuto účelu slouží tag (tag).
Chcete-li přejít na nový řádek, použijte značku (tag)
... Řekne prohlížeči, aby přestal umisťovat text a další prvky stránky aktuální linka a přejděte na nový řádek. Tento tag (tag) nemá vlastní lomítko, tzv. uzavírací tag (tag).
Hlavním použitím této značky je vynutit umístění vložených prvků na konkrétní místo na stránce. Je také užitečné, když potřebujete zvětšit prázdné oblasti mezi jednotlivými prvky stránky.
obrázek seznamy odkazy tabulky formuláře video audio HTML reference CSS reference Uspořádání webuS nadpisem stránky H1 a odstavcem P jsme se částečně setkali v první lekci o struktuře. html dokument... Nyní se podíváme na logické značky značek: nadpisy, odstavce, seznamy, viditelné prvky prvku Body a značky fyzického formátování podrobněji. Za tímto účelem mírně změníme naši ukázkovou stránku nebo ji přepíšeme:
Na naši cvičnou html stránku jsme přidali (jednou označeno šipkami): nadpis 2. úrovně - značka H2, dva nadpisy 3. úrovně - značka H3, jeden další odstavec - značka P, seznam s odrážkami - Ul a několik značek fyzického formátování. Otevřeme stránku v prohlížeči:
Tagy H1-H3 označují nadpisy různých úrovní – je jich šest. Nadpis nejnižší úrovně - H6. Nadpisy je nutné používat logicky a nadpis H1 nejvyšší úrovně se musí na stránce objevit jednou. Nadpis H1 je v prohlížečích zobrazen velkým písmem a velikost písma v nadpisech dalších úrovní je odpovídajícím způsobem zmenšena.
Vyhledávací roboti přikládají velkou důležitost obsahu nadpisů nejvyšší úrovně. A pro uživatele je jednodušší navigace na stránce s logicky správnými nadpisy.
Značky fyzického formátování
Stránka ukazuje vodorovný pruh, za druhým odstavcem - je vytvořen prvkem Hr, který nemá koncovou značku. Značka Br znamená nový řádek, také se nepáruje - bez uzavírací značky. Při formátování textu můžete použít několik po sobě jdoucích prvků Br - každý další přidá nový prázdný řádek.
Nyní si dejte pozor na slovo „tělo“ ve druhém odstavci, uzavřené ve spárovaném tagu B, který nastavuje slovo tučným písmem. A fráze „upravte text“ je zobrazena kurzívou – toho je dosaženo pomocí značky I. Značka U nastavuje podtržení (v našem příkladu není).
Kromě těchto značek, které zvýrazňují fragmenty textu, existuje v HTML ještě značka Strong – zvýrazní důležitý fragment (tučně). A značka Em je o něco méně důležitá (kurzíva). Vyhledávací roboti věnují větší pozornost těmto dvěma značkám, které označují důležité fráze v jejich logickém významu. Je vhodné do nich zahrnout klíčová slova, ale neměli byste to přehánět. Totéž platí pro titulky.
Zde jsou některé další značky pro formátování fyzického textu: Q – Zvýrazňuje citaci v řádku. Blockquote – do této značky lze umístit více odstavců.
Značka Code se používá k označení fragmentů kódu, musí se používat se zalomením řádků Br a nezalomitelnými mezerami: k jejich označení se používají speciality. znak (první znak je ampersand: klávesa 7 při držení Shift v anglickém rozložení). Ale tag Pre zobrazuje kód programu tak, jak je, s mezerami a tolika řádky, kolik je v kódu.
Toto jsou nejčastěji používané prvky návrhu textu, další formátovací značky a speciální znaky naleznete v HTML Reference umístěné na stejném webu - v něm pohodlná navigace abecedně.
Vytváření html seznamů
Zbývá zvážit tvorbu seznamů, máme to označené a nastavené párovým tagem Ul a jeho prvky, respektive položky, tagem Li (1. screenshot). Pomocí atributu type pro značky Ul i Li můžeme změnit typ značky. Standardně, tzn. pokud atribut není uveden, jeho hodnota je "disk" - kruh. Atribut type můžete nastavit s hodnotou "circle" - kruh. Nebo takhle:
- - dostaneme seznam se čtvercovými značkami.
Vlastně se nebudu zdržovat atributy tagů, kromě těch povinných a pár příkladů pro Běžné porozumění... Je lepší použít Vlastnosti CSS- pojďme na ně a atributy najdete v referenční knize.
Kromě seznamů s odrážkami existují seznamy číslované, které jsou specifikovány tagem Ol, a položky seznamu, jako ty s odrážkami, tagem Li. Navíc pro oba typy seznamů můžete vytvořit vnořené seznamy... Pojďme si úkol zkomplikovat a změnit náš seznam na ukázkové stránce na následující:
Otevřeme si stránku v prohlížeči, jasně vidíme: číslovaný seznam s vnořeným seznamem s odrážkami, pro který hodnota "čtverec" atributu type nastavuje značky-čtverce.
- v procesu tvorby webu musíme hodně pracovat s textovými bloky, případně textovými frázemi. Jednou jsem potřeboval přidat textovou frázi, aby před touto textovou frází nějaká byla odsadit text od html okraje blok, do kterého byl daný text přidán.
První metoda je tedy nejpřirozenější a nejjednodušší. Chcete-li odsadit před text, přidejte před text html kód mezery – html kód mezery můžete přidat v libovolném html editoru.
Zde je příklad pracovního kódu pro nastavení odsazení textu pomocí kódu mezery:
Html odsadit text doleva, použijte kód mezery
PROTI tento příklad, před textem, který jsme vybrali, je kód mezery -& nbsp; přidáno čtyřikrát, v důsledku toho dostaneme odsazení, které potřebujeme.
Víme, že bílý kód zpracuje každý prohlížeč. Přidáním požadovaného počtu mezer před text tedy můžete získat požadované odsazení textu.
Dobrá věc na této metodě je, že bude zaručeně fungovat v jakémkoli prohlížeči.
Ale mít tato metoda existuje významná nevýhoda. Aby bylo odsazení pro text dostatečně velké, v html kódu budete muset před text přidat velké množství mezer, což nemusí vypadat hezky, těžkopádně a neprofesionálně.
Jednou z možností řešení tohoto problému je následující způsob nastavení odsazení.
Odsazení textu HTML, metoda dvě – tato metoda je založena na vlastnostech značky blockquote. Tento tag nastavuje odsazení přibližně 40 pixelů doleva a doprava pro text v něm umístěný. Polstrování je navíc nastaveno nahoře a dole. Příklad html kód pro použití této metody je uveden níže:
vlevo použijte značku blockquote
Jak vidíte, tento způsob nastavení odsazení textu je velmi snadno použitelný, ale tento způsob má také značnou nevýhodu. Odsazení, které značka nastavuje bloková nabídka, je pevná a vždy se rovná stejné hodnotě – 40px.
K nápravě situace a při přidávání html odsazení a pro text mít možnost nastavit libovolnou hodnotu, použijeme třetí metodu.
Odsazení textu HTML, metoda tři.
Zde použijeme vlastnost text-indent CSS kaskádových stylů.
Pokud otevřeme CSS referenci, na stránce s popisem vlastností text-indent uvidíme, že pomocí text-indent můžeme nastavit míru odsazení prvního řádku nebo prvního odstavce libovolného blok textu.
Zvažujeme příklad s krátkým textovým blokem, takže vlastnosti text-indent jsou pro náš případ v pořádku.
Níže je html kód, který odsazuje text pomocí text-indent. Z příkladu můžete vidět, že nastavením různých hodnot argumentů pro odsazení textu můžeme změnit velikost odsazení textu:
HtmlOdrážkatext, funguje CSS styl - odsazení textu
Tento způsob nastavení odsazení textu je dle mého názoru nejoptimálnější, ale přesto zvažte jiný způsob nastavení odsazení pomocí obrázků.
Odsazení HTML textu, čtvrtý způsob – zde použijeme obrázek pro nastavení odsazení.
Jako pracovní příklad se podívejme na html kód, který ukazuje, jak tato metoda funguje:
vlevo použijte obrázek
Z uvedeného příkladu je jasně vidět, že změnou šířky obrázku můžeme změnit polohu textu, tedy nastavit požadované odsazení textu.
Jako obrázek můžete použít obrázek, jehož šířka a výška se rovná jednomu pixelu. Chcete-li zabránit tomu, aby byl obrázek, který používáme, na stránce viditelný, nastavte jeho barvu tak, aby byla přesně stejná jako pozadí stránky webu.
Podle mého názoru jsou výše uvedené způsoby nastavení odsazení textu dostačující pro uspořádání odsazení, které potřebujete v jakékoli situaci při přidávání obsahu na stránku vašich stránek.