Blogowanie, HOW TO, METODA, PISANIE, Życie codziennie

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):

tekst będący odnośnikiem

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