Transcript Document
Wrocław, dn. 16 maja 2006 roku
HTML
edytory, formularze, CSS
prowadzący:
Piotr Chojnacki
HTML – niezbędne pojęcia
2
Czym jest strona WWW?
Strona WWW – dokument napisany w języku
HTML i w takiej postaci przechowywany w
serwerze WWW.
Zawiera hipertekst uzupełniony elementami
graficznymi
i
multimedialnymi.
Osoba
zainteresowana obejrzeniem danej strony może
ją pobrać z serwera, posługując się przeglądarką
zainstalowaną we własnym komputerze.
3
Czym jest język HTML?
Język HTML – (Hypertext Markup Language - Hipertekstowy
Język Oznaczania) język przeznaczony do opisywania
dokumentów hipertekstowych, prezentowanych i odczytywanych
następnie w sieci WWW za pomocą przeglądarki.
Poszczególne elementy składowe strony WWW, takie jak tytuły,
akapity, obrazy, dźwięki, łączniki z innymi dokumentami, adresy
stron WWW są wyróżniane w tym języku za pomocą
znaczników, które pełnią funkcję poleceń dla przeglądarki.
Dzięki temu hipertekst może być opisany z użyciem bardzo
prostego edytora tekstowego.
4
Czym jest dokument HTML?
Dokument HTML – dokument napisany w języku HTML.
Taki dokument można utworzyć w najprostszym edytorze tekstu,
np. w Notatniku, programie ze środowiska Windows zapisując go
z rozszerzeniem .htm lub .html.
Do odczytywania dokumentów HTML służą przeglądarki.
5
Co jest potrzebne, żeby napisać
stronę internetową?
Teoretycznie może to być dowolny edytor tekstu i dobre
chęci. Jak wcześniej wspomnieliśmy dokument HTML jest
po prostu plikiem tekstowym, gdzie wpisujemy wszystkie
polecenia, dotyczące formatowania tekstu i wstawiania
grafiki.
Lecz pisanie strony w zwykłym edytorze tekstu, byłoby
bardzo
uciążliwe.
Dlatego
powstało
wiele
wyspecjalizowanych edytorów, które ułatwią, przyspieszą i
uprzyjemnią Twoją pracę.
6
Edytory
7
Edytory
Edytor znaczników ezHTML 2.0 Alef (darmowy):
http://ezhtml.bydnet.com.pl/
ezHTML jest łatwy i intuicyjny w obsłudze oraz posiada wiele
zaawansowanych narzędzi edycyjnych. Na uwagę zasługują np.
Zakładki HTML, które umożliwiają dostęp do wszystkich
możliwości języka HTML, umieszczone na nich zostały wszystkie
istotne znaczniki, a także "czarodzieje" i inne kreatory, w
znakomity sposób przyśpieszające pracę. Dużym atutem jest
również fakt, iż jest to program całkowicie darmowy. Wraz z
programem dołączene są Tagik - do sprawdzania poprawności
kodu HTML oraz Kartograf - służący do seryjnego wstawiania
obrazków.
8
Edytory
EdHTML 5.01 (darmowy)
http://bs.binboy.org/
EdHTML programem wspomagającym tworzenie stron WWW
(HTML, xHTML, WML) z wykorzystaniem języków PHP,
PERL i JavaScript. Wspiera również CSS (CSS1, CSS2) i bazę
danych MySQL.
Posiada bardzo wiele funkcji ułatwiających wstawianie
określonych (szablonowych) elementów, znacznie przyspieszając
powstawanie strony.
Zawiera wbudowanych szereg szablonów gotowych witryn,
rozbudowany kurs HTML, a także pomoc do komend PHP,
MySQL czy C++. Jest szybki, mały i można go dowolnie
9
konfigurować.
Edytory
CoreEditor 1.0.2 (płatny)
http://bs.binboy.org/
Licencje: EDUCATION (darmowa), HOME (49zł), PROFESSIONAL(99zł) lub ENTERPRISE(229 zł)
CoreEditor jest następcą cieszącego się sporą popularnością,
darmowego EdHTML-a.
Wspiera kilkadziesiąt różnych kompilatorów, ponad sto
schematów kolorowania składni. Sprawdza się również jako
edytor dla piszących dokumenty w TeX.
Największy nacisk w programie położono na wsparcie XHTML,
CSS, PHP, JavaScript i MySQL, choć również sprawdza się jako
edytor do Pascala, C czy Javy. Sporo kreatorów, szablonów i
gotowych do wykorzystania funkcji usprawnia pracę nad kodem.10
Edytory
Pajączek (płatny)
www.pajaczek.pl
Zawiera ponad 40 różnych schematów kolorowania składni,
obsługuje serwery FTP oraz oferuje synchronizację serwisów.
Wspiera pracę grupową oraz posiada zaawansowane narzędzia
edycji dla różnych języków (PHP, XHTML, XML, JavaScript) i
zarządzania witrynami.
Warto zauważyć, że pomimo adresowania programu do
profesjonalistów Pajączka cechują bardzo przejrzysty interfejs
użytkownika i duża wygoda pracy.
11
HTML – składnia
12
Język HTML
Dokument HTML zawiera tekst, który ma być umieszczony
na stronie i polecenia (zwane znacznikami, „tagami”),
które stanowią informacje dla przeglądarki, jak ten
dokument ma być wyświetlony na ekranie.
Polecenia, dla odróżnienia od zwykłego tekstu umieszcza
się w nawiasach < >. Prawie każde polecenie języka HTML
składa się z dwóch części – otwierającej i zamykającej.
Różnią się one tym, że część zamykająca poprzedzona jest
znakiem /.
Polecenia informują przeglądarkę, co ma zrobić z tekstem, a
parametry tych poleceń, jak ma to być zrobione.
13
Budowa dokumentu HTML
<HTML>
<html>
<HEAD>
<head>
<TITLE> tytuł strony </TITLE> <title> tytuł strony </title>
</HEAD>
</head>
<BODY>
treść strony
</BODY>
<body>
treść strony
</body>
</HTML>
</html>
14
Polskie znaki – znaczniki meta (kilka wybranych).
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
Polecenia te są deklaracją strony kodowej, czyli sposobu, w jaki będą kodowane
znaki na naszej stronie WWW. Zamiast charset=iso-8859-2 można wpisać:
charset=windows-1250, ale jest to mocno odradzane, ponieważ polecenie takie
deklaruje inną stronę kodową, podczas gdy w całym niemal polskim Internecie
przyjęto standard kodowania iso-8859-2.
<meta name="description"content="tu wpisz krótki opis strony">
<meta name="keywords"content="tu wpisz słowa kluczowe">
15
Poprawność kodu
Specyfikacja HTML 4.01: www.w3.org/TR/html4, opracowana przez
organizację W3C: http://www.w3.org określa elementy i atrybuty, które spełniają
dotychczasowe standardy pisania w języku HTML.
Deklaracja typu dokumentu:
Strict DTD - (ścisła) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane
(nie deprecated) oraz nie pojawiają się w dokumentach z ramkami.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Transitional DTD - (przejściowa) lub inaczej loose DTD ("luźna") - zawiera wszystko co
w Strict DTD plus elementy i atrybuty zdeprecjonowane
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Frameset DTD - (dla ramek) zawiera wszystko co w Transitional DTD plus elementy
odnoszące się do ramek: FRAME, FRAMESET oraz NOFRAMES.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
16
Wybrane polecenia
<I>
ustalenie wyróżnienia czcionki – kursywa
<B>
ustalenie wyróżnienia czcionki – pogrubiona
<U>
ustalenie wyróżnienia czcionki – podkreślona
<CENTER>
ustawienie tekstu i grafiki na środku strony
<BR>
zmiana wiersza – przeniesienie tekstu o jeden wiersz w dół
dodatkowy odstęp – wprowadzenie dodatkowej spacji
<
<
>
>
"
"
&
&
<strike>
wypisuje przekreślony tekst
17
Zagnieżdżanie znaczników
Na jeden fragment tekstu może wpływać więcej niż jeden znacznik - i wtedy
mówimy o znacznikach zagnieżdżonych. Jednak zawsze należy zachować w takim
przypadku kolejność domykania znaczników - jako ostatni musi być domknięty ten,
który został otwarty pierwszy. Podobnie, jako pierwszy domykać zawsze trzeba ten
znacznik, który był otwarty ostatnio. Tak, więc poprawna będzie konstrukcja:
Fragment <B> ważnego tekstu <I> możemy wyróżnić </I> pogrubieniem </B>.
natomiast błędna będzie
Fragment <B> ważnego tekstu <I> możemy wyróżnić </B> pogrubieniem </I> .
18
Polecenia z parametrami
Polecenie
Wybrane
wartości
parametrów
Parametr
Znaczenie
SIZE
1-7
ustalenie wielkości czcionki
COLOR
white, green, blue,
red, purple, yellow,
navy, olive
ustalenie koloru czcionki
<A>
HREF
„plik.html”
wstawienie odnośnika
<P>
ALIGN
< FONT >
wprowadzenie akapitu poprzedzonego interlinią
center
ustawienie akapitu na środku strony
right
wyrównanie akapitu do prawego marginesu
left
wyrównanie akapitu do lewego marginesu
justify
wyrównanie akapitu do prawego i lewego
marginesu
19
Polecenia z parametrami…
Polecenie
< BODY > BGCOLOR
< H1 – 6 >
<HR>
Wybrane
wartości
parametrów
Parametr
Znaczenie
ustawienie koloru tła
TEXT
ustawienie koloru tekstu
LINK
ustawienie koloru odnośnika
VLINK
ustawienie koloru „odwiedzonego” odnośnika
ustawienie w nowym wierszu tytułu poziomu od 1
(największy rozmiar czcionki) do 6
ALIGN
center
ustawienie tytułu na środku
right
wyrównanie tytułu do prawego marginesu
left
wyrównanie tytułu do lewego marginesu
justify
wyrównanie tytułu od prawego do lewego
marginesu
align, center, right, left, color, size
linia
20
Polecenia z parametrami…
Polecenie
Parametr
Wybrane
wartości
parametrów
< IMG >
SRC
„plik.gif”
ALIGN
left
ustawienie obrazka po lewej
stronie tekstu
right
ustawienie obrazka po prawej
stronie tekstu
top
ALT
Znaczenie
pobieranie obrazka z pliku
ustawienie obrazka u góry
middle
ustawienie obrazka w środku
bottom
ustawienie obrazka na dole
„objaśnienie”
WIDTH
liczba pikseli szerokość obrazka
HEIGHT
liczba pikseli wysokość obrazka
HSPACE
liczba pikseli odległość obrazka od tekstu w pionie
VSPACE
liczba pikseli odległość obrazka od tekstu w poziomie
21
Indeksy dolne i górne
Indeksy dolne i górne można uzyskać stosując znaczniki:
<SUP> .. </SUP>, który oznacza indeks górny lub
<SUB> .. </SUB>, który oznacza indeks dolny
jako przykład mogą posłużyć następujące wzory:
a <SUP> 2 </SUP> + b <SUP> 2 </SUP> = c <SUP> 2 </SUP>
3x<SUB>1</SUB><SUP>2</SUP> = e <SUP> 2 log <SUB> 3 </SUB>x<SUB>1 </SUB></SUP>
22
Tabela i lista
<TABLE>
<TR>
<TD>...</TD>
</TR>
<TR>
<TD>...</TD>
</TR>
</TABLE>
<UL type="rodzaj">
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</UL>
<TD>...</TD>
<TD>...</TD>
<OL type=”rodzaj numeracji”>
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</OL>
23
Formularze
24
Formularz
Dzięki
formularzom,
które
są
umieszczane
bezpośrednio na stronie WWW, można uzyskać wiele
informacji o użytkownikach odwiedzających nasz
serwis.
Służą one również do zamawiania różnych towarów w
sklepach internetowych, chociaż wtedy należy
dodatkowo zadbać o bezpieczeństwo przesyłanych
danych.
Zajmiemy się prostym formularzem pocztowym.
25
Formularz…
Ramy formularza:
<FORM ACTION="mailto:adres e-mail gdzie wysłać formularz"
METHOD="post">
(Tutaj umieszcza się pola formularza)
</FORM>
lub
<FORM ACTION="mailto:adres e-mail?Subject=temat" METHOD="post">
(Tutaj umieszcza się pola formularza)
</FORM>
26
Formularz…
pole tekstowe, pole wyboru, lista rozwijana
<FORM>
<INPUT TYPE="text" NAME="nazwa">
</FORM>
lub
<FORM>
<INPUT NAME="nazwa">
</FORM>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść
pytania), która nie powinna być jednak zbyt długa! Zostanie ona później
wysłana wraz z formularzem.
27
Formularz…
pole tekstowe, pole wyboru, lista rozwijana
<FORM>
<INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość">Tu
wpisz opis pola
</FORM>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść
pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana
wraz z formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona
również dołączona do formularza.
28
Formularz…
pole tekstowe, pole wyboru, lista rozwijana
<FORM>
<SELECT NAME="nazwa">
<OPTION>Tu wpisz pierwszą możliwość
<OPTION>Tu wpisz drugą możliwość
(...)
</SELECT>
</FORM>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść
pytania).
Zostanie ona później wysłana wraz z formularzem (wysłane zostaną również
wpisane możliwości odpowiedzi).
29
Formularz…
wysyłanie
<FORM>
<INPUT TYPE="submit" VALUE="wartość">
</FORM>
gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku
wysyłania formularza.
Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Prześlij
kwerendę".
30
CSS
31
Co to są style?
Jest to potężne narzędzie do formatowania stron WWW (CSS Cascading Style Sheets - Kaskadowe Arkusze Stylów).
Dają one ogromne możliwości manipulowania wyglądem
dokumentów i zwiększają efektywność narzędzi. Dodatkowo nie
powodują problemów w przeglądarkach, które ich nie obsługują.
Styl jest zespołem poleceń formatujących i pozwala zmieniać
wygląd pojedynczych elementów strony lub nawet całej serii
dokumentów.
32
Dlaczego warto używać styli?
Style stały się już praktycznie podstawowym narzędzie
formatującym. Jeśli poważnie myślisz o zajęciu się
projektowaniem stron WWW, koniecznie musisz je poznać.
Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio
w składni HTML, które dotyczą formatowania, będą stopniowo
wycofywane przez producentów przeglądarek internetowych,
na rzecz rekomendowanych analogicznych deklaracji stylów.
Widać już nawet różnice pomiędzy IE4 a IE5!
Dokumenty pisane z wykorzystaniem arkuszy stylów są
zwykle bardziej przejrzyste i krótsze.
33
Dlaczego warto używać styli?
Style pozwalają w łatwy sposób zarządzać całą serią dokumentów,
poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w
łatwy i wygodny sposób, można dokonać modyfikacji rodzaju
formatowania jednocześnie we wszystkich dokumentach, zmieniając
dane tylko w jednym pliku!
Dzięki możliwości stosowania klas selektorów, znacznie
oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie
atrybuty formatowania (których może być bardzo dużo), odnoszące
się do wielu elementów, które mają wyglądać tak samo.
Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i
nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza
to późniejszą modyfikację strony, ponieważ zmian dokonujemy
tylko w jednym miejscu, a wpływają one na wiele elementów
jednocześnie.
Możliwość stosowania różnorodnych jednostek oraz sposobów
definiowania kolorów.
34
Wstawianie styli
styl lokalny: <SELEKTOR style="cecha: wartość; cecha2: wartość2...">...</SELEKTOR>
rozciąganie stylu: <SPAN style="cecha: wartość; cecha2: wartość2...">...</SPAN>
wydzielone bloki: <DIV style="cecha: wartość; cecha2: wartość2...">...</DIV>
35
Wstawianie styli
zewnętrzny arkusz styli:
<HEAD>
(...)
<LINK REL="Stylesheet" HREF="ścieżka dostępu do pliku *.css" TYPE="text/css">
(...)
</HEAD>
wewnętrzny arkusz styli:
<HEAD>
<STYLE TYPE="text/css">
<!-SELEKTOR { cecha: wartość; cecha2: wartość2... }
SELEKTOR2 { cecha: wartość; cecha2: wartość2... }
(...)
-->
</STYLE>
(...)
</HEAD>
import arkusza styli:
<STYLE TYPE="text/css">
<!-@import url(adres zewnętrznego arkusza stylów);
-->
</STYLE>
36
Kaskadowość styli
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same
elementy strony, stylów z różnych źródeł.
Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które
znajdują się "bliżej" formatowanego elementu.
Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez
style zdefiniowane w nagłówku dokumentu, to zaś może być zmieniane przez style
zdefiniowane bezpośrednio w ciele dokumentu (inline).
Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:
•
•
•
•
Styl lokalny (inline)
Rozciąganie stylu (SPAN) oraz wydzielone bloki (DIV)
Wewnętrzny arkusz stylów
Zewnętrzny arkusz stylów oraz import arkusza stylów
37
Kaskadowość styli
Można jednak świadomie zmienić zasady kaskadowości. Służy do
tego polecenie !important.
Jeżeli pojawi się ono w deklaracji stylu po wartości cechy,
spowoduje to, że taka cecha będzie miała pierwszeństwo przed
innymi, nawet, jeśli ma niższy priorytet
38
Selektory
klasy selektorów:
SELEKTOR.klasa { cecha: wartość }
Np.: p.bialy {color:white;}
Np.: .bialy {color:white;}
użycie: <p>jakiś paragraf</p>
użycie: <p class=’’bialy’’>jakiś paragraf</p>
selektor identyfikatora :
SELEKTOR#identyfikator { cecha: wartość }
Np.: p#bialy {color:white;}
użycie: <p id=’’bialy’’>jakiś paragraf</p>
39
Omówienie podstawowych poleceń formatowania
SELEKTOR { font-size: rozmiar }
xx-smal - najmniejsza
x-small - mniejsza
small - mała
medium - średnia
large - duża
x-large - większa
xx-large - największa
bądź px, em, in itp.
SELEKTOR { font-family: rodzaj, rodzaj1, rodzaj2,... }
SELEKTOR { font-style: styl }
Natomiast jako "styl" należy wpisać:
normal - czcionka normalna (podstawowa)
italic - czcionka pochylona
oblique - również czcionka pochylona (podobna jak poprzednio)
40
Omówienie podstawowych poleceń formatowania
SELEKTOR { font-weight: waga }
normal - czcionka normalna (podstawowa)
bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700
(odpowiednik "bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak
samo wytłuszczonej jak dla poprzedniej wartości w sekwencji
SELEKTOR { color: kolor }
SELEKTOR { text-decoration: dekoracja }
none - bez zmian
underline - podkreślenie
line-through - przekreślenie
overline - nadkreślenie
SELEKTOR { text-align: wyrównanie }
left - wyrównanie tekstu do lewego marginesu (domyślnie)
right - wyrównanie do prawego marginesu
center - do środka (wyśrodkowanie)
justify - do obu marginesów jednocześnie (justowanie).
41
Omówienie podstawowych poleceń formatowania
SELEKTOR { text-indent: wcięcie }
SELEKTOR { background-color: kolor }
SELEKTOR { background-image: url(ścieżka dostępu do obrazka) }
SELEKTOR { background-repeat: powtarzanie }
Natomiast jako "powtarzanie" należy wpisać:
repeat - powtarzanie tła w obu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
42
Omówienie podstawowych poleceń formatowania
SELEKTOR { margin-top: rozmiar }
SELEKTOR { margin-bottom: rozmiar }
SELEKTOR { margin-left rozmiar }
SELEKTOR { margin-right: rozmiar }
SELEKTOR { padding-top: rozmiar }
SELEKTOR { padding-bottom: rozmiar }
SELEKTOR { padding-left: rozmiar }
SELEKTOR { padding-right: rozmiar }
SELEKTOR {height : wysokość }
SELEKTOR { width: szerokość }
43
Pseudoklasy
a.odnosnik:link {color: #666666; text-decoration: underline; font-size: 16px; }
a.odnosnik:visited {color: #666666; text-decoration: underline; font-size: 16px; }
a.odnosnik:active {color: #666666; text-decoration: underline; font-size: 16px; }
a.odnosnik:hover { color: black; background: none; text-decoration: none; fontsize: 16px; }
44
Dziękuję
koniec części teoretycznej
Większość materiałów zawartych w tej
prezentacji opiera się na kursie
http://www.kurshtml.boo.pl
Prezentację jak i materiały do tego wykładu można znaleźć na stronie:
www.piotrchojnacki.pl (strona główna)
www.di.piotrchojnacki.pl ( bezpośrednio dydaktyka informatyki)
45