Język HTML przydatny przy braku edytorów wizualnych – formatowanie tekstu
Jeśli prowadzicie bloga i (jakimś cudem) nie macie edytora wizualnego przy publikacji postów powinniście poznać podstawy HTML związane z obróbką tekstu. Post nie pogłębi waszej wiedzy o HTML jedynie da kilka przydatnych narzędzi do tego by poradzić sobie z publikacją dobrze wyglądającego posta przy braku edytora wizualnego.
[heart_this]
Wszystkie atrybuty piszcie małymi literami.
Formatowanie tekstu
- Wstawianie tekstu danej wielkości. Wielkości wyglądają tu trochę inaczej niż programie do obróbki tekstu i ściągę znajdziecie w pierwszym lepszym edytorze wizualnym. Z tej ściągi skorzystam w porównywaniu wielkości z odpowiednikiem liczbowym. Najmniejszym rozmiarem czcionki będącym odpowiednikiem 8 pikseli będzie 1, 2 – 10 pikseli, 3 – 12 pikseli, 4 – 14 pikseli, 5 – 18 pikseli, 6 – 24 pikseli, 7 – 36 pikseli.
<font size=”3″>…</font>
- Wstawianie tekstu pomniejszonego lub powiększonego o daną wartość:
<font size=”-2″>…</font>
<font size=”+2″>…</font>
- Czcionka o określonym kolorze. Możemy ten kolor zapisać słownie lub za pomocą kodu HEX (apis heksadecymalnego). Konwersja zapisu heksadecymalnego na zapis RGB polega na zapisaniu dziesiętnych wartości kolejnych par cyfr szesnastkowych. I tutaj uwaga, w języku (X)HTML zostało zdefiniowane tylko 16 nazw kolorów. Użycie innych nazw nie gwarantuje interpretacji we wszystkich przeglądarkach! Generator kodów HEX znajdziecie tutaj.
<font color=”black”>…</font>
<font color=”#000000″>…</font>
- Rodzaj czcionki. Tutaj zaleca się korzystanie z pewnych odgórnie przyjętych standardów wprowadzających pewne ujednolicenie i chroniące nas przed pewnego rodzaju „wtopą”. Web safe fonts to tzw. bezpieczne czcionki webowe, które bez problemów powinny być wyświetlane w różnych przeglądarka, na różnych systemach . Wybó jest wystarczający ponieważ wśród web safe font wchodzą zarówno czcionki szeryfowe, bezszeryfowe, monospace jak i cursive. Należą do nich między innymi: Arial, Courier, Impact, Times New Roman, Tahoma, Verdana itp.
<font face=”arial”>…</font>
Tytuły / nagłówki
- Nagłówki oznaczamy w poniższy sposób od słowa header. Mamy również kilka stylów odpowiadających różnym wielkościom. Układ nagłówka oznaczamy na tej samej zasadzie, jak robimy to w przypadku akapitu. Możemy zmieniać wartości odpowiadające wielkościom nagłówka od 1 do 6, gdzie 1 będzie nagłówkiem największym.
<h>…</h>
<h1>…</h1>
Tekst jako link
Jeśli chcemy do naszego tekstu wstawić odnośnik do innej strony w edytorze tekstowym zaznaczamy daną frazę i korzystamy z opcji wstaw/edytuj odnośnik. W kodzie jest analogicznie. W łapkach >…< znajduje się tekst, który ma być odnośnikiem. Możemy do niego stosować dowolne style formatowania tekstu analogiczne do poniższych (w przykładzie pogrubiony link).
<a href=”pełny adres linku”>tekst będący odnośnikiem</a>
<b><a href=”pełny adres linku”>tekst będący odnośnikiem</a></b>
efekt ma być taki (w miejsce „pełny adres linku” wstawiłam link do strony głównej):
Pogrubienie, kursywa, podkreślenie, przeniesienie do nowej linijki …
Tekst możemy i powinniśmy formatować także w inny sposób. W całym akapicie możemy chcieć wyróżnić pewne treści pogrubiając je, lub cytaty wyeksponować kursywą. Możemy też chcieć poszczególne wartości przenieść do nowej linijki.
- Pogrubienie (od: bold)
<b>…</b>
- Kursywa (od: italic)
<i>…</i>
- Podkreślenie (od: underline)
<u>…</u>
- Przekreślenie
<s>…</s>
- Przeniesienie do nowej linijki
<br>
- Wylistowanie, wypunktowanie
<ul>
<li>…</li>
</ul>
Akapit
- Akapit oznaczamy w poniżej przedstawiony sposób. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią).
<p>…</p>
- Wyrównanie akapitu do lewej i prawej
<p align=”left”>…</p>
<p align=”right”>…</p>
- Wyśrodkowanie i justowanie akapitu
<p align=”center”>…</p>
<p align=”jusify”>…</p>
Kilka atrybutów dla całego akapitu / części tekstu:
Do grupowania tekstu możemy użyć elementu <div> lub <span> zakańczając odpowiednio </div> lub </span>. Te dwie opcje w temacie formatowania tekstu przy publikacji posta dają taki sam efekt dlatego dwie różne próby formatowania tekstu przedstawię z poszczególnymi z nich.
Jeśli będziemy chcieli wyjustować i pogrubić część tekstu możemy zrobić to tak:
<div style=”text-align: justify”><strong>NASZ TEKST</strong></div>
Jeśli całość tekstu ma mieć określoną czcionkę i być pogrubiona zrobimy to w taki sposób:
<span style=”font-family: times new roman”>…<strong>NASZ TEKST</strong></span>
Jeśli fragment tekstu ma być wyjustowany, mieć określoną czcionkę (np. i być dodatkowo pogrubiony stosujemy następujący porządek oddzielając poszczególne informacje za pomocą „;” (średnika):
<strong><span style=”text-align: justify; font-family: 'arial’;”>NASZ TEKST</span></strong>
lub:
<span style=”text-align: justify; font-family: ‚arial’; font-weight: bold;”>NASZ TEKST</span>
autor
