Transcript Slajd 1
Mechatronika
PWSW
Informatyka
Wykład 2
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
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>
Znaczniki (tagi) – postać ogólna
<ZNACZNIK atrybuty> zawartość </ZNACZNIK>
atrybuty są opcjonalne (niekonieczne)
znacznik
otwierający
znacznik
zamykający
Przykład dla znacznika opisującego hiperłącze
<A href="http://onet.pl"> Onet </A>
nazwa
atrybutu
wartość
atrybutu
zawartość
UWAGA:
- w HTML wielkość liter w nazwie znacznika bez znaczenia, w zawartości
tekstowej tak jak napiszemy
- ważne: domykać <>, cudzysłowy
Jak widać elementy mają hierarchię, mogą się
zagnieżdżać ("rodzice" i "dzieci").
Są elementy współrzędne i podrzędne
Znaczniki podstawowe (jest ich ok. 80)
Strukturalne (pewien obiekt), np .
P – akapit
H1 – akapit nagłówkowy
TABLE – tabela
UL, LI – listy
DIV, SPAN – grupujące
IMG – obraz
i inne
Prezentacyjne – określające formę – np.
B – pogrubienie
I – italic
U - podkreślenie
Hiperłącza (kotwice)
A
Zagnieżdżanie znaczników
<P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P>
Tekst1
np.
Tekst2
Tekst3
<TD><IMG src="obraz.jpg" /></TD>
obrazek w komórce tabeli
UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia kilku
spacji stosuje się twarde spacje
text text
Znaczniki elementów pustych (bez zawartości)
<ZNACZNIK atrybuty/>
można pisać:
<ZNACZNIK> </ZNACZNIK>
przykładowo:
<BR /> wymuszona zmiana wiersza
<IMG /> grafika
<INPUT /> pole formularza
<BR/>
albo
<BR></BR>
lecz zgodnie z XHTML powinno być:
<BR />
ze spacją
Wybrane znaczniki …
Akapit tekstowy - znacznik <P> Przykłady:
<P> Tytuł </P>
<P> 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 style="tu opis stylu" />
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 cecha stylu znacznika
BODY
<BODY style="background-color:nazwa koloru">
motywy lub obrazek w tle strony można
zdefiniować innymi parametrami stylu dla BODY
np. background-image
Kolory (czcionki, tła, ramek)
white aqua silver gray blue
fuchsia lime red teal olive yellow maroon navy
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
Tabele
<TABLE>
….
</TABLE>
<TR>…</TR> znacznik wiersza
<TD>…</TD> znacznik kolumny
ZAGNIEŻDŻANIE
Przykład:
<TABLE>
<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>
To jest tabela bez ramek – obramowania jako cechy stylu dla całej
tabeli i pojedynczych komórek
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>
efekt
ZAGNIEŻDŻANIE
1. Punkt 1.
2. Punkt 2.
• Podpunkt 1.
• Podpunkt 2.
Grafika
znacznik IMG
<IMG SRC="ścieżka_do_pliku/nazwa_pliku" />
<IMG SRC="OBRAZY/plik.jpg" style="opis_stylu"/>
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 URL" >Element, 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>
ta sama
<OPTION>Blues</OPTION>
</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 />
<TABLE>
<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
<TABLE style=" lista cech stylu"> ...
Styl może mieć wiele parametrów:
<TABLE style=" background-color:#ff0000; border:2px solid red;"> ...
cechy oddzielamy średnikami
cecha1:wartość; cecha2:wartość itd.
Definicje stylów znaczników lub klasy
1. bezpośrednio w elemencie
<P style="color:red"> To jest tekst </P>
2. w bloku HEAD
<HTML><HEAD><TITLE>Indeks: elementy</TITLE>
<STYLE type="text/css">
p {font-size: 144px;}
tag
.czerwony {background-color:#ff0000;border:1px solid black;}
#moj {background-color:#00cc00;}
identyfikator
</STYLE>
</HEAD>
<BODY>
<P> To jest tekst 1</P>
<TABLE class="czerwony" style="margin:0 auto;font-size:40px;">
<TR><TD>AAA</TD>
<TR><TD id="moj">BBB</TD></TR></TABLE>
</BODY></HTML>
klasa
3. W osobnym pliku
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>
Osobny plik ze stylami, definicjami klas
– daje możliwość oddzielenia treści i struktury (HTML) od
formy i wyglądu (arkusz stylów CSS)
Przykładowe cechy stylów
Styl
Opis
Przykładowa wartość
background-color
kolor tła
red
background-image
adres tła graficznego
url('rys.gif')
border-color
kolor ramki
#33FF99
border-style
styl i wygląd obramowania
solid (ciągła)
dotted (kropkowana)
dashed (kreskowana)
border-width
grubość ramki
1px
border
grubość, styl i kolor ramki
1px solid green
cursor
wygląd kursora
hand
color
kolor czcionki tekstu
yellow
font-family
rodzaj oraz rodzina czcionki
Arial sans-serif
font-size
wielkość czcionki
14px
font-style
styl czcionki
italic
(piksel)
font-weight
grubość (waga) czcionki
bold
lighter
height
wysokość elementu
left top
odległość od lewej (górnej)
krawędzi
10cm
20px
10mm
2in (cale)
10cm
text-align
wyrównanie poziome tekstu
left
right
justify
text-decoration
wygląd tekstu
underline
vertical-align
wyrównanie w pionie
top
width
szerokość elementu
200px
margin
odległość od zewnętrznego
elementu
10px 20px 30px 50px
(góra prawy dół lewy)
padding
odległość od krawędzi
elementu
jak wyżej
Pełny opis możliwych do zastosowania cech stylów:
np. http://www.signs.pl/html/o/style.php
Przykładowo:
<DIV style="border:1px solid red; width:600px;backgroundcolor:yellow;margin:0 auto;">
<DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding:
100px 20px 200px 60px;text-align:center;background-color:grey;" >
<p style="background-color:white;margin:0;font-size:44px;">Tekst w
komórce</P>
</DIV>
</DIV>
Obejrzeć efekt
w przeglądarce
margin
padding
Przykładowo:
<head><style type="text/css">
body{font: 14px helvetica, sans-serif;}
td {font: 14px helvetica, sans-serif;}
p.gruby {font: bold 16px helvetica, sans-serif;}
</style></head>
i dalej..
<BODY>
….
<TABLE style="border: 3px solid green;"><TR><TD>.. itd
</TABLE>
<P class="gruby"> tekst akapitu </P>
….