WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka
2. W 1980 fizyk Tim Berners-Lee, pracujący dla ośrodka naukowo-badawczego CERN, stworzył prototyp hipertekstowego systemu informacyjnego ENQUIRE. System wykorzystywano do organizowania i udostępniania dokumentów związanych z badaniami naukowymi. Rewolucyjność pomysłu polegała na tym, że użytkownik, posługując się odnośnikami, mógł z jednej lokalizacji przeglądać dokumenty fizycznie znajdujące się w innych miejscach na świecie. Pierwsze strony internetowe pisane w języku HTML były bardzo ograniczone i zawierały jedynie podstawową strukturę w postaci nagłówków, paragrafów i odnośników.
Podstawowe pojęcia: Strona internetowa dokument utworzony w języku HTML lub XHTML, zapisany w pliku i umieszczony na serwerze, odczytywany na komputerze użytkownika za pomocą przeglądarki internetowej. Witryna internetowa zbiór stron internetowych powiązanych i umieszczonych na jednym serwerze, stanowiący rodzaj serwisu informacyjnego. Portal internetowy wyspecjalizowany, zawierający informacje z jednej dziedziny. Serwer internetowy komputer podłączony do Internetu świadczący usługi w sieci. Przykłady: serwer FTP, DNS, HTTP Statyczna strona internetowa strona, której zawartość i wygląd nie zmienia się. Aby dokonać zmian, programista musi edytować kod HTML. Dynamiczna strona internetowa strona generowana na bieżąco przez serwer HTTP na podstawie zmiennych i parametrów przekazywanych przez przeglądarkę internetową.
Zmiany zawartości strony dynamicznej mogą być wykonywane po stronie użytkownika, przy pomocy języków skryptowych takich jak JavaScript, ActionScript, lub po stronie serwera przy pomocy języków programowania takich jak PHP, ASP, Perl, Java. Pliki stron internetowych są dokumentami tekstowymi edytowalnymi przy użyciu dowolnego edytora tekstu. Edytory stron internetowych: - tekstowe umożliwiają pracę z kodem HTML - graficzne umożliwiają pracę w trybie WYSIWYG (ang. What You See What You Get) bez znajomości znaczników HTML. Przeglądnij kilka stron internetowych podglądając pliki źródłowe.
3 HTML (ang. HyperText Markup Language) hipertekstowy język znaczników. Język znaczników (ang. markup language) format dokumentu, który obok tekstu zawiera także dodatkowe informacje, które go opisują. Te dodatkowe informacje, na przykład na temat wyglądu czy znaczenia fragmentu dokumentu, są wyrażane poprzez wplecione w tekst znaczniki. Hipertekst organizacja danych w postaci niezależnych leksji połączonych hiperłączami. Hipertekst cechuje nielinearność i niestrukturalność układu leksji. Oznacza to, że nie ma z góry zdefiniowanej kolejności czytania leksji, a nawigacja między nimi zależy wyłącznie od użytkownika. Podstawowym elementem języka HTML jest znacznik. Znaczniki są poleceniami umieszczonymi w nawiasach ostrych np.: <body>. Informują one przeglądarkę o wyglądzie otwieranej strony oraz o strukturze umieszczonego tekstu.
Wyróżnia się znaczniki otwierające, np. <b>, i zamykające, np. </b>. Przykład zastosowania <b> Przykładowy tekst </b> spowoduje pogrubienie tekstu umieszczonego między znacznikami. <b> Przykładowy tekst </b> wynik Przykładowy tekst Prawie wszystkie znaczniki HTML trzeba zamknąć. Wyjątki to: <br> - znacznik łamania wiersza <hr> - znacznik linii poziomej Znaczniki posiadają dodatkowo elementy zwane atrybutami, które definiują ich działanie. Atrybuty natomiast mogą przyjmować różne parametry czyli wartości np.: wielkość, rodzaj lub kolor czcionki. <nazwa znacznika atrybut = wartość> zawartość </nazwa znacznika> lub <nazwa znacznika atrybut = "wartość"> zawartość </nazwa znacznika>
W języku HTML znaczniki mogą być zagnieżdżone, czyli umieszczone w innych znacznikach, przy zastosowaniu reguł zagnieżdżania elementów blokowych i liniowych. Znacznik należący do elementów blokowych to taki, którego zawartość znajduje się w nowej linii. Natomiast, elementy liniowe układają się jeden obok drugiego, jeśli jego zawartość mieści się na ekranie. Znaczniki powinny być zamykane w kolejności odwrotnej do znaczników otwarcia. <p> <i>przykładowy <b>tekst </b> </i> </p> wynik Przykładowy tekst W dokumencie tworzonym w języku HTML powinna być umieszczona deklaracja typu dokumentu. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
Ćwiczenie Uzupełnij tabelę, sprawdzając ich działanie poprzez utworzenie pliku html w notatniku. Znacznik Element blokowy Element liniowy <p></p> <img src= adres /> <h1></h1> <table></table> <td></td> <tr></tr> <li></li> <ul></ul> <b></b> <i></i> <div></div>
XML (ang. Extensible Markup Language, w wolnym tłumaczeniu Rozszerzalny Język Znaczników) uniwersalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób. XML daje dostęp do wielu technologii konstruowania, przetwarzania i przeszukiwania danych. Język XML nie ma ustalonego słownika, dlatego można tworzyć słowniki przeznaczone dla określonych aplikacji. Dokument XML jest zbudowany ze znaczników otwarcia np.:<table> oraz zamknięcia </table> Elementy mogą zawierać atrybuty z metadanymi opisujące je. XHTML (ang. Extensible HyperText Markup Language, rozszerzalny język znaczników hipertekstowych) język służący do tworzenia stron WWW ogólnego przeznaczenia. Specyfikacje XHTML przygotowuje organizacja W3C.
XHTML/1.0 nie jest następcą HTML, a jedynie przedstawieniem HTML 4.01 w postaci XML. XHTML/2.0 miał być następcą HTML, niekompatybilnym wstecz, ale ze względu na niekompatybilność Internet Explorera, a co za tym idzie niechęć użytkowników, W3C zadecydowało o kontynuowaniu linii XHTML/1.0 i HTML 4 jako XHTML 1.1 i HTML 5. W3C (ang. World Wide Web Consortium) to organizacja, która zajmuje się ustanawianiem standardów pisania i przesyłu stron WWW. Została założona w 1994 roku przez Tima Berners-Lee, twórcę WWW oraz autora pierwszej przeglądarki internetowej i serwera WWW.
4 ASCII pierwszy standard kodowania znaków. Stworzone w USA 7 bitowe kodowanie dawało wybór 128 znaków litery małe i duże oraz znaki specjalne. Stan ten zaaprobowała Międzynarodowa Organizacja Standaryzacji ISO i nadała mu status standardu ISO 646. Unicode standard kodowania dla wszystkich języków na świecie. Powstał po 1983 r., zdecydowano się na 16 bitowy kod, który pozwalał na użycie 65536 znaków. Zbiorem znaków dokumentów dla XML i HTML 4.0 jest Unicode. Deklarowanie kodowania Dla XML (wliczając XHTML) <?xml version="1.0" encoding="utf-8"?> Dla HTML lub XHTML jako HTML <meta http-equiv="content-type" content="text/html;charset=utf-8" > Z XHTML należy użyć ukośnika na końcu: <meta http-equiv="content-type" content="text/html;charset=utf-8" />
5 6 Każdy dokument HTML składa się ze znaczników. Znaczniki są poleceniami wysyłanymi do przeglądarki i składają się z dwóch części: polecenia otwierającego <nazwa polecenia> i polecenia zamykającego </nazwa polecenia>, a pomiędzy nimi znajduje się treść. Znaczniki mogą zawierać atrybuty. <body bgcolor= #0000ff > Moja pierwsza strona </body> wynik Moja pierwsza strona
Podstawowe znaczniki strony internetowej: Znaczniki <html></html> <head></head> <body></body> <title></title> Opis Znaczniki te informują przeglądarkę, że wszystko zawarte miedzy nimi ma być interpretowane jako strona internetowa. Nagłówek strony zawierający tytuł strony oraz metatagi. Ciało strony zawierające treść strony. Tytuł strony umieszczony w części head <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> To jest treść strony </body> </html>
7 8 Tworzenie strony w oparciu o tabele. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Strona 1 </title> </head> <body> <table border="2" width="90%" align="center"> <tr><td colspan="3" height="200px" bgcolor="red">logo</td></tr> <tr><td colspan="3" height="50px" color="red"></td></tr> <tr><td width="20%" height="500px">panel LEWY</td> <td>treść</td><td width="20%">panel PRAWY</td></tr> <tr><td colspan="3" height="40px">stopka</td></tr> </table> </body> </html>
Tworzenie strony w oparciu o element <div> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <head> <title> Strona 2 </title> </head> <body> <div style="width:900px; margin:auto; background: #ff8000; "> <div style="width:100%; height:300px; border:solid 3px; background:#57e87d"></div> <div style="width:100%; height:150px; border:solid 3px; background:#60baff"></div> <div style="width:30%; height:400px; border:solid 3px; float:left; background:#fff86c"></div> <div style="width:68%; height:400px; border:solid 3px; float:left; background:#e89f57"></div> <div style="width:100%; height:150px; border:solid 3px; float:left; background:#ff69a7"></div> </div> </body> </html>
9 10 Zmiana rodzaju czcionki: Znacznik <font> <font face= nazwa_czcionki > np: <font face= Time New Roman >Tekst</font> Zmiana rozmiaru czcionki: <font size= 12 >Tekst,rozmiar 12</font> lub <big>tekst większy</big> <small>tekst mniejszy</small> Zmiana koloru czcionki: <font color= red >Tekst na czerwono</font> lub <body text= kolor > <body text= red > - zmienia kolor tekstu dla całej strony. Znacznik <font color= kolor > ma wyższy priorytet niż znacznik <body text= kolor >
Pogrubienie tekstu: Znacznik <b> Kursywa <b>tekst pogrubiony</b> <i>tekst pochylony</i> Indeks dolny, indeks górny: Znacznik <sub> i <sup> Parametr x<sub>2</sub> Powierzchnia 1m<sup>2</sup> Podkreślenie tekstu: <u>tekst podkreślony</u> Znaki specjalne: ( ), < (<), > (>), & (&), ( ),$euro; ( )
Komentarze do kodu HTML: <!-- Formatowanie dokumentu HTML --> Akapit <p> Akapit </p> <p align= left > Akapit wyrównany do lewej strony </p> <p align= right > Akapit wyrównany do prawej strony </p> <p align= center > Akapit wycentrowany </p> lub <center> Tekst wyśrodkowany </center> <p align= justify > Lorem ipsum </p> Nagłówki <h1> Nagłówek pierwszego stopnia </h1> <h2> Nagłówek drugiego stopnia </h2> <h3> Nagłówek trzeciego stopnia </h3> <h6> Nagłówek szóstego stopnia </h6>
Kolor tła elementu <body bgcolor= kolor > Wartość dla atrybutów bgcolor, color może być podawana na trzy sposoby: angielska nazwa koloru, np. red, kod koloru RGB w zapisie szesnastkowym, np. #ff0000 lub w skrócie #f00, kod koloru RGB w zapisie dziesiętnym, np. rgb (255, 0, 0) lub rgb (100%, 0, 0) Do określania tej intensywności możemy używać wyłącznie liczb z zakresu 0-255 lub wyłącznie wartości procentowych z zakresu 0% - 100%.