HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

Wielkość: px

Rozpocząć pokaz od strony:

Download "HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych"

Władysława Mróz
8 lat temu
Przeglądów:

1 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

prezentacji dokumentu w przeglądarce internetowej, osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie

2 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)

służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML umożliwiających

3 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>

<HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD>

4 Przykład <Ahref=" Onet </A> nazwa atrybutu znacznik otwierający wartość atrybutu zawartość znacznik zamykający

5 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

6 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

7 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ą

/> pole formularza <TAG /> można pisać: <BR> </BR> lub

8 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>

nowszych standardów HTML Akapity nagłówkowe określonych gotowych stylów <H1> Nagłówek pierwszy </H1> <H2>

9 Linie poziome znacznik HR (pojedynczy) <HR/> <HR style="width:600px;height:4px;background-color:navy"/>

10 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>

11 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ę

blue fuchsia lime red teal olive yellow maroon navy inne kolory oraz

12 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>

13 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>

</UL> Lista numerowana <OL> <LI> tekst punktu pierwszego </LI>

14 Przykład <ol> <li>punkt 1.</li> <li>punkt 2. <ul> <li>podpunkt 1.</li> <li>podpunkt 2.</li> </ul> </li> </ol> 1. Punkt Punkt 2. Podpunkt 1. Podpunkt 2.

15 Grafika znacznik IMG - pojedynczy <IMG SRC="ścieżka\plik_graficzny" /> <IMG src=" _7.gif"/> <IMG SRC="OBRAZY/plik.jpg" style="height:60px"/> folder podrzędny względem tego, w którym jest plik HTML

16 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= " > Wirtualna Polska </A> <A HREF=" > Możesz zaglądnąć pod ten adres </A> <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" > </A>

<AHREF= "adres " > Tekst (lub obrazek), który należy kliknąć </A> Np. <A HREF= " http://www.wp.

17 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.

<OPTION>Blues</OPTION> </SELECT> ta sama nazwa <INPUT type="radio" name="wybor"

18 <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>

name="b2" /> <INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK <TEXTAREA

19 efekt

20 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=' <LI> <A HREF=' <LI> <A HREF=' </UL></FONT> </BODY> </HTML> lista hiperłączy BODY

</TD> </TR> tabela <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL> <LI> <A HREF='http://www.onet.

21 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

22 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

23 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 # font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionki italic

24 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

Podobne dokumenty

Informatyka 2MPDI. Wykład 4

Informatyka 2MPDI. Wykład 4 Informatyka 2MPDI Wykład 4 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