Strona w dobrym stylu

TEMAT: Strona w dobrym stylu

  1. Formatowanie tekstu w dokumencie HTML, definiowanie jednostek miar oraz kolorów
  2. Osadzanie w dokumencie HTML elementów graficznych.
  3. Umieszczanie w dokumencie HTML znaków specjalnych niedostępnych z klawiatury.

DEFINIOWANIE WŁAŚCIWOŚCI CZCIONEK W DOKUMENCIE HTML

Krój czcionki

Dobrze jest określić co najmniej dwa typy czcionek. Jeśli w komputerze użytkownika nie będzie typu występującego na pierwszej pozycji, to zostanie zastosowana następna. Jeśli zabraknie wszystkich wymienionych czcionek, zastosowana zostanie domyślna czcionka użytkownika. W przypadku wstawiania kilku typów czcionek należy oddzielać poszczególne nazwy przecinkiem i spacją. Jeśli nazwa czcionki składa się z kilku wyrazów, należy zastosować apostrofy proste.
Załóżmy, że chcesz ostylować jednozdaniowy akapit „Ala ma słonia.”. Twój preferowany krój czcionki to Courier New. Gdyby nie było go w komputerze użytkownika, należy zastosować czcionkę o stałej szerokości albo bezszeryfową. Jak to zapisać?

<p style="font-family: 'courier new', monospace, 'sans-serif';">
  Ala ma słonia.
</p>

Styl czcionki

Właściwość font-style: ma trzy dopuszczalne wartości:

  • normal – czcionka prosta (jest to wartość domyślna);
  • italic – kursywa stosowana, gdy w zestawie czcionki przewidziano znaki pochylone;
  • oblique – kursywa stosowana, gdy w zestawie czcionki nie ma znaków pochylonych.
<p style="font-style: italic;">
  Ala ma słonia.
</p>

<p style="font-family: 'courier new'; font-style: italic;">
  Ala ma koguta.
</p>

Wariant czcionki

Właściwość font-variant: może przyjąć dwie wartości:

normal – małe litery wyświetlające się standardowo (jest to wartość domyślna);
small-caps – małe litery wyświetlające się w postaci kapitalików lub przeskalowanych wielkich liter.

Aby małe litery w zdaniu „Ala ma wiele różnych zwierząt.” wyświetlały się w postaci kapitalików, należy zastosować następujący zapis:

<p style="font-style: normal; font-variant: small-caps;">

  Ala ma wiele różnych zwierząt.

</p>

Wysokość czcionki

Właściwość font-size: dopuszcza poniższe wartości względne:

  • medium – wielkość czcionki domyślnej;
  • small – wielkość będąca wynikiem działania: wysokość medium/1,5;
  • x–small – wielkość będąca wynikiem działania: wysokość small/1,5;
  • xx–small – wielkość będąca wynikiem działania: wysokość x-small/1,5;
  • large – wielkość będąca wynikiem działania: wysokość medium*1,5;
  • x–large – wielkość będąca wynikiem działania: wysokość large*1,5;
  • xx–large – wielkość będąca wynikiem działania: wysokość x-large*1,5;
  • larger – wielkość będąca wynikiem działania: wysokość domyślna*1,5;
  • smaller – wielkość będąca wynikiem działania: wysokość domyślna/1,5.
<p style="font-size: 1cm;">
  Ala ma <span style="font-size: 150%;">kota, słonia i koguta</span>.
</p>

Zauważmy, że znacznik span pozwala przypisać styl konkretnym elementom.

Odstępy między literami

Właściwość letter-spacing: może przyjąć dwie wartości: domyślną (normal) oraz liczbę w jednostkach miary.

<p style="letter-spacing: 2mm;"> Ala ma zwierzęta - 2mm </p>
<p style="letter-spacing: 10px;"> Ala ma zwierzęta - 10px </p>
<p style="letter-spacing: normal;"> Ala ma zwierzęta - normal </p>

Zmiana wielkości znaków

Jeśli chcemy zdefiniować zmianę wielkości znaków, musimy zastosować właściwość text-transform:, której dopuszczalne wartości to:

  • capitalize – ustawienie wielkiej litery na początku każdego wyrazu;
  • uppercase – wypisanie całego tekstu wielkimi literami;
  • lowercase – wypisanie całego tekstu małymi literami;
  • none – wartość domyślna.
<p style="text-transform: capitalize;"> Ala ma konia, słonia, kota oraz jenota - capitalize.</p>
<p style="text-transform: uppercase;"> Ala ma konia, słonia, kota oraz jenota - uppercase.</p>
<p style="text-transform: lowercase;"> Ala ma konia, słonia, kota oraz jenota - lowercase.</p>
<p style="text-transform: none;"> Ala ma konia, słonia, kota oraz jenota - none.</p>

DEFINIOWANIE WŁAŚCIWOŚCI AKAPITU W DOKUMENCIE HTML

Odstępy między wyrazami

Jak w przypadku właściwości letter-spacing: właściwość word-spacing: może przyjąć dwie wartości: domyślną (normal) oraz liczbę w jednostkach miary.

<p style="word-spacing: 4em;"> Ala ma zwierzęta - 4em</p>
<p style="word-spacing: 18pt;"> Ala ma zwierzęta - 18pt</p>
<p style="word-spacing: normal;"> Ala ma zwierzęta - normal</p>

Dekorowanie tekstu

Właściwość text-decoration: przyjmuje następujące wartości:

  • underline – podkreślenie;
  • overline – nadkreślenie;
  • line-through – przekreślenie;
  • none – brak elementów dekoracyjnych.
<p style="text-decoration: underline;"> Ala ma zwierzęta - underline</p>
<p style="text-decoration: overline;"> Ala ma zwierzęta - overline</p>
<p style="text-decoration: line-through;"> Ala ma zwierzęta - line-through</p>
<p style="text-decoration: none;"> Ala ma zwierzęta - none</p>

Wyrównywanie tekstu w poziomie względem elementu nadrzędnego

Własność text-align: dopuszcza następujące wartości:

  • left – wyrównanie tekstu do lewego marginesu elementu nadrzędnego;
  • right – wyrównanie tekstu do prawego marginesu elementu nadrzędnego;
  • center – wyrównanie tekstu względem środka elementu nadrzędnego;
  • justify – wyrównanie tekstu do lewego i prawego marginesu elementu nadrzędnego.

Elementem nadrzędnym może być np. akapit lub większy blok tekstu wydzielony za pomocą znacznika <div>, tak jak w poniższym przykładzie. Zauważ, że aby określić sposób wyrównywania tekstu, trzeba podać dokładne wymiary elementu nadrzędnego.

<div style="width: 380px; background-color: #ffeeee; text-align: left;">
  A może ona nie ma tych zwierząt?
  A może ona nie ma tych zwierząt?
</div>

<div style="width: 380px; background-color: #eeffee; text-align: right;">
  A może ona nie ma tych zwierząt?
  A może ona nie ma tych zwierząt?
</div>

<div style="width: 380px; background-color: #eeeeff; text-align: center;">
  A może ona nie ma tych zwierząt?
  A może ona nie ma tych zwierząt?
</div>

<div style="width: 380px; background-color: #ffeeff; text-align: justify;">
  A może ona nie ma tych zwierząt?
  A może ona nie ma tych zwierząt?
</div>

DEFINIOWANIE KOLORÓW W DOKUMENCIE HTML

Kolory można zobaczyć tutaj: https://www.w3schools.com/colors/colors_picker.asp

 

OSADZANIE ELEMENTÓW GRAFICZNYCH W DOKUMENCIE HTML

Tekst:

Babulej i Babulejka
Jan Brzechwa

Pod Oszmianą nad Wilejką
Żył Babulej z Babulejką,
Ona była czarodziejką,
On - rzecz prosta - czarodziejem
I jadali mak z olejem
Babulejka z Babulejem.

Babulejka raz powiada:
„Babuleju, tak się składa,
Że mam starą koźlą skórę
Odwieźć dziś na Łysą Górę”

Osadzenie grafiki:

<img src="ona.jpg" style="height: 90px; float: right; margin-right: 20px" title="Babulejka">

<img src="on.jpg" style="height: 90px; float:left; margin-left: 20px; margin-right: 200px" title="Babulej">

pobierz grafikę – ON i ONA

Styl css

article {
               border: 3px double #003800;
               padding: 0;
               width: 516px;
              }
      p.tytuł {
               background-color: #008D00;
               color: #FFFFE9;
               padding: 8px;
               width: 500px;
               font-size: 16pt;
               font-family: "Times New Roman";
              }
            p {
               width: 500px;
               font-size: 12pt;
               font-family: arial;
               color: #000094;
               padding: 10px;
               margin: 0;
              }

Efekt:

Skip to content