Tworzenie Stron Internetowych. odcinek 1

Transkrypt

1 Tworzenie Stron Internetowych odcinek 1

2 informacje Zajęcia odpowiedzialny: dr Sylwester Kołomaoski pracownia: wtorki 15:00 (30 godzin, 1 semestr) konsultacje: wtorki 16:30-17:30 lub inne terminy po uzgodnieniu Materiały do zajęd będą dostępne w internecie Warunki zaliczenia przygotowanie serwisu internetowego obecnośd: dopuszczalne są maks. 2 nieobecności na dwiczeniach (niewliczane są nieobecności usprawiedliwione zwolnieniem lekarskim)

3 informacje Aby uzyskad zliczenie należy utworzyd poprawnie działający serwis internetowy na dowolnie wybrany temat. Zaliczeniowy serwis internetowy powinien: składad się z co najmniej 5 plików html (strona główna + 4 podstrony) i jednego pliku css; zawierad co najmniej tekst, grafikę i odnośniki (zewnętrze, wewnętrzne); mied szablon przygotowany w css wyglądad przyjaźnie dla użytkownika i wszystkie jego elementy powinny działad (niezależnie od rodzaju przeglądarki) bez błędu przejśd przez validator html (validator.w3.org) i css (jigsaw.w3.org/css-validator) Kryteria oceny: estetyczne i funkcjonalne wykonanie (oceniane przez prowadzącego) bezbłędnośd każdej podstrony pod względem poprawności kodu HTML i CSS oceniana przez VALIDATOR

4 plan zajęć (X)HTML (extensible) HyperText Markup Language (Rozszerzalny) Hipertekstowy Język Znaczników. Obecny standard w tworzeniu stron www. Opisuje strukturę dokumentu. CSS Cascading Style Sheets Kaskadowe Arkusze Stylów. Reguły opisujące wygląd dokumentu opisanego za pomocą jakiegoś języka znaczników, np. HTML. JS (JavaScript) Skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywnośd i funkcjonalności. Podstawowe technologie wykorzystywane dla tworzenia WWW World Wide Web

5 ścieżka ewolucyjna html odnośniki pojawiają się w roku1980 (dzięki fizykom z CERN) możliwośd przeglądania dokumentów z różnych miejsc w 1990 powstaje WorldWideWeb system informacyjny oparty na hipertekście (usługa internetowa) pierwsza specyfikacja języka HTML Tags pojawia się w 1991 roku w 1995 pojawia się HTML 2.0 ostatnia specyfikacja zawierająca elementy prezentacyjne, HTML 4.01 pojawia się 1999 roku w 2000 roku HTML na bazie wersji 4.01 strict staje się standardem międzynarodowym ISO xhtml 1.0 pojawia się w 2000 roku; dostępne są trzy wersje: strict, transitional, frameset ( x pochodzi od XML - języka do reprezentowania danych w strukturalizowany sposób); w 2001 roku udostępniona zostaje wersja xhtml1.1 obowiązujący, ale nie powszechny standard do 2009 rozwijany jest xhtml2.0 specyfikacja niekompatybilna wstecz; projekt zostaje zarzucony W październiku 2014 specyfikacja (x)html5 uzyskała status rekomendacji W3C w listopadzie 2016 specyfikacja (x)html5.1 uzyskała status rekomendacji W3C Za tworzenie standardów pisania i przesyłu stron WWW odpowiada World Wide Web Consortium (W3C, Sir Timothy John "Tim" Berners-Lee

6 edytory html Dokument HTML to zwykły plik tekstowy, ale... Podział edytorów HTML: edytory plików źródłowych edytory graficzne, tzw. WYSIWYG (ang. What You See Is What You Get, czyli To Co Widzisz Jest Tym Co Otrzymasz) CMS (Content Management System) Cechy dobrego edytora (kodu): podświetlanie składni (unikanie błędów w poleceniach), automatyczne zamykanie znaczników, generatory znaczników) dobrze działające, wielopoziomowe cofanie obsługa kodowania ISO lub Unicode (poprawnie wyświetlanie polskich znaków) Przykładowe edytory HTML: Win: Pajączek, Ager Web Edytor, ked, RJ TextEd, ; Linux: Bluefish, gedit, Kate,

7 tworzenie stron www Edytor kodu źródłowego?, edytor graficzny?, CMS? Zależy od potrzeb. potrzebujesz tylko prostego serwisu internetowego do realizacji jakiegoś celu edytor graficzny chcesz zostad web-masterem kod źródłowy serwis www nie będzie często wzbogacany o nowe strony kod źródłowy/edytor graficzny chcesz pisad blog CMS chcesz administrowad swój serwis www z różnych komputerów CMS chcesz mied pełną kontrolę na wyglądem serwisu kod źródłowy/edytor graficzny twój serwis ma wielu autorów CMS serwis ma zawierad forum nie konieczne CMS CMS (zalety, wady) skupiamy się na treści, mamy łatwośd w zmianie wyglądu i funkcjonalności serwisu, możemy stworzyd społecznośd, ale większe ryzyko ataku na nasz serwis, niewygodne aktualizacje oprogramowania, błędy są widoczne na żywo, istnieją ograniczenia oprogramowania, koniecznośd robienia kopi zapasowych, większy transfer danych

8 tworzenie stron www O czy należy pamiętać: strona www ma działad i wyglądad poprawnie u innych użytkowników sieci (różne przeglądarki, sprzęt) odpowiedni dobór kolorów tła i tekstu (czytelnośd) odpowiednia (nie za duża) ilośd grafiki o dobrej jakości i nie zbyt dużym rozmiarze (szybkośd ładowania, mniejszy transfer danych) strona powinna mied ciekawy temat i czytelny, estetyczny wygląd (warto korzystad z przykładów dobrych witryn) wygodny, praktyczny, logiczny i łatwo dostępny sposób nawigacji poprawnośd ortograficzną i stylistyczną tekstu aktualizacja treści strony i usuwanie błędów; udoskonalanie strony

9 składnia Znaczniki i elementy Pliki HTML są plikami tekstowymi. Jest to tekst z dodatkiem pewnych kombinacji znaków i nazw, które przeglądarka interpretuje jako polecenia. Tym dodatkiem są: znaczniki (tagi) oznaczające różne elementy języka. Elementy to np.: akapity, nagłówki, odnośniki. Element składa się zwykle ze znacznika i zawartości. Każdy znacznik otoczony jest nawiasami ostrokątnymi (< i >). W nazwach znaczników i atrybutów należy używad tylko małych liter (xhtml). Znacznik otwierający (rozpoczynający) element zaczyna się od nazwy elementu. <znacznik> Znacznik zamykający (kooczący) element przed nazwą ma znak /. </znacznik> (prawie) każdy znacznik otwarty powinien/musi zostad zamknięty! Przykłady: element posiadający zawartośd: <znacznik>zawartośd</znacznik> pusty element: <znacznik></znacznik> lub <znacznik />

10 składnia Elementy mogą byd zagnieżdżone. Dla przykładu: <znacznika> < znacznikb>...</ znacznikb> </ znacznika > DOBRZE <znacznika> < znacznikb>...</ znacznika> </ znacznikb> ŹLE Przeplatanie znaczników jest niezalecane/niedozwolone najpóźniej otwarty element jest zamykany najwcześniej. Atrybuty Służą do określenia cech elementu. Każdy atrybut ma swoją nazwę i wartośd. Przykład: znacznik-a posiadający atrybut grupa o wartości g01: <znacznik-a grupa="g01" /> Nie można w jednym znaczniku dwa razy definiowad atrybutu o tej samej nazwie: <znacznik-a grupa="g01" grupa="g02" /> ŹLE <znacznik-a grupa="g01" grupa2="g02" /> DOBRZE

11 składnia Białe znaki Można wstawiad białe znaki (spacje, znaki tabulacji, przejścia do nowej linii) w następujących miejscach: oznacza to samo co: <znacznik atrybut = "przykładowa wartośd" > <inny-znacznik /> </znacznik> <znacznik atrybut="przykładowa wartośd"> <inny-znacznik/> </znacznik>

12 składnia Encje Encje pozwalają zapisad alternatywnie znaki takie jak np.: "<" i "&" co umożliwia ich interpretację jako zwykłych znaków, a nie jako istotnych elementów składni języka. Przyklady: Znak Encja Nazwa < < Less than (znak mniejszości) > > Greater than (znak większości) " " Quote (cudzysłów) ' &apos; Apostrophe (apostrof) & & Ampersand (znak &) Komentarze Komentarz (tekst ignorowany przez przeglądarkę) zaczyna się od <!--, a kooczy na --> Przkłady przedziwych znaczników HTML: <h1>pracownia komputerowa</h1> <p>tworzenie stron internetowych</p>

13 struktura dokumentu HTML Stałe elementy dokumentu HTML to: deklaracja, nagłówek i ciało dokumentu <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> tytuł strony </title> </head> <body> <!-- tutaj wstaw tresc strony --> </body> </html>

14 struktura dokumentu HTML Deklaracja typu dokumentu!doctype Informuje przeglądarkę, z jakiego typu plikiem ma do czynienia.!doctype nie jest znacznikiem HTML. Nagłówek: <head> Nagłówek zawiera informacje o dokumencie i plikach używanych do jego wyświetlenia. W przykładzie użyty został tylko znacznik <title> definiujący tytuł dokumentu i kodowanie znaków: <meta charset="utf-8"> <title> tytuł strony </title> Ciało dokumentu: <body> W <body> zawarta jest cała widoczna częśd dokumentu. Każdy dokument ma tylko jedno <body>.

15 struktura dokumentu HTML Przykładowa struktura prostego dokumentu HTML. Tylko jasny fragment jest wyświetlany przez przeglądarkę.

16 zawartość DOCTYPE Deklaracja <!DOCTYPE> Deklaracja ta musi znaleźd się na samym początku dokumentu HTML, przed znacznikiem <html>. Nie jest to znacznik języka HTML, ale informacją dla przeglądarki o tym w jakim języku napisany jest dokument xhtml (i HTML4) wymaga podania DTD Document Type Definition, który określa zasady języka HTML. Dokument ten jest niezbędny dla poprawnej interpretacji kodu źródłowego przez przeglądarkę. HTML5 nie wymaga podania DTD szczegóły na przykładzie deklaracji dla xhtml1.0 Strict i HTML5: główny element dokumentu Zastosowanie dokumentu, tu ogólne Identyfikator, w tym: standard ISO, nazwa autora, nazwa języka, język użyty w opisie dokumentu. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ścieżka do pliku DTD