Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Wielkość: px

Rozpocząć pokaz od strony:

Download "Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty"

Edward Czajkowski
4 lat temu
Przeglądów:

1 Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019

2 Definicja HTML HyperText Markup Language hipertekstowy język znaczników Dokument HTML plik tekstowy wykorzystujący znaczniki HTML rozszerzenie HTM lub HTML Standard HTML określa zarówno zawartość jak i wygląd dokumentu Nie jest językiem programowania (!) Aktualna wersja standardu

3 Standard HTML opisuje Strukturę dokumentu (nagłówek, treść, akapity) Wygląd dokumentu (czcionki, kolory, style itp.) Nawigację wewnątrz dokumentu oraz pomiędzy dokumentami (odnośniki, linki) Formularze do wprowadzania danych Załączniki (pliki multimedia, dokumenty itp.) 3

4 Historia rozwoju HTML 1991 pierwsza publicznie dostępna wersja formatu (szkic) standard HTML 2.0, pierwsza oficjalna wersja HTML 1997 wersja HTML 3.2 oficjalnie opublikowana przez konsorcjum W3C prace nad HTML HTML jest uznany za międzynarodowy standard ISO 2008 szkic wersji HTML wersja HTML 5 staje się oficjalnym standardem 2017 wersja HTML 5.2 (aktualna) 4

5 Przejście wewnątrz dokumentu Koncepcja hipertekstu Hypertext tekst połączony z odnośnikami umożliwiającymi nawigację [kotwica] przejście zewnętrzne [odsyłacz 1] [odsyłacz 2] Dokument (hiper)tekstowy Pomysł znany z lat 60. XX wieku 5

6 Treść vs prezentacja HTML HTML jest tekstowym formatem niezależnym od platformy Treść dokumentu HTML określa jego wygląd z dokładnością do przeglądarki HTML nie spełnia założeń WYSiWYG (ang. what you see is what you get) Treść dokumentu HTML Wygląd dokumentu HTML 6

7 Znaczniki HTML Znacznik (ang. tag) element umieszczony w ostrokątnych nawiasach Przykład: <head> - znacznik nagłówka dokumentu Znaczniki są stosowane w parach: <title> Tytuł strony WWW </title> Dla niektórych znaczników dopuszczalna jest skrócona forma zapisu (otwiera się i zamyka wewnątrz nawiasów ostrokątnych) <znacznik/> Przykład: <br/> - znacznik łamania wiersza 7

8 Atrybuty znacznika Znacznik może posiadać atrybuty Atrybut może być pojedynczą wartością lub parą nazwa="wartość" <p id="akapit" lang="pl"> <option value="2" selected> Wartości są definiowane za pomocą cudzysłowów lub apostrofów 8

9 Struktura znacznika HTML Otwierający znacznik < nazwa > Zamykający znacznik < /nazwa > Otwierający znacznik z atrybutami < nazwa atrybut = 'wartość' > Znacznik pojedynczy, atrybuty < nazwa /> (opcja) 9

10 Struktura dokumentu HTML <html> <head> Nagłówek </head> Nagłówek okna Kodowanie strony Szerokość okna etc. <body> Treść <div> Sekcja <p> Akapit </p> </div> </body> Treść widoczna w oknie przeglądarki <html> 10

11 Klasyfikacja znaczników HTML Strukturalne opisują strukturę tekstu Prezentacyjne opisują wygląd elementów w dokumencie Hipertekstowe opisują powiazania (odnośniki) pomiędzy dokumentami 11

12 Strukturalne znaczniki Określają podział tekstu dokumentu na poszczególne segmenty: Dokument HTML, nagłówek dokumentu, treść dokumentu, akapit tekstu, tabela, etc. Nie wpływają bezpośrednio na wygląd tekstu W praktyce niektóre z tych znaczników mogą mieć przypisane domyślne style, co powoduje zmianę wyglądu tekstu Realizacja obsługi zależy od przeglądarki: wygląd tego samego dokumentu może się różnić 12

13 Przykładowa hierarchia strukturalnych znaczników HTML html head body <title> <div> <table> <p> <meta> <p> <tr> <br> <script> <td> 13

14 Strukturalne znaczniki (c.d.) Znacznik <html> <head> <body> <p> <table>, <tr>, <td> <div> <h1> <h6> Opis Dokument HTML Nagłówek dokumentu HTML Treść dokumentu HTML Akapit tekstu Tabela, wiersz, komórka Sekcja Nagłówek 14

15 Prezentacyjne znaczniki Opisują wygląd dokumentu Znaczniki fizyczne jednoznacznie określają wygląd elementu niezależnie od przeglądarki Pogrubienie, Czcionka, Rozmiar, Położenie, Podkreślenie, Kolor Znaczniki logiczne określają rodzaj elementu pozostawiając decyzję o sposobie wyświetlenia przeglądarce WWW Cytowanie, Kod źródłowy, Przykłady, 15

16 Prezentacyjne fizyczne znaczniki <b> Pogrubienie </b> <i> Kursywa </i> <u> Podkreślenie </u> <font color='red' size='6'> Tekst w kolorze czerwonym </font> <p align='center'>akapit wyśrodkowany</p> 16

17 Prezentacyjne logiczne znaczniki <strong> wzmocniony </strong> <em> wyróżnienie </em> <cite> cytowanie </cite> <code> kod źródłowy programu </code> <kbd> dane z klawiatury </kbd> <samp> przykład </samp> <var> zmienna </var> 17

18 Znaki specjalne Kod znaku Wygląd znaku < < > > & & Euro etc. 18

19 Hipertekstowe znaczniki Przejścia pomiędzy dokumentami są opisywane za pomocą znacznika <a> Atrybut name oznacza kotwicę w tekście tj. miejsce docelowe skoku <a name='spis_tresci'/> Spis treści </a> Atrybut href oznacza link prowadzący do określonej lokalizacji (kotwica, plik docelowy, załącznik) <a href='plik.html#spis_tresci'>wróć</a> <a href='index.html'> Strona główna </a> <a href='artykul.html#publikacje'> Literatura</a> <a href='artykul.pdf'>pobierz</a> 19

20 Graficzne załączniki (obrazki) Obrazki graficzne są dodawane do dokumentu HTML w postaci załączników Znacznik <img> z atrybutami opcjonalnymi width, height Obrazek może być elementem aktywnym w połączeniu ze znacznikiem <a> Format obsługiwanych plików graficznych zależy od przeglądarki <img src="logo.gif" alt="logo firmy" height="50" width="60"/> 20

21 Inne obiekty W dokumencie HTML można osadzić dowolny obiekt aktywny, który może być odtworzony na stronie WWW pod warunkiem posiadania przez użytkownika odpowiedniej przeglądarki <object width="400" height="400" data="witam.swf"> </object> 21

22 Tabele Tabela jest definiowana za pomocą znacznika <table> Dodanie wierszy do tabeli odbywa się za pomocą deklaracji znacznika wiersza <tr> Każdy wiersz tabeli składa się z określonej liczby komórek definiowanych z użyciem znacznika <td> Komórka może łączyć sąsiadujące kolumny (atrybut colspan=' ' znacznika <td>) lub wiersze (atrybut rowspan=' ' znacznika <td>) 22

23 Tabela HTML (przykład) 23

24 Komentarze W celu wyłączenia (ignorowania przez przeglądarkę) fragmentu kodu HTML należy posłużyć się znacznikami  24

25 Formularze HTML Formularz (ang. Form) jest elementem interfejsu użytkownika realizującym funkcję wprowadzania danych w celu przekazania ich na serwer Z punktu widzenia języka HTML formularz jest kontenerem dla logicznie powiązanych elementów sterowania (kontrolek), opisanych szczegółowo dalej 25

26 Deklaracja formularza <form action="docelowy adres URL na serwerze" method="metoda HTTP przekazywania danych"> <! komponenty --> <! przycisk [wyślij] --> <! przycisk [resetuj] --> </form> 26

27 Podstawowe elementy formularza 27

28 Komponenty formularza HTML Elementy do wprowadzania danych <input type="rodzaj komponentu".> Przycisk [Wyślij] <input type="submit"/> Przycisk [Resetuj] <input type="reset"/> 28

29 Rodzaje komponentów <input> ELEMENT text radio select checkbox button value pole tekstowe ATRYBUTY name nazwa grupy tworzonej przez wszystkie radio checked czy zaznaczony (true/false) value wartość value wybranego pola <option> checked czy zaznaczony (true/false) value tekst wyświetlany na przycisku 29

30 Komponent Text (pole tekstowe) Komponent <input> typu text przekazuje wartość poprzez właściwość value typu string 30

31 Komponent Radio (przełącznik) Komponenty <input> typu radio stosowane są w grupach Wszystkie komponenty radio o identycznej wartości atrybutu name stanowią jedna grupę Na serwer zostanie przekazana nazwa grupy name oraz wartość value wybranego komponentu 31

32 Komponent Select (lista rozwijana) Komponent typu <select> służy do wybrania jednej spośród wielu opcji z listy Elementy listy są deklarowane za pomocą znacznika <option> Na serwer jest przekazywana wartość atrybutu value 32

33 Komponent Checkbox (pole opcji) Komponent <input> typu checkbox realizuje pojedynczą opcję wyboru Stan opcji: wybrana (checked) lub nie Jeśli opcja została wybrana, na serwer przekazuje się atrybut id lub name komponentu wraz z wartością on 33

34 Komponent Button (przycisk) Komponent <input> typu button realizuje funkcjonalność przycisku Napis jest ustawiany za pomocą atrybutu value Przycisk typu submit odsyła dane formularza na serwer Przycisk typu reset czyści dane formularza 34

35 Przekazywanie danych na serwer <form action="/login" method="get"> Jan <input type="text" name="imie"/> Wyślij <submit> 35

Podobne dokumenty

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony