STRUKTURA KATALOGÓW TWORZENIE DOKUMENTU: LAYOUT
|
|
|
- Daria Chrzanowska
- 8 lat temu
- Przeglądów:
Transkrypt
1 WITRYNA HTML
2
3 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
4 TWORZENIE STRUKTURY DOKUMENTU - ETAP PIERWSZY Przydatne linki: 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
5 <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
6 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
7 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
8 margin: 5px 10px; padding: 35px; 2. Deklaracja dla selektorów: h1, h2, h3. h1,h2,h3 { text-align:center; Przydatne linki: 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
9 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
10 <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
11 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
12 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: 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
13 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
14 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
15 <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
16 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
17 Rys.7 Podgląd strony color: #000; 10. Przetestuj stronę w przeglądarce. Przydatne linki: 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: 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
18 <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
19 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: <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
20 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
21 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
22 <!DOCTYPE html> <html lang= pl > <head> <title>nasza pierwsza strona</title> <meta charset= UTF-8 > <meta name= Generator content= JTHTML > <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
23 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
24 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
25 <! > 4. W pierwszym artykule wpisz nagłówek drugiego stopnia ze zdaniem utworzonym w generatorze tekstu np. <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
26 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
27 <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
28 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
29 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
30 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
31 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
32 Przydatne linki <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: 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
33 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
34 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
35 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
36 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
37 </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> <br> <span class= pogrubienie > </span><a href= </p> <p> <span class= pogrubienie >Adres:</span><br> ul. Magna Bibendum 25<br> Nullam </p> </address> </article> 4. Zwróć uwagę na zapis: <span class= pogrubienie > </span><a href= 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
38 Rys.16 Serwis Google Maps STRONA GHI.HTML ORAZ JKL.HTML Rys.17 Podgląd strony ghi.html 38
39 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
40 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 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 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 > 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. <! Galeria > <aside> <h3 class= czerwien ></h3> <p></p> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </aside> 40
41 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
42 GENERATOR GALERII Tworząc galerię skorzystamy z kodów udostępnionych na stronie 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 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
43 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
44 -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 45 Przykładowe opracowanie strony znajduje się: komunikacja-spoleczna.pl/2013strona
46 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
47 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
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
CSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Laboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
www.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Krótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Pierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Rozwiązanie ćwiczenia 8a
Rozwiązanie ćwiczenia 8a Aby utworzyć spis ilustracji: 1. Ustaw kursor za tekstem na ostatniej stronie dokumentu Polska_broszura.doc i kliknij przycisk Podział strony na karcie Wstawianie w grupie Strony
I. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
Zadanie 1. Stosowanie stylów
Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a
PROJEKTOWANIE STRON WWW W4
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW W4 ODNOŚNIKI PSEUDOKLASY
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Zadanie 9. Projektowanie stron dokumentu
Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Rozwiązanie ćwiczenia 6a
Rozwiązanie ćwiczenia 6a Aby ponumerować strony: 1. Ustaw kursor tekstowy na pierwszej stronie dokumentu Polska_broszura.doc i kliknij przycisk Numer strony na karcie Wstawianie w grupie Nagłówek i stopka.
Zadanie 8. Dołączanie obiektów
Zadanie 8. Dołączanie obiektów Edytor Word umożliwia dołączanie do dokumentów różnych obiektów. Mogą to być gotowe obiekty graficzne z galerii klipów, równania, obrazy ze skanera lub aparatu cyfrowego.
Zadanie 11. Przygotowanie publikacji do wydrukowania
Zadanie 11. Przygotowanie publikacji do wydrukowania Edytor Word może służyć również do składania do druku nawet obszernych publikacji. Skorzystamy z tych możliwości i opracowany dokument przygotujemy
Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Rozwiązanie ćwiczenia 7a
Rozwiązanie ćwiczenia 7a Podpisy pod rysunkami, zdjęciami możesz wprowadzić w następujący sposób: 1. Kliknij obiekt (rysunek, zdjęcie) i wybierz przycisk Wstaw podpis z grupy narzędzi Podpisy na karcie
CSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między
Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,
Krok 1: Stylizowanie plakatu
HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30
MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.
Projektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze
1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.
Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Kaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Edytor tekstu OpenOffice Writer Podstawy
Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia
Ćwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki
4. Materiały reklamowe
4. 4.1 Zasady konstrukcji layoutów - grid Nadrzędną, główna zasadą konstruowania przestrzeni poszczególnych projektów graficznych jest modułowy podział parzysty formatu. Wysokość i szerokość medium dzielona
CSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
SterBox. Przygotowanie Strony Użytkownika
Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści
Responsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)
Dostosowywanie paska zadań Ćwiczenia nr 2 Edycja tekstu (Microsoft Word) Domyślnie program Word proponuje paski narzędzi Standardowy oraz Formatowanie z zestawem opcji widocznym poniżej: Można jednak zmodyfikować
Układy witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Księga znaku. Copyright MARR S.A. - Małopolska Agencja Rozwoju Regionalnego S.A. All rights reserved
Księga znaku Spis treści 1. Logotyp 1.1 Konstrukcja znaku 1.2 Pole ochronne znaku 1.3 Minimalne wielkości 1.4 Kontra 1.5 Opcjonalne wersje 1.6 Niedozwolone modyfikacje 2. Kolory 1.1 Logotyp - konstrukcja
Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów
Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów Za pomocą edytora Word można pracować zespołowo nad jednym dużym projektem (dokumentem). Tworzy się wówczas dokument główny,
Arkusz strona zawierająca informacje. Dokumenty Excela są jakby skoroszytami podzielonymi na pojedyncze arkusze.
ARKUSZ KALKULACYJNY Arkusz strona zawierająca informacje Dokumenty Excela są jakby skoroszytami podzielonymi na pojedyncze arkusze. Obszar roboczy fragment ekranu, na którym dokonywane są obliczenia Wiersze
WORDPRESS INSTRUKCJA OBSŁUGI
WORDPRESS INSTRUKCJA OBSŁUGI Zapraszamy do zapoznania się z Instrukcją obsługi panelu CMS Wordpress, która w krótkim czasie i bez większego kłopotu pozwoli na edycję treści i zawartości strony, w tym:
Podstawy informatyki
Podstawy informatyki semestr I, studia stacjonarne I stopnia Elektronika rok akademicki 2012/2013 Pracownia nr 5 Edytor tekstu Microsoft Word 2007 mgr inż. Adam Idźkowski Pracownia nr 5 2 Edytor tekstu
Ms WORD Poziom podstawowy Materiały szkoleniowe
Ms WORD Poziom podstawowy Materiały szkoleniowe Nota Materiał powstał w ramach realizacji projektu e-kompetencje bez barier dofinansowanego z Programu Operacyjnego Polska Cyfrowa działanie 3.1 Działania
METROPOLITALNE FORUM WÓJTÓW, BURMISTRZÓW, PREZYDENTÓW I STAROSTÓW
1. Geneza znaku przeniesienie treści na obraz + + OBSZAR/ TEREN CZĘŚĆ WSPÓLNA / NAKŁADANIE SIĘ WSPÓLNYCH INTERESÓW ENERGIA / RUCH PRZEZ WZAJEMNE WSPIERANIE 2. Opis budowy i proporcji znaku (wraz z siatką
Zasady przygotowania referatu, artykułu, publikacji
Zasady przygotowania referatu, artykułu, publikacji Objętość referatu Objętość 16-20 stron + bibliografia + streszczenie; Układ strony Rozmiar:A4 Orientacja: Pionowa Marginesy: lewy 3 cm, pozostałe 1,5
Tworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie
p { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word.
Temat 10 : Poznajemy zasady pracy w edytorze tekstu Word. 1. Edytor tekstu WORD to program (edytor) do tworzenia dokumentów tekstowych (rozszerzenia:.doc (97-2003),.docx nowszy). 2. Budowa okna edytora
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Temat: Organizacja skoroszytów i arkuszy
Temat: Organizacja skoroszytów i arkuszy Podstawowe informacje o skoroszycie Excel jest najczęściej wykorzystywany do tworzenia skoroszytów. Skoroszyt jest zbiorem informacji, które są przechowywane w
Przykładowy plik pdf do testowania załączników
Przykładowy plik pdf do testowania załączników Anonim 1 Pierwsza Lorem ipsum dolor sit amet consectetuer pede et in natoque ut. Consectetuer commodo vitae consectetuer volutpat Vivamus ut elit sit nulla
menu kontekstowe menu dostępne pod prawym klawiszem myszy, twarda spacja spacja nierozdzielająca (Ctrl + Shift + spacja).
Ćwiczenie: CV Podstawowe pojęcia: menu kontekstowe menu dostępne pod prawym klawiszem myszy, twarda spacja spacja nierozdzielająca (Ctrl + Shift + spacja). 1. Okno Style Włącz okno Style klikając na ikonę
Wprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY
MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka
Z CSS3 szybciej i przyjemniej
1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
Zadanie 3. Praca z tabelami
Zadanie 3. Praca z tabelami Niektóre informacje wygodnie jest przedstawiać w tabeli. Pokażemy, w jaki sposób można w dokumentach tworzyć i formatować tabele. Wszystkie funkcje związane z tabelami dostępne
Tworzenie Stron Internetowych. odcinek 9
Tworzenie Stron Internetowych odcinek 9 Prosta galeria oparta na HTML Najprostszym sposobem zbudowania galerii zdjęć jest wykorzystanie tylko HTML i CSS. Strona główna galerii składa się miniatur zdjęć,
Moduł IV Internet Tworzenie stron www
Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy
Elementy div i style CSS w praktyce
Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze
Tworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
byś cieszył się zielenią
motyw Obrazem przewodnim jest napis / nazwa wraz z zielonym elementem ściętej trawy o grubości Wersja podstawowa elementów kroju pisma. Dopuszczalne, w przypadku bardzo małych rozmiarów bądź niemożności
1. Przypisy, indeks i spisy.
1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy
Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:
Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod
Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable
W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,
HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:
Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.
Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
Ćwiczenia Responsive Web Design Praca własna dr inż. Robert Banasiak Wprowadzenie Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto
INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ
INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ Spis treści: 1 Logowanie do panelu administracyjnego 2 Dodawanie obiektów na stronie 2.1 Wybór podstrony 2.2 Wybór obiektu 2.2.1 Dodawanie obiektów tekstowych
Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.
Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty
Szkolenie dla nauczycieli SP10 w DG Operacje na plikach i folderach, obsługa edytora tekstu ABC. komputera dla nauczyciela. Materiały pomocnicze
ABC komputera dla nauczyciela Materiały pomocnicze 1. Czego się nauczysz? Uruchamianie i zamykanie systemu: jak zalogować się do systemu po uruchomieniu komputera, jak tymczasowo zablokować komputer w
Podstawy tworzenia stron internetowych
Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.
4.Arkusz kalkulacyjny Calc
4.Arkusz kalkulacyjny Calc 4.1. Okno programu Calc Arkusz kalkulacyjny Calc jest zawarty w bezpłatnym pakiecie OpenOffice.org 2.4. Można go uruchomić, podobnie jak inne aplikacje tego środowiska, wybierając
Lokalizacja jest to położenie geograficzne zajmowane przez aparat. Miejsce, w którym zainstalowane jest to urządzenie.
Lokalizacja Informacje ogólne Lokalizacja jest to położenie geograficzne zajmowane przez aparat. Miejsce, w którym zainstalowane jest to urządzenie. To pojęcie jest używane przez schematy szaf w celu tworzenia
TECHNOLOGIE SIECI WEB
1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr
Tworzenie Stron Internetowych. odcinek 5
Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja
Formatowanie dokumentu
Formatowanie dokumentu 1. Formatowanie strony Edytor tekstu Word umożliwia nadanie poszczególnym stronom dokumentu jednolitej formy przez określenie układu strony. Domyślnie są w nim ustawione marginesy
Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Tworzenie stron internetowych w oparciu o język HTML
Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.
Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3
Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w
Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki
Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria obrazów Amiant... 5 4. Lista stron... 8 5. Aktualności...
Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość.
Formatowanie akapitu Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość. Przy formatowaniu znaków obowiązywała zasada, że zawsze przez rozpoczęciem
Serwis PTF Dodanie informacji bieżącej w podserwisie oddziału
Serwis PTF Dodanie informacji bieżącej w podserwisie oddziału Spis treści 1 Logowanie do panelu redagowania treści 1 2 Uwagi dotyczące panelu administratora 1 3 Dodanie nowej informacji bieżącej 2 4 Redagowanie