Przejdź do zawartości

HTML/Formatowanie tekstu

Z Wikibooks, biblioteki wolnych podręczników.
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.