Witryny i aplikacje internetowe. mgr inż. Remigiusz Pokrzywiński

Transkrypt

1 Witryny i aplikacje internetowe mgr inż. Remigiusz Pokrzywiński

2 Podstawowe pojęcia dotyczące stron internetowych Strona internetowa, strona WWW (ang. web page) dokument HTML udostępniony w Internecie przez serwer WWW. Serwis internetowy, witryna internetowa (ang. website) grupa powiązanych ze sobą, w celu zwiększenia funkcjonalności, stron internetowych. Serwisy internetowe, poza treścią statyczną, mają często sekcję wiadomości oraz możliwość logowania się i zapamiętywania preferencji

3 Podstawowe pojęcia dotyczące stron internetowych c.d. Przeglądarka internetowa lub przeglądarka WWW (ang. web browser) program komputerowy służący do pobierania i wyświetlania stron internetowych udostępnianych przez serwery WWW, a także odtwarzania plików multimedialnych, często przy użyciu dodatkowych rozszerzeń, zwanych wtyczkami. Serwer WWW (ang.) web server program działający na serwerze internetowym, obsługujący żądania protokołu komunikacyjnego HTTP. Z serwerem WWW łączy się, poprzez sieć komputerową, przeglądarka internetowa, będąca jego klientem, aby pobrać wskazaną stronę WWW

4 Podstawowe pojęcia dotyczące stron internetowych c.d. Domena adres strony internetowej, np. twoja-nowa-strona.pl. Domena nie jest stroną ona tylko wskazuje na serwer, na którym znajduje się strona. Adres URL unikalny adres dokumentu HTML lub XML w sieci Internet. W uproszczeniu, składa się z określenia protokołu (np. http, https), domeny (np. ścieżki na serwerze (np. /www/) oraz opcjonalnie parametrów (np.?status=ok)

5 Podstawowe pojęcia dotyczące stron internetowych c.d. Link (odnośnik) wyróżniony (aktywny) fragment strony internetowej (fragment tekstu lub obrazek) pozwalający przejść do innej strony www (inny adres URL) lub też wykonać określoną czynność (np. przesłać zawartość formularza). System CMS oprogramowanie (zbiór narzędzi, panel administracyjny) umożliwiające uprawnionym (identyfikowanym przez login i hasło) osobom zarządzanie treścią (teksty, zdjęcia, multimedia, pliki do pobrania) znajdującą się na poszczególnych stronach WWW.

6 Podstawowe pojęcia dotyczące stron Aplikacja internetowa internetowych c.d. zbiór skryptów (podprogramów) wykonywanych przez oprogramowanie znajdujące się na serwerze internetowym i służące do szeroko rozumianego przetwarzania danych nadsyłanych przez użytkowników (internautów). System CMS i sklep internetowy są właśnie aplikacjami internetowymi.

7 Podstawowe pojęcia dotyczące stron internetowych c.d. HTML (Hyper-Text Markup Language) jest jedynym niezbędnym językiem w tym towarzystwie tworzy się za jego pomocą strukturę strony (nagłówki, listy punktowane, linki, osadza się w stronie grafikę itp.) CSS (Cascading Style Sheets) jest językiem służącym do nadawania stronie odpowiedniego wyglądu: ustalania układu elementów, ustalania tła, kolorów, czcionek itp. JS (JavaScript) język służący do nadawania stronom interaktywności. Dzięki niemu strona może np. reagować na działanie użytkownika lub dynamicznie zmieniać wygląd elementów lub ich zawartość

8 Podstawowe pojęcia dotyczące stron internetowych c.d. PHP, ASP, JSP języki programowania stron. Nie widać ich działania tak jak działania JavaScript, ponieważ są wykonywane po stronie serwera, a nie w przeglądarce ich działanie kończy się zanim ujrzysz cokolwiek na ładującej się stronie internetowej. AJAX nie jest osobnym językiem, tylko technologią łączącą JavaScript z językiem działającym po stronie serwera (np. PHP lub ASP). Stosuje się ją, gdy wymagane jest zadziałanie skryptu na serwerze, ale nie ma konieczności załadowania całej strony od nowa, np.: wyświetlanie podpowiedzi w trakcie wpisywania w Google frazy do wyszukania

9 Podstawowe pojęcia dotyczące stron internetowych c.d. SEO (ang. Search Engine Optimisation) czynności mające na celu zoptymalizowanie strony dla wyszukiwarek internetowych. Optymalizacja taka polega głównie na zmianach w kodzie strony, usprawnieniu nawigacji, czasem także na zmianie układu strony. Cookies (ang. ciasteczka) bardzo małe pliki, która każda strona internetowa może zapisać na Twoim komputerze. Służą one do tego, by zapamiętać pewne dane pomiędzy Twoimi wizytami na danej stronie

10 Podstawowe pojęcia dotyczące stron internetowych c.d. Walidacja gotową stronę można przetestować pod kątem poprawności kodu HTML. Służy do tego narzędzie nazywane Validatorem W3C*. Hosting to usługa świadczona przez daną firmę, polegająca na wynajmie powierzchni na serwerze należącym do tej firmy lub wynajmie całego serwera należącego do tej firmy. W pierwszym przypadku mówimy o serwerze wirtualnym, a w drugim o serwerze dedykowanym.

11 Zasada działania strony statycznej Zapytanie URL SERWER Klient Nasłuchuje Port :80.html Odpowiedź w postaci plik z kodem

12 Zasada działania strony dynamicznej Zapytanie URL SERWER Klient.html Nasłuchuje Port :80 Żądanie skryptu HTML PHP Dane SQL Odpowiedź w postaci pliku z kodem Baza danych

13 Strony statyczne a dynamiczne Statyczne - niezmienna treść - użytkownicy widzą to samo Dynamiczne - treść generowana na bieżąco - różni użytkownicy widzą inną treść - udział bazy danych

14 HTML - znaczniki HTML - język opisowy oparty na tzw. znacznikach (tagach) opisujących zawartość strony internetowej. Znacznik podstawowy element składni języka HTML (ang. tag). Jest to specjalny tekst otoczony nawiasami ostrymi. Przykładowy znacznik dwuelementowy <b> Wytłuszczony tekst </b> Znacznik otwierający Zawartość opisywana przez znacznik Znacznik zamykający

15 HTML znaczniki cd. Przykładowy znacznik jednoelementowy. Pierwsza linia <br /> Druga linia Znacznik jednoelementowy nie otacza elementów na stronie (np. tekstu), a jedynie je rozdziela. <br /> - jest to znacznik końca linii Wynik działania: Pierwsza linia Druga linia

16 HTML atrybuty Działanie znacznika można rozszerzyć przypisując mu odpowiedni atrybut. Każdy atrybut posiada zakres wartości odpowiadający za zmiany wprowadzane przez znacznik. Np..: <font size= 4 > Jakiś tekst </font> Atrybut size wprowadzony w znaczniku font przyjmuje wartości od 1 do 7 i wpływa za zmianę rozmiaru czcionki.

17 HTML znaki specjalne Budowa HTML wymusiła wprowadzenie dodatkowych znaków specjalnych. Gdy chcemy użyć np. znaków < > które są częścią znacznika musimy użyć odpowiedniej struktury. Np.: Zamiast < należy wpisać &lt i zamiast > - &gt

18 HTML znaki specjalne

19 HTML komentarze Komentarz informacja która jest widoczna tylko dla jego twórcy, nie widoczna na stronie.

20 HTML polskie znaki Aby polskie znaki były widoczne na stronie, należy podczas zapisu pliku w którym znajduje się kod strony HTML, wybrać odpowiednie kodowanie.

21 Ramy dokumentu

22 Podział znaczników ze względu na funkcje Znaczniki strukturalne - opisują podstawową strukturę dokumentu - np. <head>, <body> Znaczniki formatujące - określają wygląd poszczególnych elementów - np. <b> Bold </b> Znacznik definiujący obiekt - zamieszczenie w treści strony np. obrazu, napisu - np. <img> Znacznik hipertekstowy - definiuje hiperłącze (link) do innej lokalizacji - np. <a href="strona.html > Link </a>

23 Wybór edytora kodu HTML Dokument HTML to po prostu dokument tekstowy z rozszerzeniem *.htm lub *.html Pracuj komfortowo, oszczędzaj swój czas i wzrok - edytor HTML powinien posiadać podświetlanie składni, możliwość wyboru mało kontrastowego schematu kolorów, możliwość wyboru standardu kodowania znaków w tworzonym dokumencie Wybór edytora to kwestia indywidualnych preferencji. Poniżej kilka sprawdzonych i popularnych propozycji:

24 Sekcja <head> W "głowie" strony www przechowujemy przeróżne informacje o konfiguracji strony www wykonanej w HTML. To co umieścimy w sekcji <head> zazwyczaj nie będzie wyświetlane bezpośrednio na stronie, lecz w jakiś sposób określało jej konfigurację. Najczęściej spotykane tagi w tej sekcji: Tytuł strony (<title>), Ustawienie kodowania znaków, informacje o autorze strony, języku strony (<meta>), Skrypty wykorzystane na stronie (<script>), Style użyte w dokumencie (<style>), Dodatkowe dokumenty powiązane ze stroną, np. arkusze stylów, skrypty w osobnych plikach (<link>)

25 Znaki diakrytyczne Znaki diakrytyczne (litery diakrytyzowane) są to takie litery jak: ą ć ę ł ń ó ś ź ż (oraz ich wielkie odpowiedniki), występują tylko w polskim alfabecie. Tworząc stronę internetową, należy zadbać, aby wszystkie takie znaki były na niej prawidłowo wyświetlanie. Najbardziej popularne sposoby kodowania polskich znaków to: iso , utf-8, windows-1250.

26 Deklaracja kodowania Kodowanie polskich znaków wprowadzane jest przez znacznik meta. Przykładowe kodowanie utf-8 prezentuje się następująco: <head> <meta charset="utf-8"> </head> HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=utf-8"> HTML5: <meta charset="utf-8"> Domyślne kodowanie dla html 5 to utf-8.

27 Deklaracja języka strony Deklaracja języka strony informuje przeglądarkę, w jakim języku podawane są dane umieszczone na stronie, np. w języku polskim pl, francuskim fr, włoskim it, rosyjskim ru itp. Przykład określenia języka w przeglądarce wygląda następująco: <head> </head> <meta http-equiv="content-language" content="pl">

28 Wybrane elementy meta opis strony <meta name="description" content="the... > słowa kluczowe <meta name="keywords" content= slowo1, slowo2,..."> autor <meta name="author" content="jan Nowak > prawa autorskie <meta name="copyright" content="(c)2005 Jan Nowak"> generator <meta name="generator" content="vim"> nazwa firmy <meta name="company" content="nowaksoft"> Indeksacja przez roboty <meta name="robots" content="index,follow">

29 Sekcja <body> W "ciele" strony www przechowujemy informacje bezpośrednio wyświetlane na stronie. Tekst można bezpośrednio umieścić w kodzie, bez dodatkowych oznaczeń. W samym tagu <body> można podać atrybuty opisujące np. tło strony, kolor hiperłączy (linków) czy domyślny kolor wstawionego tekstu, ale atrybuty te wycofano w HTML 4.01 (do kolorów i teł używamy współcześnie kaskadowych arkuszy styli - CSS).

30 Akapit (paragraf) tekstu Akapit stanowi blok tekstu. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczeniu treści w kolejnych akapitach strona stanie się dużo bardziej czytelniejsza. Dzięki atrybutowi align można ustalić rozmieszczenie tekstu w akapicie:

31 Blok (div) Tag div wydziela obszar na stronie, przez co możemy nadać mu jakiś rodzaj formatowania: W odróżnieniu od akapitu <p>, blok może zawierać wewnątrz siebie inne elementy niż tekst, np. obrazy. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy np. zastosować znacznik <br />) Szczegółowy wygląd bloków ustala się stosując style, zapisane w kaskadowych arkuszach styli CSS.

32 Nagłówki (h1,h2 h6) Podobnie jak nagłówki w gazetach pozwalają sformatować tytuły akapitów w sposób czytelny i logiczny. Oznaczamy je tagami: <h1></h1> do <h6> </h6>, np:

33 Rodzaj, wielkość, kolory czcionki Co prawda dziś najczęściej używa się zdefiniowanych styli w arkuszu CSS, ale język HTML również umożliwia edycję kroju, rozmiaru i koloru czcionki: Kolor może być zdefiniowany jest na kilka sposobów: szesnastkowo w postaci redgreenblue: #RRGGBB np. #FFFFFF słownie: red, blue, magenta

34 Znaczniki formatowania stylu czcionki Poniżej przedstawiono najczęściej używane znaczniki stylu czcionki: Pogrubienie tekstu (<b></b> albo <strong></strong>), Pochylenie tekstu (<i></i>), Podkreślenie tekstu (<u></u>), Styl "duży tekst" (<big></big>), Styl "mały tekst" (<small></small>), Indeks górny (), Indeks dolny (), Wyróżnienie (<em></em>), Tekst przekreślony (<del></del>).

35 Przejście do nowej linii, linia pozioma, komentarze Przejście do nowej linii (tak jakby naciśnięcie klawisza Enter): Linię poziomą możemy zdefiniować następująco: Komentarze to informacja dla nas, programistów:

36 Listy 1. Lista wypunktowana (unordered): <ul type="disc"> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> element 1 element 2 element 3 Wartości atrybutu type: disc (wypełnione kropka), circle (puste kółko), square (zamalowany kwadrat) 2. Lista numerowana (ordered): <ol type="1"> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> 1. element 1 2. element 2 3. element 3 Wartości atrybutu type określają sposób numeracji: 1 jako cyfry, A lub a jako litery duże lub małe, duża litera I lub i jako numeracja rzymska dużymi lub małymi literami Atrybut value elementu <li> określa zmianę kolejności numerowania także dla następujących po nim elementów

37 Listy cd. 3. Lista definicji: <dl> <dt>wyrażenie 1</dt> <dd>definicja wyrażenia 1</dd> <dt>wyrażenie 2</dt> <dd>definicja wyrażenia 2</dd> </dl> wyrażenie 1 definicja wyrażenia 1 wyrażenie 2 definicja wyrażenia 2 Sposoby zagnieżdżania list: <ol> <li>pozycja 1 <ul> <li>podpozycja 1.1</li> <li>podpozycja 1.2</li> </ul> </li> </ol> 1. pozycja 1 podpozycja 1.1 podpozycja 1.2

38 Obrazy Pamiętaj aby odpowiednio dobrać rodzaj pliku graficznego (zwłaszcza ze względu na rozmiar pliku i stopień kompresji). Grafikę wstawiamy w następujący sposób: Atrybut src oznacza źródło (source) pliku, czyli tak naprawdę ścieżkę do grafiki na serwerze, width i height to szerokość i wysokość grafiki na stronie (jeśli nie będzie zgadzała się z pierwotnymi wymiarami obrazu, to zostanie on przeskalowany nawet kosztem utraty jakości lub proporcji). Jeśli wymiary obrazu nie zostaną podane, przeglądarka założy oryginalny rozmiar grafiki (pobrany z liku).

39 Obrazy cd. Atrybut alt umożliwia wyświetlanie tekstu alternatywnego, widocznego po najechaniu na obrazek. Warto pamiętać aby obrazek dodawany na stronie miał już dostosowane rozmiary. Powoduje to zmniejszenie jego rozmiarów, a co za tym idzie szybsze ładowanie się strony. Wprowadzenie atrybutów width i height to dobry nawyk, który pozwala uniknąć przemieszczenia się pozostałych obiektów na stronie w przypadku kiedy obrazek z jakichś powodów nie będzie mógł być wczytany. Położeniem obrazka względem teksu możemy zarządzać stosując atrybut align (nie wspierane w HTML 5). Może on przyjmować wartości: left obrazek ustawiony po lewej stronie względem tekstu, right obrazek ustawiony po prawej stronie względem tekstu, top tekst ustawiony przy górnej części obrazka, middle tekst ustawiony w środkowej części obrazka, bottom tekst ustawiony na dole obrazka (domyślne),

40 Dodatkowe znaczniki Wprowadzone przez IE: - <marquee>tu wpisz tekst</marquee> - <bgsound src="ścieżka dostępu do pliku dźwiękowego" /> - <embed src="ścieżka dostępu do pliku" width="x" height="y" /> - <img dynsrc="ścieżka dostępu do pliku *.avi" alt="tekst alternatywny" /> - sposób uniwersalny

41 Tabele Tabela to wygodny pojemnik, który pozwala przedstawić dane w uporządkowany sposób, a często pozawala rozplanować rozmieszczenie poszczególnych elementów na stronie www Każdy nowy wiersz tabeli definiujemy przez <tr> Każde nowe pole tabeli definiujemy przez <td> Można zdefiniować nagłówek tabeli jako <th> ale nie jest to stosowane w praktyce

42 Możliwe atrybuty tagu <table>: Tabele cd.

43 Możliwe atrybuty tagu <table>: Tabele cd.

44 Możliwe atrybuty tagu <tr>: Tabele cd.

45 Możliwe atrybuty tagu <td>: Tabele cd.

46 Możliwe atrybuty tagu <td>: Tabele cd.

47 Hiperłącze (link) do innej strony Link do innej strony www (zazwyczaj podstrony) zdefiniujemy następująco: Atrybut href określa adres pliku, do którego mamy trafić z aktualnego dokumentu, title zawiera podpowiedź, jaką ujrzymy po najechaniu kursorem na link, zaś ustawienie target= _blank spowoduje otwarcie strony w nowej karcie (oknie) przeglądarki. Aby strona wczytała się w tym samym oknie (zastępując obecną stronę) należy usunąć ten atrybut. Kolory linków można określić w sekcji body lub arkuszu CSS ("vlink" to skrót od "visited link", "alink" to skrót od "active link"):