HTML
Transkrypt
HTML
Informatyka 2MPDI Wykład 4 Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 • Internet Explorer • Opera • Firefox(Mozilla) • Safari • Chrome(Google) HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku tekstowym ASCII, z rozszerzeniem htm lub html HTML • zdefiniowanie sposobu strukturalnej i wizualnej prezentacji dokumentu w przeglądarce internetowej, • osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie przeglądarek lub innych parserów HTML • przeglądarka dla przesyłu dokumentów HTML korzysta przede wszystkim z protokołu HTTP (hypertext transfer protocol) – ale także bezpieczniejszego (szyfrowanego) protokołu HTTPS. Dynamiczny HTML lub DHTML (ang. Dynamic HyperText Markup Language, dynamiczny hipertekstowy język znaczników) • techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML w przeglądarce • umożliwiające interakcję strony WWW z użytkownikiem i stosowanie efektów wizualnych • plik HTML - tekst nieformatowany – małe pliki łatwe do przesyłu w sieci Znaczniki (tagi) – postać ogólna <ZNACZNIK atrybuty> zawartość </ZNACZNIK> atrybuty są opcjonalne (niekonieczne) PODSTAWOWA STRUKTURA dokumentu HTML konfiguracja treść strony <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML> Przykład <A href="jakiś_adres"> Onet </A> nazwa atrybutu znacznik otwierający wartość atrybutu zawartość znacznik zamykający Znaczniki podstawowe (jest ich ok. 80) Strukturalne, np . H1 – nagłówek P – akapit TABLE - tabela DIV, SPAN - grupujące Prezentacyjne – określające formę – np. B – pogrubienie I – italic Hiperłącza (kotwice) A Zagnieżdżanie znaczników <P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P> Tekst1 Tekst2 Tekst3 <TD><IMG src="obraz.jpg" /></TD> obrazek w komórce tabeli Znaczniki elementów pustych <ZNACZNIK /> przykładowo: <BR /> wymuszona zmiana wiersza <IMG /> grafika <INPUT /> pole formularza można pisać: <BR> </BR> lub <BR/> lecz zgodnie z XHTML powinno być: <BR /> ze spacją Wybrane znaczniki … Akapit tekstowy - znacznik <P> Przykłady: <P align="center"> Tytuł </P> <P align="left"> Tytuł2 </P> wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy – o tym za chwilę Dawniej określał to znacznik <FONT> ale niezalecany dla nowszych standardów HTML Akapity nagłówkowe określonych gotowych stylów <H1> Nagłówek pierwszy </H1> <H2> Nagłówek drugi </H2> <H3> Nagłówek trzeci </H3> <H4> Nagłówek czwarty</H4> <H5> Nagłówek piąty</H5> <H6> Nagłówek szósty</H6> Linie poziome znacznik HR pusty – nie ma znacznika zamykającego <HR SIZE="7" WIDTH="400" COLOR="yellow" /> <HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" /> white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy Kolory Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w układzie szesnastkowym (cyfry 0123456789ABCDEF), określające nasycenie składowych RGB (red, green, blue) od 00 (minimum) do FF (maksimum = 25510) np. #17AACF R G B czyli np. #00FF00 to zielony Styl czcionki <B> tekst </B> <I> tekst </I> <U> tekst </U> pogrubiona kursywa podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu <P>Litwo, <B> Ojczyzno </B> moja</P> tylko jedno słowo pogrubione Kolor tła strony – jako atrybut znacznika BODY <BODY BGCOLOR="nazwa koloru"> poprawniej: <BODY style="background-color:nazwa koloru"> motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę Tabele <TABLE BORDER="1"> …. <TR>…</TR> znacznik wiersza <TD>…</TD> znacznik kolumny </TABLE> Przykład: <TABLE BORDER="1"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> Lista wypunktowana <UL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL> Lista numerowana <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL> Przykład <ol> <li>Punkt 1.</li> <li>Punkt 2. <ul> <li>Podpunkt 1.</li> <li>Podpunkt 2.</li> </ul> </li> </ol> 1. Punkt 1. efekt 2. Punkt 2. • Podpunkt 1. • Podpunkt 2. Grafika znacznik IMG <IMG SRC="ścieżka_do_pliku/nazwa_pliku" /> <IMG border="0" src="email_7.gif" width="55" height="45" /> <IMG SRC="OBRAZY/plik.jpg" HEIGHT="80" /> folder podrzędny względem tego, w którym jest plik HTML Odsyłacze (link – hiperłącze) Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej samej stronie, inna strona, inny adres URL) i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. <A HREF= "adres " > Tekst (lub obrazek), który należy kliknąć </A> Np. <A HREF= " http://www.wp.pl" > Wirtualna Polska </A> <A HREF="http://www.microsoft.com/poland/”> Możesz zaglądnąć pod ten adres </A> <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" > </A> Formularze <FORM> <SELECT name="Typy" multiple="multiple"> <OPTION selected="selected">Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> ta sama </SELECT> nazwa <INPUT type="RADIO" name="wybor" value="p" />Podstawowe <INPUT type="RADIO" name="wybor" value="s" />Średnie <INPUT type="RADIO" name="wybor" value="w" />Wyższe Wpisz tekst:<INPUT type="text" name="T1" size="20"/> <INPUT type="submit" value="OK" name="B1" /> <INPUT type="reset" value="Reset" name="B2" /> cd. … <INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK <TEXTAREA NAME="TEKST" ROWS="5" COLS="20"> MIEJSCE NA WIĘKSZY TEKST </TEXTAREA><BR /> </FORM> efekt… Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod Przykład dokumentu HTML <HTML> <HEAD> <TITLE> Moja strona </TITLE> </HEAD> <BODY bgcolor="gray"> <H1> To jest moja strona </H1> <HR size="2" align=left color="navy" /> <TABLE BORDER="3"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL> <LI> <A HREF='http://www.onet.pl>Onet</A> <LI> <A HREF='http://www.google.pl>GOOGLE</A> <LI> <A HREF='http://www.interia.pl>Interia</A> </UL> </BODY> </HTML> HEAD tabela lista hiperłączy BODY CSS – arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style <ZNACZNIK style="cecha:wartość"> ... Styl może mieć wiele cech, np.: <P style="font-size:20px;color:blue"> ... <TABLE style=" background-color:#ff0000; border:2px solid red;"> ... cechy stylu oddzielamy średnikami Przykładowe cechy stylów Opis Styl Przykładowa wartość background-color kolor tła #ff0000 albo rgb(255,0,0) blue background-image adres tła graficznego url('rys1.gif ') border-color kolor ramki red border-style styl i wygląd obramowania dotted dashed solid border wiele cech obramowania 2px solid yellow color kolor tekstu yellow #669933 font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionki italic font-weight grubość (waga) czcionki bold lighter height wysokość elementu 10px 3mm width szerokość elementu odległość od lewej (górnej) krawędzi 100px 10cm 3mm position określenie współrzędnych elementu fixed relative margin odległości od zewnętrznego 3px 3px 10px 20px elementu margin-top margin-bottom margin-left margin-right każdy margines osobno text-align wyrównanie poziome tekstu left center justify text-decoration wygląd tekstu underline vertical-align wyrównanie w pionie top bottom padding oddalenie wewnętrznego elementu left top 5cm definiowany element element wewnętrzny element zewnętrzny Przykład zastosowania margin i padding <DIV style="border:1px solid red; width:600px;background-color:yellow;"> <DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding: 100px 10px 100px 30px;text-align:center;background-color:grey;" > <P style="background-color:green;">Tekst w komórce</P> </DIV> </DIV> Obejrzeć efekt w przeglądarce Sposoby definicji stylów znaczników 1 sposób: bezpośrednio w elemencie <P style="color:red"> To jest tekst </P> To jest tekst 2 sposób: w bloku HEAD wewnątrz znacznika <STYLE> <HTML><HEAD><TITLE>Indeks: elementy</TITLE> <STYLE type="text/css"> p {font-size: 44px;} dla akapitów table {background-color:#ff0000;} </STYLE> </HEAD> <BODY> <P> To jest tekst 1</P> <TABLE> <TR><TD>AAA</TD></TR></TABLE> </BODY></HTML> dla tabel Można zestaw cech nazwać – jest to tzw. klasa – i stosować atrybut class dla różnych znaczników . (kropka) <HTML><HEAD><TITLE>Indeks: elementy</TITLE> <STYLE type="text/css"> .czerwony {background-color:#ff0000;} </STYLE> zastosowania klasy </HEAD> <BODY> <TABLE class="czerwony"><TR><TD>A</TD><TD>B</TD></TR></TABLE> <P class="czerwony"> Tekst </P> </BODY></HTML> A B Tekst tabela akapit Przykład2: <style type="text/css"> body, td, p {font: 14px helvetica, sans-serif; border:2px solid red} table {border:2px solid black;} .gruby {font: bold 18px helvetica, sans-serif;} </style> i dalej.. <TABLE> <TR><TD>A</TD><TD>B</TD></TR> </TABLE> <p class="gruby"> tekst akapitu </p> A B tekst akapitu Można też stosować identyfikatory znaczników # <HTML><HEAD><TITLE>Indeks: elementy</TITLE> <STYLE type="text/css"> #maly {font-size:10px;} #duzy {font-size:30px;} </STYLE> </HEAD> <BODY> <P id="maly"> Tekst 1 </P> <P id="duzy"> Tekst 2 </P> </BODY></HTML> Tekst 1 Tekst 2 3 sposób: W osobnym pliku robimy definicje stylów Plik style.css p {font-size: 44px;} .czerwony {background-color:#ff0000;} Plik index.html <HTML><HEAD><TITLE>Indeks: elementy</TITLE> <LINK rel=stylesheet href="style.css" type="text/css" /> </HEAD> <BODY> <P> To jest tekst 1</P> <TABLE class="czerwony"> <TR><TD>AAA</TD></TR></TABLE> </BODY></HTML> Przykład skryptu HTML z arkuszem stylów <HTML> <HEAD> <TITLE> Moja strona </TITLE> <link rel=stylesheet href="style.css" type="text/css"> </HEAD> <BODY> plik style.css <H1> To jest moja strona </H1> body{ background-color:gray} <HR size="2" align=left color="navy"> table{border-width:3px;} <TABLE> .lista {font-size:20px} <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL class="lista"> <LI> <A HREF='http://www.onet.pl>Onet</A> </LI> <LI> <A HREF='http://www.google.pl>GOOGLE</A> </LI> <LI> <A HREF='http://www.interia.pl>INTERIA</A> </LI> </UL> </BODY> </HTML> Javascript JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. JavaScript jest oddzielnym językiem (nie jest uproszczoną wersją Javy). Może być osadzany w innych programach, na przykład w przeglądarce internetowej, aby, mając dostęp do obiektów otoczenia (np. modelu obiektowego przeglądarki internetowej - DOM), można sprawować nad tym otoczeniem kontrolę. Javascript jest łatwy w nauce i pozwala na pewne „zdynamizowanie” stron internetowych. Przeglądarki mogą pytać o zezwolenie na wykonanie skryptu. Wstawienie skryptu do dokumentu HTML Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między znacznikami <SCRIPT> i </SCRIPT>. <SCRIPT LANGUAGE="JavaScript"> treść skryptu </SCRIPT> <HTML><HEAD></HEAD> <BODY> <P> To jest tekst 1</P> <SCRIPT LANGUAGE="JavaScript"> treść skryptu 1 </SCRIPT> <P> To jest tekst 2</P> <SCRIPT LANGUAGE="JavaScript"> treść skryptu 2 </SCRIPT> </BODY></HTML> Może istnieć wiele skryptów naprzemiennie z pozostałym kodem HTML Aby tworzyć działające skrypty JavaScript wymagane są: - jakaś metoda wprowadzania i przechowania danych (liczb, tekstów) - jakieś instrukcje, które umożliwią obliczenia wyników - jakieś metody pokazania wyniku Wykorzystanie skryptu Javascript w dokumencie HTML <HTML><HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> // obiekt document i jego metoda write - wypisanie tekstu document.write ("To jest zwykły tekst"); // wysyłamy też znacznik HTML document.write ("<BR />"); //nadajemy wartość zmiennej x=5; // ... i wyświetlamy jej wartość document.write("Wartość zmiennej <I>x</I> : "+x); document.write ("<BR>To jest liczba PI:"+Math.PI); </SCRIPT> <P> a to już akapit poza skryptem</P> </BODY></HTML> właściwość obiektu Kilka zasad pisania skryptów Komentarze Komentarz o kilku wierszach, /* treść komentarza */ Jednowierszowy komentarz // tekst Wykorzystywane są w celu: - opisy wyjaśniające - dezaktywowanie instrukcji (testy, błędy) Identyfikatory Są to nazwy elementów (zmiennych, obiektów, funkcji) Zmienne służą do przechowania wartości określonego typu Jednym z podstawowych sposobów nadania wartości zmiennej jest instrukcja przypisania (nadania wartości) Ciąg liter, cyfr, znaków podkreślenia (nie wolno spacji!) Musi się zaczynać od litery Ważne duże i małe litery ! (w odróżnieniu od innych języków) Przykłady identyfikatorów dla zmiennych: x alfa Alfa to dwie różne zmienne mojaZmienna styl "wielbłądzi" B11 c_33 Operatory Arytmetyczne: + - * / %(reszta z dzielenia) Przypisania: = += –= *= /= ++ -%= x+=5 odpowiada x=x+5, x–=5 odpowiada x=x–5, x*=5 odpowiada x=x*5, x/=5 odpowiada x=x/5, inkrementacja – zwiększenie o 1 x++ odpowiada x=x+1 dekrementacja – zmniejszenie o 1 x-- odpowiada x=x-1 x%=5 odpowiada x=x%5 (reszta z dzielenia) + konkatenacja (łączenie tekstów) "Mateusz " + 'Kowalski' para " lub para ' Przykładowo: <SCRIPT LANGUAGE="JavaScript"> x = 7; //początkowo x ma wartość 7 x++; //zwiększamy o 1 x += 4; //dodajemy 4 x %= 10; //reszta z dzielenia z przez 10, a więc ….. 2 //tu trzeba by wypisać wartość x na ekranie, zaraz się nauczymy </SCRIPT> Operatory porównania wyrażenie operator wyrażenie == !=(nierówne) <= < > Przykładowo: x==5 x>=3 a+b> 3*y jest to pytanie: czy jest spełnione odpowiedź: tak lub nie (TRUE/FALSE) >= Operatory logiczne • koniunkcja (i) && • alternatywa (lub) || • negacja ! true && false daje false !false daje true Instrukcje – wykonanie akcji! Instrukcje języka oddzielamy średnikami (jeśli zapisujemy w tym samym wierszu). Czasem blok kilku instrukcji otaczamy klamrami { } zazwyczaj we wnętrzu instrukcji warunkowych i iteracyjnych (np. if, for, while) – o nich za chwilę <SCRIPT LANGUAGE="JavaScript"> instrukcja1; { instrukcja2; traktowany w instrukcja3; całości jako blok instrukcji instrukcja4; } </SCRIPT> Typy instrukcji - przypisania (nadania wartości); - warunkowe - pętle - wykonania funkcji (metody obiektu) Instrukcja przypisania zmienna = wyrażenie; Po lewej stronie znaku = tylko nazwa zmiennej!!! Po prawej stronie znaku = piszemy wyrażenie (bardzo podobne jak w Excelu), zawierające liczby, operatory, nawiasy okrągłe, funkcje – metody obiektów, oraz zmienne o ZNANYCH WARTOŚCIACH Wyrażenie jest obliczane i jego wartość przechowana w zmiennej Przykłady: x=5; alfa= 3*x; b15=(3-x)+2/alfa; Instrukcja wypisania na ekranie document.write (element); document to wbudowany obiekt w Javascript, a write (pisz) to jedna z jego funkcji (tzw. metoda) identyfikator obiektu i identyfikator jego metody oddzielamy kropką Przykład <SCRIPT LANGUAGE="JavaScript"> document.write ("To jest zwykły tekst<BR />"); x=5; //przypisujemy wartość zmiennej // wyświetlamy jej wartość document.write("Wartość zmiennej <I>x</I> : "+x+"<BR />"); napis="Mateusz " + 'Kowalski'; document.write(napis); </SCRIPT> Jak widzimy można wysyłać znaczniki (do pozycjonowania, formatowania itp.) Obiekt Math (uwaga! – z dużą literą M) Wbudowany obiekt Math zawiera wartości matematyczne, jako właściwości (ang. property) i metody (ang. method). Są tutaj przechowywane pewne stałe matematyczne: Math.property lub gotowe funkcje Math.method gdzie property lub method jest jednym z podanych niżej elementów. property (właściwości) E e - stała Eulera, która wynosi ok. 2.718 PI wartość liczby π, czyli ok. 3.14159 method (metody) abs(wyrażenie) wartość bezwzględna liczby cos(wyrażenie) sin(wyrażenie) tan(liczba) funkcje trygonometryczne (argument w radianach!!!) ceil(liczba) zaokrąglenie do całkowitej w górę floor(liczba) zaokrąglenie do całkowitej w dół round(liczba) zaokrąglenie do najbliższej całkowitej exp(liczba) ex UWAGA!!! log(liczba) logarytm naturalny liczby ! pow(liczba1,liczba2) wartość liczby1 podniesionej do potęgi liczby2 random() wartość pseudolosowa z przedziału (0,1) – bez argumentu sqrt(liczba) pierwiastek kwadratowy liczby Przykłady: <SCRIPT LANGUAGE="JavaScript"> document.write(Math.sin(4*Math.PI/180)+"<BR />"); </SCRIPT> lub wykorzystując zmienną: <SCRIPT LANGUAGE="JavaScript"> wynik=Math.sin(3*Math.PI/180); document.write(wynik); </SCRIPT>