WITRYNA HTML
STRUKTURA KATALOGÓW 1. Do dyspozycji masz katalog Strona oraz dwa podkatalogi: css oraz images. 2. W katalogu images znajdują się grafiki i zdjęcia potrzebne do realizacji tworzonej strony WWW. TWORZENIE DOKUMENTU: LAYOUT Dokument Layout posłuży nam jako wyjściowa makieta, baza do tworzenia stron i podstron serwisu internetowego. 1. Otwórz program JTHTML. 2. Z menu Wstaw wybierz polecenie Szkielet strony. W wyświetlonym oknie dialogowym Szkielet strony ustaw następujące opcje: Z menu Typ dokumentu wybierz polecenie HTML 5. W polu Tytuł strony wpisz Nasza pierwsza strona. Wprowadzone zmiany do okna zatwierdź przyciskiem Wstaw. Program napisze kod podstawowej struktury dokumentu HTML 5 (Rys. 1). 3. Zapisz dokument w katalogu Strona jako Layout.html. Nagłówek dokumentu Sekcja body Wpis określający rodzaj języka budowy strony (HTML5): Tytuł strony HTML Deklaracja strony kodowej dokumentu Nazwa programu za pomocą którego została napisana strona WWW Określenie metody indeksowania strony WWW Rys. 1. Struktura dokumentu HTML 5 3
TWORZENIE STRUKTURY DOKUMENTU - ETAP PIERWSZY Przydatne linki: http://www.pozycjonowaniewsieci.pl 1. Wstaw kursor między znacznik otwierający <body> a zamykający </body>. 2. Wpisz znacznik tworzący strukturę strony internetowej <div></div> odpowiedzialny za utworzenie podstawowego kontenera przechowującego kolejne elementy strony. Jego nazwę i parametry ustalimy w dalszej części pracy, w trakcie tworzenia arkusza CSS. Ustaw kursor pomiędzy znacznikiem otwierającym a zamykającym utworzonej przed chwilą sekcji div. Z klawiatury wybierz dwukrotnie klawisz ENTER, tak by znaczniki znalazły się w osobnych linijkach kodu oraz aby pomiędzy nimi powstał wolny wiersz. Wstaw kursor w pustym wierszu kodu. 3. Utwórz sekcję nagłówka dokumentu wstawiając semantyczny znacznik: <header></header>. Pomiędzy znacznikami wpisz zdanie: Tu będzie nagłówek strony. Twój kod sekcji body powinien wyglądać następująco: <body> <div> <header>tu będzie nagłówek strony</header> </div> </body> 4. Wstaw kursor za zamykającym znacznikiem sekcji header. Z klawiatury wybierz klawisz EN- TER. 5. W nowym wierszu wpisz sekcję nav, odpowiedzialną za przechowywanie menu nawigacyjnego. Pomiędzy znacznikami wpisz zdanie: Tu będzie menu strony. <nav>tu będzie menu strony</nav> 6. Utwórz nową linijkę kodu z sekcją: section. <section>tu będzie główna część strony</section> Część dokumentu oznaczona znacznikami <section></section> przeznaczona jest do przechowywania głównej zawartości strony WWW. 7. Utwórz nową linijkę kodu z semantyczną sekcją: footer, odpowiedzialną za przechowywanie elementów stopki dokumentu. <footer>tu będzie stopka strony</footer> Twój kod sekcji body powinien wyglądać następująco: <body> <div> 4
<header>tu będzie nagłówek strony</header> <nav>tu będzie menu strony</nav> <section>tu będzie główna część strony</section> <footer>tu będzie stopka strony</footer> </div> </body> 8. Poleceniem Zapisz z menu Plik (CTRL + S) zapisz zmiany wprowadzone do pliku. TWORZENIE ARKUSZA CSS - ETAP PIERWSZY 1. Z menu Plik > Nowy wybierz polecenie arkusz stylów css. 2. W wyświetlonym oknie dialogowym Wybór kodowania pozostaw domyślną formę kodowania: UTF-8, wybierz przycisk OK. 3. W katalogu Strona/css zapisz dokument pod nazwą Struktura.css. 4. Zdefiniuj selektor body, ustawiając rodzinę oraz rozmiar czcionek dla tworzonej witryny oraz przypisz zerową wartość dla marginesów oraz dopełnienia. body { margin: 0; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: medium; 5. Określ właściwości dla głównego kontenera strony tworząc identyfikator #box dla znacznika div. #box { width: 940px; height: auto; margin: 0 auto; padding: 5px 40px 20px 30px; background-color:#d6d6d6; 6. Poleceniem Zapisz z menu Plik (CTRL + S) zapisz zmiany wprowadzone do pliku. 7. Dołącz zewnętrzny arkusz stylów Struktura.css, do dokumentu Layout.html. Uaktywnij dokument HTML, stosując jedną z trzech metod: Metoda pierwsza: Kliknij na zakładce dokumentu Layout.html w oknie programu. Metoda druga: Z klawiatury wybierz kombinację klawiszy CTRL + TAB. Metoda trzecia: Przejdź do palety Pliki znajdującej się po prawej stronie okna programu. Rozwiń menu drzewa struktury plików twardych dysków twojego komputera. Z rozwiniętej listy wybierz miejsce lokalizacji katalogu Strona. W wyświetlonej przez program liście katalogów wskaż właściwy folder. Uaktywnij dokument Layout.html podwójnym kliknięciem na pasku jego nazwy (Rys. 2). 5
Menu wyboru dysku Drzewo plików twardych dysków komputera Menu wyboru typu plików przeznaczonych do uaktywnienia lub wyświetlenia Lista plików Rys. 2. Paleta Pliki Wstaw kursor za metaznacznikiem - Robots (Rys. 3). Kursor Rys. 3. Ustawienie kursora Dwukrotnym wyborem klawisza ENTER utwórz nową linijkę kodu. Poleceniem Zewnętrzny arkusz stylów z menu CSS dołącz zewnętrzny arkusz Struktura.css do dokumentu Layout.html. Poleceniem Ścieżka względna do pliku z menu Wstaw wywołaj okno dialogowe Wybierz plik, za pomocą którego napisz kod wskazujący położenie dokumentu Struktura.css. Twój kod powinien wyglądać następująco: <meta name= Robots content= index > <link rel= Stylesheet href= css/struktura.css type= text/css > </head> 6
TWORZENIE STRUKTURY DOKUMENTU - ETAP DRUGI 1. W dokumencie Layout.html. 2. Dopisz identyfikator #box do znacznika div. <body> <div id = box > <header>tu będzie nagłówek dokumentu</header> 3. Przetestuj stronę w przeglądarce (Rys. 4). Rys.4. Podgląd strony TWORZENIE ARKUSZA CSS - ETAP DRUGI Tworzenie stylów CSS dla znaczników semantycznych określających strukturę dokumentu HTML Pracę podzielimy na dwie części: W pierwszej, w dokumencie CSS przypiszemy deklarację dla zgrupowanych selektorów (article, aside, footer, header, section). Wykorzystując technikę przypisania jednej reguły kilku selektorom jednocześnie, tym samym unikając zbędnego powielania linijek kodu. W drugiej części, dopiszemy uzupełniające deklaracje dla poszczególnych selektorów, występujących w grupie deklaracji (header, section, footer). Część pierwsza - grupowanie selektorów 1. Deklaracja dla selektorów: article, aside, footer, header, section. Przejdź do dokumentu Struktura.css. W arkuszu CSS wpisz następujący kod: article, aside, footer, header, section { border:solid 1px #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 7
margin: 5px 10px; padding: 35px; 2. Deklaracja dla selektorów: h1, h2, h3. h1,h2,h3 { text-align:center; Przydatne linki: http://www.css3maker.com/ Część druga - deklaracje uzupełniające poszczególne selektory 1. Deklaracja dla selektora: header. header { height: 290px; background-image: url(../images/head.jpg); background-position: center center; color: white; Uwaga! Wysokość rysunku head.jpg wynosi 300px. zdeklarowana wysokość selektora - 290px + 10px dopełnienia zapisanego w grupowej deklaracji. 2. Deklaracja dla selektora: section. section { min-height: 800px; margin-left: 210px; background: #FFF; 3. Deklaracja dla selektora: footer. footer { height: 80px; margin-left: 210px; 4. Przetestuj swoją pracę w przeglądarce, powinna wyglądać tak jak ta przedstawiona na rysunku 5. Przejdź do dokumentu HTML. Z klawiatury wybierz klawisz F6 aby uruchomić podgląd w domyślnej przeglądarce Twojego systemu operacyjnego. 8
Rys.5. Podgląd strony TWORZENIE MENU PIONOWEGO TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU PIONOWEGO - ETAP PIERWSZY Menu tworzymy na podstawie listy numerowanej. 1. Przejdź do dokumentu Layout.html. 2. Usuń tekst Tu będzie menu dokumentu znajdujący się między znacznikami <nav></nav>. 3. Wpisz kod listy punktowanej: 9
<nav> <ul> <li>abc</li> <li>def</li> </ul> </nav> 4. Dopisz odnośniki do poszczególnych elementów listy. <nav> <ul> <li><a href= # >ABC</a></li> <li><a href= # >DEF</a></li> </ul> </nav> Uwaga! Znaki # zastąpimy wkrótce adresami podstron. TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU PIONOWEGO - ETAP PIERWSZY 1. Przetestuj stronę w przeglądarce. Zauważ, że lista numerowana wraz z odsyłaczami standardowo wyświetlana jest w formie wypunktowanego, podkreślonego niebieskiego tekstu. Przetestuj również dowolny przycisk menu. Zwróć uwagę na zmieniającą się kolorystykę wybranej pozycji. 2. Każde menu utworzone dla stron internetowych może składać się z czterech stanów: Stan - gdy kursor użytkownika omija aktywne pole menu. Stan - utworzony po najechaniu kursorem na aktywne pole menu. Stan - utworzony w trakcie kliknięcia na aktywne pole menu. Stan - utworzony po kliknięciu na aktywne pole menu, wskazujący na odwiedzone łącza. 3. W języku HTML wymienionym stanom odpowiadają odpowiednie pseudo - klasy zapisane w stylach css. Stan - gdy kursor użytkownika omija aktywne pole menu. Stan - utworzony po najechaniu kursorem na aktywne pole menu. Stan - utworzony w trakcie kliknięcia na aktywne pole menu. Stan - utworzony po kliknięciu na aktywne pole menu, wskazujący na odwiedzone łącza. a:link a:hover a:active a:visited Wybiegliśmy trochę w przyszłość deklaracje pseudoklasom przypiszemy tuż po usunięciu punktorów (tzw. markerów) oraz zbędnych marginesów oraz przygotowaniu pojemnika dla tworzonego menu. 10
1. Przejdź do dokumentu Struktura.css. 2. Usuń domyślnie przypisaną punktację z listy nieuporządkowanej, zmieniając styl dla elementów ul i li selektora nav. nav ul, nav ul li { list-style: none; margin: 0; padding: 0; 3. Do deklaracji dołącz linijkę z parametrem display o właściwości block, by przypisać obszar aktywacji dla całego przycisku, a nie tylko dla wpisanego tekstu. Ostateczne brzmienie deklaracji to: nav ul, nav ul li { list-style: none; margin: 0; padding: 0; display: block; Projektowana przez nas strona internetowa posiada dwa menu; pionowe i poziome, dlatego musimy odróżnić je przypisaniem oryginalnych identyfikatorów. Identyfikatorem dla menu pionowego będzie słowo - left, natomiast dla menu poziomego - right. TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU PIONOWEGO - ETAP DRUGI 1. Przejdź do dokumentu Layout.html. 2. Wstaw kursor przed nawiasem zamykającym otwierającego znacznika semantycznego <nav>. 3. Wpisz: id = left. Twój kod powinien wyglądać następująco: <nav id= left > <ul> <li><a href= # >ABC</a></li> <li><a href= # >DEF</a></li> </ul> </nav> TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU PIONOWEGO - ETAP DRUGI 1. Przejdź do dokumentu Struktura.css. 2. W oknie palet kliknij na zakładce Identyfikatory i klasy. Postępuj zgodnie z instrukcją podaną w polu palety. 3. Wpisz deklaracje dla selektora nav#left wyrównujące kontener (o szerokości 180px) do lewej strony przeglądarki, o określonej szerokości obramowania i marginesów. 11
nav#left { float: left; width: 180px; margin: 20px 5px 5px 5px; padding: 5px; 4. Wpisz deklaracje dla selektora nav#left ul ustalającą automatyczne dostosowanie szerokości zajmowanej przez listę względem selektora nav#left. nav#left ul { width: auto; 5. Ustal wygląd menu dla stanów: a:link oraz ul a:visited. nav#left ul a:link, nav#left ul a:visited { display: block; height: 50px; width: auto; padding-top: 120px; margin-bottom: 25px; text-decoration: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff; border: 1px solid #000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7); Przydatne linki: http://www.css3maker.com http://www.kurshtml.edu.pl 6. Przetestuj stronę w przeglądarce. Zauważ, że lista numerowana wygląda teraz zupełnie inaczej. Nie ma w niej już śladu po standardowych ustawieniach przeglądarki dla listy punktowanej. Aby zakończyć opracowanie stanów menu, przypiszemy wygląd poszczególnym jego poleceniom oraz klasy dla listy w dokumencie HTML. 12
TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU PIONOWEGO - ETAP TRZECI 1. Przejdź do dokumentu Layout.html. 2. Wstaw kursor przed nawiasem zamykającym otwierającego znacznika li, pozycji pierwszej listy. 3. Wpisz: class= pierwsza. Twój kod powinien wyglądać następująco: <li class= pierwsza >ABC</li> 4. Wstaw kursor przed nawiasem zamykającym otwierającego znacznika li, pozycji drugiej listy. 5. Wpisz: class= druga. Twój kod powinien wyglądać następująco: <nav id= left > <ul> <li class= pierwsza >ABC</li> <li class= druga >DEF</li> </ul> </nav> TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU PIONOWEGO - ETAP TRZECI 1. Przejdź do dokumentu Struktura.css. 2. Napisz deklarację dla pierwszego polecenia menu. nav#left li.pierwsza { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image: url(../images/button-nav-left-01.jpg); 3. Napisz deklarację dla pierwszego polecenia menu stanu a:hover. nav#left li.pierwsza a:hover { background-image: url(../images/button-nav-left-02.jpg); 4. Napisz deklarację dla drugiego polecenia menu. nav#left li.druga { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-image: url(../images/button-nav-left-03.jpg); 13
5. Napisz deklaracją dla drugiego polecenia menu stanu a:hover. nav#left li.druga a:hover { background-image: url(../images/button-nav-left-04.jpg); 6. Przetestuj stronę w przeglądarce. Zwróć uwagę na stany przycisków. Rysunek 6 to zrzut ekranowy projektowanej strony WWW uwzględniający widok dwóch stanów: stan a:link oraz a:hover. Rys.6 Podgląd strony TWORZENIE MENU POZIOMEGO TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU POZIOMEGO 1. Przejdź do dokumentu Layout.html. 2. Usuń tekst Tu będzie główna część strony znajdujący się między znacznikami <section> </section>. 3. Wybierając dwukrotnie klawisz ENTER utwórz nową linijkę kodu. 4. W nowej linijce wpisz semantyczny znacznik <nav></nav> tworzący kontener nawigacyjny. 14
<section> <nav></nav> </section> 5. Wpisz kod listy punktowanej wraz z odnośnikami. <section> <nav> <ul> <li><a href= # >ghi</a></li> <li><a href= # >jkl</a></li> <li><a href= # >mno</a></li> </ul> </nav> </section> 6. Dopisz identyfikator znacznika semantycznego dla kontenera - nav id= right. <section> <nav id= right > <ul> <li><a href= # >ghi</a></li> <li><a href= # >jkl</a></li> <li><a href= # >mno</a></li> </ul> </nav> </section> TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU POZIOMEGO 1. Przejdź do dokumentu Struktura.css. 2. Napisz deklarację dla kontenera znacznika semantycznego nav, nadając mu identyfikator #right. nav#right { height: auto; width: auto; margin: 0 10px; 3. Napisz deklarację dla grupy znaczników ul, li odnoszących się do znacznika semantycznego nav o identyfikatorze right, ustalającą aktywną powierzchnię polecenia menu oraz narzucającą zerową szerokość dopełnień i marginesów. nav#right ul, nav#right li { display: block; margin: 0; 15
padding: 0; 4. Przetestuj stronę w przeglądarce. 5. Napisz deklarację dla znacznika ul ustalającego wygląd listy. Zwróć uwagę na właściwość text-align: center; ustalającą centralne położenie menu. nav#right ul { text-align: center; padding-bottom: 40px; padding-top: 40px; border: 1px solid #888; background-color: #D6D6D6; margin-top: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 6. Przetestuj stronę w przeglądarce. 7. Napisz deklarację dla znacznika li narzucającego układ tekstu w linii oraz blokującego zawijanie tekstu white-space: nowrap, tak by przełamanie wiersza nastąpiło pomiędzy linkami, a nie wewnątrz nich. nav#right ul li { display: inline; white-space: nowrap; margin-right: 5px; 8. Przetestuj stronę w przeglądarce. 9. Napisz deklarację dla znacznika li ustalającego wygląd poszczególnych elementów listy w poszczególnych stanach: Stanu gdy kursor użytkownika omija aktywne pole menu oraz po uprzednim odwiedzeniu strony. nav#right ul a:link, nav#right ul a:visited { text-decoration: none; background-color: #67080A; color: #FFFFFF; border: 1px solid #888; padding: 10px 30px; font-family: Verdana, Geneva, sans-serif; font-size: 18px; Stanu po najechaniu kursorem na aktywne pole menu. nav#right ul a:hover { background-color: #fff; border-bottom-color: #fff; 16
Rys.7 Podgląd strony color: #000; 10. Przetestuj stronę w przeglądarce. Przydatne linki: http://www.kurshtml.edu.pl TWORZENIE STRUKTURY DOKUMENTU HTML - WYPEŁNIENIE NAGŁÓWKA 1. Przejdź do dokumentu Layout.html. 2. Usuń tekst Tu będzie nagłówek dokumentu pomiędzy znacznikami <header></header>. 3. Pomiędzy znacznikami wstaw pustą linijkę kodu. 4. W nowym wierszu wpisz sekcję h1 odpowiedzialną za utworzenie nagłówka poziomu pierwszego. 5. Pomiędzy znacznikami wpisz zdanie składające się z pięciu wyrazów wygenerowane za pomocą strony: http://lipsum.pl/. 6. W nowej linijce kodu utwórz nagłówek poziomu trzeciego i wpisz jedno zdanie utworzone za pomocą generatora. 7. Twój kod powinien wyglądać następująco: 17
<header> <h1> Purus Mollis Inceptos Vulputate Vehicula </h1> <h3> Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </h3> </header> PRZYPISANIE STYLU LOKALNEGO CSS DO ZNACZNIKA HTML 1. Wstaw kursor przed nawiasem zamykającym otwierającego znacznika <h1>. 2. Napisz kod ustawiający margines górny dla tekstu w nagłówku poziomu pierwszego. <h1 style= margin-top: 90px; > Purus Mollis Inceptos Vulputate Vehicula </h1> 3. Twoja strona powinna wyglądać tak jak ta na rysunku 8. Rys.8 Podgląd strony 18
TWORZENIE STRUKTURY DOKUMENTU HTML - WYPEŁNIENIE STOPKI 1. Usuń tekst Tu będzie stopka dokumentu pomiędzy znacznikami <footer></footer>. 2. Pomiędzy znacznikami wstaw pustą linijkę kodu. 3. W nowym wierszu wpisz sekcję h1 odpowiedzialną za utworzenie nagłówka poziomu pierwszego. 4. Pomiędzy znacznikami wpisz zdanie składające się z pięciu wyrazów wygenerowane za pomocą strony: http://lipsum.pl/. <footer> <h3> Purus Mollis Inceptos Vulputate Vehicula </h3> </footer> TWORZENIE ODSYŁACZY DO PODSTRON TWORZENIE ODSYŁACZY DO PODSTRON W MENU PIONOWYM 1. Przejdź do kodu menu pionowego. 2. Zaznacz i usuń znak # w pierwszej pozycji menu. W jego miejsce wpisz względną ścieżkę do pliku. <li class = pierwsza ><a href= abc.html >ABC</a></li> 3. Zaznacz i usuń znak # w drugiej pozycji menu. W jego miejsce wpisz względną ścieżkę do pliku. <li class = druga ><a href= def.html >DEF</a></li> TWORZENIE ODSYŁACZY DO PODSTRON W MENU POZIOMYM 1. Przejdź do kodu menu poziomego. Napisz połączenia do pod stron. <nav id= right > <ul> <li><a href= ghi.html >ghi</a></li> <li><a href= jkl.html >jkl</a></li> <li><a href= mno.html >mno</a></li> </ul> </nav> 19
TWORZENIE ODSYŁACZA DO STRONY GŁÓWNEJ W NAGŁÓWKU DOKUMENTU 1. Przejdź do kodu nagłówka dokumentu. Napisz połączenie do strony index.html wszystkim elementom występującym w nagłówku. <header> <a href= index.html > <h1 style= margin-top: 90px; > Purus Mollis Inceptos Vulputate Vehicula </h1> <h3> Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </h3> </a></header> 2. Zapisz zmiany wprowadzone do pliku. NADAWANIE STYLU DLA ELEMENTÓW NAGŁÓWKA 1. Przetestuj stronę w przeglądarce. Coś jest nie tak? 2. Przejdź do dokumentu Struktura.css. 3. Utwórz pseudoklasę likwidującą domyślny wygląd łącz tekstowych w nagłówku strony. header a:link, header a:visited { text-decoration: none; color: white; 4. Zapisz zmiany wprowadzone do pliku. 5. Przetestuj stronę w przeglądarce. Czy wszystko już w porządku? TWORZENIE NOWEGO ARKUSZA CSS - ELEMENTY Za chwilę utworzymy nowy arkusz CSS przechowujący deklaracje wyglądu i położenia elementów na podstronach. Na początek ustalimy wygląd najczęściej używanych modyfikacji dla tekstu, takich jak: wyróżniający kolor, pogrubienie, pochylenie tekstu oraz pomniejszenie czcionki. Napiszemy również styl uniemożliwiający łamanie białych znaków np. spacji, przydatny podczas usuwania wiszących spójników. 20
1. Z menu Plik > Nowy wybierz polecenie arkusz stylów css. 2. W wyświetlonym oknie dialogowym Wybór kodowania pozostaw domyślną formę kodowania: UTF-8, wybierz przycisk OK. 3. W katalogu Strona/css zapisz dokument pod nazwą Elementy.css. 4. Ustal style modyfikujące tekst..czerwien { color: #F00;.pogrubienie { font-weight: bold;.pochylenie { font-style: italic;.przyklejdol { margin-bottom: 0; padding-bottom: 0;.przyklejGora { margin-top:0; padding-top:0;.dopelnienie { padding: 5px 30px 25px;.male { font-size: small;.sieroty { white-space:nowrap; 5. Zapisz zmiany wprowadzone do pliku. 6. Dołącz arkusz Elementy.css do dokumentu Layout.html. MOŻNA, NIE TRZEBA PORZĄDKOWANIE KODU HTML Po jakimś czasie niektórzy twórcy stron internetowych opracowują system wpisywania komentarzy ułatwiających poruszanie się po kodzie HTML. Na początek proponuję wyróżnić fragment kodu przeznaczony do dalszej edycji przy projektowaniu podstron. Komentarze wyznacza znacznik: <!--treść komentarza--> 21
<!DOCTYPE html> <html lang= pl > <head> <title>nasza pierwsza strona</title> <meta charset= UTF-8 > <meta name= Generator content= JTHTML 8.0.2 > <meta name= Robots content= index > <link rel= Stylesheet href= css/struktura.css type= text/ css > </head> <body> <div id = box > <header class= link > <a href= index.html > <h1 style= margin-top: 90px; > Purus Mollis Inceptos Vulputate Vehicula </h1> <h3> Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </h3> </a></header> <nav id = left > <ul> <li class = pierwsza ><a href= index.html >ABC</a></ li> <li class = druga ><a href= def.html >DEF</a></li> </ul> </nav> <!---------------------------------------------------------------> <section style= margin-top: 10px; > <nav id= right > <ul> <li><a href= ghi.html >ghi</a></li> <li><a href= jkl.html >jkl</a></li> <li><a href= mno.html >mno</a></li> </ul> </nav> </section> <!---------------------------------------------------------------> <footer> <h3>purus Mollis Inceptos Vulputate Vehicula</h3> </footer> </div> </body> </html> 22
PORZĄDKOWANIE ARKUSZA CSS Poniżej podaję przykład zastosowania komentarzy w arkuszu CSS. Komentarze arkusza CSS wyznacza znacznik: /*treść komentarza*/ /*Tworzenie stylów CSS dla znaczników semantycznych określających strukturę dokumentu HTML*/ /*Deklaracje zgrupowanych selektorów*/ article, aside, footer, header, section { border:solid 1px #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 5px 10px; padding: 5px; h1,h2,h3 { text-align:center; TWORZENIE WITRYNY Witryna, oprócz strony głównej, złożona będzie z pięciu podstron (Rys. 9). Strona główna prowadzić będzie do dwóch podstron: ABC.html oraz DEF.html, strona ABC.html do trzech: ghi.html, jkl.html, mno.html. 1. W systemowym oknie pięciokrotnie powiel plik Layout.html. Nowym nadaj następujące nazwy: index.html, abc.html, def.html, ghi.html, jkl.html, mno.html. Rys. 9. Struktura witryny. 23
STRONA INDEX KOD HTML DLA STRONY GŁÓWNEJ Na stronie index.html utworzymy dwa główne elementy: Artykuł złożony z nagłówka stopnia drugiego i trzeciego, akapitu tekstowego oraz fotografii. Dwukolumnowy, tekstowy artykuł (Rys. 10). Rys.10 Podgląd strony index.html 1. Otwórz plik: index.html. 2. Usuń menu poziome, na tej stronie nie będzie ono potrzebne, wykorzystamy je w kolejnych podstronach. 3. Utwórz główną strukturę strony index.html. <!------------------------------------> <section> <article></article> <article></article> </section> 24
<!------------------------------------> 4. W pierwszym artykule wpisz nagłówek drugiego stopnia ze zdaniem utworzonym w generatorze tekstu np. http://lipsum.pl/. <section> <article> <h2>maecenas faucibus mollis interdum.</h2> 5. Utwórz drugi nagłówek z wygenerowanym zdaniem, tym razem stopnia trzeciego, tak by twój kod przedstawiał się następująco: <!------------------------------------> <section> <article> <h2>maecenas faucibus mollis interdum.</h2> <h3>vestibulum id ligula porta felis euismod semper.</h3> </article> <article></article> </section> <!------------------------------------> 6. W pierwszym znaczniku <article> za nagłówkiem trzeciego stopnia utwórz nową linijkę kodu i wpisz znaczniki akapitu <p></p>. 7. Między znacznikami akapitu wstaw zdjęcie ważki. Znaczniki akapitu rozdziel pustą linijką kodu Z menu Wstaw > Grafika wybierz polecenie Obrazek (SHIFT + ALT + I). W wyświetlonym oknie dialogowym Wybierz plik graficzny katalogu przejdź do katalogu images, następnie zaznacz plik foto-01. Wprowadzone zmiany do okna dialogowego potwierdź przyciskiem Otwórz. Program napisał linijkę kodu osadzającego w dokumencie obrazek. Przyjrzyjmy się mu: Rys. 11. Linijka kodu A B C D E <img src= images/foto-01.jpg style= border: none width= 150 height= 150 alt= Foto 1 > 25
Znacznik <img> musi zawierać: A - element img - umieszcza na stronie plik graficzny, B - atrybut src - ustalający łącze do wyświetlanego pliku, E - atrybut alt - służy jako alternatywny opis wyświetlany w przypadku, gdy obrazek nie może zostać wczytany oraz jako słowa kluczowe dla wyszukiwarek. Znacznik <img> może zawierać: C - wewnątrz wierszowy styl css - style= (program JTHTML automatycznie wstawia przypisywanie stylów css po zastosowaniu polecenia Obrazek z menu Wstaw > Grafika, nie jest to jednak wymagane), D - atrybuty - width oraz height, które - są automatycznie wstawiane przez program wraz z wczytanymi wartościami z graficznego pliku. Atrybuty te można zastąpić stylami css. UWAGA! Znaczniki <img> oraz <br> nie posiadają znaczników zamykających. 8. W kolejnej linijce kodu pomiędzy znacznikiem <p><p/> wstaw dwa akapity tekstu. Wklejone akapity przedziel znacznikiem <br>. 9. Twój kod powinien zgadzać się z tym podanym poniżej: <!------------------------------------> <section> <article> <h2>maecenas faucibus mollis interdum.</h2> <h3>vestibulum id ligula porta felis euismod semper.</h3> <p><img src= images/foto-01.jpg alt= Foto - 1 >Vivamus sagittis [] adipiscing elit. <br> Integer[] purus sit amet fermentum. </p> </article> <article></article> </section> <!------------------------------------> 10. Wstaw kursor pomiędzy znacznikami drugiego akapitu <article></article>. 11. Utwórz trzy nagłówki stopnia czwartego. Każdy nagłówek wypełnij jednozdaniowym tekstem. 12. Za każdym z nagłówków wstaw blok (akapit) tekstu złożony z trzech - czterech akapitów poprzedzielanych podwójnymi znacznikami <br>. 13. Poniżej podaję wzór przykładowego bloku tekstowego. <h4>vestibulum id ligula porta felis euismod semper.</h4> <p> Sed posuere Nullam [] vel eu leo. <br><br> Etiam porta sem [] sed consectetur. 26
<br><br> Vivamus sagittis [] dolor auctor. </p> ARKUSZ CSS DLA STRONY GŁÓWNEJ Przystąpimy do stworzenia stylu CSS dla miniaturek umieszczanych w witrynie. 1. Przejdź do dokumentu Elementy.css. 2. Utwórz klasę dla miniaturek fotograficznych znajdujących się wewnątrz artykułów (pomiędzy znacznikami: <article></article> article img { height: 150px; width: 150px; float: left; margin: 3px 10px 0 0; padding: 5px; border: 1px solid #d6d6d6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 3. Zapisz zmiany wprowadzone do pliku. FORMATOWANIE PIERWSZEGO AKAPITU STRONY INDEX - ETAP PIERWSZY 1. Rozpoczniemy od ustalenia wyglądu pierwszego nagłówka artykułu. Przejdź do dokumentu index.html. Wstaw kursor przed znakiem większości otwierającego znacznika pierwszego nagłówka artykułu. Znacznikowi przypisz dwie klasy: klasę.czerwien oraz.przyklejdol. <h2 class= czerwien przyklejdol >Donec id elit non mi porta gravida at eget metus.</h2> UWAGA! Zwróć uwagę na strukturę znacznika, któremu przypisano dwie klasy. 2. Przypisz klasę.przyklejgora drugiemu znacznikowi nagłówka artykułu. <h3 class= przyklejgora >Cras mattis consectetur purus sit amet fermentum.</h3> 3. Przejdź do znacznika otwierającego akapit tekstowy, przypisz klasę.dopełnienie. 27
Rys.12 Podgląd strony index.html <p class= dopelnienie > 4. Przetestuj stronę w przeglądarce. Zwróć uwagę, mimo iż w deklaracji CSS dla znacznika fotografii umieszczonej w akapicie (article img {) wpisaliśmy deklarację tworzącą obrys fotografii, przeglądarka jej nie uwzględniła. UWAGA! Kaskadowa struktura hierarchii stylów CSS narzuca określony układ pierwszeństwa deklaracji reguł różnych arkuszy przypisanych jednemu znacznikowi. Proces ten przebiega następująco: Najpierw uwzględniany jest styl wewnątrz wierszowy, Następnie wewnętrzny arkusz CSS, Następnie zewnętrzny arkusz CSS, Na końcu przedefiniowane style przeglądarki. 5. Usuń formatowanie fotografii narzucone przez program podczas automatycznego wstawiania fotografii do pliku HTML. Zaznacz fragment kodu wyznaczający formatowanie znacznika <img>. Z klawiatury wybierz klawisz DELETE. 28
6. Dołącz krótki opis fotografii między cudzysłowami atrybutu alt. 7. Twój kod powinien wyglądać następująco: <img src= images/foto-01.jpg alt= Foto 1 > 8. Przetestuj stronę w przeglądarce, powinna ona wyglądać tak jak ta z rysunku 12. ARKUSZ CSS DLA STRONY GŁÓWNEJ - TWORZENIE DWUKOLUMNOWEGO TEKSTU 1. Przejdź do dokumentu Elementy.css 2. Napisz regułę CSS wyznaczającą dwukolumnowy układ tekstu..kolumny { padding: 30px; text-align:justify; column-count:2; column-gap: 3em; column-rule: 2px dotted #d6d6d6; -moz-column-count:2; -moz-column-gap: 3em; -moz-column-rule:2px dotted #d6d6d6; -webkit-column-count:2; -webkit-column-gap: 3em; -webkit-column-rule:2px dotted #d6d6d6; Ilość kolumn. p {column-count: 2; /*dla Mozilli Frefox*/ -moz-column-count: 2; /*dla Google Chrome, Safari, Opera*/ -webkit-column-count: 2; /*dla Microsoft Internet Explorer*/ -ms-column-count: 2; Szerokość kolumn. p {column-width: 2; Odstępy pomiędzy kolumnami. p {column-gap: 35px; UWAGA! Dla określenia układu kolumn służą następujące właściwości: 29
Linie oddzielające kolumny p {column-rule: 2px dotted #d6d6d6; FORMATOWANIE PIERWSZEGO AKAPITU STRONY INDEX - ETAP DRUGI 1. Drugiemu znacznikowi <article> dokumentu przypisz trzy klasy:.kolumny{,.dopelnienie{,.male{. <article class= kolumny dopelnienie male > 2. Pierwszemu nagłówkowi artykułu przypisz klasę:.male{. <h4 class= przyklejgora > 3. Twoja praca powinna przypominać tę z rysunku 13. Rys.13 Podgląd strony index.html 30
STRONA ABC KOD HTML DLA STRONY ABC Na stronie index.html na stronie znajdować się będą dwa elementy: Pierwszy (article)- zbudowany z nagłówków stopnia drugiego i trzeciego oraz z akapitu. Drugi (aside)- z nagłówka, akapitu i skalowalnej fotografii (Rys. 14). Rys.14 Podgląd strony abc.html 1. Otwórz plik: abc.html. 2. Wstaw kursor przed znacznikiem zamykającym sekcję </section>. Z klawiatury wybierz klawisz ENTER, by utworzyć pustą linijkę kodu. 3. W nowo utworzonej linijce wpisz znacznik semantyczny artykułu <article></article>. 4. W następnej linijce wpisz znacznik wstawki <aside></aside>. 31
Przydatne linki http://www.kurshtml.edu.pl/html/aside,html5.html <article></article> <aside></aside> </section> 5. Do artykułu wstaw nagłówki drugiego i trzeciego stopnia oraz akapit. 6. Do znacznika <aside></aside> dopisz kod tworzący kolejno: nagłówek drugiego stopnia, akapit, akapit z fotografią, akapit akapit. <article> <h2></h2> <h3></h3> <p></p> </article> <aside> <h2></h2> <p></p> <p><img src= alt= ></P> <p></p> <p></p> </aside> </section> 7. Między znaczniki nagłówka stopnia drugiego i trzeciego artykułu wstaw po jednym zdaniu wygenerowanego przez: http://lipsum.pl/. 8. Korzystając z generatora, utwórz jeden akapit tekstu. (W generatorze odznacz funkcję HTML.) Wklej zawartość schowka systemowego pomiędzy znaczniki akapitu. 9. Zapisz zmiany wprowadzone do pliku. 10. Wypełnij markowanym tekstem nagłówek i akapity znacznika <aside></aside>. 11. W znaczniku <img> umieść fotografię Borysew.jpg. Jako tekst zastępczy dla fotografii podaj nazwę miejscowości - Borysew. <p><img src= images/borysew.jpg alt= Borysew ></p> FORMATOWANIE STRONY ABC 1. Nagłówkowi artykułu stopnia drugiego przypisz dwie klasy: klasę.czerwien oraz.przyklej- Dol. 32
2. Nagłówkowi artykułu stopnia trzeciego przypisz klasę.przyklejgora 3. Znacznikowi akapitu nadaj klasę.dopelnienie. 4. Nagłówek wstawki (aside) określ klasą.czerwien. 5. Pierwszy akapit wstawki określ klasą:.dopelnienie. 6. Dla akapitu z fotografią przypisz wewnątrz akapitowy styl CSS wyśrodkowujący poziome położenie obrazka oraz klasę. <p style= text-align:center; > <img src= images/borysew.jpg alt= Borysew > </p> 7. Znacznikowi <img> przypisz klasę.skala. <p style= text-align:center; > <img src= images/borysew.jpg alt= Borysew class= skala > </p> 8. Pierwszy akapit umieszczony po fotografii określ klasami:.dopelnienie,.pochylenie oraz.male. 9. Ostatnie akapity sformatuj za pomocą klasy.dopelnienie. TRANSFORMACJA OBRAZKA 1. W arkuszu Elementy.css napisz deklarację dla klasy określającej format obrazka..skala { margin: 0 auto 0 auto; padding:0; border: 3px solid #CCC; height:150px; width:224px; cursor:pointer; 2. Cel interaktywnego zachowania obrazka (powiększenie jego rozmiarów po najechaniu kursorem) osiągniesz, pisząc deklarację CSS dla stanu hver klasy.skala..skala:hover { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); border-color: #f00; 33
3. Cel opóźnienia transformacji osiągniesz, dopisując do klasy.skala następującą deklarację: -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; WYBRANE TRANSFORMACJE Efekt Przykład Uwagi Przesunięcie Przezroczystość Od szarości do koloru.przyklad{.przyklad{.przyklad:hover { -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease;.przyklad:hover { -webkit-transform:translate(5px,10px); -moz-transform:translate(5px,10px); -ms-transform:translate(5px,10px); -o-transform:translate(5px,10px);.przyklad{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;.przyklad:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; wartości podane w jednostkach miary Skala przezroczystości od 0 do 1 wartości w % 34
Od sepii do koloru Rozmycie.przyklad{.przyklad{ -webkit-filter: sepia(100%); -moz-webkit-filter: sepia(100%); -o-webkit-filter: sepia(100%); -ms-webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;.przyklad:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease;.przyklad:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; wartości w % wartości podane w jednostkach miary Wartości przejść: ease (domyślne) - przyspieszenie początku transformacji, zwalnianie pod koniec, linear - przejście ze stałą prędkością, ease-in -przyspieszanie, ease-out - zwalnianie, ease-in-out - przyspieszanie do połowy przejścia, od połowy zwalnianie. 35
Rys.15 Podgląd strony def.html STRONA DEF Rysunek 15 przedstawia stronę def.html. Zwróć uwagę, że strona podzielona jest na dwie części: informacyjną (teleadresową) oraz wyświetlającą mapę Google. KOD HTML DLA STRONY DEF 1. Usuń menu poziome, na tej stronie nie będzie ono potrzebne, wykorzystamy je w kolejnych podstronach. 2. Napisz kod dla głównej struktury strony: <section> <article></article> <aside></aside> 36
</section> 3. Pomiędzy znaczniki artykułu wstaw semantyczny znacznik definiujący blok adresu <address></address>. Wypełnij go danymi teleadresowymi oraz sformatuj tekst. <article> <address class= dopelnienie > <h2 class= czerwien >Purus Mollis Inceptos Vulputate Vehicula</a></h2> <h3>praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</h3> <p>curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p> <span class= pogrubienie >Telefon:</span> 123 456 789<br> <span class= pogrubienie >E-mail: </span><a href= mailto:biuro@purus.pl >biuro@purus.pl</a> </p> <p> <span class= pogrubienie >Adres:</span><br> ul. Magna Bibendum 25<br> Nullam 12-234 </p> </address> </article> 4. Zwróć uwagę na zapis: <span class= pogrubienie >E-mail:</span><a href= mailto:biuro@purus.pl >biuro@purus.pl</a> Znacznik <span></span> służy do formatowania elementów HTML typu inline (np. fragmentów tekstu albo obrazków), w celu przypisania im stylu CSS. Zapis <a href= mailto:biuro@purus.pl >biuro@purus.pl</a> - to struktura zapisu odsyłaczy pocztowych. 5. Kolejnym etapem twojej pracy jest stworzenie połączenia z serwisem Google Maps. Uruchom serwis Google Maps. Wyszukaj lokalizację, którą chcesz przedstawić na stronie WWW. W oknie serwisu odszukaj przycisk Udostępnij (Rys. 16). Postępuj zgodnie z zaleceniami podawanymi przez okna dialogowe serwisu. Udostępniony kod wklej pomiędzy znaczniki <aside></aside>. Edycja wielkości wyświetlanego okna map. We wklejonym kodzie odszukaj fragment: width= 400 height= 300.., zaznacz wartość dla szerokości wyświetlanego okna i wpisz 100%. 37
Rys.16 Serwis Google Maps STRONA GHI.HTML ORAZ JKL.HTML Rys.17 Podgląd strony ghi.html 38
Rysunek 17 przedstawia stronę ghi.html złożoną z dwóch części: sekcji artykułu i wstawki fotograficzno - tekstowej. Strony tej nie będziemy pisać od nowa. Zawartość dla niej będziemy kopiować z utworzonych wcześniej podstron witryny. KOD HTML DLA STRONY GHI.HTML 1. Otwórz pliki: abc.html, ghi.html oraz index.html. 2. Przejdź do dokumentu abc.html. Zaznacz i skopiuj pierwszy akapit. Znajdziesz go tuż po znaczniku zamykającym menu poziome. 3. Przejdź do dokumentu ghi.html. 4. Wstaw kursor przed zamykającym znacznikiem </section>. Z klawiatury wybierz klawisz ENTER. 5. Do nowej linijki kodu wklej zawartość schowka systemowego. 6. Za sekcją artykułu utwórz sekcję drugiego artykułu. 7. Przejdź do dokumentu index.html. Z pierwszego akapitu zaznacz i skopiuj do schowka systemowego zawartość nagłówka stopnia trzeciego oraz występującego po nim akapitu (Rys. 18). 8. Przejdź do dokumentu ghi.html. Rys.18 Zakres kopiowania. 9. Pomiędzy znaczniki <article></article> drugiego artykułu wstaw zawartość schowka systemowego. EDYCJA KODU HTML DLA STRONY GHI.HTML 1. Artykuł pierwszy pozostaw bez zmian. 2. Artykuł drugi. Usuń styl CSS w znaczniku nagłówka stopnia trzeciego. Wymień na inny tekst zastępczy akapitu. 3. Artykuł trzeci i czwarty. Zaznacz i skopiuj drugi artykuł. Za znacznikiem drugiego artykułu wklej dwukrotnie zawartość schowka systemowego. 4. Wymiana zdjęć. 39
W drugim artykule odszukaj zapis względnej ścieżki do pliku fotograficznego. Zamień jego nazwę z foto-01.jpg na foto-02.jpg. Zmień również tekst zastępczy dla obrazka na Foto 2. W trzecim artykule zamień nazwę pliku graficznego na foto-03.jpg, tekst zastępczy na Foto 3. W czwartym artykule zamień nazwę pliku graficznego na foto-04.jpg tekst zastępczy na Foto 4. 5. Zapisz zmiany wprowadzone do pliku. KOD HTML DLA STRONY JKL.HTML 1. Uaktywnij dokument ghi.html, z menu Plik wybierz polecenie Zapisz jako. W wyświetlonym oknie dialogowym Zapisz jako wskaż w katalogu Strona plik jkl.html lub w polu nazwy pliku wpisz jkl.html. Zmiany zatwierdź przyciskiem Zapisz. Program wyświetli kolejne okno, tym razem wymagające potwierdzenia nadpisania istniejącego pliku. Przyciskiem Tak potwierdź decyzję nadpisania pliku. 2. Zwróć uwagę na nazwę zakładki aktywnego dokumentu. Nie jest to już nazwa starego ale nowo zapisanego - jkl.html. 3. Powtórz czynności z punktu czwartego poprzedniego ćwiczenia. Wymieniając pliki występujące w artykułach oraz występujące przy nich teksty zastępcze: W drugim artykule zamień nazwę pliku graficznego na foto-05.jpg, tekst zastępczy na Foto 5. W trzecim artykule zamień nazwę pliku graficznego na foto-06.jpg, tekst zastępczy na Foto 6. W czwartym artykule zamień nazwę pliku graficznego na foto-07.jpg, tekst zastępczy na Foto 7. 4. Zapisz zmiany wprowadzone do pliku. STRONA MNO.HTML Rysunek 19 przedstawia stronę galerii fotograficznej. STRUKTURA KODU HTML DLA GALERII STRONY MNO.HTML 1. Otwórz dokument mno.html. 2. Za linijką kodu menu poziomego wpisz komentarz. <!-----------Galeria 1---------------> 3. Napisz znacznik otwierający i zamykający <aside></aside>. 4. Między znacznikami wstawki wpisz kod tworzący: Nagłówek stopnia trzeciego z klasą.czerwień, Akapit, Listę numerowaną złożoną z czterech pozycji. <!-------------Galeria1----------------> <aside> <h3 class= czerwien ></h3> <p></p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </aside> 40
Rys.19 Podgląd strony mno.html 5. Między znaczniki nagłówka wklej jedno zdanie tekstu zastępczego. 6. Między znaczniki akapitu wklej akapit tekstu zastępczego. 7. Zapisz zmiany wprowadzone do pliku. 41
GENERATOR GALERII Tworząc galerię skorzystamy z kodów udostępnionych na stronie www.lokeshdhakar.com/projects/ lightbox2. 1. Przejdź na stronę generator obrazów, pobierz - Lightbox. Rozpakuj folder. 2. Korzystając Eksploratora Windows skopiuj zaimportowane pliki i katalogi we właściwe miejsca katalogu strony. Z katalogu Do katalogu Zawartość lightbox/css strona/css lightbox.css lightbox strona katalog img (w katalogu usuń katalog demopage) lightbox strona katalog js 3. Przejdź do programu JTHTML. 4. W nagłówku dokumentu mno.html wpisz kod: Łączący dokument z arkuszem stylesheet.css. <link href= css/lightbox.css rel= stylesheet type= text/css > Łączący dokument z Javascript plików: scriptaculous.js, lightbox.js. <script src= js/jquery-1.10.2.min.js ></script> <script src= js/lightbox-2.6.min.js ></script> 5. Wstaw obrazki do kolejnych pozycji listy punktowanej. <ul> <li> <a href= images/gallery/large-01.jpg data-lightbox- = roadtrip ><img src= images/foto-01.jpg width= 150 height= 150 ></a> </li> <li> <a href= images/gallery/large-02.jpg data-lightbox- = roadtrip ><img src= images/foto-02.jpg width= 150 height= 150 ></a> </li> <li> <a href= images/gallery/large-03.jpg data-lightbox- = roadtrip ><img src= images/foto-03.jpg width= 150 height= 150 ></a> </li> <li> <a href= images/gallery/large-04.jpg data-lightbox- = roadtrip ><img src= images/foto-04.jpg width= 150 height= 150 ></a> </li> 42
Rys.20 Podgląd strony ghi.html </ul> 6. Zapisz zmiany wprowadzone do pliku i przetestuj stronę w przeglądarce. SELEKTORY CSS DLA GALERII STRONY MNO.INDEX 1. Przejdź do dokumentu Elementy.css 2. Napisz regułę CSS dla galerii strony mno.index. ul#galeria li { display: inline; margin: 0 1px 0 1px; ul#galeria img { background: #EDEDED; height: 100px; width: 100px; padding: 10px; border: 1px solid #D6D6D6; margin: 10px; 43
-webkit-opacity:.8; -moz-opacity:.8; opacity:.8; filter:alpha(opacity:80); -webkit-transition: all.4s linear; -moz-transition: all.4s linear; -ms-transition: all.4s linear; -o-transition: all.4s linear; transition: all.4s linear; ul#galeria img:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; filter:alpha(opacity:100); 3. Zapisz zmiany wprowadzone do pliku. EDYCJA GALERII W PLIKU MNO.HTML 1. Przejdź do dokumentu Elementy.css 2. Przypisz identyfikator galerii do znacznika listy punktowanej. <ul id= galeria > 3. Przypisz tytuły obrazków do galerii wyświetlające się w przeglądarce. Wstaw kursor przed znakiem zamykającym znacznika połączenia pierwszej pozycji listy. Wpisz: title= Pomiędzy cudzysłowem wpisz tytuł fotografii - Pierwsza fotografia. title= Pierwsza fotografia Kod pierwszej pozycji listy powinien brzmieć: <li> <a href= images/gallery/large-01.jpg data-lightbox= roadtrip title= Pierwsza fotografia ><img src= images/foto-01.jpg width= 150 height= 150 ></a> </li> Uzupełnij kod każdej pozycji listy. 4. Drugą galerię dla strony mno.html utwórz samodzielnie. 44
45 Przykładowe opracowanie strony znajduje się: komunikacja-spoleczna.pl/2013strona
Contents WITRYNA HTML 1 STRUKTURA KATALOGÓW 3 TWORZENIE DOKUMENTU: LAYOUT 3 TWORZENIE STRUKTURY DOKUMENTU - ETAP PIERWSZY 4 TWORZENIE ARKUSZA CSS - ETAP PIERWSZY 5 TWORZENIE STRUKTURY DOKUMENTU - ETAP DRUGI 7 TWORZENIE ARKUSZA CSS - ETAP DRUGI Tworzenie stylów CSS dla znaczników semantycznych określających strukturę dokumentu HTML 7 Część pierwsza - grupowanie selektorów 7 Część druga - deklaracje uzupełniające poszczególne selektory 8 TWORZENIE MENU PIONOWEGO 9 TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU PIONOWEGO - ETAP PIERWSZY 9 TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU PIONOWEGO - ETAP PIERWSZY 10 TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU PIONOWEGO - ETAP DRUGI 11 TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU PIONOWEGO - ETAP DRUGI 11 TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU PIONOWEGO - ETAP TRZECI 13 TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU PIONOWEGO - ETAP TRZECI 13 TWORZENIE MENU POZIOMEGO 14 TWORZENIE STRUKTURY DOKUMENTU HTML DLA MENU POZIOMEGO 14 TWORZENIE ARKUSZA CSS DLA STRUKTURY MENU POZIOMEGO 15 TWORZENIE STRUKTURY DOKUMENTU HTML - WYPEŁNIENIE NAGŁÓWKA 17 PRZYPISANIE STYLU LOKALNEGO CSS DO ZNACZNIKA HTML 18 TWORZENIE STRUKTURY DOKUMENTU HTML - WYPEŁNIENIE STOPKI 19 TWORZENIE ODSYŁACZY DO PODSTRON 19 TWORZENIE ODSYŁACZY DO PODSTRON W MENU PIONOWYM 19 TWORZENIE ODSYŁACZY DO PODSTRON W MENU POZIOMYM 19 TWORZENIE ODSYŁACZA DO STRONY GŁÓWNEJ W NAGŁÓWKU DOKUMENTU 20 NADAWANIE STYLU DLA ELEMENTÓW NAGŁÓWKA 20 TWORZENIE NOWEGO ARKUSZA CSS - ELEMENTY 20 MOŻNA, NIE TRZEBA 21 PORZĄDKOWANIE KODU HTML 21 PORZĄDKOWANIE ARKUSZA CSS 23 TWORZENIE WITRYNY 23 STRONA INDEX 24 KOD HTML DLA STRONY GŁÓWNEJ 24 ARKUSZ CSS DLA STRONY GŁÓWNEJ 27 FORMATOWANIE PIERWSZEGO AKAPITU STRONY INDEX - ETAP PIERWSZY 27 ARKUSZ CSS DLA STRONY GŁÓWNEJ - TWORZENIE DWUKOLUMNOWEGO TEKSTU 29 FORMATOWANIE PIERWSZEGO AKAPITU STRONY INDEX - ETAP DRUGI 30 STRONA ABC 31 KOD HTML DLA STRONY ABC 31 FORMATOWANIE STRONY ABC 32 TRANSFORMACJA OBRAZKA 33 WYBRANE TRANSFORMACJE 34 STRONA DEF 36 KOD HTML DLA STRONY DEF 36
STRONA GHI.HTML ORAZ JKL.HTML 38 KOD HTML DLA STRONY GHI.HTML 39 EDYCJA KODU HTML DLA STRONY GHI.HTML 39 KOD HTML DLA STRONY JKL.HTML 40 STRONA MNO.HTML 40 STRUKTURA KODU HTML DLA GALERII STRONY MNO.HTML 40 GENERATOR GALERII 42 SELEKTORY CSS DLA GALERII STRONY MNO.INDEX 43 EDYCJA GALERII W PLIKU MNO.HTML 44 47