Linie i akapity

Ta sekcja opisuje kod HTML powiązany z liniami i akapitami. Zaczynamy od podstawowego <DIV> i <P>.

Element < DIV > Element

<DIV>, a element blokowy, po prostu definiuje blok treści na stronie. Poza zdefiniowaniem bloku samo <DIV> nic nie robi. Na przykład poniższy kod tworzy element <DIV> z dwoma akapitami w środku. Zauważ, że możesz umieścić elementy <P> wewnątrz elementu <DIV>.

Co daje nam:

Atrybut ALIGN

ALIGN ustawia wyrównanie zawartości elementu <DIV>. Wszystkie cztery wartości, LEFT, CENTER, RIGHT i JUSTIFY, są dobrze obsługiwane. LEFT to wartość domyślna.
Ten kod pokazuje wartość domyślną:

Co daje nam:

Element akapitu

<P> wskazuje początek nowego akapitu. Zwykle jest to renderowane z dwoma powrotami karetki, tworząc pojedynczy pusty wiersz między dwoma akapitami:

Co daje to:

Atrybut ALIGN

ALIGN wskazuje wyrównanie akapitu.

Co daje to:

Atrybut CLEAR

CLEAR jest rozpoznawany przez niektóre przeglądarki i działa bardzo podobnie do <BR>. Jednak nie jest to standardowy kod HTML i nadal nie jest obsługiwany, więc zamiast tego użyj <BR>.

Czy P Endtag jest wymagany?

W3C mówi o </P>: „Znacznik końcowy jest opcjonalny, ponieważ parser zawsze może go wywnioskować”. Oznacza to, że nowe <P> oznacza koniec poprzedniego <P> (i wszelkie wyrównanie ustawione przez poprzednie <P>).

Każdy inny element na poziomie bloku, taki jak <HR> lub <BLOCKQUOTE>, również powinien się kończyć akapit. Jednak nie zawsze działa to w ten sposób. Na przykład niektóre przeglądarki wyrównują tekst do prawej strony nawet po tabeli. W poniższym przykładzie MSIE renderuje część „po tabeli” jako wyrównaną do prawej, podczas gdy Netscape renderuje go jako wyrównany do lewej:

Renderowanie MSIE	Renderowanie Netscape

Jeśli ustawisz wyrównanie lub inną właściwość stylu dla elementu akapitu, najlepiej użyć </P>. Jeśli nigdy nie używasz set any styles, możesz generalnie zignorować </P>.

Więcej informacji na ten temat znajdziesz w specyfikacji W3C.

Wyrównanie tekstu

Wyrównanie dowolnego elementu HTML można ustawić za pomocą reguły stylu text-align. text-align może służyć do ustawiania wyrównania akapitu, sekcji dokumentu, a nawet całego dokumentu. text-align może służyć do ustawiania wyrównania do lewej, prawej, wyśrodkowanej lub wyjustowanej.

Załóżmy na przykład, że chcemy wyśrodkować akapit.Najpierw utworzymy klasę stylów o nazwie centeralign, umieszczając następujący kod w sekcji „dokumentu:

Teraz możemy ustawić dla każdego akapitu klasę centeralign w następujący sposób:

Co daje nam to:

Możemy zastosować tę samą klasę do elementu <DIV>, aby wyśrodkować sekcję page:

Co daje nam:

Uzasadnienie

Domyślnie , większość przeglądarek renderuje tekst z poszarpaną prawą krawędzią.

Jeśli chcesz, aby cały tekst był renderowany jak w książce z równą prawą krawędzią, możesz użyć jednej reguły stylu. Aby ustawić wyjustowaną kopię całego tekstu, wykonaj następujące kod i ndo sekcji „twojego dokumentu.

Problem z uzasadnieniem polega na tym, że wiele przeglądarek jest zdezorientowanych co do tego, gdzie znajduje się ostatni wiersz tekstu (co nie powinno być uzasadnione). Na przykład MSIE 4.x jest zdezorientowany, gdy bezpośrednio po bloku tekstu następuje tabela. Zwróć uwagę, że na tym obrazku w ostatnim wierszu tekstu słowa „jeden z naszych agentów” rozciągają się na całą linię:

Aby zaradzić tej sytuacji, otocz wszystkie bloki tekstu znakami <P> i </P>:

Teraz nasz błędny MSIE renderuje rzeczy lepiej rozsądnie:

Wcięcie

Istnieje kilka sposobów wcięcia akapitów i całych sekcji strony internetowej . W kilku następnych sekcjach opisano cztery główne techniki wcięcia:

• Wcięcie akapitu
• Wcięcie sekcji strony
• Wcięcie całej strony
• Wcięcie pierwszego wiersza każdego akapitu

Jednak zanim zaczniemy, warto powiedzieć kilka słów o <BLOCKQUOTE> . Istnieje popularne błędne przekonanie, że <BLOCKQUOTE> powinno być używane do wcinania sekcji strony. Przekonanie to wynika z faktu, że większość wizualnych przeglądarek internetowych renderuje cytowany tekst z wcięciem. Pamiętaj jednak, że HTML nie jest językiem formatowania i daje nieprzewidywalne rezultaty, gdy próbujesz go używać jako takiego. Użyj <BLOCKQUOTE>, jeśli masz cytowany blok tekstu, w przeciwnym razie użyj technik opisanych w kilku następnych akapitach.

Wcięcie akapitu

Możesz wciąć pojedynczy akapit za pomocą stylów. Na przykład załóżmy, że chcemy wciąć akapit o 50 punktów. Najpierw tworzymy klasę o nazwie z wcięciem z następującymi regułami stylu. Umieść ten kod w „sekcji twojego dokumentu.

Teraz ustawiliśmy klasę akapitu na wcięcie, dodając atrybut CLASS do <P> tag:

Co daje nam ten akapit z wcięciem:

Wcięcie sekcji strony

Wcięcie więcej niż jednego paragrafu agraf, użyjemy tego samego stylu, co w poprzednim przykładzie. Umieść ten kod w „sekcji swojej strony:

Następnie użyjemy klasy z wcięciem w <DIV> element:

Co daje nam następującą sekcję z wcięciem:

Wcięcie całej strony

Jeśli chcesz, aby cała strona była wcięta, ustaw regułę stylu, która ustala dopełnienie z prawej i lewej strony dla elementu „. Na przykład ten styl ustawia wypełnienie z prawej i lewej strony na 100 pikseli:

Ta technika jest popularna w połączeniu z obrazem tła. Na przykład załóżmy, że chcemy, aby ten obraz znajdował się w lewej części strony.

Ten obraz ma szerokość 56 pikseli, więc ustawmy wypełnienie na 60.Poniższy styl ustawia obraz tła, ustawia powtarzanie na powtarzanie-y (powtarzanie tylko w pionie w dół po lewej stronie strony) i ustawia lewe wypełnienie na 60 (nie ustawimy prawego wypełnienia).

Oto jak to może wyglądać:

Wcięcie pierwszego wiersza każdego akapitu

Wcięcie pierwszego wiersza każdego zestawu akapitów reguła stylu wykorzystująca wcięcie tekstu. Na przykład poniższy kod wcina pierwszy wiersz każdego akapitu o 30 punktów. Skopiuj ten kod do „sekcji swojej strony:

Ten kod wcina pierwszy wiersz każdego <P> element, ale prawdopodobnie napotkasz irytujący problem. Jeśli jesteś jak większość projektantów, prawdopodobnie nie umieszczasz litery P przed pierwszym akapitem ani między nagłówkiem, na przykład <H1> i tekst, który następuje po nim. Niestety, to jest dokładnie to, co musisz zrobić, jeśli chcesz, aby akapit był wcięty. Tekst w takich sytuacjach jest częścią czegoś, co nazywa się „blokami anonimowymi” i nie można do niego odwoływać się bezpośrednio. Aby dodać wcięcie, musisz umieścić tekst w elemencie <P>.

Na przykład poniższy kod nie zawiera elementu <P> między nagłówkiem a tekstem, więc tekst nie jest wcięty:

Co daje nam:

Ten kod ma <P> między nagłówkiem a tekstem, więc tekst jest wcięty:

< BR > Element

<BR> wstawia pojedynczy powrót karetki . Podczas gdy <P> wskazuje początek nowego akapitu, <BR> oznacza powrót karetki tylko w tym samym akapicie. <BR> jest zwykle renderowane z pojedynczym powrotem karetki.

Na przykład ten kod:

Który produkuje:

Ponieważ <BR> nie rozpoczyna nowego akapitu, wszystkie obecne atrybuty akapitu pozostają takie same:

Który daje to:

The CLEAR Attribute

CLEAR mówi, że oprócz wstawiania końca wiersza, jeśli po prawej lub lewej stronie znajduje się obraz lub inny obiekt, przejdź dalej. Na przykład ten kod mówi, że obraz powinien być wyrównany do lewej krawędzi strony. Następnie jest tekst, a następnie LEFT. Tekst następujący za obrazkiem:

Który daje to:

Przyjdź na imprezę Halloween! bawcie się świetnie.
20:00 do północy. Załóż kostium lub bądź przerażający!

BOTH to to samo co ALL, ale nie jest obsługiwane w wielu przeglądarkach, więc zamiast tego użyj ALL.

Element CENTER

Zalecenie dotyczące użytkowania: użyj <DIV>.

Co daje nam:

Co jest tym samym, co:

Co daje nam:

Element < HR > Element

<HR> rysuje poziomą linię („linię poziomą”) w poprzek strony. To wszystko. Jak na tak prostą koncepcję, reguły poziome są zaskakująco popularne. Zacznijmy od podstaw. <HR> nie ma tagu końcowego i nie wymaga atrybutów:

Który tworzy tę regułę:

<HR> zwykle wskazuje na podział na stronie. Rzeczy przed regułą znajdują się w innej „sekcji” niż rzeczy późniejsze. Z tego powodu wielu projektantów uważa <HR> za tag logiczny, a nie za tag układu.

Atrybut NOSHADE

NOSHADE wskazuje, że reguła powinna być przedstawiona jako płaska, a nie trójwymiarowa.Porównaj tę zwykłą poziomą regułę:

Z regułą NOSHADE:

Co daje nam:

NOSHADE jest często używane w połączeniu z SIZE:

Tworzy następującą regułę:

NOSHADE jest popularny, ponieważ przeglądarki zazwyczaj nie renderują dobrze reguł trójwymiarowych. Rzeczywiście, w wielu przypadkach reguła jest prezentowana w tym samym kolorze co tło, przez co jest prawie niewidoczna.

Atrybut ROZMIAR

SIZE wskazuje wysokość reguły. (Myślę, że nazwanie tego „HEIGHT” byłoby po prostu zbyt łatwe.) Szerokość w poziomie – patrz WIDTH. Porównaj niektóre z tych rozmiarów:

Co daje nam następujące zasady:

Przeglądarki zazwyczaj nie renderują <HR> więcej niż 100 .

Atrybut SZEROKOŚĆ

WIDTH ustawia poziomą szerokość reguły. Możesz wyrazić rozmiar w pikselach lub w procentach.

Te <HR> są ustawione za pomocą szerokości pikseli:

Co daje nam te zasady:

WIDTH jest zwykle wyrażana w procentach. Jeśli używasz szerokości procentowej, pamiętaj, aby ująć wartość w cudzysłowy.

Tworzy następujące reguły:

Wartość domyślna to 100%. Domyślną regułą jest wyśrodkowany. Aby ustawić inne wyrównanie, użyj ALIGN.

Procentowe szerokości to wartości procentowe f dostępnej szerokości, a nie pełnej szerokości strony. Na przykład, jeśli reguła znajduje się w tabeli, szerokość jest procentem szerokości komórki tabeli.

Daje to następującą tabelę:

Atrybut ALIGN

ALIGN ustawia wyrównanie reguła. ALIGN jest przydatne tylko wtedy, gdy używasz również WIDTH.

Daj nam to:

Element < PRE > Element

<PRE> to jeden z najbardziej przydatnych tagów w przyborniku HTML. <PRE> oznacza tekst jako „wstępnie sformatowany” – wszystkie spacje i powrót karetki są renderowane dokładnie tak, jak je wpisujesz.

Co daje to:

<PRE> tekst jest renderowany czcionką o stałej szerokości, co oznacza, że wszystkie znaki i spacje są taka sama szerokość. Stała szerokość ułatwia układanie tekstu tak, jak chcesz, więc <PRE> świetnie nadaje się do tworzenia „szybkich i brudnych” tabel, takich jak powyższa.

<PRE> NIE powoduje, że przeglądarka ignoruje tagi. Nadal możesz tworzyć linki i inne gadżety:

Daje to:

Gdy zaczniesz dodawać znaczniki , trudniej jest zobaczyć, jak wygląda tekst (pomaga równomierne rozłożenie tagów, jak w powyższej tabeli). <PRE> jest często używany do cytowania dużych bloków tekstu, których nie chcesz „HTMLizować”, ale „może zepsuć tekst”. W przypadku tabeli dłuższej niż kilka wierszy zwykle na dłuższą metę łatwiej jest użyć kodu tabeli.

„Element

” zapobiega występowaniu powrotu karetki. Na przykład poniższy kod tworzy bezsensowny wiersz jednej długiej linii:

Co daje to:

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 daje to:

„Element

is for the situation where you have used, aby zapobiec łamaniu linii w sekcji tekstu, a potem chcesz powiedzieć „ale możesz przerwać TUTAJ, jeśli chcesz”.”nie wymusza podziału wiersza, po prostu pozwala na:

Daje:

Po wynalezieniu , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, na przykład:

Co daje nam ten akapit:

Adam jest autorem technicznym, który specjalizuje się w dokumentacji dla programistów i samouczkach.