Podstawy programowania w internecie

Transkrypt

1 Podstawy programowania w internecie

2 Tematyka wykładów 1. Język HTML - język opisu struktury strony internetowej 2. Kaskadowe arkusze stylów (CSS) - opis wyglądu strony internetowej 3. Język JavaScript - język do tworzenia interakcji na stronie internetowej (m.in. wysuwane menu, pokaz slajdów, sprawdzanie poprawności formularza)

3 podstawowa: Literatura 1. Matthew MacDonald. Tworzenie stron WWW. Nieoficjalny podręcznik. Helion, (bibl. Wilno) 2. Shelley Powers. JavaScript: wprowadzenie. Helion (bibl. Wilno) 3. David Sawyer McFarland. JavaScript i jquery. Nieoficjalny podręcznik. Helion, uzupełniająca: 1. Steven M. Schafer. HTML, XHTML i CSS. Biblia. Helion, (bibl. Wilno) 2. John Cowell. Wprowadzenie do XHTML: tworzenie dynamicznych stron www z wykorzystaniem XHTML i JavaScript. Wydawnictwa Szkolne i Pedagogiczne, (bibl. Wilno) 3. D.A. Crowder, A. Bailey. Tworzenie stron WWW. Biblia. Helion, (bibl. Białystok) 4. W. Romowicz. HTML i JavaScript. Helion, (bibl. Białystok) materiały online: 1. (serwis w języku angielskim) 2.

4 Wykład 1: Język HTML

5 Język HTML (HyperText Markup Language) Podstawowy język do tworzenia stron internetowych - za pomocą tego języka opisujemy strukturę. Język HTML pozwala także opisać wygląd strony (choć do wyglądu zalecane jest używanie stylów CSS - kolejny wykład) HyperText - hipertekst, tekst o strukturze rozgałęzionej (przeciwieństwo liniowego) uzyskiwanej dzięki linkom Markup - znakowanie, język HTML to zbiór znaczników (tagów), którymi znakujemy treść strony, aby określić strukturę (akapit, punktowanie, tabela itd.) i wygląd (jaka czcionka, jaki symbol punktowania, odstępy itd.) Language - język HTML czyli język znakowania hipertekstu

6 Szkielet dokumentu HTML (HTML5) <!DOCTYPE html> <html> <head></head> <body>tu wpisujemy treść strony</body> </html> Terminologia: <head> - znacznik (tag) otwierający </head> - znacznik (tag) zamykający <head></head> - element head zawartość elementu - to co umieścimy między znacznikiem otwierającym a zamykającym Uwaga: część elementów posiada tylko znacznik otwierający, np. <hr> - utworzenie poziomej linii

7 Pierwszy dokument HTML <!DOCTYPE html> <html> <head></head> <body>dzisiaj jest <b>czwartek</b></body> </html> Plik zapisujemy z rozszerzeniem.html, a następnie otwieramy w dowolnej przeglądarce internetowej: Internet Explorer, Firefox, Chrome, Opera. itd., aby zobaczyć efekt. Przeglądarka interpretuje kod HTML i dokonuje wizualizacji. W przeglądarce wyświetli się tekst: Dzisiaj jest czwartek. Słowo czwartek będzie pogrubione. Przykład: PierwszaStrona.html

8 Szkielet dokumentu HTML - wyjaśnienie poszczególnych elementów <!DOCTYPE html> deklaracja typu dokumentu (to nie jest znacznik HTML!!!), informuje przeglądarkę jaka wersja języka HTML będzie użyta, w tym przypadku HTML 5 <html> wskazuje początek dokumentu html <head>... </head> nagłówek dokumentu, w tym elemencie umieszczamy metadane dokumentu m.in. tytuł, stronę kodową, temat strony <body>... </body> ciało dokumentu, w tym elemencie umieszczamy właściwą treść dokumentu, która będzie widoczna w przeglądarce </html> koniec dokumentu html Uwaga: przeglądarki są dość odporne na naruszanie przedstawionej struktury

9 Tytuł strony W szkielecie strony warto dodać tytuł Umieszczamy go za pomocą elementu title w elemencie head Tytuł pokaże sie na pasku tytułu przeglądarki lub na zakładce przeglądarki (nie pokaże się jako zawartość strony!!!) <!DOCTYPE html> <html> <head> <title>wilno</title> <meta charset="utf-8"> </head> <body> Dzisiaj jest <b>czwartek</b> </body> </html>

10 Deklaracja strony kodowej (1) W szkielecie strony warto jeszcze dopisywać jakiej strony kodowej ma użyć przeglądarka do wyświetlenia strony. Jeśli tego nie zrobimy, m.in. znaki narodowe (diakrytyczne) polskie: ą ę ś czy innych alfabetów mogą wyświetlać się niepoprawnie. Należy zadeklarować taką stronę kodową jaka była używana w edytorze przy tworzeniu dokument html

11 Deklaracja strony kodowej (2) <!DOCTYPE html> <html> <head> <title>wilno</title> <meta charset="utf-8"> </head> <body>dzisiaj jest <b>czwartek</b></body> </html> Deklarację robimy za pomocą elementu meta, a umieszczamy go w elemencie head Ta deklaracja oznacza, że przeglądarka ma użyć strony kodowej utf-8 Element meta nie ma znacznika zamykającego Terminologia: znaczniki mogą posiadać atrybuty. W tym przypadku charset jest atrybutem znacznika meta Przykład: PierwszaStronaKodowanieTytul.html

12 Programy do tworzenia dokumentów HTML jakikolwiek edytor tekstu, choćby Windowsowy Notatnik, ale niewygodnie edytor Notepad++ (Windows) - podświetlanie kodu wyspecjalizowane edytory HTML: JHTML (polski), Amaya edytory wizualne (typu WYSIWYG) - umożliwiają tworzenie dokumentów w trybie wizualnym, generują kod HTML: Nvu, WebBuilder, Adobe Dreamweaver można też korzystać z NetBeans IDE (środowisko programistyczne dla Javy, ale wsparcie też dla innych języków) WYSIWYG - What You See Is What You Get

13 Pierwsza strona w Notepad++ File - New Ustawić, aby do zakodowania naszego tekstu była użyta strona kodowa UTF-8 without BOM: Encoding - Encode in UTF-8 without BOM Wpisać szkielet strony przedstawiony na slajdzie 11 Zapisać plik z rozszerzeniem html, np. PierwszaStrona.html Otworzyć stronę w przeglądarce: Uruchomić przeglądarkę - Plik - Otwórz (jeśli nie ma menu w przeglądarce to wykorzystać skrót Ctrl O) Dokonywanie zmian na stronie: jeśli w pliku html coś zmienimy, plik zapisujemy i odświeżamy stronę w przeglądarce, aby zobaczyć te zmian.

14 Podstawowa struktura tekstu - elementy blokowe. Komentarze. (1) Przykład: PodstawowaStrukturaTekstu.html Tytuły (nagłówki, heading): <h1> - <h6> Akapity (paragraph): <p> Akapit z automatycznym wcięciem (bloki cytowań): <blockquote> Akapit z tekstem preformatowanym: <pre> Pozioma linia rozdzielająca (horizontal line): <hr> Łamanie linii (line break) - przejście do nowej linii : <br> Komentarz:

15 Uwagi: Podstawowa struktura tekstu - elementy blokowe. Komentarze. (2) Elementy br i hr nie mają znacznika zamykającego wszystkie elementy blokowe są automatycznie umieszczane od nowej linii Element p tworzy akapit bez wcięcia, automatycznie jest dodawany odstęp z góry i z dołu Element br używamy m.in. wewnątrz akapitu, gdy chcemy, aby tekst został przeniesiony do nowej linii

16 Przykład: Listy.html Listy punktowane i numerowane, zagnieżdżanie list <ol> - utworzenie listy numerowanej (ordered list) <ul> - utworzenie listy punktowanej (unordered list) <li> - utworzenie pozycji na liście Uwagi: inny symbol punktowania lub rodzaj numeracji niż domyślny: kaskadowe arkusze stylów - następny wykład lista jest elementem blokowym zagnieżdżanie elementów: znaczniki zamykamy w odwrotnej kolejności niż otwierające, tj., najpierw zamykamy element najbardziej wewnętrzny, na koniec najbardziej zewnętrzny

17 Tabele Przykład: Tabele.html <table> - wstawienie tabeli Atrybut border - grubość krawędzi tabeli <tr> - wstawienie wiersza <td> - wstawienie komórki Scalanie komórek: Atrybut colspan - scalenie komórek w poziomie (kolumnami) Atrybut rowspan - scalenie komórek w pionie (wierszami)

18 Linki (Odnośniki, Łącza) <a href="szczegoly.html">kliknij tutaj</a> <a> - utworzenie linku (od ang. anchor-kotwica) atrybut href (hypertext reference) - adres dokumentu do którego prowadzi link Kliknij tutaj - opis linku: to co pokaże się w przeglądarce jako tekst, w który należy kliknąć, aby otworzyć link Przykład: Linki.html Uwaga: Link jest elementem wierszowym, a nie blokowym tj. nie jest automatycznie umieszczany w nowej linii (wierszu)

19 Linki - adres względny, adres bezwzględny Adres, który podajemy jako wartość atrybutu href może być: względny: adres względem katalogu, w którym jest dokument z linkiem. Czyli <a href="szczegoly.html">kliknij tutaj</a> oznacza, że dokument szczegoly.html jest w tym samym katalogu co dokument z tym linkiem Inne przykłady adresów względnych: href="wilno/zabytki/katedra.html" href="../../oferty/szczegoly.html" bezwzględny: pełny adres href=" adresy względne stosujemy dla dokumentów wewnątrz naszego serwisu internetowego, adresy bezwzględne dla dokumentów z innych serwisów

20 Linki do zakładek (linki wewnętrzne), otwarcie linku w nowym oknie Tworzenie nawigacji wewnątrz dokumentu: 1. utworzenie zakładki: <a name="chiny"></a> 2. utworzenie linku prowadzącego do zakładki <a href="#chiny">chiny</a> Link otwierający stronę na wskazanej zakładce: <a href="kraje.html#chiny">chiny</a> Przykład: LinkiDoZakladek.html Link otwierający dokument w nowym oknie (lub zakładce przeglądarki): <a href="szczegoly.html" target="_blank">kliknij tutaj</a> Przykład: LinkiNoweOkno.html

21 Wstawianie obrazków (1) <img src="filia_uwb.jpg"> Element img nie ma znacznika zamykającego Atrybut src - adres do pliku z obrazkiem. Zasady adresowania tak jak w przypadku linków Atrybut alt służy do opisania obrazka. Opis wyświetli się, gdy obrazek nie może się wyświetlić, np. nie ma go fizycznie na serwerze, użytkownik wyłączył pobieranie obrazków, aby przyspieszyć ładowanie stron, w takim wypadku pokażą mu się opisy Atrybut title służy do podania tytułu obrazka. Tytuł pokaże się po najechaniu myszką na obrazek. Obrazek nie jest elementem blokowym (nie wstawia się automatycznie w nowej linii) Przykład: Obrazki.html

22 Wstawianie obrazków (2) domyślnie obrazek wstawia się w rozmiarach oryginalnych. Rozmiar obrazka na stronie można zmienić za pomocą CSS lub dodając atrybuty width lub height. Ale waga w ten sposób zmienionego obrazka nie zmienia się. Jeśli chcemy, aby obrazek był lżejszy należy go zmniejszyć w programie graficznym np. GIMP. formaty obrazków obsługiwane przez przeglądarki: jpeg (stosowany do zdjęć, kompresja, pewna strata jakości), gif (stosowany do obrazków z małą liczbą kolorów: loga, kliparty), png (stosowany do różnych typów obrazków, ale nie daje tak dobrej kompresji jak jpeg; format png coraz częściej zastępuje gif), svg (grafika wektorowa, skalowalny w przeglądarce bez utraty jakości, stosowany: loga, figury; zaleta mały rozmiar; ale nie wszystkie przeglądarki obsługują Obrazek jako link: <a href="..."><img src="..."></a>

23 Mapy obrazów (1) Przykład: ObrazkiMapa.html Mapa pozwala wydzielić na obrazku obszary, które są linkami <map> - utworzenie mapy. Mapie należy nadać nazwę za pomocą atrybutu name <area> - wydzielenie obszaru. Atrybut href - adres dokumentu do którego ma prowadzić link Atrybut shape - kształt obszaru (Wartości: rect - prostokąt, circle - koło, poly - wielokąt) Atrybut coords - współrzędne (od ang. coordinates) obszaru w zależności jaką podaliśmy wartość shape. Dla prostokąta podajemy współrzędne lewego górnego i prawego dolnego rogu Dla koła podajemy długość promienia i współrzędne środka Dla wielokąta podajemy współrzędne wierzchołków

24 Mapy obrazów (2) Atrybut usemap znacznika <img> - podajemy nazwę mapy, która ma być użyta. Nazwa mapy jest taka, jaką podaliśmy wartość atrybutu name znacznika <map> Mapy wygodnie jest tworzyć programem graficznym np. GIMPem. Wskazujemy obszary a program wygeneruje kod mapy.

25 Mapy obrazów (3) Wykonanie mapy za pomocą programu GIMP (wersja ) 1. Otwieramy obrazek w GIMP-ie 2. Filtry - Sieć WWW - Mapa obrazu Mapowanie - wybieramy kształt np. prostokąt 4. Kliknięciem wskazujemy początek obszaru, zaznaczamy obszar, ponownym kliknięciem wskazujemy koniec obszaru 5. Po zakończeniu p. 4 pojawi się okienko. W okienku w polu "URL uaktywniany po kliknięciu..." wpisujemy adres linku. W zakładce Prostokąt można podać precyzyjnie współrzędne. Klikamy OK. 6. Po prawej stronie na liście pojawi się zdefiniowany przez nas obszar 7. Modyfikacja obszaru: Mapowanie - Strzałka. Wybrać z listy po prawej stronie obszar, który chcemy modyfikować. 8. Wygenerowany kod mapy: Widok - Źródło kopiujemy do dokumentu HTML

26 Wygląd tekstu Wygląd tekstu jak i całej strony zaleca się robić za pomocą CSS. Ale w przypadku prostych, krótkich dokumentów wygodniej jest nie korzystać z CSS: <b> - pogrubienie tekstu (bold), do wyróżnień <i> - pochylenie tekstu (italic), zastosowanie: obce słowa, terminy techniczne <mark> - cieniowanie tekstu (mark - zaznaczyć) <del> - przekreślenie tekstu (delete) <sub> - indeks dolny (subscript) <sup> - indeks górny (superscript) Przykład: WygladTekstu.html

27 Odwołania znakowe - wstawianie symboli (1) Służą do wstawiania na stronie znaków, które są zastrzeżone, lub nie można ich wstawić z klawiatury. Rodzaje odwołań: Odwołania znakowe numeryczne: &#liczba; gdzie liczba to unikodowy (Unicode) numer znaku Odwołania znakowe nazwowe (encje): &encja; gdzie encja to nazwa znaku Przykład: OdwolaniaZnakowe.html

28 Odwołania znakowe - przykłady (2) Znak Odwołanie numeryczne Odwołanie nazwowe < < < > > > " " " & & & niepodzielna (dodatkowa spacja) Γ Γ Więcej: Lista znaków Unicode:

29 Odwołania znakowe (3) Aby na stronie wyświetlić znacznik: <hr> wpisujemy: < hr&rt; lub <hr> Aby wstawić niepodzielną albo dodatkowe spacje wpisujemy: 5 cm (5 cm nie zostanie podzielone na dwie linie ) Początek akapitu... (wcięcie pierwszego wiersza akapitu za pomocą 4 spacji)

30 Elementy meta Elementy meta umieszczamy w sekcji head. Oprócz deklaracji strony kodowej można za pomocą tych elementów podać: słowa kluczowe, wykorzystywane przez wyszukiwarki: <meta name="keywords" content="wilno, zwiedzanie, Ostra Brama, Katedra, Góra Trzech Krzyży"> opis strony: <meta name="description" content="srona opisuje zabytki Wilna."> autor strony: <meta name="author" content="jan Kowalski">

31 Sprawdzanie poprawności kodu HTML (walidacja) World Wide Web Consortium (W3C) organizacja ustanawiąjąca standard HTML, założona przez Tima Berners-Lee w 1994r. Standardy nazywane są rekomendacjami (W3C Recommendation). Ustanawia również standardy dla CSS, XHTML i XML. Używamy standardu HTML5 (rok 2012) Walidacja online: