HTML/Formatowanie tekstu

Z Wikibooks, biblioteki wolnych podręczników.
Przejdź do nawigacji Przejdź do wyszukiwania
Nazwa Opis Kod Przykład Uwagi
Akapit Podstawa. By wyświetlił się tekst, wystarczy najczęściej sam tekst bez obróbki. Te kilka znaczników jednak podnoszą czytelność i estetyczność strony. Omówione w przykładzie.

...

- akapit (lub wyrównanie do lewej)
  • <p align="right">...</p> - Wyrównanie do prawej
  • <p align="center">...</p> - Wyśrodkowanie
  • <p align="justify">...</p> - Justowanie
zwykły tekst (domyślnie wyrównany do lewej)
  • <right>Wyrównanie do prawej</right>
  • Wyśrodkowanie
wartość ALIGN została zdeprecjonowana (przestarzała) w HTML 4.01.
Blok Powszechnie stosowany do tworzenia układu strony z pomocą formatowania CSS. <div id=class= lang="" dir="" title="" style="" >
Koniec linii Bardzo przydatny, ponieważ HTML to nie kartka czy edytor tekstu i nie rozumie nic przez to, jak próbujemy zrobić nowy wiersz samym enterem. Dodawany zawsze na końcu wersa. < br /> Tu jest pierwszy wers

A tu drugi

Stosowany także w języku MediaWiki
Blokada przełamania wiersza Przeglądarka automatycznie zawija wiersze, które nie mieszczą się na ekranie. Ten znacznik powoduje blokadę tego przy konkretnym tekście. <nobr>...</nobr> Podczas druku takiego dokumentu, niezwinięty tekst będzie ucięty! Ponadto, jest to kolejny zdeprecjonowany znacznik, HTML 4.01
Pogrubienie Nazwa mówi sama za siebie <b>...</b> To jest wytłuszczony tekst
Pochylenie Inaczej kursywa <i>...</i> to jest pochylony tekst; kursywa
Podkreślenie jak ww. <u>...</u> Kolejny, zdeprecjonowany przez specyfikację HTML 4.01
Przekreślenie Nazwa mówi sama za siebie. Jest to kolejny zdeprecjonowany znacznik. <s>...</s> A to tak właśnie wygląda! Używany jest w MediaWiki
Migotanie Zdeprecjonowany. Zalecane użycie CSS <blink>...</blink>
Wyróżnienie Używany zamiast zwykłego formatowania tekstu kursywą i podgrubieniem. Pierwszy znacznik: <em>...</em>

I drugi znacznik: <strong>...</strong>

tu wyróżnienie kursywą

a tu pogrubieniem

Używany w MediaWiki
Indeks Pozwala na stawianie indeksów górnych i dolnych górny: <sup>...</sup>

Dolny: <sub>...</sub>

Proszę bardzo Używany w MediaWiki
Czcionka Pozwala urozmaicić i uatrakcyjniść tekst. Najczęściej pisany z wieloma wartościami (np. duży tekst z czerwoną czcionką i migoceniem, razem z odsyłaczami etc.) O nich będzie w następnym module.
Pomniejszenie jw. <small>...</small> To jest zmniejszony tekst Również używany w MediaWiki
Powiększenie Zamiast długiego "font size" <big>...</big> To jest zwiększony tekst j.w.
Tekst preformatowany Inaczej monotypiczny, o stałej szerokości znaku. Pozwala na dodatkowe spacje, tabulację, znaki końca lini i nie jest automatycznie zwijany. <pre></pre>
Ten tekst jest preformatowny
który pozwala na
	tabulację,
wielokrotne         spacje
oraz znaki na końcu linii.
Natomiast tekst preformatowany nie może zawierać znaczników: IMG OBJECT, BIG, SMALL, SUB, SUP. Ponadto, w oryginalnym HTML nie uświadczymy tej ramki (zostaje sam monotypiczny test)
Kod komputerowy Jedyną wspólną cechą z tekstem monotypicznym, jest stała szerokość znaku. Pozostałe funkcje jak dodatkowe spacje etc. zostały w tym znaczniku wyłączone. <code>...</code> MsgBox(0,"Witaj Świecie","Witaj") Dla ciekawskich: tekst w przykładzie to AutoIt.
Dalekopis Działa analogicznie jak ww. code <tt>...</tt> To tekst o stałej szerokości znaku
Przykład j.w. <samp>...</samp> Przykład użycia znacznika "samp"
Cytat Stosowany czasami także z znacznikiem odnoszącym się do źródła źródło

cytat

Albert Einstein: Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.
Blok cytowany Stosowany do dłuższych tekstów. <blockquote>...</blockquote>

To jest blok cytowany. Wszystkie wiersze w tym bloku rozpoczynają się tabulatorem.

Adres Podajemy w nim adres do naszej firmy, domu lub numer kontaktowy. <address>...</address> Jan Kowalski

ul. Kowalska 6/66 6-66 Polska

Definicja Definiuje się nim tylko samo słowo, bez całej definicji. <dfn>...</dfn> Definicja - wypowiedź o określonym kształcie, w której informuje się o znaczeniu danego wyrażenia językowego drogą wskazania innego wyrażenia przynależącego do danego języka i posiadającego to samo znaczenie.
Komentarz Pokazuje wewnątrz kodu, tekst pozostawiony przez jego autora. Taki tekst nie zna jakiegokolwiek znaczenia w kodzie i <!--...--> Niedozwolone są konstrukcję typu komentarz "zewnętrzny" czy "wewnętrzny". Nie ma po prostu czegoś takiego.
Lista Tworzy listę w postaci punktów, cyfr lub liter. <ul> <li>...</li></ul>
  • Punkt pierwszy
  • Punkt drugi
Zobacz więcej

Wszystkie te znaczniki można ze sobą łączyć, uatrakcyjniając tym samym stronę i nie tylko.

Po co ich aż tyle?[edytuj]

Większość znaczników wygląda tak samo, jak przy użyciu każdego, innego częściej używanego. Rzecz w tym że przytłaczająca właśnie większość tych to znaczniki sematyczne. Używanie ich wbrew pozorom jest bardzo praktyczne:

  • Najczęściej z tych znaczników korzystają syntezatory mowy w przeglądarce (np. Opera). Gdy ich brak przy wartościowym tekście (np. definicja , akronim lub skrót) syntezator nie będzie ich mógł prawidłowo odczytać.
  • Roboty wyszukiwarek internetowych - roboty nie myślą, więc nie domyślą się że ten fragment tekstu taki i taki. Jeśli im pomożemy przy prawidłowym zindeksowaniu twej strony, może to zaowocować to wyższą pozycję podczas wyszukiwania.
  • Znaczenie - Tekst obejmowany takim znacznikiem musi być w jakiś sposób wartościowy (np. skrót i akronim, i jego rozwinięcie) czyli nie może być wykorzystywany do ustawiania wyglądu tekstu.

HTML oddzielono strukturę dokumentu od jego wyglądu - innymi słowy, HTML zajmuje się tą praktyczną częścią strony, czyli zajmowanie się zawartością strony. Jej formą, czyli wygląd zajmuje się CSS.

Nagłówki[edytuj]

Nagłówki wstawiamy w znaczniki

<h1>Tu</h1>, <h2>Między</h2>, <h3>znacznikami</h3>, <h4>wstaw</h4>, <h5>jakiś</h5>, <h6>tekst</h6>

Nagłówek h1 daje największy tekst, h2 jest mniejszy, h3 jeszcze mniejszy itd. Nagłówek h6 może być mniejsze niż zwykły tekst. Nie trzeba używać wszystkich nagłówków w celu zastosowania nagłówka mniejszego., tzn. nie trzeba zastosować znacznika <h1>, aby użyć znacznika <h2>.

Nagłówki stosujemy w celu pokazania użytkownikowi (oraz botom indeksującym) zależności w tekście; nawigacji. Rozmiary czcionki nagłówków mogą różnić się w poszczególnych przeglądarkach. Aby było więc jednolicie, używa się do tego CSS.