Aplikacje internetowe

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

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<pre>. Każda spacja, znajdująca się pomiędzy znacznikami <pre> i </pre>, 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ę.

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 </pre> i </pre> 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

Przykład <pre> <pre>

Efekt w przeglądarce internetowej

Linie poziome • Znacznik <hr> 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 <hr>. 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: <hr />

Przykład <hr /> <h2>Do zrobienia w piątek</h2> <ul> <li>Iść do pralni</li> <li>WysłaćFedexowi obrazy</li> <li>Obiad z Moli</li> <li>Przeczytać Email</li> <li>Zainstalować Ethernet</li> </ul> <hr />

Atrybut sizeznacznika <hr> Atrybut size określa grubość linii, podawaną w pikselach. Standardową wartością jest 2, i jest to również najmniejsza możliwa grubość. <h2>2 piksele</h2> <hr size="2" /> <h2>4 piksele</h2> <hr size="4" /> <h2>8 pikseli</h2> <hr size="8" /> <h2>16 pikseli</h2> <hr size="16" />

Atrybut width znacznika <hr> 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. <h2>100%</h2> <hr width="100%" /> <h2>75%</h2> <hr width="75%" /> <h2>50%</h2> <hr width="50%" /> <h2>25%</h2> <hr width="25%" /> <h2>10%</h2> <hr width="10%" />

Atrybut align znacznika <hr> 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.

Przykład <hr align="center" size="4" width="200" /> <hr align="center" size="4" width="300" /> <hr align="center" size="4" width="400" /> <h1 align="center">Wypożyczalniakaset wideo</h1> <hr align="center" size="4" width="400" /> <hr align="center" size="4" width="300" /> <hr align="center" size="4" width="200" /> <h2 align="center">Prezentuje</h2>

Atrybut noshade znacznika <hr> 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.

Przykład <hr align="center" size="4" width="200" noshade="noshade" /> <hr align="center" size="4" width="300" noshade="noshade" /> <hr align="center" size="4" width="400" noshade="noshade" /> <h1 align="center">Wypożyczalniakaset wideo</h1> <hr align="center" size="4" width="400" noshade="noshade" /> <hr align="center" size="4" width="300" noshade="noshade" /> <hr align="center" size="4" width="200" noshade="noshade" /> <h2 align="center">Prezentuje</h2>

Łamanie linii • Znacznik <br> 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ł <br>. • 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.

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

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.

Przykład <html> <head> </head> <body> <h1 align=left>FuksiarzeSp. z o.o.</h1> <h2 align=right>Kim jesteśmy</h2> <h2 align=right>Co robimy</h2> <h2 align=right>Jak się z nami skontaktować</h2> </body> </html>

Kontrola położenia grup elementów • Nieco bardziej elastyczną metodą kontroli położenia elementów tekstu jest znacznik <div> z atrybutem alignumoż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 <div> 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 (</div>). Oto dwa zasadnicze punkty, które ukazują przewagę <div> nad korzystaniem tylko z atrybutu align. • <div> używamy tylko raz — nie ma potrzeby ciągłego wstawiania align przy każdym znaczniku, • <div> 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.

Przykład <html> <head> </head> <body> <h1 align=left>Fuksiarze Sp. z o.o.</h1> <div align=right> <h2>Kim jesteśmy</h2> <h2>Co robimy</h2> <h2>Jak się z nami skontaktować</h2> </div> </body> </html>

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

Zmiana rozmiaru czcionki Najpowszechniejszym zastosowaniem znacznika <font> jest zmiana rozmiaru czcionki pojedynczego znaku, słowa, zdania czy też innego fragmentu tekstu. Wybrany tekst znajduje się pomiędzy znacznikami <font> i </font>, 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ą.

Przykład <html> <head> </head> <body> <p><font size="1">Czcionka wielkości 1</font></p> <p><font size="2">Czcionka wielkości 2</font></p> <p><font size="3">Czcionka wielkości 3</font></p> <p><font size="4">Czcionka wielkości 4</font></p> <p><font size="5">Czcionka wielkości 5</font></p> <p><font size="6">Czcionka wielkości 6</font></p> <p><font size="7">Czcionka wielkości 7</font></p> </body> </html>

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. <p><fontface="Futura,Helvetica">SansSerif, to czcionka bez małych dodatków na zakończeniach każdego znaku. </font></p>

Aplikacje internetowe