Uncategorized

Czcionka w HTML

Do tej pory nauczyliśmy się kilkunastu znaczników, które służą do formatowania tekstu. Możemy dzięki nim tworzyć nagłówki, pogrubienia, podkreślenia, indeksy górne i dolne itd. Jednak nie mamy możliwości zmiany koloru tekstu, czy kroju czcionki. Do tego celu służy znacznik <font>. Posiada on szereg dodatkowych argumentów:
=>  color – określa kolor tekstu
=>   size- określa wielkość tekstu (od 1 do 7)
=>   face – określa krój czcionki
Argument size służy do określenia wielkości czcionki. Jest to liczba od 1 do 7. Nie jest to wielkość wyrażona ani w pikselach, ani też w punktach. To wewnętrzna skala tego znacznika.
Spójrz na przykładową stronę:
<html> <head>
<title>Kolorki</title> </head>
<body>
<font size=”7″ color=”blue”>Turbo Pascal</font>
<br>
<pxfont face=”BernhardFashion BT” size=”5″>
Turbo Pascal jest językiem
programowania pozwalającym na proste tworzenie
własnych aplikacji… Dzięki niemu możemy
napisać samodzielnie kalkulator, słownik, a
nawet prostą grę!
</font></p>
</body> </html>

Jak widzisz, cały tekst objęty znacznikiem <font>…</font> wyświetlany jest w zdefiniowany sposób. Można jednocześnie ustalić nowy kolor i nową wielkość czcionki. Określając wielkość pisma (size) oprócz wartości bezwzględnej możemy zastosować również taki zapis:
<font   size=”+l”>Tekst</font>
Oznacza to, że napis „Tekst” wyświetlony zostanie czcionką o 1 większą. Można było również napisać „+2″, czy też ,,-l”.

Uncategorized

Nagłówki w HTML

Ponieważ język HTML pierwotnie przystosowany był głównie to prezentowania informacji tekstowych na stronach WWW, formatowanie napisów zostało w nim wyjątkowo dobrze opracowane. Język ten posiada znaczniki pozwalające na tworzenie tzw. nagłówków. Służą one do oddzielania partii tekstu w pewien logiczny sposób. Przykładowo – w tej książce nagłówek tego akapitu brzmi 2.9 Nagłówki. Jednak nagłówek całego rozdziału to 2. Podstawy. Tak więc, nagłówki służą do tytułowania rozdziałów, podrozdziałów itp.
W HTML mamy do dyspozycji 6 stopni nagłówków. Każdy z nich określony jest odpowiednio znacznikiem <hl>, <h2>, <h3>, <h4>, <h5>, <h6>. Największy z nich to <hl>, a najmniejszy <h6>. Na Rysunku 2.8 pokazano wygląd poszczególnych nagłówków.
<html> <head>
<title>Nagłówki</title> </head> <body>
<h1>Nagłówek stopnia l</h1>
<h2>Nagłówek stopnia 2</h2>
<h3^Nagłówek stopnia 3</h3>
<h4>Nagłówek stopnia 4</h4>
<h5>Nagłówek stopnia 5</h5>
<h6>Nagłówek stopnia 6</h6>
</body> </html>

 

Oto przykładowe wykorzystanie nagłówków.
<html> <head>
<title>
Kurs Pascala</title> </head> <body>
<h1>Kurs Turbo Pascala</h1>
<p>Kurs ten składa się z 10. lekcji i
prezentuje podstwy języka Turbo Pascal.
Bardzo gorąco zapraszam do zapoznania się z nim.</p>
<h2>Lekcja K/h2>
<p>W tej lekcji dowiemy się o strukturze każdego programu napisanego w Turbo Pascalu. Poznamy również podstawy korzystania z różnych instrukcji i wyrażeń.</p>

Uncategorized

Stylizowanie poziomej linii w CSS

Chociaż zwykłą linię można utworzyć w HTML nic nie stoi na przeszkodzie aby znać alternatywną metodę stylizowania linii w CSS. I tak na przykład to co w kodzie może być zapisane jako

<hr style=”color: #f00; background: #f00; width: 75%; height: 5px;”>

Może zostać również zapisane jako:

hr {
color: #f00;
background: #f00;
width: 75%;
height: 5px;
}

Zauważ, że podaliśmy tutaj kolor linii i kolor tła. Jest to niezmiernie ważne ponieważ niektóre przeglądarki używają koloru tła w celu dodania linii, inne samego koloru linii.

Uncategorized

Właściwość background-repeat

Po określeniu background-image może on być powtarzany tworząc to, co jest pieszczotliwie nazywamy jako tapetę.
Jeśli nie chcesz, żeby Twój obraz był powtórzony na całym tle okna, należy użyć właściwości background-repeat, która ma cztery pomocne wartości, jak widać w poniższej tabeli:
Repeat – powtarza obraz na całym obszarze tła
Repeat-x powtarza obraz tylko w poziomie
Repeat-y powtarza obraz tylko w pionie
No-repeat nie powtarza obrazka

Te różne właściwości mogą mieć ciekawe efekty. Warto przyjrzeć się po kolei. Widziałeś już wpływ na wartość powtarzania (jak jest to domyślne zachowanie, gdy właściwość nie jest używana wartość repeat-x tworzy poziomy pasek po osi przeglądarki.

body {
background-image: url(“images/background.gif”);
background-repeat: repeat-x; }