HTML HTML(ang. HyperTextMarkupLanguage, 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 zapiswpliku zrozszerzeniemhtmlubhtml
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. hypertexttransfer protocol) także HTTPS (+secure bezpieczny)
Znaczniki (tagi) postać ogólna <TAG atrybuty> zawartość </TAG> STRUKTURA szkieletu 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 <Ahref="http://www.onet.pl"> Onet </A> nazwa atrybutu znacznik otwierający wartość atrybutu zawartość znacznik zamykający
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) przykładowo: <BR /> wymuszona zmiana wiersza <IMG /> grafika <INPUT /> pole formularza <TAG /> 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 stylei 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/> <HR style="width:600px;height:4px;background-color:navy"/>
Styl czcionki <B> tekst </B> <I> tekst </I> <U> tekst </U> pogrubienie kursywa 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 <BODYstyle="background-color:nazwakoloru"> 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 <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.
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ą. <AHREF= "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> </SELECT> ta sama nazwa <INPUT type="radio" name="wybor" value="p" />Podstawowe <INPUT type="radio" name="wybor" value="s" />Srednie <INPUT type="radio" name="wybor" value="w" />Wyższe 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> tabela <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> lista hiperłączy BODY
CSS arkusze stylów Wykorzystujemy tu atrybut styledla 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 Styl 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) 10cm 3mm krawędzi position margin margin-top margin-bottom margin-left margin-right określenie współrzędnych elementu odległość od zewnętrznego elementu każdy margines osobno fixed relative 5cm text-align wyrównanie poziome tekstu left center justify vertical-align wyrównanie w pionie top bottom width padding szerokość elementu odległość od krawędzi elementu