HTML/Formatowanie tekstu
| 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. |
|
zwykły tekst (domyślnie wyrównany do lewej)
|
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>
|
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: |
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: |
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
|
Albert Einstein: Dwie rzeczy nie mają granic: wszechświat i ludzka głupota. | |
| Blok cytowany | Stosowany do dłuższych tekstów. | <blockquote>...</blockquote>
|
| |
| 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>
|
|
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.