STRONA W W W INACZEJ W3 2 KROK

Transkrypt

1 STRONA W W W INACZEJ W3 2 KROK

2 TEKST I JEGO ATRYBUTY Wypełnianie stron WWW tekstem zawsze będzie trudniejsze niż wypełnianie tym samym tekstem kartki papieru za pomocą edytora tekstu, takiego jak Microsoft Word. Tworząc stronę WWW, cały czas należy pamiętać o zachowaniu struktury dokumentu, na przykład jeśli linijka tekstu pełni funkcję nagłówka sekcji tekstu, trzeba zawrzeć ją wewnątrz znacznika HTML opisującego nagłówek. Poza tym sam wygląd strony musi być o wiele ciekawszy niż w przypadku dokumentu wydrukowanego na papierze do dyspozycji jest wiele krojów, rozmiarów i kolorów czcionek, a informacje ich dotyczące trzeba w odpowiedni sposób zakodować

3 AKAPIT Podstawowym elementem tekstowym języka HTML jest akapit. Akapit tekstu reprezentowany jest w kodzie przez element . Nie jest istotne, jak rozmieszczono tekst wewnątrz elementu ; przeglądarka zawsze złoży go tak, aby wypełnił całą szerokość okna.

4 ĆWICZENIE - AKAPIT Spróbujmy teraz umieścić kursor zaraz za znacznikiem otwierającym <body>, oznaczającym początek kodu treści strony. Należy nacisnąć klawisz Enter, aby wstawić nową linię zaraz za znacznikiem, a następnie wprowadzić: znacznik otwierający , dowolny tekst, który ma być umieszczony na stronie, i znacznik zamykający . Na koniec należy zapisać zmieniony kod strony i zaktualizować zawartość okna przeglądarki

5 EFEKT Przeglądarka nieprawidłowo wyświetla POLSKIE ZNAKI DIAKRYTYCZNE: zamiast polskich znaków wyświetlane są symbole zwane popularnie "robaczkami". Dzieje się tak dlatego, że nie ma w kodzie strony informacji o sposobie kodowania polskich znaków.

6 KODOWANIE POLSKICH ZNAKÓW Aby ją dodać, należy umieścić kursor zaraz za elementem <title> i nacisnąć klawisz Enter, aby umieścić za nim nową, pustą linię. Następnie należy wprowadzić w niej tekst znacznika <meta> o postaci: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> LUB INACZEJ>>>>

7 INACZEJ STOSUJĄC ISO Jeśli chce się użyć normy ISO (można tego dokonać tylko korzystając z programu Webber), trzeba zamienić napis utf-8 na iso nie tylko wewnątrz elementu <meta> wprowadzonego przed chwilą, ale też w znaczniku <?xml?> znajdującym się w pierwszym wierszu pliku: <?xml version="1.0" encoding="iso "?> <meta http-equiv="content-type" content="text/html; charset=iso " />

8 uwaga Decydujące znaczenie w wyborze standardu kodowania ma niestety serwer WWW, na którym umieszczone są pliki składowe strony. Jeżeli zatem strona WWW działa doskonale tak długo, jak długo zapisana jest na dysku twardym komputera swego twórcy, przestaje jednak wyświetlać prawidłowo polskie znaki diakrytyczne po umieszczeniu jej na serwerze, trzeba zmienić standard kodowania lub porozumieć się z administratorem serwera, by wprowadził odpowiednie zmiany w konfiguracji.

9 TWARDA SPACJA Twarda spacja to pewien szczególny rodzaj spacji (odstępu). Na ekranie niczym się nie różni od zwykłej spacji, jednak wyrazy nią połączone zawsze będą wyświetlane w jednej linii: jeśli pojawią się na końcu linii, to albo zostaną przeniesione oba, albo też razem pozostaną na końcu wiersza.

10 W języku HTML twardej spacji odpowiada - &nbsp ; Encja to pewien specyficzny rodzaj znacznika HTML. Rozpoczyna się znakiem &, kończy znakiem średnika (;), a tekst zawarty między tymi dwoma znakami reprezentuje jeden ze znaków specjalnych dostępnych dla projektanta strony WWW. Więcej o znakach specjalnych w dalszej części.

11 PRZYKŁAD - ćwiczenie 4 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> bez twardych spacji: a a a a a a a a a a a a m m m m m m m m m m m m m m m m m o o o o o o o o o o o o o o w w w w w w w w w w w w w w w z twardymi spacjami: a a a a a m m m m m m m m o o o o o o o o w w w w w w w w </body> </html>

12 SPRAWDŹ Nie powinno się jednak nadużywać encji, gdyż w nadmiarze może spowodować, że wiersze tekstu będą nienaturalnie krótkie i nieregularne

13 WYŚWIETLANIE TEKSTU Pisanie tekstu w edytorze takim jak np. Word, czy choćby Notatnik jest proste: kiedy potrzebny jest większy odstęp między wyrazami, wstawiamy więcej spacji, kiedy chcemy rozpocząć pisanie od nowej linii, naciskamy klawisz [Enter]. Edytory tekstowe posłusznie dostosują wygląd tekstu do naszych zamiarów. Ale jak zachowa się przeglądarka, jeżeli zostanie w niej wyświetlony tekst nieobjęty żadnym znacznikiem HTML?

14

15 Widać, że przeglądarka zignoruje wszystkie znaki, które zazwyczaj służą do przedstawienia struktury i układu tekstu: znaki tabulacji, wielokrotne spacje, łamania wierszy oraz wyliczenia. Znaki spacji, łamania wiersza, tabulatora są w języku HTML traktowane zawsze jednakowo, jako tzw. "white space". Charakterystycznym efektem ich wyświetlania jest to, że niezależnie od liczby wstawionych znaków, przeglądarka zawsze wyświetli znaki "white space" jako pojedynczy odstęp między wyrazami lub liczbami. Aby przeglądarka wyświetliła tekst zgodnie z zamiarem autora, należy poszczególne fragmenty tekstu objąć znacznikami, które przeglądarce "powiedzą", jak powinien być wyświetlony tekst na stronie WWW. >>>>AKAPIT

16 Czcionka nieproporcjonalna Tekst w tym akapicie zapisany jest czcionką proporcjonalną, to znaczy taką, w której każda z liter alfabetu ma inną szerokość, idealnie dopasowaną do jej kształtu. Tekst zapisany takim rodzajem czcionki jest znacznie przyjemniejszy w odbiorze niż tekst złożony za pomocą czcionki nieproporcjonalnej, o stałej szerokości znaków

17 Czcionka nieproporcjonalna Język HTML udostępnia element <tt>, dzięki któremu zapisanie dowolnego fragmentu tekstu czcionką nieproporcjonalną jest równie proste, jak pogrubienie go lub zapisanie kursywą. Elementu <tt> używa się najczęściej do osadzania wewnątrz akapitu pełnego tekstu pojedynczego słowa kluczowego, na przykład polecenia systemu operacyjnego:

18 Czcionka nieproporcjonalna ćwiczenie 5 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title><tt></title> </head> <body> aby wyświetlić zawartość katalogu wprowadź polecenie <tt>ls</tt>. Aby dodatkowo wyświetlić też szczegóły dotyczące każdego pliku czy katalogu dodaj parametr <tt>-l</tt>: <tt>ls -l</tt>. </body> </html>

19 Czcionka nieproporcjonalna Powyższy przykład pokazuje też, jak można skutecznie i przydatnie wykorzystywać encję, tworzącą twarde, niełamliwe spacje.

20 akapit Przeglądarki standardowo wyrównują akapity tekstu do lewego marginesu. Nic jednak nie stoi na przeszkodzie, by nakazać wyrównywanie akapitu tekstu do prawego marginesu, centrowanie akapitu lub justowanie go (wyrównywanie do obu marginesów).

21 akapit Aby akapit tekstu reprezentowany przez element nie został dosunięty do lewego marginesu, ale wycentrowany, wyjustowany lub wyrównany do prawego marginesu, należy dodać do znacznika otwierającego atrybut style z następującą wartością: text-align: left; aby wyrównać tekst do lewego marginesu (jest to zachowanie domyślne): text-align: right; aby wyrównać tekst do prawego marginesu: text-align: center; aby wycentrować tekst: text-align: justify; aby wyrównać tekst do obu marginesów:

22 Akapit ćwiczenie 6 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>text-align</title> </head> <body> do lewa na środek do prawa a ten oto akapit tekstu zostanie elegancko wyjustowany, czyniąc go podobnym do dobrze złożonej książki lub gazety. Nie zapominaj o znakach twardej spacji, by krótkie wyrazy i łączniki nie zostawały samotnie na końcu wiersza! </body> </html>

23 akapit

24 Łamanie tekstu wewnątrz akapitu Czasem może być potrzebne przerwanie biegu tekstu wewnątrz akapitu i rozpoczęcie dalszej części od kolejnej linii. Można to zrobić poprzez zamknięcie poprzedniego elementu i otwarcie nowego, jednak przeglądarka może wstawić wówczas między akapitami dodatkowy odstęp, który przeszkodzi w osiągnięciu zamierzonego układu tekstu. Język HTML definiuje jednak element , którego zadaniem jest przerywanie biegu tekstu wewnątrz akapitu:

25 Przykład ćwiczenie7 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> </title> </head> <body> to jest jeden akapit w sześciu wierszach! </body> </html>

26

27 Zmiana koloru treści i tła akapitu Mechanizm kaskadowych arkuszy stylu umożliwia zmianę kolorów dowolnego elementu języka HTML. Najczęściej pojawia się potrzeba zmiany kolorów tekstu, tła tekstu oraz tła całej strony, jednak dzięki kaskadowym arkuszom stylu (o których więcej w dalszych partiach tego kursu) można zmienić kolorystykę praktycznie dowolnego elementu graficznego na stronie.

28 Zmiana koloru treści i tła akapitu Zmiana barw będzie polegała na określaniu wartości dwóch atrybutów stylu background-color dla tła i color dla tekstu zapisanych wewnątrz atrybutu style dowolnego elementu. To ten sam atrybut style, o którym mowa była przed chwilą podczas zmiany sposobu wyrównania akapitu tekstu; jeżeli zatem chce się jednocześnie zmienić sposób wyrównania i kolorystykę, wystarczy umieścić wszystkie potrzebne deklaracje wewnątrz jednego atrybutu style.

29 Zmiana koloru treści i tła akapitu Ustalając atrybut stylu color elementu <body>, można za jednym zamachem zmienić kolor wszystkich akapitów tekstu, każdy z nich bowiem dziedziczy kolor tekstu po elemencie <body>. Kolory można określać na trzy sposoby. Najprostszym jest podanie angielskiej nazwy jednej ze standardowych barw przewidzianych przez twórców standardów WWW.

30 Zmiana koloru treści i tła akapitu Metoda 1

31 Zmiana koloru treści i tła akapitu Drugi sposób określenia koloru daje znacznie szersze możliwości. Sposób ten polega na podaniu po znaku # trzech dwucyfrowych liczb szesnastkowych określających natężenie składowych (kolejno: czerwonej, zielonej i niebieskiej) barwy. Wadą tej metody jest konieczność oswojenia się z liczbami szesnastkowymi (00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11 i tak dalej aż do FF).

32 Zmiana koloru treści i tła akapitu

33 Zmiana koloru treści i tła akapitu Trzecia metoda daje taką samą swobodę wyboru, lecz nie wymaga już znajomości liczb szesnastkowych. Zamiast kodu koloru należy wprowadzić formułkę rgb(r,g,b), gdzie R, G i B to liczby z przedziału oznaczające nasycenie barwy składowej: czerwonej (R), zielonej (G) i niebieskiej (B). Kod rgb(0,0,0) pozwoli uzyskać czerń, rgb(255,255,255) biel, rgb(255,0,0) zaś czystą czerwień. W ten sposób można użyć dowolnego z ponad 16 milionów kolorów, o ile będzie on tylko dostępny na komputerze wyświetlającym tworzoną stronę trzeba pamiętać, że można być pewnym dostępności jedynie predefiniowanych barw.

34 Zmiana koloru treści i tła akapitu ćwiczenie 8 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>kolor treści i akapitu</title> </head> <body style="background-color: yellow;"> zwykły tekst. a teraz wycentrowany. Dodajemy teraz kolor czerwony. Teraz bez centrowania, ale żółty na niebieskim tle. a teraz jeszcze dosunięty do prawej krawędzi. </body> </html>

35 Zmiana koloru treści i tła akapitu

36 Zmiana koloru treści i tła fragmentu tekstu Za pomocą atrybutu style elementu <body> można zmienić kolor tła lub tekstu całej strony, a elementu kolor tekstu i tła całego akapitu tekstu, nie ma jednak możliwości pokolorowania pojedynczych słów lub zdań. Jest na to rada: wystarczy objąć fragment tekstu, którego kolor ma zostać zmieniony, elementem i temu właśnie elementowi nadać atrybut style oraz atrybuty stylu.

37 Zmiana koloru treści i tła fragmentu tekstu -ćwiczenie 9 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>kolor części strony</title> </head> <body> każdy wyraz jest inaczej pokolorowany! </body> </html>

38 Zmiana koloru treści i tła fragmentu tekstu

39 Zmiana kroju pisma i rozmiaru czcionki Standardowy krój pisma, choć czytelny i elegancki, może nie odpowiadać wizji osoby tworzącej szatę graficzną strony. W każdej chwili jednak jest możliwość zmiany kroju pisma i rozmiaru czcionki globalnie (dla elementu <body>), na poziomie akapitu tekstu (dla elementu ) lub dla dowolnego wycinka tekstu (dla elementu ).

40 Zmiana kroju pisma i rozmiaru czcionki standardowych rodzin krojów pisma: serif czcionka szeryfowa, np. Times New Roman; sans-serif czcionka bezszeryfowa, np. Arial; cursive oraz fantasy ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma często w ogóle nie przystające do zamysłu autora strony); monospace czcionka nieproporcjonalna (o stałej szerokości wszystkich znaków) używana najczęściej do zapisywania tekstu programów komputerowych, tworzenia prymitywnych tabel lub wyróżniania poleceń programów; przykładem takiej czcionki jest Courier New. UNIKAMY NIETYPOWYCH KROJÓW PAMIĘTAJĄC

41 Zmiana kroju pisma i rozmiaru czcionki Wyboru kroju pisma dokonuje się za pomocą atrybutu stylu o nazwie font-family: font-family: 'times new roman', serif; Z kolei rozmiar czcionki można określić za pomocą atrybutu stylu font-size: font-size: 11pt; Rozmiar czcionki podaje się najczęściej w punktach (pt). Jeden punkt odpowiada 1/72 części cala, jeden cal (1") to 25,4 mm. Ten sposób podawania rozmiaru czcionki umożliwia płynne skalowanie tekstu w zależności od możliwości komputera użytkownika.

42 PRZYKŁAD ćwiczenie10 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>krój i rozmiar czcionki</title> </head> <body style="font-family: arial; font-size: 12pt;"> ten tekst zostanie zapisany czcionką zadeklarowaną dla elementu <body>. dzieje się tak, ponieważ element dziedziczy swój wygląd po elemencie nadrzędnym. tutaj jednak zmieniamy już krój pisma, a tutaj narzucamy większy rozmiar! </body> </html>

43 EFEKT

44 Określanie marginesów akapitu tekstu Aby określić szerokość marginesu z jednej z czterech stron akapitu, należy dodać do elementu atrybut stylu margin (strona), margin-top (górny), marginright (prawy), margin-bottom (dolny) lub margin-left (lewy). Oto przykład: ...

45 MARGINESY ćwiczenie 11 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>marginesy</title> </head> <body> Standardowe marginesy Brak marginesów Równe marginesy Duży prawy margines Duży lewy i dolny margines </body> </html>

46 i.efekt

47 Część 3

48 Nagłówek Wspominałem już, że dokument zapisany w języku HTML oprócz treści i wyglądu musi mieć również zakodowaną w sobie strukturę dokumentu. Struktura to podział na rozdziały, podrozdziały, punkty oraz znajdujący się na najniższym poziomie zwykły tekst zapisany w akapitach reprezentowanych przez elementy języka HTML.

49 Nagłówki dokumentu dzielące tekst strony na logiczne fragmenty zapisuje się w kodzie HTML, używając elementów <h1>, <h2>, <h3>, <h4> oraz <h5> i <h6>. Standardowo przypisany nagłówkom wygląd pozwala im znacząco wyróżniać się w otoczeniu zwykłego tekstu. Nie powinno się jednak próbować dopasować rzędu nagłówka do wyglądu tekstu: jeśli struktura dokumentu wymaga, aby w danym miejscu użyć nagłówka pierwszego rzędu (element <h1>), to trzeba go użyć nawet jeśli wydaje się, że jest on o wiele za duży. Wygląd nagłówka można przecież zmienić w sposób analogiczny do opisanego wcześniej sposobu zmiany rozmiaru czcionki a naruszonej struktury logicznej dokumentu tak łatwo nie da się naprawić.

50 Ćwiczenie 12 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf- 8" /> <title>nagłówki</title> </head> <body> <h1>tytuł tekstu</h1> <h2>rozdział 1. O warzywach</h2> warzywa są zdrowe. <h2>rozdział 2. O marchwi</h2> Czy marchew jest warzywem? </body> </html>

51 efekt

52 Linie poziome Choć oferowana przez język HTML możliwość wstawienia na stronie WWW poziomej linii oddzielającej fragmenty tekstu straciła na znaczeniu w dobie wszechobecnej grafiki, nadal może być czasem potrzebna. Na niektórych prostszych stronach WWW taka linia wcale nie wygląda źle! Aby rozdzielić dwa akapity tekstu poziomą kreską, należy wstawić pomiędzy odpowiadające im elementy element <hr> (w postaci pojedynczego znacznika-elementu: <hr />). Tak utworzona linia pełni swoją funkcję, jednak wygląda mało estetycznie.

53 Aby poprawić jej wygląd, można: > Usunąć pseudotrójwymiarowe obramowanie, podając atrybut stylu border: none;. > Określić wysokość i długość kreski, podając atrybuty stylu width i height. > Zmienić kolor tła kreski, podając atrybut stylu background-color, analogicznie jak w przypadku strony, akapitu czy fragmentu tekstu.

54 uwaga Niestety, atrybut stylu border jest ignorowany przez przeglądarkę Internet Explorer 6.0. To, że zmieniamy nie kolor linii, a kolor tła linii, może się wydawać w pierwszej chwili nielogiczne, warto jednak szybko się do tego przyzwyczaić.

55 Szerokość i grubość linii Szerokość linii zazwyczaj podaje się w sposób względny, jako procent jej maksymalnej szerokości (na przykład: width: 80%;). Wysokość można podać w punktach drukarskich pt podobnie jak w przypadku czcionek. Kolor tła można podać w dowolny ze sposobów opisanych wcześniej.

56 Ćwiczenie 13 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>linia pozioma</title> </head> <body> prosta kreska: <hr /> ładniejsza kreska: <hr style="border: none; width: 80%; height: 2pt; background-color: blue;" /> jeszcze inna kreska: <hr style="border: none; width: 90%; height: 5pt; background-color: green;" /> </body> </html>

57 efekt

58 Linie wypunktowane i numerowane Wydawać by się mogło, że utworzenie elegancko wyglądającej, wypunktowanej listy zajmie bardzo dużo czasu. Rzeczywistość jest na szczęście zupełnie inna korzystając z elementów <ul> oraz <li>, listę wypunktowaną tworzy się w ciągu paru minut. Znaczniki <ul> i </ul> rozpoczynają i kończą obszar listy. Pomiędzy nimi znajdować się będę elementy <li> tworzące kolejne pozycje listy.

59 Ćwiczenie -14 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title><ul></title> </head> <body> na wycieczkę należy zabrać: <ul> <li>namiot,</li> <li>zapalniczkę,</li> <li>gaśnicę,</li> <li>10 kg prowiantu.</li> </ul> </body> </html>

60 efekt

61 Znaki specjalne Aby na stronie był widoczny znak specjalny, w kodzie HTML musi się pojawić odpowiadająca mu encja, czyli prosty znacznik rozpoczynający się znakiem &, a kończący średnikiem (;). Oto najczęściej stosowane encje HTML

62 podsumowanie Należy pamiętać o umieszczaniu w każdym dokumencie deklaracji typu dokumentu (znaczniki <?xml?> oraz <!DOCTYPE>) oraz elementu <meta> informującego o sposobie kodowania polskich znaków diakrytycznych. Nie można zapomnieć o zamykaniu wszystkich znaczników w kolejności odwrotnej do kolejności ich otwierania. Korzystając z nagłówków (elementy od <h1> do <h6>), należy mieć na uwadze strukturę logiczną dokumentu, a nie jego wygląd.