Język HTML.

Prezentacja na temat: "Język HTML."— Zapis prezentacji:

1 Język HTML

2 Podstawowe problemy w przetwarzaniu informacji
Jak zapisywać informację w sieci Internet, Jak ją przetwarzać, Jak wprowadzać dane, Odpowiedź - obecnie strony WWW, język HTML.

3 Języki opisu dokumentów – SGML – trochę historii
Język SGML (ang. Standard Generalized Markup Language) - pomysł na zestan- daryzowanie uogólnionego znakowania dokumentów. Jest to język zdefiniowany w standardzie ISO 8879 opublikowany w październiku 1986 r. Twórcą standardu jest dr Charles Goldfarb.

4 Przykład Jeżeli np. zdefiniujemy elementy chap, title i p w następujący sposób: <!ELEMENT chap - - (title,p+)> <!ELEMENT title O O (#PCDATA)> <!ELEMENT p - O (#PCDATA)> to możemy napisać w dokumencie: <chap> <title>Tytuł rozdziału <p>Pierwszy akapit tekstu </chap> a nawet: Tytuł rozdziału

5 Co po SGML HTML - pochodzi od SGML, SGML należy do języków kodujących dokument, a HTML należy do języków prezentacyjnych, tzn. wyświetlających dokument. XML - pochodzi od SGML, ma zachować zgodność w „dół” z HTML. Zrezygnowano z DTD, ponieważ jego opracowanie jest sprawą złożoną.

6 XML XML (skrót od eXtensible Markup Language - rozszerzalny język znaczników) to otwarty standard opracowany przez W3C. Otóż XML nie jest kolejnym językiem do przechowywania konkretnych danych, jak np. język HTML opisujący wygląd stron sieciowych. XML to język opisujący dane, czyli metajęzyk. W uproszczeniu można powiedzieć, że XML służy do tworzenia innych języków (aplikacji XML) służących do przechowywania informacji.

7 W języku XML opisem dla danych są one same
Można również stosować schematy Definicji Typu Dokumentu (znane jeszcze z SGML, DTD) i inne sposoby deklarowania jego zawartości (jak XML Schemas), ale rzadko jest to potrzebne. Czytelność XML, nawet bez użycia specjalnych narzędzi, to jedna z jego ważniejszych zalet.

8 Przykład informacji zapisanej w XML
<ludzie> <człowiek dane="poprawne"> <imie>Paweł</imie> <nazwisko>Stroiński</nazwisko> <web> </człowiek> <człowiek dane="fikcyjne"> <imie>Jan</imie> <nazwisko>Kowalski</nazwisko> <web> </ludzie>

9 HTML - co to jest? HTML to skrót od angielskiego HyperText Mark-up Language. Jest to swoisty język programowania, który służy do "opisu stron". "Opis stron" to reguły określania wyglądu tekstu (wielkość, czcionka, pogrubienie, kursywa itd.). Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym (Windows, MacOS, OS/2, rożne odmiany Unixa, itd.). HTML jest językiem (ale nie programowania)

10 Historia HTML (na podstawie http://kurshtml5.edu.pl/)
W 1993 roku organizacja IETF (ang. Internet Engineering Task Force) opublikowała pierwszy szkic specyfikacji języka HTML. Producenci przeglądarek mogli zgłaszać swoje propozycje do specyfikacji przez okres 6 miesięcy. W tym samym roku w szkicu HTML+ zasugerowano standaryzację zaimplementowanych znaczników. W 1994 roku powstała Grupa Robocza HTML (ang. HTML Working Group), która w 1995 roku zaprezentowała specyfikację HTML 2.0. Był to pierwszy oficjalny standard. Specyfikacja ta zawierała pomysły ze szkicu HTML oraz HTML+. Język umożliwiał określenie koloru tła, umieszczenie obrazka w tle, tworzenie tabel oraz formularzy. W 1995 roku została zaprezentowana trzecia wersja tego języka, lecz z powodu zbytniej złożoności, prace nad nią zostały przerwane. Od 1996 roku specyfikacje HTML były rozwijane przez konsorcjum producentów oprogramowania World Wide Web Consortium (W3C) pod kontrolą, którego rozwój języka trwa do chwili obecnej. W 1997 roku HTML 3.2 został opublikowany jako rekomendacja. Wprowadzał on nowe atrybuty oraz obsługę CSS (ang. Cascading Style Sheets). W tym samym roku czarta wersja tego języka została opublikowana jako rekomendowana. Wprowadziła kilka nowych elementów, a wszystkie kwestie dotyczące wyglądu strony przejął CSS. Język ten został zaproponowany w trzech typach (Strict, Transitional, Frameset). W 1999 roku została wydana uaktualniona wersja pod numerem Obecnie jest to ostatnia rekomendowana wersja tego języka. W 2004 roku producenci Mozilli oraz Opery przedstawili swoje stanowiska na temat rozwoju HTML. Została stworzona specjalna grupa WHATWG (ang. Web Hypertext Application Technology Working Group), która w 2008 roku przedstawiła pierwszy publiczny szkic HTML 5. Do końca 2011 roku producenci przeglądarek mogli zgłaszać swoje uwagi do specyfikacji, natomiast w 2012 roku HTML 5 przeszedł w fazę kandydata do rekomendacji. W 2013 roku prace nad piątą wersją języka zostały zakończone, a w 2014 roku ma być on uznany za oficjalnie rekomendowany

11 Zgodność przeglądarek z HTML5

12 Organizacja i nawigacja - struktura liniowa
Strona główna

13 Organizacja i nawigacja - struktura hierarchiczna
Strona główna

14 Organizacja i nawigacja - struktura liniowa z alternatywą
Strona główna

15 Organizacja i nawigacja - struktura mieszana (liniowo hierarchiczna)
Strona główna

16 Organizacja i nawigacja - struktura sieciowa (pajęczyna)
Strona główna

17 Elementy HTML Publiczne identyfikatory tekstu HTML
Znaczniki łamania tekstu Listy Kroje czcionek Tabele Grafika i multimedia Sieć dokumentów HTML Tu znajduje się przegląd wszystkich znaczników dostępnych w poszczególnych wersjach HTMLhttp://webmaster.helion.pl/index.php/spis-polecen/32-tabela-znacznikow

18 Pierwszy plik HTML <HTML>
<!to jest moja pierwsza strona - kometarz> <HEAD> <TITLE>Mój pierwszy HTML</title> </HEAD> <BODY> <h1> Cześć</h1> <h2>Oj, oj, a co z polskimi znaczkami?</h2> Może inne?: ążźęćńłóĄŹŻĆŃŁÓ To mój pierwszy HTML </BODY> </HTML>

19 Dodatkowe informacje o dokumencie
<!DOCTYPE HTML> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Mój pierwszy HTML</TITLE> </HEAD> <BODY> <h1> Cześć</h1> Oooo, są polskie znaczki, :) Więcej polskich znaczków: ążźśęćłóĄŻŚŹĆĘŁŃ To mój pierwszy HTML </BODY> </HTML>

20 Ogólne informacje o budowie znaczników
<INSTRUKCJA> - instrukcja HTML (tzw. „tag”, „znacznik”) </INSTRUKCJA> - koniec obszaru działania instrukcji. Mogą występować tagi bez zakończonego obszaru działania, np.. <BR>, Znaczniki, które nie musza być zakończone </tag> można pisać <tag/>, np. <BR/> Przykłady: <HEAD> ... </HEAD> (obszar nagłówka) <BODY> .... </BODY> (obszar ciała) <TITLE> ... </TITLE> (obszar pisania tytułu) <H1> ... </H1> (obszar nagłówka) <! Tekst> - oznacza komentarz (nie wyświetlany)

21 Znaczniki - parametry znaczników
Znaczniki mogą mieć parametry, np..: <P ALIGN=justify> </P> <IMG SRC=”obrazek.gif”> Wartości parametrów często ujmuje się w cudzysłowy, Zwłaszcza wtedy, gdy nazwy są wieloczłonowe.

22 Nagłówki Nagłówki służą do podziału tekstu na części, są elementami ogólnego planu strony, mogą składać się wielu linii tekstu, zazwyczaj nagłówki umieszcza się na górze strony, w HTML zostało zdefiniowanych sześć poziomów nagłówka (od H1- najbardziej się wyróżnia do H6 - najmniej się wyróżnia), Różnią się między sobą wielkością i atrybutami czcionki (pogrubienie, podkreślenie, itd.), Przykład: <H1>Opis języka HTML</H1>

23 Formatowanie paragrafów
Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występuje zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, <P> ... </P> - tagi paragrafu, Parametry „taga” P: <P align=left>...</P> - do lewej, <P align=right>...</P> - do prawej, <P align=center>...</P> - centrowanie, <P align=justify>...</P> - do lewej i do prawej, <BR> - nowy wiersz bez przerywania paragrafu <NOBR> ... </NOBR> - wyświetl tekst bez załamania wiersza <WBR> - punkt łamania linii (zwykle między <NOBR>) <CENTER> ... </CENTER> - centrowanie tekstu

24 Przykład dla paragrafów
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Paragrafy</TITLE> </HEAD> <BODY> Bez paragrafów: Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, <P>Z paragrafami</P> <P> Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki),</P> <P>występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, </P> </BODY> </HTML>

25 Listy Listy służą do wyróżniania poszczególnych grup informacji, strukturalizują tekst dokumentu, Listy wypunktowane (są zaznaczane kropkami lub innymi symbolami), tag <UL>...</UL> Listy mogą być zagnieżdżone, Parametry: <UL Type=atrybut>, gdzie atrybut może być równy: „disc” - kółko lub kropka, „square” - mały kwadrat, „circle” - wypełnione (większość przeglądarek) kółko,

26 Listy - cd. Lista numerowane, są oznaczane kolejnymi liczbami (arabskimi, rzymskimi), tag <OL>...</OL> Atrybuty: Type=”1” - standardowa numeracja, Type=”a” - numeracja za pomocą kolejnych małych liter alfabetu, Type=”A” - numeracja za pomocą kolejnych małych liter alfabetu, Type=”i” - numeracja za pomocą kolejnych małych liczb rzymskich, Type=”I” - numeracja za pomocą kolejnych dużych liczb rzymskich, START=wartość, np.. START=”C” VALUE - rozpoczyna numerację listy od początku, COMPACT - oznacza, że lista powinna zajmować jak najmniej miejsca na ekranie

27 Przykład dla list <HTML> <HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Paragrafy</TITLE> </HEAD> <BODY> <OL start=5> <LI> <OL type="i"> <LI>A1 <LI>A2 </OL> <OL type="a"> <LI>B1 <LI>B2 <OL> </BODY> </HTML>

28 Listy - cd. Lista definicyjna - każdy element składa się dwóch części: pojęcie definiowane DT (ang. definition term) i definicji pojęcia DD (ang. definition definition) , np. <DL> <DT>pojęcie <DD> definicja </DL> Listy definicyjne mówią, że pojęcie i jego definicja będą zazwyczaj w osobnych wierszach, oraz linia DD jest przesunięta w prawo. Np. <DT> Programowanie <DD>Zapisywanie algorytmu w języku programowania

29 Listy - cd. Listy katalogów i menu
są bardzo podobne do paragrafów, mogą być formatowane inaczej, niż zwykłe akapity są to zazwyczaj bardzo krótkie teksty, nie są zbyt często wykorzystywane w praktyce (przeglądarki nie rozróżniają tych list).

30 Przykład <HTML> <BODY> <MENU> <LI>w lewo
<LI>w prawo <LI>w dół <LI>w górę </MENU> <DIR> <LI>Spożywcze <LI>Przemysłowe <LI>Rozrywka </BODY>

31 Tekst preformatowany Tekst preformatowany jest używany wtedy, gdy chcemy zachować wszystkie znaki odstępu, tabulacji, puste linie i rozmieszczenie tekstu. Czcionka jest nieproporcjonalna (litera i i m zajmują tyle samo miejsca). Używamy go do np. prezentacji tekstu programu. Np. <PRE> Tekst preformatowany jest Tak wyświetlany, jak został napisany </PRE>

32 Style fizyczne <EM>...</EM> - wyróżnienie,
<STRONG>...</STRONG> - wyróżnienie mocniejsze, <CODE>...</CODE> - oznacza fragment kodu, <SAMP>...</SAMP> - oznacza tekst przykładowy, <KBD>...</KBD> - oznacza tekst, który ma być wpisany przez użytkownika <VAR>...</VAR> - oznacza nazwę zmiennej lub innego elementu <DFN>....</DFN> - oznacza definicję <CITE>...</CITE> - oznaczamy cytaty <B>...</B> - pogrubienie, <I>...</I> - kursywa, <BIG>...</SUB> - czcionka większa od reszty tekstu, <SMALL>...</SMALL> - czcionka mniejsza od reszty tekstu, <SUB>...</SUB> - indeks dolny, <SUP>...</SUP> - indeks górny.

33 Przykład dla styli fizycznych
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Tekst preformatowany</TITLE> </HEAD> <BODY> zwykły tekst<BR> <EM>Wyróżniony tekst</EM><BR> <STRONG>Mocniejsze wyróżnienie</STRONG><BR> <CODE>oznacza fragment kodu</CODE><BR> <SAMP>oznacza tekst przykładowy</SAMP><BR> <KBD>oznacza tekst, który ma być wpisany przez użytkownika</KBD><BR> <VAR>oznacza nazwę zmiennej lub innego elementu</VAR><BR> <DFN>oznacza definicję</DFN><BR> <CITE>oznaczamy cytaty</CITE> </BODY> </HTML>

34 przykład <HTML> <HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <TITLE>Tekst preformatowany</TITLE> </HEAD> <BODY> zwykły tekst<BR> <B>pogrubienie</B> <BR> <I>kursywa</I><BR> <TT>czcionka maszynowa</TT> <BR> <U>podkreślony</U><BR> <S>przekreślenie</S><BR> <BIG>czcionka większa od reszty tekstu</BIG><BR> <SMALL>czcionka mniejsza od reszty tekstu</SMALL><BR> a<SUB>indeks dolny</SUB><BR> b<SUP>indeks górny</SUP> <BR> </BODY> </HTML>

35 Linie poziome Służą do wizualizacji poszczególnych fragmentów strony - znacznik HR. Atrybuty HR: SIZE - grubość linii w pikselach, WIDTH - długość linii w pikselach albo w procentach, ALIGN - sposób umieszczenia linii, NOSHADE - linia jest rysowana bez cienia Przykład: <HR ALIGN=RIGHT, SIZE=10, WIDTH=60%, NOSHADE>

36 Znaki specjalne Służą do wstawiania znaków, które przez przeglądarkę mogą być zinterpretowane jako znaki formatujące, poprzedzamy je znakiem & (ampersand) Znaki specjalne - przykłady: < - <, > - > &#n - znak o kodzie n Przykład <BODY> <HR Size=5 width=50 Align=left> &lt Tekst1&gt <Tekst2> <HR Size=1 width=150> </BODY>

37 Inne znaczniki <article> Pozwala na lepszą semantykę HTML poprzez zdefiniowanie pojemnika który zawiera spójny zbiór elementów, niezależny od innych treści. Ułatwia to publikację kilku artykułów o różnej tematyce na jednej stronie. <aside> Pozwala na zdefiniowanie pojemnika który nieznacznie jest powiązany z treścią. Może służyć do oddzielenia reklam, tekstu od głównego tekstu. <audio> Pozwala na umieszczenie muzyki na stronie bez dodatkowych wtyczek. <bdi> Pozwala na odseparowanie tekstu który jest formatowany w innym kierunku niż pozostała część tekstu .Przydatne podczas pisania tekstów np: w języku arabskim. <canvas> Pozwala na dynamiczne renderowanie kształtów i obrazów bitmapowych. Grafika jest tworzona za pomocą Javasciptu. Możliwe jest generowanie elementów 2d oraz 3d.

38 Inne znaczniki <datalist> Pozwala na wpisanie własnych wartości do autouzupełniania .Zastępuje znacznik <select>. <details> Pozwala na zdefiniowanie dodatkowych detali które użytkownik może zobaczyć lub ukryć. Może być użyte do długiej listy(np: aktorów)która po kliknięciu się rozwija lub zwija. <dialog> Pozwala na wskazanie dialogu pomiędzy ludźmi lub numerami. Przykładowy dialog może zawierać rozmowy ze spotkań, czatu. <embed> Pozwala na umieszczenie na stronie aplikacji lub treści interaktywnych nie będących w formacie HTML. Najczęściej są to aplikacje do których niezbędne jest doinstalowanie dodatkowych wtyczkę np : Adobe Flash <figcaption> Pozwala na podpisanie załącznika, zbioru elementów. Często wykorzystywany w publikacjach naukowych do podpisania zbioru rysunków.

39 Inne znaczniki <figure> Pozwala na oznaczanie danych multimedialnych, które są istotne dla danego artykułu (sekcji), lecz mogą także być prezentowane samodzielnie. <footer> Stopka zastępuje używany w HTML4 <div id=”footer”> <header> Nagłówek zastępuje używany w HTML4 <div id=”header”> <keygen> Pozwala na wygenerowanie klucza RSA lub innego dla użytkownika. Wygenerowane zostaną 2 klucze z czego pierwszy zostanie u użytkownika a drugi zostanie wysłany do serwera. <mark> Pozwala na wyróżnienie tekstu tak by zwrócić uwagę użytkownika. Podkreśla tekst przy użyciu żółtego “mazaka”.

40 Inne znaczniki <meter> Pozwala na statyczne pokazanie postępu. Jest to statyczny odpowiednik znacznika <progress>.Nadaje się do pokazania np: pozostałego miejsca na hostingu. <nav> Pozwala na wydzielenie sekcji strony która zawiera odnośniki do strony lun innych stron. Służy głównie do nawigacji po stronie ( menu strony). <output> Pozwala na wyświetlenie wyników obliczenia wykonanego przez Javascript. <progress> Pozwala na pokazanie paska postępu. Nadaje się do pokazania np: postępu wgrywania plików na serwer.

41 <ruby> Pozwala na wprowadzenie adnotacji nad fragmentem tekstu
<ruby> Pozwala na wprowadzenie adnotacji nad fragmentem tekstu. Stosowany do pokazania wymowy znaku lub wyrazu. W znaczniku <ruby> należy umieścić objaśniany tekst. <rp> Pozwala na wprowadzenie wymowy słowa umieszczonego w znaczniku <ruby> <rt> Pozwala na wprowadzenie adnotacji w przeglądarce która nie obsługuje znacznika <ruby> <section> Reprezentuje sekcję dokumentu która zawiera nagłówek. Sekcjami może być np: rozdział ksiązki lub grupowane tematycznie treści na stronie. <source> Pozwala na określenie kilku źródeł pliku dla elementu <audio> oraz <video>.Jeżeli przeglądarka nie obsługuje pierwszego formatu próbuje odtworzyć alternatywny format wideo podany jako druga ścieżka(source).

42 Inne znaczniki <summary> Pozwala na zmianę nazwy, legendy dla znacznika <details>. <time> Pozwala na oznaczenie daty jakiegoś zdarzenia. Data jest podana według kalendarza gregoriańskiego lub w formacie 24h.Jest to czas przeznaczony dla aplikacji lub robotów sieciowych. <track> Pozwala na określenie ścieżki tekstowej dla elementu <video>.Przy jego użyciu można dołączyć np: napisy do filmu lub rozdziały pomagające w nawigacji. <video> Pozwala na umieszczenie video na stronie bez dodatkowych wtyczek. <wbr> Pozwala na opcjonalne łamanie wiersza. Wiersz jest łamany tylko w razie gdy nie mieści się w divie.

43 Połączenia Połączenia służą do tworzenia hiperpołączeń (połączeń z innymi plikami) oraz do tworzenia specjalnych miejsc wewnątrz stron, do których prowadzą inne połączenia. Do tworzenia połączeń służy tag A z atrybutem HREF <A HREF=”nazwa_pliku”>tekst podświetlony</A>, gdzie nazwa_pliku ma postać adres URL/specyfikacja, przykłady: HREF=”users/moje/dane/list01” HREF=”../users/moje/dane/list01” HREF=”/users/moje/dane/list01” HREF=”d:\users\moje\dane\list01” HREF=” HREF=” - oznacza nazwę pliku moje dokumenty/jan/f - jan/f jest nazwą pliku.

44 Połączenia Odnośniki - odnośniki służą do wskazywania miejsc w dokumencie, Tworzymy je za pomocą atrybutu NAME w tagu A: <A NAME=”nazwa”>opis_odnośnika</A> przejście do nazwanego miejsca: <A HREF=”nazwa_pliku#nazwa”>opis</A>

45 Przykład Pierwszy plik o nazwie plik:
<HTML><HEAD><TITLE>Wybierz okno</TITLE></HEAD> <BODY> <H1>Wybierz nadrzędne okno</H1> <P><A HREF=”plik1.htm” TARGET=”pierwsze_okno”>Otwiera</A> <BR> <P><A HREF=”plik2.htm” TARGET=”pierwsze_okno”>Ładuje nowy tekst do pierwsze pierwsze_okno</A> </P> </BODY> </HTML>

46 Przykład działania TARGET - cd
Drugi plik o nazwie plik1.htm: <HTML><HEAD><TITLE>Pierwsze okno</TITLE></HEAD> <BODY> <H1>Pierwsze okno</H1> </BODY> </HTML> Trzeci plik o nazwie plik2.htm: <P>Z nowym tekstem </P>

47 Działanie Działanie: wczytujemy plik o nazwie plik.htm do przeglądarki, Po kliknięciu napisu „Otwiera” otwierane jest nowe okno o nazwie pierwsze_okno po kliknięciu napisu „ładuje nowy tekst do okna o nazwie pierwsze_okno” zastępuje zawartość „Pierwsze okno” zawartością „Pierwsze okno z nowym tekstem”.

48 Uwaga Znacznik BASE: zamiast dodawać znacznik TARGET do każdego znacznika A można za pomocą taga BASE wskazać, że wszystkie połączenia na stronie będą skierowane do tego samego okna, składnia: <BASE TARGET=”nazwa_okna”>

49 Inny przykład wykorzystania znacznika target
<HTML> <Body> <H1> Witryny, z których korzystam</H1> <A HREF=" <A HREF=" target=a>Wirtualna Polska</a><BR> <A HREF=" target=a>interia</a><BR> <A HREF=" target=b>zajecia z HTML</a><BR> </HTML>

50 Obrazy Obrazy mogą być:
wewnętrzne (pojawiają się na stronie razem z tekstem i połączeniami) zewnętrzne (są przechowywane poza stroną WWW) muszą być zapisane w odpowiednim formacie: GIF, JPEG lub BMP do obsługi obrazów graficznych służy znacznik IMG, sposób użycia: <IMG SRC=”nazwa_obrazka”>

51 Przykład <HTML> <BODY> To jest kwiatek
<IMG SRC=a.jpeg> Koniec kwiatka </BODY>

52 Obrazy - cd. Atrybuty IMG - położenie obrazka: ALIGN=TOP - na górze,
ALIGN=MIDDLE -na środku strony, ALIGN=BOTTON - na dole strony, ALIGN=TEXTTOP - obrazek ma górną krawędź taką jaką litery, ALIGN=ABSMIDDLE -leży pośrodku największego elementu, ALIGN=BASELINE - środek obrazka znajduje się w środku tekstu, ALIGN=BASELINE - wyrównuje dolną krawędź względem dolnej krawędzi tekstu, ALIGN=ABSBOTTON - wyrównuje dolną krawędź obrazka względem dolnej krawędzi największego elementu

53 Przykład <HTML> <BODY> To jest kwiatek
<IMG Align=middle SRC=a.jpeg> Koniec kwiatka </BODY>

54 Obrazy cd. Otaczanie tekstem obrazu:
ALIGN=LEFT - obraz położony przy lewym marginesie, ALIGN=RIGHT - obraz położony przy prawym, HSPACE=n - określa odległość w pikselach obrazu od tekstu w poziomie, VSPACE=n - określa odległość w pikselach obrazu od tekstu w pionie,

55 Przyklad <HTML> <BODY> To jest kwiatek
<IMG Align=right SRC=a.jpeg> Koniec kwiatka </BODY>

56 Przykład <HTML> <BODY> To jest kwiatek
<IMG Align=center hspace=30 SRC=a.jpeg> Koniec kwiatka </BODY>

57 Obrazy cd. Skalowanie obrazów: WIDTH - szerokość obrazu,
<IMG SRC=”nazwa” WIDTH=100>, HEIGHT- wysokość obrazu, <IMG SRC=”nazwa” HEIGHT=200>, BORDER=n - określa grubość ramki otaczającej obraz, <IMG SRC=”nazwa” BORDER=5>.

58 Przykład <HTML> <BODY> To jest kwiatek
<IMG Width=50 height=200 border=10 SRC=a.jpeg> Koniec kwiatka </BODY>

59 Przykład <HTML> <HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <TITLE>Tekst preformatowany</TITLE> </HEAD> <BODY> to jest obrazek<BR> <IMG src="a.gif" /><BR> <IMG src="a.gif" align=right width=50 height=100 /><BR> <IMG src="a.gif" align=right VSPACE=100 border=20/> </BODY> </HTML>

60 Kolory Kolory pomagają „ożywić” stronę, wyróżnić ważniejsze elementy.
Kolory możemy zapisywać za pomocą: liczby szesnastkowej (np. #ABB000 - są to trzy liczby szesnastkowe połączone razem, AB - red, B0 - green, 00 - blue), predefiniowanej nazwy (np. white, black, purple). Do ustawiania koloru tła służy tag BGCOLOR <BODY BGCOLOR=”#definicja_koloru”>

61 Kolory cd. Pozostałe atrybuty: TEXT - określa kolor tekstu,
<BODY BGCOLOR= ”#110011” TEXT=blue> LINK - określa kolor połączeń, które nie zostały wybrane, <BODY BGCOLOR= ”#110011” LINK=red> VLINK - określa kolor połączeń, które zostały wybrane, <BODY BGCOLOR= ”#110011” VLINK=purple> ALINK - określa kolor połączeń, które zostały wybrane i jeszcze na nich jest naciśnięty przycisk myszy, <BODY BGCOLOR= ”#110011” ALINK=yellow> FONT COLOR – określa niezależnie od ogólnych ustawień kolor liter dla fragmentu tekstu <FONT COLOR=”#00FF00”>zielony</FONT> - kolor liter zielony

62 Czcionki: rozmiary, kolory - przykład
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <TITLE>Tekst preformatowany</TITLE> </HEAD> <BODY BGCOLOR="#ffaa00" TEXT=blue> <Font size=+6> To jest tekst </Font><BR> <H1><Font color="00FF00">kolor liter zielony</Font></H1> <H1><Font color=red>kolor liter czerwony</Font></H1> </BODY> </HTML>

63 Tabele Tabele poprawiają czytelność tekstu, umożliwiają prezentację danych w formie tabelarycznej. Jest to znacznik, który umożliwia rozmieszczanie tekstu, obrazów i innych elementów w wierszach i kolumnach otoczonych obramowaniem (lub bez obramowania).

64 Tabele - elementy składowe
Podpis (opis tabeli) - informuj o zawartości tabeli, Nagłówek tabeli - to etykiety wierszy i kolumn (zazwyczaj wyświetlamy czcionką większą), są opcjonalne, Dane tabeli - to wartości wpisane w tabelę, Komórki tabeli - to najmniejsze elementy tabeli.

65 Tabele - znacznik TABLE
Do tworzenia tabeli służy: <TABLE>zawartość tabeli </TABLE> Atrybut BORDER: BORDER =n - oznacza obramowanie. Jeśli n=0, to obramowania nie ma, n oznacza grubość obramowania w pikselach, np. <TABLE BORDER=2>

66 Tabele - wstawianie wierszy
Do wstawiania wierszy służy znacznik: <TR> zawartość wiersza </TR> Do wstawiania komórek w wierszu służy znacznik: <TH>zawartość komórki nagłówka</TH> dla nagłówka <TD>zawartość komórki danych</TD> dla komórek danych

67 Tabele - prosty przykład
Tabela zawierająca wiersz nagłówka na górze i dwa wiersze oraz dwie kolumny: <P>Przykład tabeli</P> <TABLE BORDER=1> <TR> <TH>Nazwisko</TH> <TH>Adres</TH> </TR> <TD>Abacki</TD> <TD>Siedlce</TD> <TD>Babacki</TD> <TD>Warszawa</TD> </TABLE> Nie ustawiamy szerokości komórek, przeglądarka sama dostosuje się.

68 Wynik

69 Tabele - przykład 2 <TABLE BORDER=10>
Tabela zawierająca wiersz nagłówka z boku i dwa wiersze oraz dwie kolumny: <P>Przykład tabeli 2</P> <TABLE BORDER=10> <TR> <TH>Dana 1</TH><TD>Abacki</TD> <TD>Siedlce<BR>ul. Sienkiewicza</TD> </TR> <TH>Dana 2</TH><TD>Babacki</TD> <TD>Warszawa<BR>ul. Marszałkowska</TD> </TABLE>

70 Wynik

71 Tabele - podpisy Podpisy informują czytelnika czego dotyczy tabela,
Tworzymy je za pomocą znacznika <CAPTION> Atrybut ALIGN=TOP|BOTTOM umożliwia nagłówka, TOP na górze, BOTTOM na dole tabeli, Atrybut VALIGN=LEFT|CENTER|RIGHT - określa wyrównywanie w poziomie

72 Tabele - wyrównywanie tabeli względem marginesów i zawartości komórek względem komórek
Atrybut ALIGN w znaczniku TABLE - działa tak samo jak dla CAPTION, w wierszu (po znaczniku <TD>) ALIGN określa sposób wyrównania tekstu w komórce względem pionowych ścian, a VALIGN względem poziomych ścian

73 Przykład <P>Przykład tabeli 3 - rozmieszczanie tekstu</P>
<TABLE BORDER=2> <CAPTION ALIGN=BOTTON VALIGN=CENTER> Przykłady rozmieszczenia elementów w komórkach tabeli </CAPTION> <TH ALIGN=CENTER VALIGN=TOP> <TD>lewo</TD><TD>środek</TD><TD>prawo</TD> </TH> <TR> <TH>Góra <BR> *</TH> <TD ALIGN=LEFT VALIGN=TOP>lewo i góra</TD> <TD ALIGN=RIGHT VALIGN=TOP>prawo i góra</TD> <TD ALIGN=CENTER VALIGN=TOP>środek i góra</TD> </TR> <TH>Środek<BR> *</TH> <TD ALIGN=LEFT VALIGN=CENTER>lewo i środek</TD> <TD ALIGN=RIGHT VALIGN= CENTER >prawo i środek</TD> <TD ALIGN=CENTER VALIGN= CENTER >środek i środek</TD> <TH>Dół<BR> *</TH> <TD ALIGN=LEFT VALIGN=BOTTOM>lewo i dół</TD> <TD ALIGN=RIGHT VALIGN= BOTTOM>prawo i dół</TD> <TD ALIGN=CENTER VALIGN= BOTTOM>środek i dół</TD> </TABLE>

74 Efekt poprzedniego przykładu

75 Tabele - komórki rozpięte na kilka kolumn lub wierszy, szerokość tabeli, komórek
Aby utworzyć komórki rozpięte na kilku wierszach lub kolumnach stosujemy atrybut: ROWSPAN=n- dla łączenia n wierszy , COLSPAN=n- dla łączenia n kolumn, Szerokość określamy za pomocą atrybutu WIDTH w znaczniku TABLE (dla szerokości tabeli, TH lub TD dla szerokości kolumn Odstępy między komórkami: atrybut CELLSPACING=n w znaczniku TABLE, gdzie n oznacza odległość w pikselach, Odstępy między zawartością komórki a jej obramowaniem: atrybut CELLPADDING=n, gdzie n oznacza odległość w pikselach,

76 Przykład <P>Przykład tabeli 4 -operacje na komórkach</P>
<TABLE BORDER=2 WIDTH=300 CELLSPASING=10 CELLPADING=10> <CAPTION > Przykłady manipulowania komórkami </CAPTION> <TR> <TH COLSPAN=2> Płeć</TH> </TR> <TH WIDTH=100>Mężczyzna</TH> <TH WIDTH=200>Kobieta</TH> <TD WIDTH=150>10%</TD> <TD>20%</TD> </TABLE>

77 Wynik

78 Tabele - kolory Kolory można dodawać do znaczników:
TABLE, <TR> <TD> Kolory dodajemy za pomocą atrybutu BGCOLOR=kolor, gdzie kolor=#nnmmll lub kolor=nazwa_koloru

79 Tabele - przykład <P>Przykład tabeli 4 -operacje na komórkach</P> <TABLE BORDER=2 WIDTH=300 CELLSPASING=10 CELLPADING=10 BGCOLOR=red> <CAPTION > Przykłady manipulowania komórkami </CAPTION> <TR> <TH COLSPAN=2> Płeć</TH> </TR> <TH WIDTH=100 BGCOLOR=yellow>Mężczyzna</TH> <TH WIDTH=200>Kobieta</TH> <TD WIDTH=150 BGCOLOR="#FF00FF">10%</TD> <TD BGCOLOR="#00FF00">20%</TD> </TABLE>

80 Przykład

81 Ramki lokalne Ramki lokalne: obsługiwane za pomocą znacznika <IFRAME> umożliwia wstawianie dokumentów w dowolnym miejscu innego dokumentu Atrybuty znacznika IFRAME: WIDTH - szerokość ramki w pikselach, HEIGHT - wysokość ramki w pikselach, SRC - adres NAME - nazwa ramki, FRAMEBORDER - czy ma być wyświetlane obramowanie, BORDER - szerokość obramowania, BORDERCOLOR - kolor obramowania FRAMESPACING - odstep między krawędziami ramek, MARGINWIDTH - szerokość marginesu, MARGINHEIGHT - wysokość marginesu, NORESIZE - bez zmiany możliwości rozmiaru ramki, SCROLLING - czy mają być wyświetlane paski przewijania, VSPACE - wysokość marginesu HSPACE - szerokość marginesu ALIGN - umiejscowienie ramki względem tekstu,

82 Przykład <HTML> <HEAD>
<TITLE>Złożony podział ekranu</TITLE> </HEAD> <BODY> <B>To jest ramka lokalna</B> <IFRAME SRC=”plik1.htm” WIDTH=200 HEIGHT=200 FRAMEBORDER=YES> </BODY> </HTML>

83 Wynik

84 Formularze Często korzysta się nie tylko ze statycznych stron WWW, ale także z dynamicznych – obsługiwanych przez program Mechanizmy poznane do tej pory pozwalały na bierne oglądanie stron, formularze zmieniają to, formularze umożliwiają współpracę witryny z użytkownikiem, Aby uzyskać pożądane informacje z dynamicznej strony, trzeba przekazać jej parametry Przekazanie parametrów do programu może nastąpić przy pomocy „formatki”

85 Czym są formularze? są grupą znaczników, są elementem standardu HTML,
do formularza potrzebny jest: program skryptowy działający po stronie serwera, układ formularza w dokumencie HTML, Postać formularza: <FORM METHOD=POST ACTION=”adres_skryptu”> ...</FORM> gdzie METHOD określa sposób przesłania danych do skryptu, ACTION zawiera adres URL skryptu, Uwaga: programem skryptowym może być także program napisany w języku Java Script – to jest pełnoprawny język programowania.

86 Ogólna struktura formatki
<FORM ACTION= METHOD=POST> Instrukcje przekazywania parametrów Instrukcje wysyłania parametrów do programu </FORM>

87 Formularze Wprowadzanie danych: <INPUT NAME=”tekst”>
Atrybuty INPUT: TYPE=”typ”, gdzie typ=text (dla tekstu), radio (dla przycisków radialnych), checkbox (dla przycisków wyboru), „RESET” przywraca domyślne ustawienia przycisków, NAME=nazwa elementu, wykorzystywana przez skrypt CGI SUBMIT - tworzy przycisk wysyłający dane VALUE - wartość początkowa, CHECKED - pole wybrane początkowo SIZE =”n” rozmiar tekstu w znakach, n znaków można wprowadzić, TYPE=”HIDDEN” - pole jest ukryte

88 Przykład <HTML>
<P>Nazwisko=<INPUT NAME="NAZWISKO" TYPE="text"> </P> <P>Imię=<INPUT NAME="Imie" TYPE="text" TYPE="SUBMIT"> </P> <P>Płeć=<BR>Kobieta<INPUT NAME="Pleck" TYPE="radio" CHECKED> mężczyzna<INPUT NAME="Plecm" TYPE="radio"> </P> <P>Zainteresowania:<BR><INPUT NAME="zainteresowanie1" TYPE="checkbox">Informatyka <BR><INPUT NAME="zainteresowanie2" TYPE="checkbox"> Programowanie <BR><INPUT NAME="zainteresowanie3" TYPE="checkbox" CHECKED> HTML </HTML>

89 Wynik

90 Opcje wyboru Znacznik SELECT umożliwia użytkownikowi witryny wybór z listy <SELECT NAME=”tekst”> <OPTION>opcja1 ... <OPTION>opcjan </SELECT>

91 Przykład <HTML> <SELECT NAME="kolory"> <OPTION>biały
<OPTION>czerwony <OPTION>zielony <OPTION>niebieski </SELECT> </HTML>

92 Pola tekstowe Umożliwiają wprowadzenie przez użytkownika pewnego tekstu <TEXTAREA NAME=”nazwa” ROWS=”n” COLS=”m”> Tekst w okienku </TEXTAREA> Argumenty: WRAP=OFF nie zawija, chyba że użytkownik naciśnie Enter, WRAP=ON - tekst jest zawijany

93 Przykład <HTML>
<TEXTAREA NAME="wypowiedz" ROWS="20" COLS="30"> Twoja wypowiedź</TEXTAREA> </HTML>

94 Pliki „stylowe” Cascading Style Sheets (CSS oddziela formatowanie od zawartości stron WWW Pozwala na globalne zmiany wielu stron WWW poprzez zmianę tylko jednego pliku Pozwala też zaoszczędzić na wielkości stron WWW przez usunięcie wielu instrukcji formatujących Są przydatne (bardzo przydatne), gdy tworzymy dużą witrynę – takie witryny mogą liczyć kilka tysięcy plików.

95 Co styl reguluje Kroje czcionek, ich rodzaje, kolory i wielkości
Obramowania tekstu Pozycjonowanie tekstu Rodzaje kursora

96 Wstawianie „instrukcji stylowych”
Wewnątrz strony WWW (raczej niewiele nam daje, rzadko spotykane, ale można korzystać dla niewielkich witryn): w części <BODY>: <STYLE> definicje stylu </STYLE> W oddzielnym pliku mojstyl.css (podstawa, obowiązkowo dla dużych witryn): W części <HEAD> lub <BODY> trzeba włączyć instrukcję: <LINK REL="stylesheet" TYPE="text/css" REF="mojstyl.css">

97 Prosta definicja stylu:
Zmiana koloru w elementach 'H1‘ na zielony W pliku CSS podać H1 { color: green } Pełną listę atrybutów elementów HTML, które można zmienić, można znaleźć pod adresem:

98 Przykład <HTML> <Body>
<STYLE>H1 { color: green }</STYLE> <H1>Tekst</H1> </HTML>

99 Klasy Definicja klasy w CSS - przykład
.czerwtekst{ FONT-SIZE: 12px; COLOR: red } Wykorzystanie tej klasy w HTML: <H1 class="czerwtekst">Tekst czerwony</H1> <P class="czerwtekst">to samo </P> Albo w ten sposób: <span class="czerwtekst "> <H1> Ten tekst będzie czerwony, 12-punktow.</H1> <P >Można zgadnąć, że to samo </P> </span>

100 Przyklad <HTML> <Body> <STYLE TYPE="text/css">
.czerwtekst{ FONT-SIZE: 12px; COLOR: red } </STYLE> <H1 class="czerwtekst">Tekst</H1> </HTML>

101 Przykład – definicja stylu w innym pliku

102 Inny przykład

103 Dalsze przykłady linki { FONT-SIZE: 11px; COLOR: #003399; FONT-FAMILY: Arial; TEXT-DECORATION: none } A:hover { COLOR: #cc3333; TEXT-DECORATION: underline } h1 { font-family: Verdana; font-size: 16px; color: #CC0000; font-weight: bold} h2 { font-family: Arial; font-size: 13px; font-weight: bold; color: #000099} p { font-family: Arial; font-size: 12px; color: #333333} pre { font-size: 12px} H3, H4, H5 { COLOR: #CC0000 }

104 Co można ustawiać OL.wazne { FONT-FAMILY: "Times New Roman CE", "Times New Roman", Times, "New York", serif; FONT-SIZE: 80%; MARGIN: 2px 1em 2px 5.5em} <OL class=wazne>

105 Co można ustawiać BODY { BACKGROUND: white; FONT-FAMILY: Verdana, "Arial CE", Arial, Helvetica, sans-serif} body {font-family:Verdana, sans-serif; background-color:#ffffcc; font-size:10pt; background-image:url(bg.gif); background-repeat:repeat-y; padding:0px 40px 0px 90px;} H1 { FONT-FAMILY: Verdana, "Arial CE", Arial, Helvetica, sans-serif; FONT-WEIGHT: bold; MARGIN-BOTTOM: 2px; MARGIN-RIGHT: 1em; MARGIN-TOP: 6px; TEXT-ALIGN: left} H1 { COLOR: black; FONT-SIZE: 140%; MARGIN-LEFT: 0.5em}

106 Obramowanie akapitu <p style="border-top-width: 1mm">Akapit z górnym obramowaniem</p> <p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p> <p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p> <p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p> <p style="border-with: 3mm 2mm">Akapit</p>

107 Kolor obramowania <p style="border-bottom-width: thick; border-color: red">Akapit z dolnym, grubym czerwonym obramowaniem</p> <p style="border-top-width: thin; border-color: red">Akapit z górnym, cienkim czerwonym obramowaniem</p> <p style="border-left-width: medium; border-color: red">Akapit z lewym, średnim czerwonym obramowaniem</p>

108 Styl obramowania Border-style przybiera wartości: none, dotted (nie realizowane), dashed (nie realizowane), solid, double, groove, ridge, inset, outset. <p style="border-style: solid">Akapit</p> Zamiast border-width: thick; border-style: double; border-color: red możemy wpisać po prostu border: thick double red

109 Style kursora cursor:styl_kursora. (IE) Inne przykłady:
<p style="CURSOR: hand">PRZYKŁAD</p> Cały plik: <HTML> <TITLE> </TITLE> <Body> <H1>Tekst</H1> </HTML> Działanie – najedziemy kursorem myszki na tekst i zmienia się ona na „rączkę” Inne przykłady: cursor:crosshair cursor:hand cursor:move cursor:text cursor:wait cursor:help cursor:default cursor:auto

110 Znaczniki Tu znajduje się przegląd wszystkich znaczników dostepnych w poszczególnych wersjach HTML <article> Pozwala na lepszą semantykę HTML poprzez zdefiniowanie pojemnika który zawiera spójny zbiór elementów, niezależny od innych treści. Ułatwia to publikację kilku artykułów o różnej tematyce na jednej stronie. <aside> Pozwala na zdefiniowanie pojemnika który nieznacznie jest powiązany z treścią. Może służyć do oddzielenia reklam, tekstu od głównego tekstu. <audio> Pozwala na umieszczenie muzyki na stronie bez dodatkowych wtyczek. <bdi> Pozwala na odseparowanie tekstu który jest formatowany w innym kierunku niż pozostała część tekstu .Przydatne podczas pisania tekstów np: w języku arabskim.

111 Znaczniki <canvas> Pozwala na dynamiczne renderowanie kształtów i obrazów bitmapowych. Grafika jest tworzona za pomocą Javasciptu. Możliwe jest generowanie elementów 2d oraz 3d. <datalist> Pozwala na wpisanie własnych wartości do autouzupełniania . Zastępuje znacznik <select>. <details> Pozwala na zdefiniowanie dodatkowych detali które użytkownik może zobaczyć lub ukryć. Może być użyte do długiej listy(np: aktorów)która po kliknięciu się rozwija lub zwija. <dialog> Pozwala na wskazanie dialogu pomiędzy ludźmi lub numerami. Przykładowy dialog może zawierać rozmowy ze spotkań, czatu. <embed> Pozwala na umieszczenie na stronie aplikacji lub treści interaktywnych nie będących w formacie HTML. Najczęściej są to aplikacje do których niezbędne jest doinstalowanie dodatkowych wtyczkę np : Adobe Flash

112 Znaczniki <figcaption> Pozwala na podpisanie załącznika, zbioru elementów. Często wykorzystywany w publikacjach naukowych do podpisania zbioru rysunków. <figure> Pozwala na oznaczanie danych multimedialnych, które są istotne dla danego artykułu (sekcji), lecz mogą także być prezentowane samodzielnie. <footer> Stopka zastępuje używany w HTML4 <div id=”footer”> <header> Nagłówek zastępuje używany w HTML4 <div id=”header”> <keygen> Pozwala na wygenerowanie klucza RSA lub innego dla użytkownika. Wygenerowane zostaną 2 klucze z czego pierwszy zostanie u użytkownika a drugi zostanie wysłany do serwera. <mark> Pozwala na wyróżnienie tekstu tak by zwrócić uwagę użytkownika. Podkreśla tekst przy użyciu żółtego “mazaka”.

113 Znaczniki <meter> Pozwala na statyczne pokazanie postępu. Jest to statyczny odpowiednik znacznika <progress>. Nadaje się do pokazania np: pozostałego miejsca na hostingu. <nav> Pozwala na wydzielenie sekcji strony która zawiera odnośniki do strony lun innych stron. Służy głównie do nawigacji po stronie ( menu strony). <output> Pozwala na wyświetlenie wyników obliczenia wykonanego przez Javascript. <progress> Pozwala na pokazanie paska postępu. Nadaje się do pokazania np: postępu wgrywania plików na serwer. <ruby> Pozwala na wprowadzenie adnotacji nad fragmentem tekstu. Stosowany do pokazania wymowy znaku lub wyrazu. W znaczniku <ruby> należy umieścić objaśniany tekst.

114 Znaczniki <rp> Pozwala na wprowadzenie wymowy słowa umieszczonego w znaczniku <ruby> <rt> Pozwala na wprowadzenie adnotacji w przeglądarce która nie obsługuje znacznika <ruby> <section> Reprezentuje sekcję dokumentu która zawiera nagłówek. Sekcjami może być np: rozdział ksiązki lub grupowane tematycznie treści na stronie. <source> Pozwala na określenie kilku źródeł pliku dla elementu <audio> oraz <video>.Jeżeli przeglądarka nie obsługuje pierwszego formatu próbuje odtworzyć alternatywny format wideo podany jako druga ścieżka(source).

115 Znaczniki <summary> Pozwala na zmianę nazwy, legendy dla znacznika <details>. <time> Pozwala na oznaczenie daty jakiegoś zdarzenia. Data jest podana według kalendarza gregoriańskiego lub w formacie 24h.Jest to czas przeznaczony dla aplikacji lub robotów sieciowych. <track> Pozwala na określenie ścieżki tekstowej dla elementu <video>.Przy jego użyciu można dołączyć np: napisy do filmu lub rozdziały pomagające w nawigacji. <video> Pozwala na umieszczenie video na stronie bez dodatkowych wtyczek. <wbr> Pozwala na opcjonalne łamanie wiersza. Wiersz jest łamany tylko w razie gdy nie mieści się w divie.