HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu 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 tzw. parserów (analizatorów składni) HTML. HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku z rozszerzeniem htm lub html
Dynamiczny HTML lub DHTML (ang 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 umożliwiających interakcję strony www z użytkownikiem i stosowanie efektów wizualnych Protokół przesyłu w sieci – HTTP (ang. hyper text transfer protocol) – także HTTPS (+secure – bezpieczny)
Znaczniki (tagi) – postać ogólna <TAG atrybuty> zawartość </TAG> STRUKTURA szkieletu dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML> konfiguracja treść strony
<A href="http://www.onet.pl"> Onet </A> Przykład <A href="http://www.onet.pl"> Onet </A> nazwa atrybutu wartość atrybutu znacznik zamykający znacznik otwierający zawartość
Znaczniki podstawowe (jest ich ok. 80) Strukturalne H1 – nagłówek P – akapit DIV, SPAN - grupujące Prezentacyjne 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 href="obraz.jpg" /></TD> obrazek w komórce tabeli
Znaczniki elementów pojedynczych (pustych) <TAG /> 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> Jakiś tekst </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 (pojedynczy) <HR style="width:600px;height:4px;background-color:navy" />
<P>Litwo, <B> Ojczyzno </B> moja</P> Styl czcionki <B> tekst </B> pogrubienie <I> tekst </I> kursywa <U> tekst </U> podkreślenie Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu <P>Litwo, <B> Ojczyzno </B> moja</P>
Kolor tła strony – jako cecha atrybutu style <BODY style="background-color:nazwa koloru"> white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy inne kolory oraz np. motywy lub obrazek w tle strony można zdefiniować parametrem stylu dla BODY – o tym za chwilę
Tabele <TABLE BORDER="1"> </TABLE> <TR></TR> znacznik wiersza <TD></TD> znacznik kolumny 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 Lista numerowana <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. 2. Punkt 2. Podpunkt 1. Podpunkt 2.
znacznik IMG - pojedynczy Grafika znacznik IMG - pojedynczy <IMG SRC="ścieżka\plik_graficzny" /> <IMG src="email_7.gif" /> <IMG SRC="OBRAZY/plik.jpg" style="height:60px" /> 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>Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> </SELECT> <INPUT type="RADIO" name="wybor" value="p" checked/>Podstawowe <INPUT type="RADIO" name="wybor" value="s" />Średnie <INPUT type="RADIO" name="wybor" value="w" />Wyższe ta sama nazwa cd. …
<P>Wpisz tekst:</P> <INPUT type="text" name="T1" size="20" /> <INPUT type="submit" value="OK" name="B1" /> <INPUT type="reset" value="Reset" name="B2" /> <INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK. <TEXTAREA NAME="TEKST" ROWS="5" COLS="20"> miejsce na większy tekst </TEXTAREA> </FORM>
efekt…
Przykład skryptu 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></FONT> </BODY> </HTML> tabela BODY lista hiperłączy
CSS - atrybut style i jego cechy Wykorzystujemy tu atrybut style dla dowolnego znacznika <TABLE style=" background-color:#ff0000; "> ... Styl może mieć wiele cech, np..: <TABLE style="background-color:#ff0000; font-size:12px;"> itd. cechy oddzielamy średnikami
Kolory Oprócz nazw ang. można podawać 3 liczby w układzie szesnastkowym, określające nasycenie składowych RGB (red, green, blue) np. #17AACF R G B czyli np. #00FF00 to zielony
Przykładowe cechy stylów Opis Przykładowa wartość background-color kolor tła #ff0000 green background-image adres tła graficznego rys.gif border-color kolor ramki red border-style styl i wygląd obramowania dotted dashed solid 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 10cm 3mm left top odległość od lewej (górnej) krawędzi margin-top margin-bottom margin-left margin-right każdy margines osobno 5cm margin wszystkie marginesy (góra, lewy, dół, prawy) 10px 20px 10px 40px text-align wyrównanie poziome tekstu left center justify vertical-align wyrównanie w pionie top bottom width szerokość elementu padding odległość od krawędzi elementu