Aplikacje internetowe Formatowanie tekstu w HTML-u ciąg dalszy.

Prezentacja na temat: "Aplikacje internetowe Formatowanie tekstu w HTML-u ciąg dalszy."— Zapis prezentacji:

1 Aplikacje internetowe Formatowanie tekstu w HTML-u ciąg dalszy

2 Tekst preformatowany W większości przypadków tekst z pliku HTML jest formatowany przez przeglądarkę wyłącznie na podstawie znajdujących się w nim znaczników. Wszelkie dodatkowe znaki spacji, tabulacji czy nowej linii są ignorowane. Jedynym wyjątkiem od tej reguły jest znacznik tekstu preformatowanego. Każda spacja, znajdująca się pomiędzy znacznikami i, zostanie wyświetlona. Za pomocą tej pary znaczników możemy formatować tekst w dowolny sposób, mając przy tym pewność, że właśnie tak zostanie on pokazany przez przeglądarkę.

3 Tekst preformatowany Chwyt polega na tym, że tekst preformatowany jest wyświetlany (przynajmniej przez przeglądarki graficzne) za pomocą czcionki o stałej szerokości znaku (Courier). Tego typu formatowanie nadaje się doskonale do prezentacji fragmentów kodu programu, gdy chcemy zachować wszystkie wcięcia i komentarze. Ponieważ pomiędzy znacznikami i mogą znajdować się również spacje, można ich z powodzeniem używać do tworzenia prostych tabel, choć tabele wyświetlane tego typu czcionką mogą nie wyglądać zbyt atrakcyjnie

4 Przykład

5 Efekt w przeglądarce internetowej

6 Linie poziome Znacznik nie posiada znacznika zamykającego, ani też nie jest w żaden sposób związany z tekstem, jego zadaniem jest wstawienie na stronie poziomej linii. Jest to doskonała metoda wizualnego oddzielania od siebie fragmentów strony WWW, na przykład, zasadniczego tekstu od elementów listy itp. W HTML nie jest konieczne zamykanie znacznika. Aby przygotować się do używania składni XHTML oraz jednocześnie zachować kompatybilność z przeglądarkami HTML, na jego końcu dodaj znak spacji i ukośnik:

7 Przykład Do zrobienia w piątek Iść do pralni Wysłać Fedexowi obrazy Obiad z Moli Przeczytać Email Zainstalować Ethernet

8 Efekt w przeglądarce internetowej

9 Atrybut size znacznika Atrybut size określa grubość linii, podawaną w pikselach. Standardową wartością jest 2, i jest to również najmniejsza możliwa grubość. 2 piksele 4 piksele 8 pikseli 16 pikseli

10 Atrybut width znacznika Atrybut width określa długość linii w poziomie. Może ona zostać podana w pikselach, ale też jako określony procent aktualnej szerokości ekranu (30 procent, 50 procent), co oznacza, że jej faktyczna długość będzie się zmieniała wraz ze zmianą rozmiarów okna. 100% 75% 50% 25% 10%

11 Atrybut align znacznika Jeżeli linia nie będzie wypełniała całej szerokości ekranu, można określić jej położenie, służy do tego atrybut align. Można więc dosunąć linię do lewej strony ekranu (align="left"), do prawej (align="right") lub też ją wyśrodkować (align="center"). Standardowo linie poziome są wyśrodkowane.

12 Przykład Wypożyczalnia kaset wideo Prezentuje

13 Efekt w przeglądarce internetowej

14 Atrybut noshade znacznika Ostatnim atrybutem jest noshade, który powoduje, że linia w większości przeglądarek jest rysowana bez cienia, który nadaje jej trójwymiarowy wygląd.

15 Przykład Wypożyczalnia kaset wideo Prezentuje

16 Efekt w przeglądarce internetowej

17 Łamanie linii Znacznik powoduje przełamanie linii, co oznacza, że tekst następujący po nim jest wyświetlany przez przeglądarkę od nowej linii, czyli od lewego marginesu, przy czym jest to margines odpowiedni dla elementu strony, w którym wystąpił. Znacznik ten może bowiem występować w obrębie innych elementów, czyli akapitów lub list, ale nie powoduje on żadnych dodatkowych zmian w wyglądzie tych części tekstu.

18 Przykład Zaiste, okolica była malownicza! Dwa stawy pochyliły ku sobie oblicza Jako para kochanków; prawy staw miał wody Gładkie i czyste jako dziewicze jagody; Lewy, ciemniejszy nieco, jako twarz młodziana Smagława i już męskim puchem osypana. Prawy złocistym piaskiem połyskał się wkoło Jak gdyby włosem jasnym; a lewego czoło Najeżone łozami, wierzbami czubate; Oba stawy ubrane w zieloności szatę.

19 Efekt w przeglądarce internetowej

20 Położenie tekstu na stronie Możliwość rozmieszczania tekstu na stronie oznacza tyle, że można wyrównać go do lewego marginesu (standard), do prawego marginesu oraz wycentrować. Aby ułożyć w dowolny sposób nagłówek lub akapit, możemy skorzystać z atrybutu align. Posiada on trzy wartości: left, right i centered.

21 Przykład Fuksiarze Sp. z o.o. Kim jesteśmy Co robimy Jak się z nami skontaktować

22 Efekt w przeglądarce internetowej

23 Kontrola położenia grup elementów Nieco bardziej elastyczną metodą kontroli położenia elementów tekstu jest znacznik z atrybutem align umożliwiający wyrównanie grupy elementów do lewej (left), prawej (right) lub wyśrodkowanie ich (center), tak samo jak w przypadku nagłówków i akapitów. Jednakże służy do oznaczenia dowolnego fragmentu kodu HTML (który może zawierać również inne znaczniki) — ma on wtedy wpływ na wszystko, co znajdzie się pomiędzy znacznikiem otwierającym i zamykającym ( ). Oto dwa zasadnicze punkty, które ukazują przewagę nad korzystaniem tylko z atrybutu align. używamy tylko raz — nie ma potrzeby ciągłego wstawiania align przy każdym znaczniku, może zostać użyte do zmiany położenia wszystkiego (nagłówków, akapitów, cytatów, obrazów, tabel itp.), natomiast atrybut align dostępny jest tylko dla nagłówków i akapitów.

24 Przykład Fuksiarze Sp. z o.o. Kim jesteśmy Co robimy Jak się z nami skontaktować

25 Efekt w przeglądarce internetowej

26 Znacznik Oprócz istnieje jeszcze znacznik, służący tylko i wyłącznie do środkowania tekstu i innych elementów —. W specyfikacji HTML jest on zdefiniowany jako skrót i działa dokładnie tak samo, powodując, że wszystko co znajdzie się pomiędzy i zostanie wyśrodkowane na ekranie.

27 Zmiana rozmiaru czcionki Najpowszechniejszym zastosowaniem znacznika jest zmiana rozmiaru czcionki pojedynczego znaku, słowa, zdania czy też innego fragmentu tekstu. Wybrany tekst znajduje się pomiędzy znacznikami i, a atrybut size przy pierwszym z nich określa żądany rozmiar. size może przyjmować wartości od 1 do 7, gdzie 3 jest wartością standardową.

28 Przykład Czcionka wielkości 1 Czcionka wielkości 2 Czcionka wielkości 3 Czcionka wielkości 4 Czcionka wielkości 5 Czcionka wielkości 6 Czcionka wielkości 7

29 Efekt w przeglądarce internetowej

30 Zmiana rodzaju czcionki Wartością atrybutu face jest zbiór nazw czcionek, zapisanych w cudzysłowach i oddzielonych przecinkami. Przeglądarka, po napotkaniu takiego znacznika, będzie przeglądać swój lokalny system operacyjny w poszukiwaniu czcionki o podanej nazwie. Jeżeli nie znajdzie pierwszej z nich, zacznie szukać drugiej, potem trzeciej, aż znajdzie tę, która rzeczywiście będzie w systemie zainstalowana. Jeżeli okaże się, że przeglądarka nie znajdzie żadnej z wymienionych czcionek, użyta zostanie czcionka standardowa. Sans Serif, to czcionka bez małych dodatków na zakończeniach każdego znaku.