Systemy internetowe HTML West Pomeranian University of Technology, Szczecin; Faculty of Computer Science
Kwestie organizacyjne Obecność na wykładach nieobowiązkowa Obecność na laboratoriach obowiązkowa Prezentacje tak, Literatura obca niekoniecznie Zaliczenie wykład 10 pytań testowych otwartych Zaliczenie laboratoria strona internetowa
Zawartość przedmiotu Wykład 1 3 HTML +CSS Wykład 4 5 PHP + MYSQL Wykład 6 7 Architektura Internetu
Język znaczników Język znaczników (markup language) to język pozwalający na stworzenie dokumentu tekstowego, który obok tekstu zawiera dodatkowe informacje opisujące tekst: informacje formatujące wygląd fragmentów tekstu, informacje na temat znaczenia tekstu. Dodatkowe informacje są wyrażane poprzez wplecione w tekst znaczniki.
HTML HTML - Hypertext Markup Language HTML 4.01 XHTML 1.0 HTML 5 (XHTML 5), HTML 5 nowości: nowe znaczniki, typy wejść, atrybuty elementów formularzy; obsługa błędów
Struktura dokumentu Nagłówek dokumentu (head): znaczniki <head>... </head>, zawiera metadane opisujące dokument. Ciało dokumentu (body): znaczniki <body>... </body>, zawiera treść dokumentu. deklaracja <html...> <head>... </head> <body>... </body> </html> Nagłówek i ciało są otoczone znacznikami <html>... </html>. Przed <html> trzeba podać deklarację typu dokumentu (doctype).
deklaracja <html...> <head>... </head> <body>... </body> </html>
DTD DTD (document type definition) definiuje formalną strukturę dokumentu XML, HTML, XHML. DTD to dokument zawierający w sobie informacje na temat: każdego dopuszczalnego elementu, zbioru atrybutów każdego elementu, dopuszczalnych wartości atrybutów, sposobu zagnieżdżania elementów, wymagalności elementów i atrybutów,...
Deklaracja typu dokumentu (HTML 4.01) Strict DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/html4/loose.dtd"> Frameset DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd">
Deklaracja typu dokumentu (XHTML i HTML 5) XHTML 1.0 głównie Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl"> HTML 5 <!DOCTYPE HTML> lub <!doctype html>
deklaracja <html...> <head>... </head> <body>... </body> </html>
Nagłówek dokumentu Każdy dokument powinien zawierać przynajmniej: deklarację strony kodowej (ISO-8859-2, UTF-8), słowa kluczowe, opis strony, Tytuł strony. <meta http-equiv="content-type" content="text/html; charset=utf-8 /> <meta name="description" content= "opis strony" /> <meta name="keywords" content="wyraz1, wyraz2,..." /> <title> Tytuł strony </title>
deklaracja <html...> <head>... </head> <body>... </body> </html>
Znaczniki <body>, <html>, <meta>, <title> Znacznik jest otoczony ostrymi nawiasami "<" i ">". Większość znaczników występuje w parach (znacznik otwierający i znacznik zamykający). <title> </title> Znaczniki mogą posiadać dodatkowe atrybuty (i przypisane im wartości). <meta name="description" content= "opis strony" /> W HTML wielkość liter znaczników i ich atrybutów nie ma znaczenia (w XHTML znaczniki i ich atrybuty muszą być pisane małymi literami).
Znaczniki formatujące Dwie grupy znaczników do formatowania znaków: znaczniki formatujące fizyczne (znaczniki formatujące), znaczniki formatujące logiczne (znaczniki semantyczne). Znaczniki formatujące: autor dokumentu narzuca wygląd tekstu, nie odnoszą się one do znaczenia tekstu, przykłady: <b>, <i>, <u>, użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określony wygląd, aktualnie nie znaczniki tylko STYLE CSS.
Znaczniki semantyczne (1) Wskazują, że dany fragment tekstu powinien być traktowany odmiennie. Decyzję o sposobie wyróżnienia tekstu podejmuje program klienta HTTP. Przykłady: <h1>, <strong>, <em>, <code>.. Nie ma pewności, w jaki sposób tekst zostanie wyświetlony na ekranie.
Znaczniki semantyczne (2) Najważniejszy nie jest sposób formatowania, ale informacje jakie znaczniki te ze sobą niosą. Syntezatory mowy algorytmy odczytujące treść stron WWW na głos; osoby niewidome. Roboty wyszukiwarek sieciowych. Aby serwis WWW mógł być popularny, konieczne aby treść była przyjazna dla robotów wyszukiwarek. <h1> Tekst nagłówka </h1> <p style="font-size:xx-large"> Tekst nagłówka</p>
Łącznik hipertekstowy <a href="plik"> tekst odsyłacza </a> Może prowadzić do: początku innego dokumentu HTML, kotwicy wewnątrz tego samego dokumentu HTML, kotwicy wewnątrz innego dokumentu HTML. <a href="adres pliku"> tekst </a> <a href="#nazwa_etykiety"> tekst </a> <a href="adres pliku#nazwa_etykiety"> tekst </a> <a name="nazwa_etykiety"> tekst etykiety </a> <a href="adres strony"> <img src="adres pliku" /> </a>
Ścieżka dostępu Inny serwis internetowy - pełen adres URL. Ten sam serwis internetowy: ścieżka powinna zostać podana w postaci względnej, podanie pełnego adresu URL dokumentu, wydłuża definicję odwołania, ogranicza elastyczność strony. Przykłady (z pliku plikb): plikc KAT111/plikA../plikE../KAT12/plikD KAT1 KAT11 KAT111 plika plikb plikc KAT12 PlikD plike
Załączniki graficzne Każdy załącznik graficzny jest odrębnym plikiem. Znacznik <img> z atrybutem src (URL pliku graficznego). Atrybuty width i height (piksele lub % ekranu). Atrybut alt komentarz; jest wyświetlany: przez znakowych klientów HTTP, jako podpowiedź, jeżeli załadowanie pliku graficznego nie jest możliwe. <img src="obrazki/ola.jpg" width="150" height="150" alt="komentarz"/>
Listy Stworzenie listy wyliczanej znaczniki: <ul> - stworzenie listy <li> - wstawienie punktu na listę. numerowanej znaczniki <ol> i <li> <ul type="circle" style="color: red"> <li> Pierwszy element listy </li> <li> Drugi element listy </li> </ul> <ol type="a" start="3" style="color:blue"> <li> Pierwszy element listy </li> <li> Drugi element listy </li> <li> Trzeci element listy </li> </ol>
Tabele Prezentacja danych liczbowych. Znaczniki: <table> - definiuje tabelę <tr> - definiuje zawartość wierszy tabeli <th> i <td> - definiują komórki tabeli <caption> - wstawienie tytułu tabeli (po <table>), Komórki w tabeli mogą być dowolnie łączone: w pionie atrybut colspan = x znaczników <th> i <td> i poziomie atrybut rowspan = x znaczników <th> i <td>
Tabele - przykład <table style= "border-top: thick double gray; "> <caption> Oto tabela </caption > <tr> <th>numer</th> <th>ilość</th> <th>wartość</th> </tr> <tr> <td>1</td> <td>1</td> <td>8000</td> </tr> <tr> <td>1</td> <td>1</td> <td>6000</td> </tr> <tr> <td>3</td> <td>7</td> <td>5500</td> </tr> </table>
Formularze
Formularze - walidacja Trzystopniowy proces walidacji: ograniczenia HTML: odpowiednie kontrolki listy wyboru poprawność formatu danych JS: odpowiedni format pola wymagane spójność danych serwer (np. PHP): nowe dane contra poprzednie dane
Formularze <form>... </form> - ramy formularza. atrybut action="..." np. adres skryptu, adres mailowy atrybut method - metoda żądania HTTP (GET, POST) Zagnieżdżanie niedozwolone! Skrypty serwerowe przetworzenie danych i zapis do bazy/pliku. Skrypty klienckie: przetworzenie i/lub walidacja danych przed wysłaniem przetworzenie i prezentacja użytkownikowi.
Znacznik <input> Pozwala na wstawienie pola: tekstowego, wyboru, opcji... atrybut type rodzaj pola np.: text, password, checkbox,... atrybut name - nazwa pola atrybut id - id pola atrybut tabindex= n atrybut accesskey= klawisz Pole tekstowe: <input type= text > value= tekst, readonly= readonly, disabled= disabled Pole hasła: <input type= password >
Pole wyboru i pole opcji Pole wyboru: <input type= checkbox > checked= checked, disabled znacznik <label> - definicja etykiety <label for="check"> wybór </label> <input type="checkbox" id="check" name="check"/> Pole opcji: <input type= radio > atrybut name taki sam dla wszystkich pól!!! atrybut value wymagany i wymagany różny
Przyciski i wybór pliku Przycisk zwykły: <input type= button > Wyślij: <input type= submit >, Wyczyść: <input type= reset >; <form onreset="if (!confirm( Na pewno??')) return false"> Zdarzenie onclick. Pole wyboru pliku: <input type= file > size= k ; disabled; accept= lista typów *.html text/html HyperText Markup Language *.jpg image/jpeg JPEG *.doc application/msword MS Word Document
Pole ukryte, przyciski i lista Pole ukryte: <input type= hidden > niewidoczne i niedostępne wartość atrybutu value jest przesyłana z formularzem Pole przycisku: <button type="button > treść </button> button, submit i reset Lista rozwijalna: <select>... </select >: znacznik <option>... </option> wprowadza pozycję <select> atrybuty: multiple; size= k ; disabled. <option> atrybuty: selected= selected ; value= wartość.
Lista cd., obszar tekstowy <select name="nazwa"> <option> Cytryna </option> <optgroup label="sprzęty"> <option> Stół </option> <option> Krzesło</option> </optgroup></select> Obszar tekstowy: <textarea>... </textarea> atrybuty cols i rows liczba wierszy i kolumn bez przewijania. <fieldset> - otoczenie ramką wybranych pól, <legend >- przypisanie tytułu do takiej grupy pól,
<!doctype html> <html> <body> <h2>podaj 2 liczby:</h2> <form action="mnoz.php" method="post"> Liczba 1: <input type="text" name="l1"> <br/> Liczba 2: <input type="text" name ="l2"> <br/> <input type ='submit' name="wynik" value='wynik'> </form> </body> </html>
Dziękuję za uwagę West Pomeranian University of Technology, Szczecin; Faculty of Computer Science