Transcript Slajd 1
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. 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 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 <A href="http://www.onet.pl"> Onet </A> nazwa atrybutu znacznik otwierający wartość atrybutu znacznik zamykają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 /> <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 <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 <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ą. <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> ta sama nazwa <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 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> tabela <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> 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 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 left top odległość od lewej (górnej) krawędzi 10cm 3mm 10cm 3mm 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