Prezentacja programu PowerPoint
Download
Report
Transcript Prezentacja programu PowerPoint
Informatyka
MPDI2
wykład 2
HTML
Strony WWW (World Wide Web)
Mosaic – pierwsza przeglądarka 1993
• Internet Explorer (ver.11)
• Chrome(Google)
• Firefox(Mozilla)
• Opera
• Safari
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
Jak widać elementy mają hierarchię, mogą się
zagnieżdżać ("rodzice" i "dzieci").
PODSTAWOWA STRUKTURA dokumentu HTML
pewne
parametry
konfiguracji
treść
strony
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
Tu są elementy pojawiające się na stronie
</BODY>
</HTML>
Plik tekstowy o nazwie z rozszerzeniem htm lub html, często
index.html
Zasady ogólne
• Plik HTML można utworzyć np. zwykłym Notatnikiem
Windows (zalecany lepszy notatnik, np. Notepad2)
• Ciąg spacji interpretowany jest jak jedna spacja, nie
wolno dawać spacji w nazwie znacznika, atrybutu i
cechy stylu,
• Dzielenie tekstu dokumentu HTML na wiersze
znakami ENTER nie wpływa na interpretację przez
przeglądarkę, akapity tekstowe tworzymy znacznikami
strukturalnymi, najczęściej znacznikiem akapitu P
• duże i małe litery nie mają znaczenia w definicji
znaczników i ich atrybutów, mają znaczenie tylko dla
zawartości tekstowej
Znaczniki (tagi) – postać ogólna
<ZNACZNIK atrybuty>
zawartość
</ZNACZNIK>
atrybuty są opcjonalne (niekonieczne)
Przykład - znacznik hiperłącza
<A href="jakiś_adres"> Onet </A>
nazwa
atrybutu
otwarcie
znacznika –
identyfikator typu
znacznika – tutaj A
wartość
atrybutu
zawartość
Może być kilka atrybutów
ważny atrybut: style
zamknięcie
znacznika
Znaczniki podstawowe (jest ich ok. 80)
Strukturalne, np.
P – akapit tekstowy
TABLE - tabela
DIV, SPAN – grupujące
H1 – nagłówek
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>
np.
obrazek w komórce tabeli
UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia
kilku spacji stosuje się twarde spacje
tekst tekst
Znaczniki elementów pustych
<ZNACZNIK />
przykładowo:
<BR /> wymuszona zmiana wiersza
<IMG /> grafika
<INPUT /> pole formularza
<HR /> linia pozioma
można pisać:
<BR> </BR> lub
<BR/> a nawet <BR>
lecz zgodnie z XHTML powinno być:
<BR />
ze spacją
Wybrane znaczniki …
Akapit tekstowy - znacznik <P>
Przykład:
<P> Tytuł </P>
wybór kroju, koloru, rozmiaru czcionki przez atrybut
style i jego cechy – o tym za chwilę
Dawniej określały to znaczniki <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>
<P> Ten tekst
i tak znajdzie się
w jednym wierszu </P>
efekt:
Ten tekst i tak znajdzie się w jednym wierszu
<P>.. chyba że podzielimy akapit <BR/> na wiersze </BR> znacznikami
wymuszonej zmiany wiersza</P>
efekt:
.. chyba że podzielimy akapit
na wiersze
znacznikami wymuszonej zmiany wiersza
<P style="opis stylu">………..tekst….</P>
Znaczniki często posiadają atrybut style
Dla akapitu ustalić tu można krój i wielkość
czcionki, jej kolor, tło akapitu, ramki itd.
… jak opisywać styl poznamy później
W tekście akapitu może być inny znacznik, np. znacznik
obrazka, tabeli, znacznik formatujący jakieś słowo itp.
Znaczniki wewnętrzne dziedziczą cechy po zewnętrznych,
chyba że wewnętrzny znacznik ma cechy przedefiniowane
Linie poziome
znacznik HR
pusty – nie ma znacznika zamykającego
<HR style="……tu opis stylu…………….."/>
Kolory
Standardowe nazwy angielskie
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
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 cecha stylu znacznika BODY
<BODY style="background-color:opis koloru">
np.:
<BODY style="background-color:yellow">
<BODY style="background-color:#0000FF">
motywy lub obrazek w tle strony można
zdefiniować innymi parametrami stylu dla BODY
– o tym za chwilę
Tabele znaczniki zagnieżdżane
znacznik tabeli
<TABLE >
….
znacznik wiersza
<TR>…</TR>
znacznik kolumny
<TD>…</TD>
</TABLE>
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>
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 listy wielopoziomowej
<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
znacznik pusty, posiada atrybut SRC określający ścieżkę
względną i nazwę pliku graficznego
<IMG SRC="ścieżka_do_pliku/nazwa_pliku" />
<IMG SRC="email_7.gif" style="…tu opis stylu……" />
<IMG SRC="./OBRAZY/plik.jpg" />
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, zakładka na tej samej
stronie) pozwala skoczyć do niego za pomocą kliknięcia na niej myszką.
Posiada atrybut href określający lokalizację.
<A href= "lokalizacja ">
Tekst (często grafika), który należy kliknąć </A>
Np.
tekst
<A href= "http://www.wp.pl" > Wirtualna Polska </A>
grafika
<A href="http://www.microsoft.com/poland/"> <IMG src="…" /> </A>
<A href="./reklama.html"> <IMG SRC="reklama.jpg" > </A>
inny dokument w tym
samym folderze
Formularze
<FORM>
<SELECT name="Typy" multiple="multiple">
pole
<OPTION selected="selected">Rock and roll</OPTION>
rozwijane
<OPTION>Jazz</OPTION>
<OPTION>Blues</OPTION>
Uwaga: ta
</SELECT>
sama nazwa
<INPUT type="RADIO" name="wybor" value="p" />Podstawowe
<INPUT type="RADIO" name="wybor" value="s" />Średnie grupa
<INPUT type="RADIO" name="wybor" value="w" />Wyższe radiowa
Wpisz tekst:<INPUT type="text" name="T1" size="20" />
<INPUT type="submit" value="OK" name="B1" />
<INPUT type="reset" value="Reset" name="B2" />
przyciski
cd. …
<INPUT type="CHECKBOX" name="ok" VALUE="B" /> OK
pole
tak/nie
<TEXTAREA name="TEKST" rows="5" cols="20">
MIEJSCE NA WIĘKSZY TEKST
</TEXTAREA><BR />
pole
tekstowe
</FORM>
Jak widać elementy formularza mają istotne atrybuty:
type, name value i inne.
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>
HEAD
<TITLE> Moja strona </TITLE>
</HEAD>
<BODY style="background-color:gray;margin-left:3cm">
<H1> To jest moja strona </H1>
<HR style="width:100%;height:3px;background-color:black"/>
<TABLE style="border:1px solid red">
<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>
zastosowano tu już atrybut style (następny wykład)
tabela
lista
hiperłączy
BODY