WebCity.pl

W tym artykule dowiesz się jak sformatować tekst w html'u. Chodzi tu przede wszystkim o układ tekstu, jego kolor, czcionkę i wielkość. Zacznijmy od układu.

DomyÅ›lnie tekst pisany w html'u w przeglÄ…darce jest wyrównany do lewej strony. Ja pokażę Ci co zrobić by go wyÅ›rodkować, wyrównać do prawej lub wyjustować. W ten sposób nadasz przejrzystość swoim tekstom. JeÅ›li chcesz wyrównać akapit do prawego marginesu strony to do taga <p> dodaj atrybut align i wpisz odpowiedniÄ… wartość. By wyÅ›rodkować dodaj center, aby wyrównać do prawej strony-right, a jeÅ›li chcesz wyjustować text-justify. Istnieje też parametr left lecz jest on niepotrzebny gdyż tekst jest domyÅ›lnie wyrównywany do lewej strony.

W praktyce będzie wyglądać to tak:

<p align="right">Twój tekst wyrównany do prawej</p>

<p align="center">Twój tekst wycentrowany</p>

<p align="justify">Twój tekst wyjustowany</p>

Ten sam efekt możesz osiągnąć wykorzystując CSS. Aby to osiągnąć umieść w HEAD

<style type="text/css">
    div.jakasnazwa {text-align: center}
</style>

Teraz w BODY dodaj

<div class="jakasnazwa">
  <p>Twój wyśrodkowany text</p>
</div>

OczywiÅ›cie w ten sposób również możesz justować i wyrównywać tekst do strony. Wystarczy, że w definicji stylu zamiast center wpiszesz odpowiedniÄ… wartość.

Teraz przejdziemy do koloru tekstu. Jeśli chcesz by tylko część tekstu była innego koloru skorzystaj z elementu FONT i dodaj do niego atrybut color. Na przykładzie text jest zielony, lecz Ty możesz zastosować taki kolor jaki chcesz. Oto przykład:

<font color="green">Zielony tekst</font>

JeÅ›li natomiast zależy Ci by caÅ‚y tekst byÅ‚ jednego koloru skorzystaj z elementu BASEFONT i również dodaj do niego atrybut color. PamiÄ™taj, że BASEFONT dziaÅ‚a tak samo jak na przykÅ‚ad element CENTER. To znaczy, że pokoloruje tylko tekst który jest przed nim dla tego najlepiej umieść go zaraz po elemencie BODY. A tak wyglÄ…da przykÅ‚ad:

<basefont color="green">

Teraz ostatnia sprawa czyli czcionka. CzcionkÄ™ zmieniamy dodajÄ…c atrybut face do elementów FONT i BASEFONT. Różnica miÄ™dzy nimi zostaÅ‚a omówiona wyżej. Na przykÅ‚ad jeÅ›li chcemy na stronie zastosować czcionkÄ™ Helvetica caÅ‚ość bÄ™dzie wyglÄ…daÅ‚a tak:

<basefont face="Helvetica">

lub

<font face="Helvetica">Tekst o kroju Helvetica</font>

Pamiętaj, że dobrze jest zastosować czcionkę zapasową. W tym gdy zwiedzający nie będzie miał zainstalowanej czcionki Helvetica zostanie wyświetlona czcionka Arial:

<basefont face="Helvetica, Arial">

Teraz ostatni etap. Wielkość czcionki. Ustalamy ją dodając do FONT atrybut size oraz wpisując wartość liczbową. Np.

<font size="+6">

Wielkość możesz zmieniać wprowadzajÄ…c nagÅ‚ówek. Robisz to przez wstawienie elementu <h1>. CyfrÄ™ 1 możesz zmienić maksymalnie na 6.

<h1>Nagłówek</h1>

A i jeszcze jedno. Ciekawym sposobem ozdabiania tekstu jest efekt glowtext. Możesz o nim poczytać w poradach do CSS.