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 2015 1
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 2015 2
Część I - technologie dla potrzeb WWW - SKiTI 2015 3
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)
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
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
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
Część II - (X)HTML - SKiTI 2015 8
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 2015 9
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 2015 10
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 2015 11
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: http://www.w3.org SKiTI 2015 12
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: http://www.w3.org/tr/html5-diff/ SKiTI 2015 13
(X)HTML SKiTI 2015 14
Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"><htmlhtml xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> <head> <meta http-equiv= equiv="content-type" content="text/html; charset=iso-8859-2" /> <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 2015 15
Szablon strony (X)HTML w przeglądarce SKiTI 2015 16
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 2015 17
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 2015 18
Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso-8859-2" /> <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 2015 19
Deklaracja typu dokumentu- DTD <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 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 2015 20
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" "http://www.w3.org/tr/html4/strict.dtd"> 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" "http://www.w3.org/tr/html4/frameset.dtd"> SKiTI 2015 21
Inne przykłady DTD Ścisła (jedyna) deklaracja dokumentu XHTML 1.1 (obecnie zalecana) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 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 2015 22
Przykładowa struktura szablonu strony HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso-8859-2" /> <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 2015 23
Sekcja: <html> </html>... <html xmlns="http://www.w3.org/1999/xhtml" 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 2015 24
Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso-8859-2" /> <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 2015 25
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 2015 26
Przykładowa struktura szablonu strony (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" > <head> <meta http-equiv="content-type" content="text/html; charset=iso =iso-8859-2" /> <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 2015 27
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 2015 28
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 2015 29
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 2015 30
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 2015 31
Podstawowe zabawy z tekstem Indeks dolny <sub>... </sub> Podkreślenie wybranego tekstu <sup>... </sup> 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 2015 32
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="www.firma.com.pl"> ">Start</ </a> SKiTI 2015 33
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 2015 34
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 2015 35
Tabele SKiTI 2015 36
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 2015 37
Tabele SKiTI 2015 38
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 2015 39
Tabele SKiTI 2015 40
Tabele przykład wykorzystania SKiTI 2015 41
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 2015 42
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 2015 43
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, ): http://validator.w3.org/ Walidator CSS i dokumentów (X)HTML z CSS: http://jigsaw.w3.org/css-validator/ SKiTI 2015 44
Zadanie domowe Wykorzystując ogólnodostępne materiały w Internecie zapoznać się z podstawowymi znacznikami (tagami) (X)HTML oraz ich atrybutami SKiTI 2015
Bibliografia Przykładowa Literatura: Konsorcjum W3C: http://www.w3.org Specyfikacja HTML: SKiTI 2015 http://www.w3.org/tr/html4/ Specyfikacja XHTML: http://www.w3.org/tr/xhtml1/ Walidator języków znacznikowych (HTML, XHTML, ): http://validator.w3.org/ Walidator CSS i dokumentów (X)HTML z CSS: http://jigsaw.w3.org/css-validator/ Linki do różnych kursów (X)HTML na internetowej stronie przedmiotu (zakładka: Literatura) 46
Dziękuję za uwagę!!! SKiTI 2015 47