witryny i aplikacje internetowe technikum...
TRANSCRIPT
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
.
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.
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.
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.
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.
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.
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.
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>
<b> Przykładowy tekst </b>
Przykładowy tekst wynik
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.
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">
<p> <i>Przykładowy <b>tekst </b> </i> </p> wynik
Przykładowy tekst
Ć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 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.
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.
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.
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" />
4
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.
5
<body bgcolor=”#0000ff”>
Moja pierwsza strona
</body>
Moja pierwsza strona
wynik
6
Podstawowe znaczniki strony internetowej:
Znaczniki Opis
<html></html>
Znaczniki te informują przeglądarkę, że
wszystko zawarte miedzy nimi ma być
interpretowane jako strona internetowa.
<head></head> Nagłówek strony zawierający tytuł strony oraz
metatagi.
<body></body> Ciało strony zawierające treść strony.
<title></title> 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>
Tworzenie strony w oparciu o tabele.
7 8
<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>
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”>
9 10
Pogrubienie tekstu:
Znacznik <b> <b>Tekst pogrubiony</b>
Kursywa <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%.