Řádky a odstavce

Tato část popisuje HTML související s řádky a odstavci. Začínáme základním <DIV> a <P> značky.

< DIV > prvek

<DIV>, a prvek na úrovni bloku, jednoduše definuje blok obsahu na stránce. Kromě definice bloku nedělá <DIV> nic. Například následující kód vytvoří <DIV> prvek se dvěma odstavci uvnitř. Všimněte si, že můžete <P> prvky vložit do <DIV>.

Což nám dává:

Atribut ALIGN

ALIGN nastaví zarovnání obsahu prvku <DIV>. Všechny čtyři hodnoty, LEFT, CENTER, RIGHT a JUSTIFY jsou dobře podporovány. LEFT je výchozí hodnota.
Tento kód zobrazuje výchozí:

Což nám dává:

Odstavec

<P> označuje začátek nového odstavce. To se obvykle vykreslí se dvěma návraty vozíku, čímž se mezi dvěma odstavci vytvoří jeden prázdný řádek:

Což vede k tomuto:

Atribut ALIGN

ALIGN označuje zarovnání odstavce.

Což vede k tomuto:

Atribut CLEAR

CLEAR je některými prohlížeči rozpoznán a funguje velmi podobně jako <BR>. Nejedná se však o standardní HTML a stále není obecně podporován, proto použijte místo toho <BR>.

Je vyžadován koncový štítek P?

W3C říká o </P>: „Koncová značka je volitelná, protože ji analyzátor může vždy odvodit.“ To znamená, že nový <P> implikuje konec předchozího <P> (a jakékoli zarovnání nastavené předchozím <P>).

Také by měl končit jakýkoli jiný prvek na úrovni bloku, například <HR> nebo <BLOCKQUOTE> odstavec. Ne vždy to však tak funguje. Některé prohlížeče například zarovnají text doprava i za tabulku. V následujícím příkladu vykreslí MSIE část „za tabulkou“ jako zarovnanou vpravo, zatímco Netscape jej vykresluje jako zarovnaný doleva:

vykreslování MSIE	vykreslování Netscape

Pokud nastavíte zarovnání nebo jinou vlastnost stylu pro prvek odstavce, je nejlepší použít </P>. Pokud nikdy nepoužíváte žádné styly, můžete </P> obecně ignorovat.

Další informace o tomto tématu naleznete ve specifikacích W3C.

Zarovnání textu

Zarovnání libovolného prvku HTML můžete nastavit pomocí pravidla stylu text-align. text-align lze použít k nastavení zarovnání odstavce, části dokumentu nebo dokonce celého dokumentu. text-align lze použít k nastavení zarovnání doleva, doprava, na střed nebo zarovnání.

Předpokládejme například, že chceme vycentrovat odstavec.Nejprve vytvoříme třídu stylů s názvem centeralign vložením následujícího kódu do části dokumentu:

Nyní můžeme nastavit jakýkoli odstavec na středovou třídu takto:

Což nám dává toto:

Stejnou třídu můžeme použít na prvek <DIV>, který vycentruje část stránka:

Což nám dává:

Odůvodnění

Ve výchozím nastavení , většina prohlížečů vykresluje text se zubatým pravým okrajem.

Pokud chcete, aby se veškerý text vykresloval jako v knize se sudým pravým okrajem, můžete použít jedno pravidlo stylu. Chcete-li nastavit veškerý text na zarovnání, zkopírujte následující kód i Do části „vašeho dokumentu.

Problém s odůvodněním spočívá v tom, že mnoho prohlížečů je zmateno, kde je poslední řádek textu (což by se nemělo být oprávněný). Například MSIE 4.x je zmatený, když za blokem textu bezprostředně následuje tabulka. Na tomto obrázku si všimněte, že poslední řádek textu roztáhne slova „jeden z našich agentů“ přes celý řádek:

Abychom napravili tuto situaci, obklopte všechny bloky textu <P> a </P>:

Nyní naše potulná MSIE vykresluje věci více rozumně:

Odsazení

Existuje několik způsobů odsazení odstavců a celých částí vaší webové stránky Následující několik částí popisuje čtyři hlavní techniky odsazení:

• Odsazení odstavce
• Odsazení odsazení stránky
• Odsazení celé stránky
• Odsazení prvního řádku každého odstavce

Než však začneme, stojí za to říct několik slov o <BLOCKQUOTE> . Existuje populární mylná představa, že <BLOCKQUOTE> by měl být použit k odsazení částí stránky. Tato víra vychází ze skutečnosti, že většina vizuálních webových prohlížečů vykresluje citovaný text jak je odsazeno. Nezapomeňte však, že HTML není formátovací jazyk a poskytuje nepředvídatelné výsledky, když se jej pokusíte použít jako jeden. Pokud máte citovaný blok textu, použijte <BLOCKQUOTE>, jinak použijte techniky popsané v několika následujících odstavcích.

Odsazení odstavce

Jeden odstavec můžete odsadit pomocí stylů. Předpokládejme například, že chceme odsadit odstavec o 50 bodů. Nejprve vytvoříme třídu nazvanou odsazení s následujícími pravidly stylu. Vložte tento kód do části dokumentu.

Nyní nastavíme třídu odstavce na odsazenou přidáním atributu CLASS do <P> tag:

Což nám dává tento odsazený odstavec:

Odsazení části stránky

Odsazení více než jednoho par agraph použijeme stejný styl, jaký jsme nastavili v předchozím příkladu. Vložte tento kód do sekce na vaší stránce:

Potom použijeme odsazenou třídu v <DIV> element:

Což nám dává odsazenou část, jako je tato:

Odsazení celé stránky

Chcete-li odsadit celou stránku, nastavte pravidlo stylu, které nastaví pravé a levé odsazení prvku „. Tento styl například nastaví pravé a levé polstrování na 100 pixelů:

Tato technika je populární při použití v kombinaci s obrázkem na pozadí. Předpokládejme například, že chceme, aby tento obrázek běžel po levé straně stránky.

Tento obrázek má šířku 56 pixelů, takže nastavíme výplň na 60.Následující styl nastaví obrázek na pozadí, nastaví opakování na opakování-y (opakuje se pouze svisle dolů po levé straně stránky) a nastaví levé polstrování na 60 (pravé polstrování nenastavíme).

Takto to může vypadat:

Odsazení prvního řádku každého odstavce

Odsazení prvního řádku každé sady odstavců pravidlo stylu využívající odsazení textu. Například následující kód odsadí první řádek každého odstavce o 30 bodů. Zkopírujte tento kód do sekce na své stránce:

Tento kód odsadí první řádek každého <P> prvek, ale pravděpodobně narazíte na nepříjemný problém. Pokud jste jako většina návrhářů, pravděpodobně nedáváte P před první odstavec nebo mezi záhlaví jako <H1> a text, který za ním následuje. Bohužel je to přesně to, co musíte udělat, pokud chcete, aby byl odstavec odsazen. Text v těchto situacích je součástí něčeho, co se nazývá „anonymní bloky“, a nelze na něj přímo odkazovat. Chcete-li jej odsadit, musíte text vložit do elementu <P>.

Takže například následující kód nemá <P> mezi záhlaví a textem, takže text není odsazen:

Což nám dává:

Tento kód má mezi záhlavím a textem <P>, takže text je odsazen:

< BR > Element

<BR> vloží jeden návrat vozíku . Zatímco <P> označuje začátek nového odstavce, <BR> implikuje pouze návrat vozíku ve stejném odstavci. <BR> se obvykle vykresluje s jediným návratem vozíku.

Například tento kód:

Který produkuje toto:

Protože <BR> nezačíná nový odstavec, všechny atributy aktuálního odstavce zůstanou stejné:

Což vede k tomuto:

Atribut CLEAR

CLEAR říká, že kromě vložení zalomení řádku, je-li vpravo nebo vlevo obrázek nebo jiný objekt, jděte také kolem něj. Tento kód například říká, že obrázek by měl být zarovnán na levé straně stránky. Pak je tu nějaký text, pak LEFT. Následující text je za obrázkem:

Což vede k tomuto:

Pojďte dolů na Halloweenskou párty! mít skvělý čas.
20:00 do půlnoci. Noste kostým nebo přijďte jako své vlastní děsivé já!

BOTH je stejný jako ALL, ale není podporováno na tolika prohlížečích, že místo toho použijte ALL.

The CENTER Element

Doporučení k použití: Použijte <DIV> místo toho.

Což nám dává:

Což je stejné jako:

Což nám dává:

Element < HR >

<HR> nakreslí vodorovnou čáru („vodorovné pravidlo“) napříč stránkou. A je to. U tak jednoduchého konceptu jsou vodorovná pravidla překvapivě populární. Začněme základem. <HR> nemá žádnou koncovou značku a nevyžaduje žádné atributy:

Což vytváří toto pravidlo:

<HR> obvykle označuje rozdělení na stránce. Věci před pravidlem jsou v jiné „sekci“ od věcí po. Z tohoto důvodu mnoho designérů považuje <HR> za logickou značku, nikoli za značku rozložení.

Atribut NOSHADE

NOSHADE označuje, že pravidlo by mělo být prezentováno jako ploché místo trojrozměrné.Porovnejte toto běžné horizontální pravidlo:

S pravidlem NOSHADE:

Což nám dává:

NOSHADE se často používá ve spojení s SIZE:

Vytvoří toto pravidlo:

NOSHADE je populární, protože prohlížeče obvykle moc dobře nevykreslují trojrozměrná pravidla. Pravidlo je za mnoha okolností prezentováno ve stejné barvě jako pozadí, takže je téměř neviditelné.

Atribut SIZE

SIZE označuje výšku pravidla. (Myslím, že nazvat jej „VÝŠKO“ by bylo příliš snadné.) Informace o vodorovné šířce viz WIDTH. Porovnejte některé z těchto velikostí:

Což nám dává tato pravidla:

Prohlížeče obecně nevykreslí <HR> žádný větší než 100 .

Atribut WIDTH

WIDTH nastavuje horizontální šířku pravidla. Velikost můžete vyjádřit v pixelech nebo v procentech.

Tyto <HR> jsou nastaveny na šířku pixelů:

Což nám dává tato pravidla:

WIDTH se obvykle vyjadřuje v procentech. Pokud používáte šířku v procentech, nezapomeňte uvést hodnotu v uvozovky.

Vytvoří tato pravidla:

Výchozí hodnota je 100%. Ve výchozím nastavení je toto pravidlo na střed. Chcete-li nastavit jiné zarovnání, použijte ALIGN.

Procentuální šířky použijte procento o f dostupná šířka, ne celá šířka stránky. Pokud je například pravidlo v tabulce, pak šířka je procento šířky buňky tabulky.

Což vytváří tuto tabulku:

Atribut ALIGN

ALIGN nastaví zarovnání pravidlo. Funkce ALIGN je užitečná, pouze pokud používáte WIDTH.

Dejte nám toto:

Prvek < PRE >

<PRE> je jedna z nejvhodnějších značek v sadě nástrojů HTML. <PRE> označí text jako „předformátovaný“ – všechny mezery a konce řádku se vykreslí přesně tak, jak je napíšete.

Což vede k tomuto:

<PRE> text je vykreslen písmem s pevnou šířkou, což znamená, že všechny znaky a mezery jsou stejná šířka. Pevná šířka usnadňuje rozložení textu tak, jak chcete, takže <PRE> je skvělý pro vytváření „rychlých a špinavých“ tabulek, jako je ten výše.

<PRE> nezpůsobí, že prohlížeč ignoruje značky. Stále můžete vytvářet odkazy a další vychytávky:

Produkuje toto:

Když začnete přidávat označení , je těžší vidět, jak text dopadne (rozmístění značek rovnoměrně, jak pomáhá tabulka výše). <PRE> se často používá k citování velkých bloků textu, které nechcete „HTMLizovat“, ale „by mohl text pokazit. U tabulky větší než několik řádků je obvykle z dlouhodobého hlediska jednodušší použít kód tabulky.

„Element

“ zabraňuje návratu vozíku. Například následující kód vytvoří nesmyslnou báseň jedné dlouhé řady:

Který vytvoří toto:

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:

Což vede k tomuto:

„Element

is for the situation where you have used k zabránění zalomení řádku v sekci textu, a pak chcete říct „ale pokud chcete, můžete to prolomit ZDE“.“nevynutí konec řádku, pouze jej povolí:

Produkuje:

Když jsme vymysleli , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, takto:

Což nám dává tento odstavec:

Adam je technický spisovatel, který se specializuje na vývojářskou dokumentaci a výukové programy.