Podívejte se, jak bílé místo ve formátu HTML je zpracováno prohlížečem
Pokud jste začínající webový designér, jednou z mnoha věcí, které budete muset včas pochopit, je způsob, jakým webové stránky zpracovávají bílé místo v kódu webu.
Bohužel, způsob, jakým prohlížeče zpracovávají bílé místo, není nejprve příliš intuitivní, zvlášť pokud se dostanete do HTML a porovnáte jej s tím, jak se s bílým prostorem zachází v programech pro zpracování textu, s nimiž můžete být více obeznámeni.
V softwaru pro zpracování textu můžete v dokumentu přidat velké množství mezery nebo karty a rozložení se promítne do zobrazení obsahu dokumentu. Není tomu tak u HTML nebo u webových stránek. Jako takový je velmi důležité učit se, jak je bílý prostor skutečně zpracováván webovými prohlížeči.
Vzdálenost v tisku
V softwaru pro zpracování textu jsou tři hlavní znaky bílého prostoru prostor, karta a návrat vozíku. Každá z nich funguje zřetelně, ale v prohlížeči HTML jsou všechny v podstatě stejné. Ať už umístíte jedno místo nebo 100 mezer v značce HTML, nebo rozmístíte rozteč mezi kartami a vraky, všechny budou konsolidovány do jednoho místa při vykreslení stránky prohlížečem. V terminologii webového designu je to známé jako kolaps bílého prostoru. Tyto typické mezistupně nelze použít pro přidání mezery na webové stránce, protože prohlížeč v případě vykreslení v prohlížeči překlopí více míst do jediného místa,
Proč někdo používá karty?
Typicky, když lidé používají karty v textovém dokumentu, používají je pro účely rozvržení nebo k tomu, aby se text přesunul na určité místo nebo aby byl určitou vzdálenost od jiného prvku. Při návrhu webových stránek nemůžete použít výše uvedené znaky místa pro dosažení těchto vizuálních stylů nebo rozvržení.
Při návrhu webových stránek by použití kódu navíc v kódu bylo čistě pro snadné čtení tohoto kódu. Weboví vývojáři a vývojáři často používají karty k odsazení kódu tak, aby viděli, které prvky jsou děti jiných prvků -, ale tyto odrážky nemají vliv na vizuální rozložení stránky samotné. Pro ty potřebné změny vizuálního uspořádání se budete muset obrátit na CSS (kaskádové styly).
Použití CSS k vytvoření karet HTML a mezery
Webové stránky dnes jsou postaveny s oddělením struktury a stylu. Struktura stránky je zpracována HTML, zatímco styl je diktován CSS. To znamená, že pro vytvoření rozestupu nebo dosažení určitého rozvržení byste se měli obracet na CSS a nepokoušet se jednoduše přidat do HTML kódu znaky odstupu.
Pokud se pokoušíte použít k vytvoření sloupců textu, můžete místo toho použít prvky
Pokud jsou data, která vynášíte, jsou tabulková data, můžete tabulky přizpůsobit tak, jak chcete. Tabulky často mají špatný rap v návrhu webových stránek, protože byly po mnoho let zneužívány jako nástroje čistého rozvržení, ale tabulky jsou stále dokonale platné, pokud váš obsah obsahuje výše uvedená tabulková data.
Okraje, polstrování a zarovnání textu
Nejčastější způsoby, jak vytvářet mezery s CSS, je použití jednoho z následujících stylů CSS:
- okraj
- polstrování
- text-odrážka
Například můžete odsadit první řádek odstavce jako kartu s následujícími CSS (poznamenat, že to předpokládá, že váš odstavec má atribut třídy "first" připojený k němu):
p.first {
textová odrážka: 5em;
}}
Tento odstavec by nyní byl odsazen na 5 znaků.
Můžete také použít okraje nebo vlastnosti vycpávky v CSS pro přidání odstupu k hornímu, dolnímu, levému nebo pravému (nebo kombinaci těchto stran) prvku. Konečně můžete dosáhnout jakéhokoli rozložení potřebného otočením do CSS.
Přesunutí textu více než jednoho prostoru bez CSS
Je-li vše, co chcete, aby byl váš text přesunut více než jeden prostor od předchozí položky, můžete použít nerozbitný prostor.
Chcete-li použít neporušený prostor, jednoduše přidejte & nbsp; tolikrát, kolikrát ji potřebujete ve značce HTML.
Pokud jste například chtěli přesunout své slovo o pět míst, můžete před slovem přidat následující.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML to respektuje a nebude je sbalit do jediného místa. To je však považováno za velmi špatnou praxi, neboť přidává další značku HTML do dokumentu pouze pro dosažení potřeb rozložení. S odkazem na toto oddělení struktury a stylu byste se měli vyvarovat přidání netransparentních prostorů jednoduše k dosažení požadovaného efektu rozložení a místo toho byste měli používat okraje CSS a polstrování.