Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Kurs języka HTML Mariusz Tomczyk.

Podobne prezentacje


Prezentacja na temat: "Kurs języka HTML Mariusz Tomczyk."— Zapis prezentacji:

1 Kurs języka HTML Mariusz Tomczyk

2 Plan referatu Budowa dokumentu HTML Znaczniki tekstu
Multimedia na stronie Formularze Ramki i tabele Kaskadowe arkusze stylów

3 Budowa strony strona Nagłówek <HTML> <HEAD>
<TITLE>Tytuł strony</TITLE> </HEAD> <BODY> właściwa treść dokumentu (ciało) </BODY> </HTML> Tytuł Ciało dokumentu

4 Budowa dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD>   <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso ">   <META NAME="Description" CONTENT="Tu wpisz opis zawartości strony">   <META NAME="Keywords" CONTENT="Tu wpisz wyrazy kluczowe">   <META NAME="Author" CONTENT="Tu wpisz swoje imię i nazwisko">   <META HTTP-EQUIV="Content-Language" CONTENT="pl">   <TITLE> Tu wpisz tytuł strony</TITLE> </HEAD> <BODY> Tu wpisuje się treść strony </BODY> </HTML>

5 BODY <BODY TEXT="kolor">...</BODY>
<BODY BGCOLOR="kolor">...</BODY> <BODY BACKGROUND="ścieżka dostępu do obrazka">...</BODY> <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3">...</BODY> <BODY LEFTMARGIN="x1" TOPMARGIN="y1" >...</BODY> <BODY style="scrollbar-base-color: kolor">...</BODY>

6 Znacznik akapitu <P></P> Oznaczenie paragrafu oddzielonego linią pustą Korzystając z metod: <P ALIGN="left">...</P> <P ALIGN="right">...</P> <P ALIGN="center">...</P> <P ALIGN="justify">...</P>

7 Tytuł pierwszego rzędu (H1)
Znacznik tytułów <Hn>...</Hn> nadawanie nagłówkom tytułów Tytuł pierwszego rzędu (H1) Tytuł drugiego rzędu (H2) Tytuł trzeciego rzędu (H3) Tytuł czwartego rzędu (H4) Tytuł piątego rzędu (H5) Tytuł szóstego rzędu (H6) <Hn ALIGN="left">...</Hn> <Hn ALIGN="center">...</Hn>

8 Formatowanie tekstu <DIV>...</DIV> Wydzielenie większego bloku tekstu (metody) <CENTER>...</CENTER> wyśrodkowanie elementu <BR> zakończenie linii <NOBR>...</NOBR> blokada przełamania tekstu <B>...</B> pogrubienie czcionki <I>...</I> pochylenie <U>...</U> podkreślenie fragmentu tekstu <S>...</S> lub <STRIKE>...</STRIKE> przekreślenie <SUP>...</SUP> indeks górny <SUB>...</SUB> indeks dolny <PRE>...</PRE> tekst predefiniowany (spacje i tabulatory)

9 Znacznik czcionki <FONT>...</FONT>
<FONT SIZE="n">...</FONT> wielkość czcionki n(1..7) <FONT SIZE="+n">lub <FONT SIZE=„-n">...</FONT> <FONT COLOR="kolor">...</FONT> kolor czcionki <FONT FACE="rodzaj1, rodzaj2, rodzaj3...">...</FONT> Łączenie parametrów <P ALIGN="center"> <FONT SIZE="5" COLOR="red" FACE="Courier New"><B><I><U> To jest jakiś tekst </U></I></B></FONT></P>

10 Elementy graficzne <HR> linia pozioma
<HR NOSHADE> bez cieniowania <HR SIZE="y"> y – grubość w pikselach <HR WIDTH="x"> lub <HR WIDTH="x%"> szerokość <HR COLOR="kolor"> kolor linii <HR ALIGN="center"> ustawienie linii <FIELDSET>...</FIELDSET> obramowanie tekstu

11 Kolory "RGB(0,255,0) " "#426B9C" black (czarny) white (biały) silver
(srebrny) gray (szary) maroon (kasztanowy) red (czerwony) purple (purpurowy) fuchsia (fuksja) green (zielony) lime (limonowy) olive (oliwkowy) yellow (żółty) navy (granatowy) blue (niebieski) teal (zielonomodry) aqua (akwamaryna) "RGB(0,255,0) " "#426B9C"

12 Linki <A HREF="względna ścieżka dostępu">opis</A>
<A HREF="plik.pdf">opis</A> <A TARGET="_blank" HREF="adres">opis</A> nowe okno <A HREF="1.html" TITLE="Do strony głównej">Opis</A> dymek <A HREF="#nazwa etykiety">opis odsyłacza</A> (...) <A NAME="nazwa etykiety">(opis etykiety)</A> do etykiety <A HREF="http://adres strony">opis</A> do strony <A HREF="mailto:adres ">opis</A> do poczty

13 Multimedia <IMG SRC="ścieżka dostępu">
<IMG SRC="ścieżka dostępu" WIDTH="x" HEIGHT="y"> <IMG SRC="ścieżka dostępu" BORDER="x"> oramowanie <IMG SRC="ścieżka dostępu" ALT="Tu wpisz informację"> dymek <IMG DYNSRC="ścieżka dostępu do pliku *.avi" START="sposób"> <BGSOUND SRC="ścieżka dostępu do pliku dźwiękowego"> <MARQUEE>Tu wpisz tekst</MARQUEE> animacje <MARQUEE BEHAVIOR="typ">Tu wpisz tekst</MARQUEE BEHAVIOR = scrol DIRECTION = left alternate right slide up down SCROLLAMOUNT szybkość przesuwania

14 Tabele Struktura tabeli
<TABLE> <TR>      <TD>...</TD>     <TD>...</TD> </TR> <TR>      <TD>...</TD>     <TD>...</TD> </TR> </TABLE> <TABLE>...</TABLE> znacznik tabeli <TR>...</TR> znacznik wiersza <TD>...</TD> znacznikiem komórki

15 Tabele <TABLE WIDTH="x" HEIGHT="y">...</TABLE> rozmiary
<TABLE BORDER="x">...</TABLE> obramowanie <TR ALIGN="rodzaj" VALIGN="ustawienie">...</TR> wewnątrz <TD BGCOLOR="kolor">...</TD> <TD BACKGROUND="ścieżka dostępu">...</TD> <TABLE BORDERCOLOR="kolor">...</TABLE>

16 Przykład <TABLE BORDER="5" BORDERCOLOR= "yellow" > <TR>
<TD BGCOLOR="red"><H1>komórka1</H1></TD> <TD BGCOLOR="#426B9C"><H1>komórka2<H1></TD> </TR> <TD BGCOLOR="#00FF00"><H1>komórka3</H1></TD > <TD><H1>komórka4<H1></TD> </TABLE>

17 Tabele Łączenie komórek Pion Poziom
<TABLE> <TR>      <TD ROWSPAN="y">...</TD> </TR> </TABLE> Pion <TABLE> <TR>      <TD COLSPAN="x">...</TD> </TR> </TABLE> Poziom x, y - oznaczają liczbę komórek do połączenia

18 Ramki <FRAMESET COLS="180,*" FRAMEBORDER="0" FRAMESPACING="0">   <FRAME NAME="spis" FRAMEBORDER="0" SRC="spis.html">   <FRAME NAME="strona" FRAMEBORDER="0" SRC="home.html">   <NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES> </FRAMESET> <FRAMESET>...</FRAMESET> znaczniki ramek za </HEAD> <FRAMESET COLS="x1,x2,...">...</FRAMESET> pion <FRAMESET ROWS="y1%,y2%,...">...</FRAMESET> poziom <FRAMESET BORDERCOLOR="kolor">...</FRAMESET> kolor ramki <FRAMESET BORDER="x">...</FRAMESET> szerokość obramowania <FRAME SCROLLING="typ"> przewijanie ramki <IFRAME SRC="ścieżka" WIDTH="x" HEIGHT="y">...</IFRAME> Ramka lokalna (pływająca)

19 Przykład <frameset rows="150,*">
<frame name="gorna" scrolling="no" src="gora.html"> <frameset cols="30%,*"> <frame bordercolor="red" scrolling="no" name="lewa„ src="lewa.html"> <frame name="lewa" scrolling="no"src="prawa.html"> </frameset>

20 Formularze <FORM ACTION="mailto:adres " METHOD="post">      (Tutaj umieszcza się pola formularza) </FORM> NAME nazwa potrzebna do odwołań <FORM >…</FORM> umieszczenie elementów formularza mailto –miejsce docelowe formularza METHOD (post, get) ACTION=skrypt.cgi

21 Elementy formularzy Pole tekstowe
<INPUT TYPE="text" NAME="nazwa" VALUE="Domyślna"> SIZE="k" rozmiar pola w znakach MAXLENGTH="n" dopuszczalna ilość liter READONLY domyślna wartość tylko do odczytu Hasło <INPUT TYPE="password" NAME="nazwa">

22 Elementy formularzy Pole wyboru CHECKED – zaznaczona
<INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość">opis pola CHECKED – zaznaczona DISABLED – zablokowanie pola Pole opcji <INPUT TYPE="radio" NAME="nazwa" VALUE="wartość">opis pola

23 Elementy formularzy Lista rozwijana
<FORM>      <SELECT NAME="nazwa">           <OPTION> Pierwsza możliwość           <OPTION> Druga możliwość           (...)      </SELECT> Trzecia możliwość </FORM> <SELECT NAME="nazwa" MULTIPLE> kilka opcji <SELECT NAME="nazwa" SIZE="w"> wysokość pola

24 Elementy formularzy Obszar tekstowy
<FORM>      <TEXTAREA NAME="nazwa">Domyślny</TEXTAREA> <FORM> <TEXTAREA NAME="nazwa" COLS="x" ROWS="y">...</TEXTAREA> Rozmiar pola <TEXTAREA NAME="nazwa" DISABLED>...</TEXTAREA> Zblokowanie pola <TEXTAREA NAME="nazwa" READONLY>...</TEXTAREA> Brak możliwości edycji tekstu domyślnego

25 Elementy formularzy Selektor plików
<INPUT TYPE="file" NAME="nazwa"> Wysyłanie formularza <INPUT TYPE="submit" VALUE=„Wyślij"> Przycisk obrazkowy <INPUT TYPE="image" SRC="ścieżka dostępu" ALT=„Podpowiedź">

26 Elementy formularzy Czyszczenie formularza
<INPUT TYPE="reset" VALUE=„Wyczyść"> Przycisk <BUTTON TYPE="rodzaj">Treść przycisku</BUTTON> Rodzaj:submit reset button

27 Kaskadowe arkusze stylów (CSS)
Definiowanie stylów odbywa się w następujący sposób: selektor1 { właściwość1: wartość1; właściwość2: wartość2 } selektor2 { właściwość3: wartość3; właściwość4: wartość4 } Sektory to nazwy Tagów, jakim zostaną przypisane odpowiednie właściwości Trzy typy osadzania stylów: Osadzony Zewnętrzny Wpisany

28 Styl osadzony <style type="text/css"><!—
selektor1 { właściwość1: wartość1; właściwość2: wartość2 } //--></style> Umieszczamy w nagłówku dokumentu między znacznikami <style> i </style>

29 Styl zewnętrzny <!— selektor1 { właściwość1: wartość1; właściwość2: wartość2 } //--> Definiowanie stylu odbywa się w oddzielnym pliku a w nagłówku dokumentu robimy do niego specjalny link: <link href="styl.css" rel="stylesheet" type="text/css">. W pliku styl.css wszystko definiujemy tak jak w stylu osadzonym

30 właściwość2: wartość2 }">...
Styl wpisany <p style="selektor1 { właściwość1: wartość1; właściwość2: wartość2 }">... Styl definiujemy tylko dla jednago znacznika używając parametru style="właściwości_stylu". Dwa pierwsze sposoby ustalają styl znacznika w całym dokumencie

31 Tworzenie klas i wyjątków
Dla stworzenia wyjątek stylu od jakiegoś znacznika dla jednego elementu. Definiujemy styl dla nagłówków drugiego stopnia: h2 { font-family: Courier New; text-align: center; color: blue } chcemy, aby jeden lub więcej nagłówków było w kolorze czerwonym. W związku z tym definiujemy klasę: .wyjatek { color: red } A do tagu dodajemy odpowiedni parametr: <h2 class="wyjatek">. Przy definiowaniu klasy wystarczy podać tylko te właściwości, które różnią klasę od stylu.

32 Właściwości dotyczące tekstu
ELEMENT OPIS MOŻLIWE WARTOŚCI color kolor czcionki wszystkie możliwe kolory font-family krój czcionki wszystkie możliwe kroje czcionek font-size wielkość czcionki w punktach (pt); xx-small, x-small, smaler, small, large, larger, x-large, xx-large font-style styl czcionki normal, italic, oblique font-weight waga (grubość) czcionki lighter, normal, bold, bolder font-variant kapitaliki normal, small_caps text-align wyrównanie tekstu left, right, center, justify text-decoration dekoracja tekstu none, underline, line-through text-indent wcięcie pierwszego wiersza akapitu w punktach (pt), procentach lub pikselach (px) text-transform transformacja tekstu none, lowercase, uppercase, capitalize white-space tekst normalny / preformatowany / 'niełamliwy' wiersz normal, pre, nowrap cursor rodzaj kursora e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, hand, crosshair, help, move, text, auto, default, wait

33 Właściwości dotyczące tła
ELEMENT OPIS MOŻLIWE WARTOŚCI background-attachment tło przewijane/znak wodny scroll, fixed background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") background-position pozycja tła w punktach (pt), procentach lub pikselach (px) background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, no-repeat

34 Właściwości dotyczące marginesów
ELEMENT OPIS MOŻLIWE WARTOŚCI margin-top górny margines w punktach (pt), procentach lub pikselach (px) margin-bottom dolny margines margin-left lewy margines margin-right prawy margines word-spacing odstępy pomiędzy wyrazami letter-spacing odstępy pomiędzy znakami line-height odstępy pomiędzy wierszami


Pobierz ppt "Kurs języka HTML Mariusz Tomczyk."

Podobne prezentacje


Reklamy Google