Po teoretycznym opisie języka HTML pora na ćwiczenia praktyczne. Przedstawiona seria ćwiczeń pomaga w opanowaniu języka HTML oraz CSS w stopniu wystarczającym do tworzenia dokumentów składających się z tekstów.
Dokument w języku HTML zawiera - oprócz swojej treści - całkiem dużo różnych napisów, które ustalają strukturę tekstu i powodują taki, a nie inny wygląd dokumentu w przeglądarce. Chodzi oczywiście o znaczniki. Przygotowując dokument HTML musimy napisać oprócz samej treści strony także znaczniki HTML. Jeśli na stronie chcemy umieścić wytłuszczony napis OSA, to koniecznym będzie napisanie
<STRONG>OSA</STRONG>
dwudziestu znaków zamiast 3. Jeśli później dojdziemy do wniosku, że napis OSA ma być pochylony, znaczniki <STRONG> i </STRONG> należy zastąpić znacznikami <EM> oraz </EM>:
<EM>OSA</EM>
Abstrahując od sensu elementów EM i STRONG widzimy, że ilość pracy edytorskiej jest wyjątkowo duża. Myślę, że jest to jeden z głównych powodów, dla których wiele osób rezygnuje z przygotowywania dokumentów HTML na rzecz edytorów wizualnych.
Jednym ze sposobów przyspieszenia edycji plików html jest użycie skrótów klawiszowych. Program NotH (zawarty na płycie dołączonej do czasopisma) ułatwia pracę nad dokumentami HTML dzięki zdefiniowanym skrótom i funkcjom ukierunkowanym na edycje kodu HTML. Dowolny element HTML możemy uzyskać naciskając dwa klawisze.
Najczęściej stosowanym skrótem programu NotH jest skrót Ctrl+S+A. Skrót ten tworzy pusty dokument HTML, umieszczając w nim elementy HTML, HEAD, TITLE, BODY oraz META.
Skróty klawiszowe Ctrl+S+A są zapisywane również jako ^SA. Skrót taki oznacza, że należy:
Po aktywacji skrótu ^SA, możemy przystąpić do wpisywania zawartości dokumentu. Kursor jest umieszczony pomiędzy znacznikami <TITLE> oraz </TITLE>. Wpiszmy jako tytuł strony napis Witaj!:
<TITLE>Witaj!</TITLE>
Następnie przejdźmy do zawartości strony, i pomiędzy znacznikami <BODY> i </BODY> wprowadźmy tekst:
<H1>Moja pierwsza strona</H1>
Do umieszczenia znaczników <H1> oraz </H1> służy skrót ^P1 (tj. Ctrl+P+1).
Tak przygotowany dokument zapisujemy w folderze D:\www\cw-1.html, po czym naciskamy klawisz F9. Klawisz F9 uruchamia domyślną przeglądarkę i pokazuje wygląd utworzonego dokumentu. Dokument ten został przedstawiony na rysunku 1. Zauważmy, że napis Witaj!, który umieściliśmy pomiędzy znacznikami elementu TITLE widnieje na belce tytułowej przeglądarki, zaś tekst Moja pierwsza strona - zawartość elementu H1 - stanowi streść strony WWW.
Rys. 1. Strona wykonana programem NotH
Wszystkie przykłady omówione w tekście zostały umieszczone na płycie WWW. W celu obejrzenia wyglądu przykładu należy odpowiedni plik podwójnie kliknąć. Kod HTML strony obejrzymy otwierając wybrany dokument programem NotH lub wykonując w przeglądarce operację Widok | Źródło.
Zanim przejdziemy do omawiania kolejnych ćwiczeń, skupmy uwagę na edycji HTML. Będziemy chcieli wykonywać trzy rodzaje operacji:
Wstawianie znaczników realizujemy naciskając skrót klawiszowy. Wykonujemy skrót Ctrl+S+A - mamy pustą stronę naciskamy Ctrl+P+1 - pojawia się nagłówek H1, po naciśnięciu Ctrl+F+S - dostaniemy element STRONG. I tak dalej. Trudność może z początku stwarzać konieczność zapamiętania skrótów. Jednak z racji na fakt, że faktycznie stosowanych znaczników jest około dwudziestu nie jest to zadanie karkołomne. Natomiast po opanowaniu skrótów, szybkość edycji kodu HTML wzrośnie kilkukrotnie.
Współczesne programy komputerowe zawierają najprzeróżniejsze funkcje mające na celu zwiększenie produktywności. Niektóre funkcje programów są aktywowane przy uruchomieniu lub zamknięciu aplikacji (np. konwersja kodowania znaków). Czasami programy wykonują operacje o zadanych porach dnia, lub co zadany odcinek czasu (np. funkcje zapisu).
Operacje wykonywane na żądanie wymagają interakcji użytkownika. W większości aplikacji, funkcje programu możemy aktywować:
Zaletą skrótów klawiszowych jest szybkość. Najlepszym przykładem tego jest operacja kopiuj-wklej. Jeśli do skopiowania i wklejenia stosujemy myszkę i menu główne lub paski narzędzi, to trwa to kilkukrotnie dłużej niż w przypadku wykorzystania wyłącznie klawiatury.
W programach, które stosujemy warto od czasu do czasu sprawdzić dostępne skróty klawiszowe.
Po aktywacji każdego ze skrótów, kursor myszki jest ustawiany w miejscu, w którym najprawdopodobniej będziemy chcieli wprowadzać tekst. I tak po aktywacji skrótu Ctrl+P+P otrzymamy akapit, a kursor zostanie umieszczony pomiędzy znacznikami:
<P> |-położenie kursora </P>
Po aktywacji skrótu Ctrl+P+2:
<H2>kursor umieszczony zostanie wewnątrz znaczników</H2>
otrzymamy nagłówek H2 z kursorem umieszczonym pomiędzy znacznikami otwierającym i zamykającym. Wreszcie skrót Ctrl+P+I:
<IMG src="|-pozycja kursora" alt="">
wstawi element IMG, przesuwając kursor wewnątrz atrybutu src.
Jedną z dodatkowych korzyści, jaką niesie za sobą korzystanie ze skrótów oraz innych metod wstawiania kodu jest fakt, że otrzymamy kod pozbawiony czeskich błędów. Wiele osób, na początku nauki pisze scr zamiast src, herf a nie href. Czasami zgubi się slash, który rozpoczyna znacznik zamykający:
<TITLE>Witaj!<TITLE>
Te trzy błędy scr, herf oraz TITLE bez znaku / sprawiają bardzo dużo problemów początkującym webmasterom, podczas gdy korzystanie ze skrótów eliminuje wszystkie tego typu błędy.
Znaczniki wstawiamy korzystając wyłącznie ze skrótów klawiszowych.
Jeśli zdarzy się tak, że napisany tekst chcemy modyfikować, wówczas należy korzystać ze skrótów i zaznaczania tekstu. Aktywacja większości skrótów powoduje obejmowanie zaznaczonego tekstu. Jeśli w zdaniu Przyszło to na świat wątłe, słabe zaznaczymy wyraz świat, po czym naciśniemy skrót Ctrl+F+E, wówczas otrzymamy kod:
Przyszło to na <EM>świat</EM> wątłe, słabe
Po wykonaniu takiej operacji zaznaczony jest blok obejmujący wstawiony element wraz z zawartością.
Drugim rodzajem operacji jest usuwanie znaczników. W NotHu służy do tego skrót Ctrl+Del. Należy najpierw zaznaczyć cały element, od początku znacznika otwierającego do końca znacznika zamykającego. Naciśnięcie Ctrl+Del spowoduje usunięcie znacznika otwierającego i zamykającego.
Wreszcie ostatnia, nie mniej potrzebna operacja to zamiana elementów. Do tej operacji wykorzystujemy klawisz Shift. Jeśli w tekście Ene, due, ryke, fake zaznaczymy napis ryke i wykonamy skrót Ctrl+F+E, to dostaniemy kod:
Ene, due, <EM>ryke</EM>, fake
z zaznaczonym całym elementem EM. Jeśli element ten chcemy zamienić na nagłówek H1, to należy skorzystać ze skrótu Ctrl+P+1 przytrzymując klawisz Shift. Dostaniemy wówczas kod:
Ene, due, <H1>ryke</H1>, fake
z zaznaczonym elementem H1. Jeśli teraz H1 chcemy zmienić na STRONG, to naciskamy skrót Ctrl+F+S przytrzymując Shift:
Ene, due, <STRONG>ryke</STRONG>, fake
Gdy uznamy, że STRONG jest zbędny, naciskamy Ctrl+Del. Otrzymamy ponownie:
Ene, due, ryke, fake
W ten sposób jeden zestaw skrótów służy zarówno do wstawiania jak i zmiany znaczników.
Podsumowując, ułatwienia jakie wnosi NotH w edycję kodu to:
Pierwszy etap nauki języka HTML polega na opanowaniu umiejętności przygotowania dokumentów zawierających tekst. Opowiadania, powieści, artykuły, teksty piosenek, wiersze, streszczenia, przewodniki, fora dyskusyjne i katalogi adresów WWW - niemal wszystkie dokumenty dostępne w Internecie zawierają teksty. W istocie trudno sobie wyobrazić witrynę WWW, która nie zawiera żadnych tekstów.
Z tekstem związane są następujące elementy HTML:
Do elementów tych mamy skróty:
Pamiętając, że skrót ^SA tworzy pustą stronę, przejdźmy do ćwiczeń. W celu uniknięcia konieczności wklepywania tekstów zawartych w ćwiczeniach, na płycie CD zostały zawarte odpowiednie dokumenty tekstowe. Pozwoli to skupić uwagę na ćwiczeniu języka HTML, a nie przepisywaniu tekstów. Ćwiczenia możemy wykonywać korzystając z techniki kopiuj-wklej lub też poddawać modyfikacjom pliki tekstowe.
Przygotuj stronę prezentującą kilka przysłów.
Rys. 2. Akapity zawierające przysłowia
Tworzymy w NotHu nowy dokument. W tym celu naciskamy ^SA. Pomiędzy dwoma znacznikami TITLE wprowadzamy tytuł strony Przysłowia. Następnie przechodzimy pomiędzy elementy BODY, po czym wstawiamy trzy puste akapity, jeden pod drugim. Naciskamy trzykrotnie skrót ^PP, za każdym razem przesuwając kursor w dół. Na koniec, otwieramy dokument tekstowy z przysłowiami, i korzystając z techniki kopiuj-wklej, kopiujemy przysłowia do trzech wstawionych akapitów.
Na koniec dokument zapisujemy, i włączamy podgląd (klawisz F9).
Przygotuj stronę z treścią wyliczanki Ene-due.
Rys. 3. Złamanie linii po każdym wersie wiersza
Tym razem, w programie NotH otwieramy plik testowy zawierający treść wyliczanki. Zaznaczamy cały tekst (skrót Ctrl+A jest stosowany w większości aplikacji), po czym aktywujemy skrót ^PP. Tekst wyliczanki zostanie zawarty we wnętrzu akapitu. Zaznaczony blok obejmuje w tym momencie tekst wyliczanki i znaczniki P.
Aktywujemy teraz skrót ^SA i otrzymamy pustą stronę, zawierająca akapit z wyliczanką. Teraz, pomiędzy znacznikami TITLE, wprowadzamy tytuł strony.
Otrzymaną stronę zapisujemy, po czym włączamy podgląd. Jak widać, pomimo, że kolejne wersy wyliczanki zostały umieszczone w nowych linijkach, to w przeglądarce tekst stanowi jedną, niezłamaną linię.
Do złamania linii wewnątrz akapitu używamy znacznika <BR>. Po dodaniu elementów BR, kod strony wygląda następująco:
<P> Ene, due, ryke, fake,<BR> Torbe, burbe, ósme, smake,<BR> Des, deus kosmateus,<BR> I morele baks.<BR> </P>
Przygotuj stronę z wierszykami, śpiewanymi przez dziecięcy zespół muzyczny Kapela Radości Małych, w celu poprawienia dykcji. W każdym wierszyku wytłuść lub pochyl dowolny wyraz. W rozwiązaniu zawartym na płycie uwypuklono akcentowane wyrazy.
Rys. 4. Uwypuklanie tekstu
Tworzymy nową stronę (^SA). Wprowadzamy, pomiędzy znacznikami TITLE tytuł Rozśpiewki, a następnie kopiujemy i wklejamy treść rozśpiewek. Wklejone linijki tekstu zaznaczamy i obejmujemy znacznikami <P> (^PP). Po każdej rozśpiewce dodajemy znak złamania wiersza, po czym zaznaczamy kolejno różne wyrazy i aktywujemy skróty ^FS i ^FE.
Otrzymany dokument zapisujemy i przechodzimy do podglądu (F9).
Domyślne formatowanie elementu STRONG to wytłuszczenie kroju, zaś element EM zmienia krój czcionki na pochylony.
Dokumenty z poprzednich ćwiczeń nie zawierały bardzo ważnych elementów. Nagłówków. Nagłówki dzielą dokument na rozdziały, podrozdziały oraz sekcje. HTML umożliwia sześciostopniowy podział dokumentu.
Nagłówki oznaczamy elementami H1, H2, H3, H4, H5 oraz H6. Do elementów tych mamy skróty ^P1 - H1, ^P2 - H2, itd.
Przygotuj stronę prezentującą prolog dramatu Williama Shakespeare'a Henryk VIII.
Rys. 5. Dokument z nagłówkami H1, H2 i H3
Otwieramy dokument tekstowy w NotHu, zaznaczamy całość (Ctrl+A), i przekształcamy w stronę WWW (^SA). Teraz zaznaczamy blok obejmujący tytuł i aktywujemy skrót ^P1. Otrzymamy nagłówek H1 obejmujący tytuł.
Następnie zaznaczamy blok obejmujący nazwisko autora, i naciskamy ^P2. W dokumencie pojawi się nagłówek H2.
Podobnie, dodajemy nagłówek H3 (skrót ^P3). Nagłówkiem tym obejmujemy wyraz Prolog.
Teraz, zaznaczamy cały prolog, po czym przekształcamy go w akapit (^PP). Na końcu każdej linijki prologu dodajemy znacznik <BR>.
Ćwiczenie kończymy wpisując pomiędzy znacznikami TITLE tytuł dokumentu
Przygotuj stronę WWW z treścią noweli Henryka Sienkiewicza Latarnik.
Rys. 6. Treść noweli sformatowana elementami P, BR, H1, H2, H3
Po otworzeniu dokumentu tekstowego w programie NotH wykonujemy kolejno:
Tekst preformatowany zachowuje białe znaki: spację oraz złamanie wiersza. Dodatkowo jest on pisany czcionka stałej szerokości. Głównie stosujemy go do kodów programów i skryptów komputerowych. Tekst preformatowany obejmujemy znacznikami <PRE></PRE> uzyskiwanymi skrótem ^FP.
Przygotuj stronę prezentująca kod funkcji filesFromFolder.
Rys. 7. Tekst preformatowany
Otwieramy dokument tekstowy, zaznaczamy cały tekst i obejmujemy znacznikami <PRE> i </PRE>. Teraz dodajemy szablon pustej strony (gdy zaznaczony jest cały tekst naciskamy ^SA), dodajemy nagłówek i zmieniamy tytuł dokumentu. Gotową stronę zapisujemy i otwieramy w przeglądarce.
Przygotuj stronę z wierszykiem Jana Brzechwy Chrząszcz.
Rys. 8. Tekst preformatowany zastosowany do wiersza
Element PRE możemy również użyć do zwykłego tekstu. Po otworzeniu pliku z treścią wierszyka, korzystając ze skrótów ^SA (szablon pustej strony), ^FP (tekst preformatowany obejmujący tekst wierszyka), ^P1 (nagłówek H1 strony, zawierający nazwisko autora) oraz ^P2 (nagłówek H2 strony - tytuł wiersza) tworzymy stronę WWW.
Ponieważ znaki < oraz > obejmują znaczniki, zatem nie należy ich używać w innym celu. Jeśli na przykład chcemy na stronie poświęconej językowi HTML umieścić informację, że "... znacznik <STRONG> ma takie, a takie działanie..." wówczas musimy znaki < i > zastąpić napisami < oraz >.
Przygotuj samouczek języka HTML na temat elementów EM oraz STRONG.
Rys. 9. Znaki specjalne
Po utworzeniu nowego, pustego dokumentu wklejamy tekst z pliku tekstowego.
Znaki specjalne możemy uzyskać w NotHu na dwa sposoby: korzystając ze skrótów klawiszowych, oraz wykonując konwersję. Skróty ^QL, ^QG, ^QA oraz ^QS wstawiają znaki <, >, & oraz spację.
W celu wykonania konwersji znaków, zaznaczamy pierwszy akapit testu, po czym naciskamy klawisze Ctrl+F11. Znaki mniejszości i większości powinny się zamienić na odpowiadające im znaki specjalne. Naciśnięcie samego klawisza F11 dokona konwersji odwrotnej.
Do tekstu dodajemy znaczniki akapitu oraz stosując operację konwersji (Ctrl+F11) zmieniamy odpowiednie fragmenty tekstu
Przygotuj stronę przedstawiającą kod programu wyznaczającego największy wspólny dzielnik.
Rys. 10. Tekst preformatowany i znaki specjalne użyte do prezentacji programu komputerowego
Po otworzeniu kodu programu w programie NotH, zaznaczamy cały dokument i wykonujemy skróty: najpierw Ctrl+F11, następnie ^FP, wreszcie ^SA. Powinniśmy otrzymać stronę z tekstem preformatowanym zawierającym znaki specjalne.
Znacznik <HR> wstawia do strony WWW pozioma linię. Wprawdzie jest to element dość staromodny, rzadko dzisiaj używany, ale czasami jest użyteczny. Element ten uzyskamy skrótem ^LH.
Przygotuj stronę z cytatami Alberta Camusa.
Rys. 11. Pozioma linia
Po przygotowaniu strony zawierającej każdy cytat w osobnym paragrafie, przesuwamy kursor pomiędzy paragrafy i aktywujemy skrót ^LH.
Ostatnim elementem przedstawionym w dzisiejszej serii ćwiczeń jest komentarz HTML. Znaczniki
<!-- -->
uzyskamy skrótem ^PK.
Przygotuj stronę z tekstem piosenki Deszcz niespokojne. Każdą ze zwrotek poprzedź komentarzem z numerem zwrotki.
Rys. 12. Komentarze w HTML
Po wykonaniu strony z tekstem piosenki, umiejscawiamy kursor przed pierwszą zwrotką, naciskamy ^PK, po czym wewnątrz komentarza wpisujemy numer zwrotki. Oczywiście komentarz nie będzie widoczny w przeglądarce.
W identyczny sposób dodajemy komentarz przed drugą zwrotką.
lp. | Element | Kod HTML | Skrót | Zapis skrótu |
---|---|---|---|---|
lp. | Element | Kod HTML | Skrót | Zapis skrótu |
1. | Szablon pustej strony | - | Ctrl+S+A | ^SA |
2. | Akapit | <P></P> | Ctrl+P+P | ^PP |
3. | Złamanie wiersza | <BR> | Ctrl+P+R | ^PR |
4. | Uwypuklanie tekstu | <STRONG></STRONG> | Ctrl+F+S | ^FS |
5. | Uwypuklanie tekstu | <EM></EM> | Ctrl+F+E | ^FE |
6. | Nagłówek H1 | <H1></H1> | Ctrl+P+1 | ^P1 |
7. | Nagłówek H2 | <H2></H2> | Ctrl+P+2 | ^P2 |
8. | Nagłówek H3 | <H3></H3> | Ctrl+P+3 | ^P3 |
9. | Pozostałe nagłówki uzyskujemy analogicznie | |||
10. | Tekst preformatowany | <PRE></PRE> | Ctrl+F+P | ^FP |
11. | Znaki specjalne | Ctrl+F11 oraz F11 | ||
12. | Znak < | < | Ctrl+Q+L | ^QL |
13. | Znak > | > | Ctrl+Q+G | ^QG |
14. | Znak & | & | Ctrl+Q+A | ^QA |
15. | Spacja | | Ctrl+Q+S | ^QS |
16. | Pozioma linia | <HR> | Ctrl+L+H | ^LH |
17. | Komentarz | <!-- --> | Ctrl+P+K | ^PK |
Tabela 1. Zestawienie omówionych elementów
Warto elementy i skróty przedstawione w tabelce 1 przećwiczyć przygotowując kilkanaście dokumentów z różnymi wierszykami, piosenkami oraz nowelami. Pamiętajmy przy tym, by tworzone dokumenty od czasu do czasu sprawdzać walidatorem http://validator.w3.org/. Ustrzeże nas to przed nabieraniem złych nawyków!
Gdy umiemy już przygotować proste dokumenty tekstowe, to naturalnym następnym krokiem nauki będzie modyfikacja atrybutów tekstu. Zmiana kroju czcionki, koloru tła czy wyjustowanie akapitów to przykłady operacji, bez których trudno wyobrazić sobie edycje tekstu.
Język HTML nie zawiera żadnych wbudowanych mechanizmów pozwalających na modyfikacje wyglądu dokumentów. Elementy takie jak CENTER czy FONT oraz atrybuty w rodzaju align zostały definitywnie wycofane z języka. W ich miejsce pojawiły się kaskadowe arkusze stylów (CSS).
Nie wnikając w szczegóły składniowe, można powiedzieć, że definicja stylów to lista elementów HTML z opisem właściwości wizualnych.
Na przykład, jeśli chcemy zmienić czcionkę elementu P na Courier, to zrealizujemy stylem:
P { font-family: Courier; }
Wyrównanie do prawej, wytłuszczenie i zmianę koloru czcionki na czerwony nagłówka H1 realizuje styl:
H1 { text-align : right; font-weight : bold; color : red; }
Jak widać, opis stylu ma postać:
nazwa-elementu { atrybut : wartość; atrybut : wartość; ... atrybut : wartość; }
Style umieszczamy w dokumencie HTML wewnątrz nagłówka, na przykład po elemencie META:
<HEAD> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <STYLE type="text/css"> <!-- opis stylów --> </STYLE> </HEAD>
Skrót ^SW wstawia element STYLE:
<STYLE type="text/css"> <!-- --> </STYLE>
oraz skrót ^SB, który tworzy szablon pustej strony zawierającej style.
Do modyfikacji czcionek służą atrybuty:
Wartością atrybutu font-family jest nazwa kroju czcionki. Atrybut font-size określa wielkość kroju. Do liczby wyrażającej wielość przyklejamy skrót px (piksele) lub pt (punkty). Grubość kroju określamy podając atrybut font-weight. Jego wartościami mogą miedzy innymi być normal oraz bold (co oznacza włączenie i wyłączenie pogrubienia). Wreszcie kursywę możemy włączyć stosując font-style. Poprawnymi wartościami są italic lub normal.
Skrót ^BF produkuje przykładowe wartości atrybutów, zaś ^NP, ^N1, ^N2, ^NB ułatwiają przygotowanie definicji. Po wykonaniu skrótów ^NP oraz ^BF otrzymamy następujące style: akapitu:
P { font-family : Verdana; font-style : normal; font-weight : normal; font-size : 10pt; }
Dodajmy, że style określające czcionki możemy definiować niemal dla wszystkich elementów języka HTML z osobna. Możemy modyfikować czcionkę użytą w nagłówkach, akapicie, czy całym dokumencie (czcionki określone dla elementu BODY).
Atrybutami odnoszącymi się do akapitów są wyrównanie, wielkość wcięcia oraz ozdobienie tekstu. Atrybut text-align ustala wyrównanie tekstu. Jego wartościami mogą być: left, center, right oraz justify.
Wcięcie akapitu określamy atrybutem text-indent:
text-indent: 2em;
Jednostka em, jest jednostką względną, zależną od wielkości kroju czcionki.
Wreszcie atrybut text-decoration o wartościach none, underline, overline, line-through lub blink określa dodatkowe efekty dekoracyjne takie jak podkreślenie czy przekreślenie liter.
I znowu, dodajmy, że powyższe atrybuty możemy definiować w stosunku do różnych elementów HTML, nie tylko akapitu. Możemy wyrównywać do lewej akapity, obrazy czy nawet tabele i ich komórki.
Skrót ^BT wstawia domyślne wartości powyższych trzech atrybutów. Po naciśnięciu skrótów ^NB oraz ^BT otrzymamy style:
BODY { text-indent : 2em; text-align : justify; text-decoration : none; }
Do definiowania marginesów służy atrybut margin, postaci:
margin : 100px;
Jeśli chcemy ustalić różne wartości marginesów lewego, prawego, górnego i dolnego, to stosujemy atrybuty margin-left, margin-right, margin-top oraz margin-bottom.
Atrybuty te możemy stosować w odniesieniu do wszystkich niemal elementów HTML. Skróty ^BM oraz ^BN wstawiają predefiniowane wartości. Aktywacja skrótów ^N1 oraz ^BN da w efekcie:
H1 { margin-left : 20pt; margin-right : 20pt; margin-top : 20pt; margin-bottom : 20pt; }
Kolory modyfikujemy atrybutami color oraz background. Wartościami kolorów są wartości RGB lub angielskie nazwy kolorów.
Skrót ^BC wstawia atrybuty color i background o kolorach czarnym oraz białym. Do wizualnej modyfikacji kolorów służy w NotHu okienko kolorów.
Po naciśnięci klawisza F4 pojawia się okno dialogowe. Podwójne kliknięcie dowolnego z kolorów, wstawia do dokumentu, w miejscu, w którym znajduje się kursor, kod RGB wybranego koloru.
Prawe kliknięcie w dowolny z kolorowych kwadracików, wyświetla okno do zmiany koloru wybranego kwadracika. Stosując metodę ciągnij-upuść możemy kopiować kolory pomiędzy kwadratami.
Przygotuj życiorys Jana Brzechwy w postaci strony. W dokumencie zmień atrybuty tekstu oraz akapitu.
Rys. 13. Style dotyczące czcionki i wyrównania
Otwieramy dokument z tekstem życiorysu, zaznaczamy wszystko i aktywujemy skrót ^SB. Dodajemy elementy H1 oraz P obejmujące nazwisko autora oraz tekst życiorysu. Następnie przesuwamy kursor wewnątrz definicji stylów i aktywujemy skrót ^NP. Otrzymamy:
<STYLE type="text/css"> <!-- P { } --> </STYLE>
Teraz aktywujemy skrót ^BF. Wewnątrz elementu STYLE otrzymamy następującą definicję:
<STYLE type="text/css"> <!-- P { font-family : Verdana; font-style : normal; font-weight : normal; font-size : 10pt; } --> </STYLE>
Korzystając ze skrótów ^BT oraz ^BM definiujemy atrybuty akapitu i marginesy.
Przygotuj stronę WWW z życiorysem Juliusza Verne.
Rys. 14. Style modyfikujące kolory
Podobnie jak poprzednio, otwieramy dokument tekstowy i aktywujemy skrót ^SB.
Dodajemy kod HTML, po czym przechodzimy do arkuszy stylów. Wstawiamy kod stylów, dokument zapisujemy i korzystając z klawisza F9 oglądamy w przeglądarce.
Jako dwa ostatnie ćwiczenia proponuję samodzielne wykonanie stron przedstawionych na rysunkach 15 oraz 16.
Rys. 15. Opowiadanie p.t. „Zew krwi”
Rys. 16. Wierszyk sformatowany przy użyciu stylów
Nie ma co separować nauki CSS od HTML. Sądzę, że warto uczą się HTML od razu wzbogacać tworzone strony o style. Podobnie jak w przypadku HTML, korzystanie z walidatora udostępnianego przez organizację W3c: http://jigsaw.w3.org/css-validator/ uchroni nas przed brnięciem w złym kierunku.
Oczywiście ucząc się HTML i CSS możemy się posługiwać dowolnym edytorem plików tekstowych. Nawet notatnikiem. Jednak wówczas, pisanie znaczników będzie naprawdę katorżniczą pracą.