Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II

Transkrypt

1 SIECI KOPMPUTEROWE I TECHNOLOGIE INTERNETOWE (SKiTI) Wykład 11 Wprowadzenie do (X)HTML Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II Opracowanie: dr inż. Tomasz Rutkowski Katedra Inżynierii Systemów Sterowania SKiTI

2 Plan Wykładu Część I 1. Podstawowe technologie dla potrzeb WWW - przegląd technologii Generacji - przegląd technologii Prezentacji Część II 1. Trochę historii o: SGML, HTML, XHTML 2. Konsorcjum W3C 3. Podstawowe zasady (X)HTML 4. Przykładowa struktura szablonu strony (X)HTML 5. Podstawowe znaczniki (X)HTML SKiTI

3 Część I - technologie dla potrzeb WWW - SKiTI

4 Technologie WWW Podstawowe grupy technologii WWW: Generacji (ang. Server-Side) SKiTI 2015 dynamiczne tworzenie, generowanie przez serwer zawartości strony WWW w zależności od różnych czynników, m.in. wymagań użytkownika (proces generacji odbywa się po stronie serwera) Prezentacji (ang. Client-Side) przedstawienie wygenerowanej przez serwer treści strony WWW w zrozumiałej, logicznej i atrakcyjnej dla użytkownika postaci (proces prezentacji odbywa się po stronie klienta przeglądarka internetowa)

5 Technologie Server-Side Side Przykłady technologii generacji: CGI (ang. Common Gateway Interface) SSI (ang. Server Side Include) ASP (ang. Active Server Pages) ISAPI (ang. Internet Server API) / NSAPI (ang. Netscape Server API) PHP (ang. Personal Home Page) JSP (ang. Java Server Pages) Servlety Serwery aplikacji SKiTI 2015

6 Technologie Client-Side Przykłady technologii prezentacji: (X)HTML CSS (ang. Cascade Style Sheet) JavaScript, JScript, VBScript Aplety Javy Shockwave, Flash AJAX (ang. Asynchronous JavaScript and XML) X3D WML (ang. Wireless Markup Language) RSS (ang. Really Simple Syndication ) / Atom SKiTI 2015

7 Testowanie technologii - Server-Side Side i Client-Side - Przykładowa platforma potrzebna do testów w domowym zaciszu : Komputer PC OS: Windows, Linux lub Mac OS X Przeglądarkę lub przeglądarki internetowe np.: XAMPP, który jest jedną z popularniejszych i wzbogaconych dystrybucji serwera Apache. XAMPP oferuje między innymi: Apache, MySQL, PHP + PEAR, Perl, FileZilla FTP Server, phpmyadmin, OpenSSL, SKiTI 2015

8 Część II - (X)HTML - SKiTI

9 Trochę Historii Historia SGML / HTML / XHTML Dawno, dawno temu W latach 80 dwudziestego wieku wykorzystywano język SGML (ang. Standard Generalized Markup Languag) - Standardowy Uogólniony Język Znaczników SGML jest językiem służącym do definiowania języków znacznikowych, zwłaszcza tych używanych w elektronicznej wymianie dokumentów, zarządzaniu dokumentami i ich publikowaniu. W 1986 roku uznano go jako międzynarodowy standard SGML posiada szeroki zasób możliwości i jednocześnie jest elastyczny Owa elastyczność ma swą cenę, którą jest wysoki stopień złożoności, który zahamował jego wprowadzenie w różne środowiska, m.in. w sieć WWW SKiTI

10 Trochę Historii Historia SGML / HTML / XHTML W 1990 roku Na bazie SGML powstaje HTML (ang. HyperText Markup Language) - Hipertekstowy Język Znaczników,, opracowany przez Tima Berners-Lee i Daniela W. Connolly Początkowo HTML miał być językiem służącym do wymiany dokumentów naukowych i technicznych, odpowiednim do używania przez specjalistów HTML rozwiązał problem złożoności SGML poprzez zdefiniowanie niewielkiego zestawu strukturalnych i semantycznych znaczników (tagów) nadającego się do tworzenia względnie prostych dokumentów W krótkim czasie HTML stał się bardzo popularny i szybko wykroczył poza swój pierwotny cel Od 1990 do 1997 roku Powstają kolejne wersje języka HTML, w których pojawiają się nowe elementy przeznaczone dla tego języka W 1997 roku pojawia się wersja HTML 4.0 W 1999 roku pojawia się ostatnia poprawka do wersji HTML 4.01 Wielość nowych elementów języka HTML doprowadziła do pojawiania się problemów ze wzajemnym współdziałaniem dokumentów na różnych platformach I co dalej? SKiTI

11 Trochę Historii Historia SGML / HTML / XHTML W 2000 roku Na bazie SGML powstaje XML (ang. Extensible Markup Language ) - Rozszerzalny Język Znaczników XML był pomyślany jako sposób na odzyskanie możliwości i elastyczności SGML bez jego dużej złożoności XML jest ograniczoną formą SGML XML zachowuje większość z bogatych możliwości SGML przy czym usuwa wiele z jego bardziej złożonych właściwości SGML Następuje przeformułowanie HTML 4 w XML 1.0, powstaje XHTML 1.0 XHTML (ang. Extensible HyperText Markup Language) - Rozszerzalny Hipertekstowy Język Znaczników jest następcą języka HTML XHTML to rodzina obecnych i przyszłych typów dokumentów i modułów, które kopiują i rozszerzają HTML 4 XHTML w porównaniu do HTML wprowadza pewne obostrzenia, które pozwalają dostosować składnię do języka XML W 2001 roku powstaje XHTML 1.1 i co dalej? SKiTI

12 World Wide Web Consortium (W3C) World Wide Web Consortium (W3C) W3C to organizacja, która zajmuje się ustanawianiem standardów pisania i przesyłu stron WWW W3C jest obecnie zrzeszeniem ponad 400 organizacji, firm, agencji rządowych i uczelni z całego świata Publikowane przez W3C rekomendacje nie mają mocy prawnej, nakazującej ich użycie, lecz wpływ samej organizacji nie pozwala się z nimi nie liczyć Link konsorcjum W3C: SKiTI

13 Trochę Historii I co dalej? Do końca roku 2009 trwały pracę grupy W3C związane z XHTML 2 (całkowicie zrywa z kompatybilnością wstecz -> HTML), obecnie są one zarzucone Niezależnie od organizacji W3C grupa WHATWG (ang. Web Hypertext Application Technology Working Group) zrzeszająca środowiska i producentów przeglądarek zaczęła pracę nad HTML 5.0 i wspólnie z W3C (od 2007) opracowuje pierwszy draft HTML 5.0 (2008 rok) Planowano że HTML 5.0 w 2022 roku będzie miał pełną implementację (bez błędów) w co najmniej dwóch przeglądarkach internetowych HTML 4 wciąż na to czeka ;) Od października 2014 HTML 5.0 uzyskał status rekomendacji W3C Na 2016 zapowiedziano standard HTML 5.1 i szkic standardu HTML 5.2. Różnice pomiędzy HTML 4 a 5: SKiTI

14 (X)HTML SKiTI

15 Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " xmlns=" xml:lang="pl"> <head> <meta http-equiv= equiv="content-type" content="text/html; charset=iso " /> <meta name="description "Description" content= Tu opis zawartości strony" /> <meta name="keywords" content= Tu wyrazy kluczowe" /> <meta name="author" content= Tu dane autora strony" /> <title>tu tytuł strony</title title> </head> <body> Tu treść strony </body > </html> SKiTI

16 Szablon strony (X)HTML w przeglądarce SKiTI

17 Podstawowe zasady (X)HTML Język (X)HTML składa się ze znaczników (tzw. tagów), które zapisywane są w nawiasach klamrowych <> Do każdego z tagów zwykle można podać pewne atrybuty (inaczej parametry, nie zawsze jest to jednak konieczne, bądź możliwe) Atrybut może posiadać także przypisaną pewną wartość, bądź występować samodzielnie - wtedy określa on pewne cechy danego znacznika Tagi nie są widoczne na ekranie, widoczne są tylko efekty ich działania Większość tagów wymaga także zamknięcia przy użyciu taga o identycznej nazwie jak tag otwierający, jednak poprzedzonej znakiem "/ Tagi zamykające nigdy nie posiadają parametrów <b title= tytul > Tekst pogrubiony </b> SKiTI

18 Podstawowe zasady (X)HTML Nazwy tagów oraz parametrów i ich wartości mogą być pisane dużymi, jak i małymi literami. Zaleca się jednak pisanie ich wyłącznie małymi literami, ze względu na wymogi języka XHTML Wartości poszczególnych parametrów zaleca się obejmowaniem cudzysłowami - wymogi XHTML Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania ma znaczenie (przy jej zmianie wynikowy dokument wyświetlony przez przeglądarkę jest zwykle inny) Przy umieszczaniu tagów zamykających (rozpoczynających się od "/")") należy pilnować kolejności w jakiej były otwierane, i zamykać je w odwrotnej kolejności (poczynając od najbardziej zagnieżdzonego) - wymogi XHTML <b title= tytul_g > Tekst <i title= tytul_i > pogrubiony i pochylony</i>< ></b> SKiTI

19 Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " transitional.dtd"> <html xmlns=" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso " /> <meta name="description" content= Tu opis zawartości strony" /> <meta name="keywords" content= Tu wyrazy kluczowe" /> <meta name="author" content= Tu dane autora strony" /> <title>tu tytuł strony</title title> </head> <body> Tu treść strony </body > </html> SKiTI

20 Deklaracja typu dokumentu- DTD <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " DTD (ang. Document Type Declaration), określa która wersja języka (X)HTML i w jakim zakresie będzie wykorzystywana na stronie, w tym przypadku Transitional (przejściowa), co zagwarantuje, że strona używająca znaczników i atrybutów zdeprecjonowanych (nie zalecanych) zawsze będzie poprawna pod względem zgodności ze standardem HTML Deklarację typu dokumentu DTD należy wpisać jako pierwszą linijkę w dokumencie - jeszcze przed znacznikiem otwierającym <html> Podanie adresu wersji DTD, pozwala przeglądarce pobrać wersję DTD oraz wszystkie potrzebne zestawy znaków SKiTI

21 Inne przykłady DTD Ścisła deklaracja dokumentu (ang. Strict DTD ) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane oraz nie pojawiają się w dokumentach z ramkami <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Deklaracja dokumentu dla ramek (ang. Frameset DTD) zawiera wszystko co w Transitional DTD plus elementy odnoszące się do ramek <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " SKiTI

22 Inne przykłady DTD Ścisła (jedyna) deklaracja dokumentu XHTML 1.1 (obecnie zalecana) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Przykłady deklaracji dokumentu HTML5 <!DOCTYPE html > <!DOCTYPE html SYSTEM about:legacy-comat > Przykładowa deklaracja dokumentu XHTML5 <?xml version= 1.0 encoding=utf-8 > SKiTI

23 Przykładowa struktura szablonu strony HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " transitional.dtd"> <html xmlns=" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso " /> <meta name="description" content= Tu opis zawartości strony" /> <meta name="keywords" content= Tu wyrazy kluczowe" /> <meta name="author" content= Tu dane autora strony" /> <title>tu tytuł strony</title title> </head> <body> Tu treść strony </body > </html> SKiTI

24 Sekcja: <html> </html>... <html xmlns=" xml:lang="pl" >... </html > Element <html html> definiuje początek dokumentu HTML Atrybut xmlns definiuje przestrzeń nazw dla języka XML Atrybut xml:lang definiuje język dla zawartości elementu Element </html> powinien znaleźć się na końcu dokumentu HTML SKiTI

25 Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso " /> <meta name="description" content= Tu opis zawartości strony" /> <meta name="keywords" content= Tu wyrazy kluczowe" /> <meta name="author" content= Tu dane autora strony" /> <title>tu tytuł strony</title title> </head> <body> Tu treść strony </body > </html> SKiTI

26 Sekcja: <head> </head>... <head>... </head >... Sekcja tzw. nagłówka dokumentu Wewnątrz części nagłówkowej można określić ogólne informacje o dokumencie oraz jego zawartości (tag <meta />), między innymi stronę kodową, opis zawartości strony, słowa kluczowe związane ze stroną i jej autora Oraz tytuł dokumentu, pomiędzy tagami: <title> </ title > SKiTI

27 Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " transitional.dtd"> <html xmlns=" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso " /> <meta name="description" content= Tu opis zawartości strony" /> <meta name="keywords" content= Tu wyrazy kluczowe" /> <meta name="author" content= Tu dane autora strony" /> <title>tu tytuł strony</title title> </head> <body> Tu treść strony </body > </html> SKiTI

28 Sekcja: <body> </body> <body> Tu treść strony </body > Sekcja tzw. ciała dokumentu W tej części dokumentu można dzielić tekst na akapity, tworzyć tytuły spisy, określać łącza do innych dokumentów itp.. SKiTI

29 Akapit Podstawowe zabawy z tekstem jest to część tekstu objęta znacznikami: <p>...</ >...</p> Przykłady, wyrównanie w lewo (domyślne), w prawo, do środka oraz justowanie tekstu <p align="left">......</ </p> <p align="right ">...</ </p> <p align="center">......</ </p> <p align="justify ">...</ </p> SKiTI

30 Tytuł Podstawowe zabawy z tekstem Stosowany aby nadać tytuł (nagłówek) jakiejś części tekstu (rozdziałowi) Tytuł, w zależności od wielkości czcionki obejmuje się znacznikami: od <h1 h1>...</ >...</h1 h1> do <h6 h6>...</ >...</h6 h6> Przykłady, bardzo duży tytuł oraz tytuł normalnej wielkości (ale pogrubiony) <h1> Bardzo duży tytuł </h1> <h6> Tytuł normalnej wielkości </h6> SKiTI

31 Podstawowe zabawy z tekstem Przejście do nowego wiersza <br> Podkreślenie wybranego tekstu <u> tekst do podkreślenia </u> Pogrubienie wybranego tekstu <b> tekst do pogrubienia </b> Pochylenie wybranego tekstu <i> tekst do pochylenia </i> SKiTI

32 Podstawowe zabawy z tekstem Indeks dolny _... Podkreślenie wybranego tekstu ^... Wielkość czcionki, gdzie "n"" oznacza wielkość pisma <font size="n"> ">...</ </font> Kolor czcionki <font color="kolor"> ">...</ </font> (1 - najmniejsza, 7 - największa, 3 - domyślna) SKiTI

33 Odsyłacze Odsyłacze To inaczej hiperłącza, odnośniki hipertekstowe, linki Są wykorzystywane głównie do: Tworzenie spisu treści serwisu Linki do innych ciekawych miejsc w Internecie <a href="względna ścieżka dostępu"> opis </a> <a href="..index.html"> Strona główna </a> Otwarcie linku w nowym oknie: <a target="_blank" href=" ">Start</ </a> SKiTI

34 Listy (wykazy) Listy (wykazy) Typowo wykorzystywane do sporządzania usystematyzowanych zestawień informacji w postaci wyszczególnionych punktów (<li> </li>) : nieuporządkowanych (nienumerowanych) <ul <ul> <li> Pierwszy element listy nieuporządkowanej</li /li> <li> Drugi element listy nieuporządkowanej</li> </ul> lub uporządkowanych (numerowanych) <ol <ol> <li> Pierwszy element listy uporządkowanej</li> <li> Drugi element listy uporządkowanej</li> </ol> ul> </ul /ul> ol> </ol> SKiTI

35 Tabele Struktura tabeli <table border= "1" width="100%" > <tr> </tr tr> <tr> </tr> <td>komórka1</ </td> <td>komórka2</ </td> <td>komórka3</ </td> <td>komórka4</ </td> </table> Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki) Tabela zajmie 100% szerokości przeglądarki minus marginesy Znaczniki wierszy <tr>......</ </tr>, znaczniki kolumn <td>......</ </td> SKiTI

36 Tabele SKiTI

37 Atrybuty colspan i rowspan <table border= "1" width="100%" > <tr> </tr> <tr> Tabele <td colspan="2">komórki1,2</td> </tr> <td>komórka3</td> <td>komórka4</td> </table> Atrybut colspan colspan pozwala na poziome łączenie x komórek w tabeli (w tym przypadku 2), dzięki czemu jedna połączona komórka może się rozciągać na kilka komórek pojedynczych SKiTI

38 Tabele SKiTI

39 Atrybuty colspan i rowspan <table border= "1" width="100%" > <tr> </tr> <tr> Tabele <td rowspan="2">komórki1,3</td> <td>komórka2</td> </tr> <td>komórka4</td> </table> Atrybut rowspan rowspan pozwala na pionowe łączenie x komórek w tabeli (w tym przypadku 2), dzięki czemu jedna połączona komórka może się rozciągać na kilka komórek pojedynczych SKiTI

40 Tabele SKiTI

41 Tabele przykład wykorzystania SKiTI

42 Obrazek Wstawianie obrazka do dokumentu: <img src="ścieżka dostępu" " alt="tekst alternatywny" width="x" " height="y" " /> ścieżka dostępu wskazuje lokalizację obrazka na dysku, może być ścieżką względną lub ścieżką bezezględną Tekst alternatywny oznacza krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony x szerokość obrazka y wysokość obrazka <img src="..logo.jpg" " alt= Logo firmy" " width="100" " height="100" " /> SKiTI

43 Wybrane z wielu innych Pozioma linia np. do rozdzielania tekstu <hr /> Komentarz np. do opisywania fragmentów kodu (X)HTML (tekst objęty w znaczniki komentarza nie jest wyświetlany przez przeglądarkę internetową) <!-- tekst komentarza --> SKiTI

44 Czym jest walidator? Walidator jest to program sprawdzający poprawność dokumentu o określonej składni np.: HTML, XHTML, CSS, RSS Walidator języków znacznikowych (HTML, XHTML, ): Walidator CSS i dokumentów (X)HTML z CSS: SKiTI

45 Zadanie domowe Wykorzystując ogólnodostępne materiały w Internecie zapoznać się z podstawowymi znacznikami (tagami) (X)HTML oraz ich atrybutami SKiTI 2015

46 Bibliografia Przykładowa Literatura: Konsorcjum W3C: Specyfikacja HTML: SKiTI Specyfikacja XHTML: Walidator języków znacznikowych (HTML, XHTML, ): Walidator CSS i dokumentów (X)HTML z CSS: Linki do różnych kursów (X)HTML na internetowej stronie przedmiotu (zakładka: Literatura) 46

47 Dziękuję za uwagę!!! SKiTI