Tworzenie Stron Internetowych. odcinek 3

Transkrypt

1 Tworzenie Stron Internetowych odcinek 3

2 odnośniki Uwaga do poprzedniego wykładu Każdy fragment tekstu umieszczony w kodzie HTML musi byd częścią jakiegoś elementu. Esencją HTML jest Hipertekst, czyli łączenie dokumentów ze sobą poprzez odnośniki (linki, hiperłącza). Odnośnik: <a> Element liniowy <a> (anchor) wstawia odnośnik do innego dokumentu lub innego miejsca w tym samym dokumencie. Atrybut href zawiera adres dokumentu. Wnętrze elementu jest widocznym tekstem odnośnika (dobrze o tym pamiętad odnośnik powinien byd łatwo dostrzegalny). <a href="adres_dokumentu">tekst_odnośnika</a> Nie można umieszczad w elemencie <a> elementów blokowych, można jedynie elementy liniowe. Użycie atrybutu title umożliwia podanie dodatkowego opisu odnośnika. Jeżeli odnośnik ma kierowad do innej strony w internecie to musi zaczynad się od Atrybut target wskazuje sposób otwarcia dokumentu, np.: target= _blank w nowym oknie/zakładce, target= _self w tej samej (wartośd domyślna). Odnośnik oprócz formy tekstowej może byd również w postaci obrazka (o tym za chwilę).

3 odnośniki Typy odnośników: Do adresu internetowego: <a href=" Astronomiczny UWr</a> Do podstrony: <a href="rajd02.html">2. Rajd Astronomów</a> Do wybranego miejsca na tej samej stronie (do etykiety): Zobacz <a href="#rozdzial-2">rozdział drugi</a>. w tym samym pliku musimy podad: <h2 id="rozdzial-2">rozdział drugi</h2> Do wybranego miejsca na innej stronie (do etykiety): Zobacz <a href="rajd02.html#opis_trasy">opis trasy 2. RA</a>. (w pliku rajd02.html musimy podad: <h2 id="opis_trasy">opis Trasy</h2>) Do adresu owego: <a href="mailto:rajd@astro.uni.wroc.pl">napisz do organizatorów</a> Do adersu ftp: <a href="ftp://sunsite.icm.edu.pl/pub/">tu znajdziesz potrzebne programy</a> Inne, np.: do komunikatorów internetowych, grup dyskusyjnych,

4 odnośniki Odnośnik owy dodatkowe parametry Do odnośnika owego możemy dodad następujące parametry: tytuł: <a do organizatorów</a> odbiorca kopii: <a do organizatorów</a> odbiorca ukrytej kopii: <a do organizatorów</a> Powyższe parametry można łączyd ze sobą. Łącznikiem jest &. <a & cc=adres_odbiorcy_kopi">napisz do organizatorów</a> Jeżeli chcemy podad więcej niż jeden adres, musimy kolejne adresy oddzielid średnikiem. <a do organizatorów</a>

5 odnośniki Odnośnik owy ochrona adresu Podanie adresu owego na stronie www może skutkowad pojawieniem spamu w e-szkrzynce. Aby tego uniknąd należy zabezpieczyd adres przed wykryciem przez tzw. żniwiarki (programy gromadzące adresy ze stron www), stosując zamiast typowego odnośnika owego np. poniższy skrypt (JavaScript): <script type="text/javascript"> // <![CDATA[ var uzytkownik = 'rajd'; var domena = 'astro.uni.wroc.pl'; var dodatkowe = '?subject=tytuł listu'; var opis = 'napisz do organizatorów'; document.write('<a hr' + 'ef="mai' + 'lto:' + uzytkownik + '\x40' + domena + dodatkowe + ' ">'); if (opis) document.write(opis + '<'+'/a>'); else document.write(uzytkownik + '\x40' + domena + '<'+'/a>'); // ]]> </script> odpowiadający: <a href="mailto:rajd@astro.uni.wroc.pl?subject=tytuł listu">napisz do organizatorów</a> Wadą skryptu jest to, że w przypadku, gdy przeglądarka użytkownika nie obsługuje JavaScript, adres będzie niedostępny dla niego. Taka możliwośd nie jest częsta. Innym sposobem zabezpieczenia jest umieszczenie adresu owego w postaci obrazka.

6 adresy Wszystkie dokumenty w sieci wskazuje się za pomocą tzw. "adresu internetowego". Oficjalna nazwa "adresu" to URI (Uniform Resource Identifier) lub URL (Uniform Resource Locator). Części składowe typowego adresu internetowego: Protokół. W tym przypadku HTTP (Hypertext Transfer Protocol). Poza jego bezpieczną wersją (HTTPS = SSL/TLS) jest jedynym powszechnie używanym do przesyłania stron WWW. Poddomena, częśd domeny. Z technicznego punktu widzenia przedrostek www nie ma specjalnego znaczenia. Działanie domeny z/bez www zależy od konfiguracji serwera DNS (Domain Name System). Domena. Ostatni człon (tu:.com) jest domeną najwyższego rzędu (TLD Top Level Domain). Wielkośd liter w domenie nie ma znaczenia. Domeny używające znaków narodowych nazywają się IDN (Internationalized Domain Name Międzynarodowa Nazwa Domeny). Domeny tradycyjnie są ograniczone do znaków alfabetu łacioskiego, cyfr oraz myślników.

7 adresy Ścieżka na serwerze. Często ścieżki URI odzwierciedlają rzeczywiste ścieżki do plików na serwerze, ale wcale to nie jest konieczne (np. serwer może czytad strony z bazy danych). Rozszerzenie nazwy pliku (tu:.html) nie ma żadnego znaczenia z punktu widzenia URI o typie pliku decyduje wysyłany przez serwer nagłówek HTTP Content-Type. Zazwyczaj wielkośd liter w ścieżce ma znaczenie (chod istnieją serwery ignorujące wielkośd liter). Zapytanie (query string). Jeśli ten sam dokument jest dostępny w kilku wersjach (np. zawierający dane posortowane rosnąco lub malejąco), jego wersja powinna byd wybrana w zapytaniu. W praktyce służy do przekazywania parametrów do skryptów. Fragment (hash). Wskazuje miejsce wewnątrz dokumentu. W przypadku dokumentów HTML wskazuje element o danym ID (tu: rozdzial2). Fragment działa tylko po stronie klienta i nie jest przesyłany do serwera. Uwaga: znaki, których nie można bezpośrednio użyd w adresie, muszą byd kodowane jako %XX (XX to kod szesnastkowy bajtu), np.: spacja to %20

8 grafika Wstawianie ilustracji: <img /> Ilustracje umieszczane na stronie powinny byd zapisane w formacie JPG, PNG lub GIF. Nie należy używad BMP ze względu objętośd. Strona internetowa, jeśli nie jest galerią, powinna zawierad nie za dużą ilośd grafiki dobrej jakości i nie zbyt dużym rozmiarze. Ilustracje wstawia się do dokumentu html liniowym elementem pustym <img />. Element ten ma następujące atrybuty: Ścieżka do pliku: src określa ścieżkę do pliku graficznego (wymagany) Tekst alternatywny: alt zastępuje obrazek, kiedy przeglądarka nie może go wyświetlid (wymagany) Dodatkowe informacje o ilustracji: title dodatkowy opis ilustracji wyświetlany jako dymek Wymiary obrazka: width, height podają rozmiary obrazka w pikselach, nie należy ich używad do pomniejszania obrazów; ich zdaniem jest rezerwacja miejsca na obrazek przy ładowaniu strony; nie są wymagane, ale zaleca się je podawad Przykład: <img src="obrazek.jpg" alt="logo_rajdowe" title="logo" width="400" height="300" /> Obrazek może też byd odnośnikiem (do innej podstrony, a, adresu internetowego) <a href="ra2/ra2.html"> <img src="obrazek.jpg" alt="logo_ra2" title="ii Rajd Astronomów" /> </a>

9 grafika Obrazki - warto wiedzied Używając formatu GIF lub PNG możemy wstawid obrazek, który nie jest prostokątem. Obszary, które mają byd niewidoczne, należy narysowad innym kolorem niż użyte na pozostałej części obrazu. Następnie w programie graficznym ustawiamy ten kolor jako przezroczysty. Uwaga: format JPG (i BMP) nie obsługuje przezroczystości. Używając formatu animowany GIF możemy dodad do strony www np. animowany banner. Taki typ GIF'a umieszczany jest w html tak samo jak zwykła grafika. W kodzie HTML5 można również umieścid grafikę w formacie SVG (Scalable Vector Graphics), np. w ten sposób : <svg width="250" height="200" xmlns=" <circle cx="100" cy="100" r="70" stroke-width="2" stroke="black" fill="#4a90d6"/> </svg>

10 ścieżki dostępu odnośniki i grafika Poprawne podawanie ścieżek dostępu (podstrony, grafika) Zawsze podajemy względne, a nie bezwzględne ścieżki dostępu (C:\www\katalog2\plik.gif) Używamy zwykłych (/), a nie odwróconych ukośników (\). Wszystkie pliki serwisu internetowego powinny znajdowad się w katalogu głównym tego serwisu i jego podkatalogach, w żadnym razie powyżej niego. Przykład: na strona.html wstawiamy plik.gif <img src="plik.gif" alt=" " /> <img src="katalog/plik.gif" alt=" " /> <img src="../plik.gif" alt=" " /> <img src="../katalog2/plik.gif" alt=" " /> <img src="../../katalog2/katalog2a/plik.gif" alt=" " />

11 odnośniki obrazkowe Odnośnik obrazkowy mapa odnośników Tworząc tzw. mapę odnośników możemy na jednym obrazku wyróżnid kilka różnych obszarów będących odnośnikami do np. różnych podstron. Mapę odnośników tworzymy za pomocą elementu <map>: <img src="ścieżka_dostępu_do_obrazka" alt="tekst_alternatywny" usemap="#nazwa_mapy" /> <map id="nazwa_mapy" name="nazwa_mapy"> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" /> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny" /> (...) </map> nazwa_mapy dowolny tekst (taki sam w img i map) wiążący obraz z mapą. Na jednej stronie nie mogą się znajdowad dwie mapy o takiej samej nazwie. Atrybut id stosowany jest w XHTML, a name w HTML. Atrybuty w elemencie <area /> (shape, coords, href, alt) tworzą aktywne pola (odnośniki) na obrazku. Ręczne tworzenie mapy odsyłaczy jest uciążliwe, lepiej to tego wykorzystad odpowiedni program graficzny.

12 odnośniki obrazkowe Odnośnik obrazkowy mapa odnośników Wartości atrybutu shape: "rect" pole ograniczone prostokątem "poly" pole ograniczone wielokątem nieregularnym "circle" koło Wartości atrybutu coords: "x1, y1, x2, y2" dla rect: x1, y1 - współrzędna lewego-górnego wierzchołka prostokąta x2, y2 - współrzędna prawego-dolnego wierzchołka prostokąta "x1, y1, x2, y2, x3, y3..." dla poly: xn,yn - współrzędne kolejnych wierzchołków wielokąta "x, y, r" dla circle: x,y - współrzędne środka r - długośd promienia Wszystkie współrzędne liczone są od lewego górnego wierzchołka obrazka (w pikselach). Obszary-odnośniki nie są wyróżniane na obrazie, dlatego sami musimy je wcześniej zaznaczyd graficznie.

13 zbiór grafik Element <figure> W HTML5 dodano element <figure> (blokowy) umożliwiający zgrupowanie wielu elementów graficznych. <figure> <figcaption>podpis</figcaption> <img src="obraz1.jpg" alt="tytuł obrazu 1" width="200" height="200"> <img src="obraz2.jpg" alt="tytuł obrazu 2" width="200" height="200"> ( ) </figure> Dodatkowy element <figcaption> (blokowy) umożliwia nadanie zbiorowi grafik wspólnego opisu. Opis znajdzie się przed lub po zbiorze, zależnie od umieszczenia go w kodzie przed lub po poleceniach wstawiających grafikę. Nie można wstawid <figcaption> pomiędzy polecenia wstawiające grafikę.

14 multimedia Emement <video> Element wstawia plik filmowy (HTML5). Akceptowane typy plików: MP4, Ogg i WebM (zależnie od przeglądarki). <video width="px" height="px" controls="controls"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> tekst alternatywny </video> Atrybut scr określa sciezkę dostepu. Atrybuty width i height definiują rozmiar okna. Emement <audio> Element wstawia plik dżwiękowy (HTML5). Akceptowane typy plików: Ogg, mp3, wav (zależnie od przeglądarki). <audio controls="controls"> <source src="sound.ogg" type="audio/ogg"> <source src="sound.mp3" type="audio/mpeg"> <source src="movie.wav" type="video/wav"> tekst alternatywny </ audio> Umieszczenie plików audio i video na stronie www jest problematyczne. Różne przeglądarki obsługują różne typy plików audio/video, dlatego warto na stronie www wstawid wszystkie trzy. Tekst alternatywny należy podad na wypadek, gdyby przeglądarka nie mogła wczytad żadnego z tych trzech typów. Tekst ten może byd odnośnikiem do pliku audio/video umożliwiającym jego pobranie.

15 strona w stronie Emement <iframe> Element ten umożliwia wstawienie na stronie zawartości innej strony (XHTML1.0, HTML5). <iframe src="uri" width="px" height="px">tekst alternatywny</iframe> Atrybut scr określa adres wstawianej strony. Atrybuty width i height definiują rozmiar okna.

16 formularze Formularze Formularze umożliwiają przekazywanie danych na serwer. Są sposobem na przepływ informacji od użytkownika do autora. Prosty formularz nie zapewnia bezpieczeostwa przysyłanych danych. Elementami budującymi formularz są <form> oraz pola formularza. Pola przybierają różne postaci. <form> pola formularza </form> Sposób odesłania formularza wskazujemy atrybutem action. Może to byd np. odesłanie na adres e- mailowy: <form action="mailto: adres owy" method="post" enctype="text/plain"> Atrybut method określa sposób komunikowania się przeglądarki użytkownika z serwerem (post w body) lub (get jako zmienne w URL). Parametr enctype (występuje tylko z post) pozwala poprawnie zapisad dane uzyskane w formularzu w treśd a.

17 formularze Formularze Pola formularza tworzone są elementami: <input> umożliwia wpisanie informacji lub wybór opcji. Opis pola <input type="typ" name="nazwa" value="wartośd" /> gdzie name to nazwa pola, value zawiera treśd odsyłanej odpowiedzi (w przypadku pól wyboru odp. z listy), napis na przycisku (dla submit i reset) i tekst domyślny (dla text i password). Atrybut type może mied następujące wartości (przykłady): text pole tekstowe password pole hasła (hasło nie jest szyfrowane) radio pole opcji (można wybrad tylko jedną odpowiedź) checkbox pole wyboru (można wybrad więcej niż jedną odpowiedź) submit wysyłanie formularza (nie posiada atrybutu name, posiada atrybut value) reset wyczyszczenie całego formularza z wprowadzonych danych <label> definiuje opis do pola <input>. Opcjonalny atrybut for pozwala związad opis z polem. <label for="op1">opcja 1</label> <input type="radio" name="wybor" id="op1" value="opcja1"> Lub krócej <label>opcja 1 <input type="radio" name="wybor" value="opcja1"> </label>

18 formularze Formularze Pola formularza tworzone są elementami: <textarea> tworzy pole do wpisania tekstu o objętości do 1024 znaków <textarea name="nazwa" rows="x" cols="y">tekst informujący</textarea> gdzie name jest nazwą pola, rows i cols jego rozmiarem. Opcjonalny tekst informujący zostanie wpisany w pole i może to byd jakaś uwaga skierowana od użytkownika. <select> tworzy listę złożoną z kilku opcji do wyboru <select name="nazwa_listy" size="liczba wyświetlanych pozycji" multiple="multiple"> <option value="opcja1">pierwsza opcja</option> <option value="opcja2">druga opcja </option>... </select> gdzie name jest nazwą listy, size ilością wyświetlanych jednocześnie opcji. Jeśli obecny jest atrybut multiple, użytkownik ma możliwośd wybrania wielu opcji jednocześnie. Atrybut value podaje wartośd odpowiedzi, która będzie odesłana na serwer. Dodatkowe uwagi: Pola formularza można grupowad i opisywad za pomocą <fieldset> i <legend>. Zdania w formularzu, pola, zestawy opcji itd. należy obejmowad jakimiś znacznikami, np. akapitu <p> czy bloku <div>.