docWykład 1: Język HTML (11.10)
download 
Reklamacja Transkrypt
Wykład 1: Język HTML (11.10)
Podstawy programowania w internecie 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) Literatura • podstawowa: 1. Matthew MacDonald. Tworzenie stron WWW. Nieoficjalny podręcznik. Helion, 2006. (bibl. Wilno) 2. Shelley Powers. JavaScript: wprowadzenie. Helion 2007. (bibl. Wilno) 3. David Sawyer McFarland. JavaScript i jQuery. Nieoficjalny podręcznik. Helion, 2012. • uzupełniająca: 1. Steven M. Schafer. HTML, XHTML i CSS. Biblia. Helion, 2010. (bibl. Wilno) 2. John Cowell. Wprowadzenie do XHTML: tworzenie dynamicznych stron www z wykorzystaniem XHTML i JavaScript. Wydawnictwa Szkolne i Pedagogiczne, 2003. (bibl. Wilno) 3. D.A. Crowder, A. Bailey. Tworzenie stron WWW. Biblia. Helion, 2005. (bibl. Białystok) 4. W. Romowicz. HTML i JavaScript. Helion, 1998. (bibl. Białystok) • materiały online: 1. http://www.w3schools.com (serwis w języku angielskim) 2. http://www.kurshtml.edu.pl Wykład 1: Język HTML 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 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 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 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 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> 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 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 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 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. 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: <!-- Tu wpisujemy komentarz --> Podstawowa struktura tekstu - elementy blokowe. Komentarze. (2) Uwagi: • 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 Listy punktowane i numerowane, zagnieżdżanie list Przykład: Listy.html • <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 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) 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) 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="http://logika.uwb.edu.pl/mg/zajecia/pwi/index.html" • adresy względne stosujemy dla dokumentów wewnątrz naszego serwisu internetowego, adresy bezwzględne dla dokumentów z innych serwisów 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 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 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> 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 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. Mapy obrazów (3) Wykonanie mapy za pomocą programu GIMP (wersja 2.6.11) 1. 2. 3. 4. 5. 6. 7. 8. Otwieramy obrazek w GIMP-ie Filtry - Sieć WWW - Mapa obrazu ... Mapowanie - wybieramy kształt np. prostokąt Kliknięciem wskazujemy początek obszaru, zaznaczamy obszar, ponownym kliknięciem wskazujemy koniec obszaru 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. Po prawej stronie na liście pojawi się zdefiniowany przez nas obszar Modyfikacja obszaru: Mapowanie - Strzałka. Wybrać z listy po prawej stronie obszar, który chcemy modyfikować. Wygenerowany kod mapy: Widok - Źródło kopiujemy do dokumentu HTML 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 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 Odwołania znakowe - przykłady (2) Znak Odwołanie numeryczne Odwołanie nazwowe < < < > > > " " " & & & € € € © © niepodzielna (dodatkowa spacja)   Γ Γ → → Więcej: http://www.freeformatter.com/html-entities.html Lista znaków Unicode: https://pl.wikisource.org/wiki/Unicode/Lista_znak%C3%B3w 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) 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"> 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: http://validator.w3.org
