Kurs języka HTML Mariusz Tomczyk
Plan referatu Budowa dokumentu HTML Znaczniki tekstu Multimedia na stronie Formularze Ramki i tabele Kaskadowe arkusze stylów
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
Budowa dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> <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>
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>
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>
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>
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)
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>
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
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"
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 e-mail">opis</A> do poczty
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
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
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>
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>
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
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)
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>
Formularze <FORM ACTION="mailto:adres e-mail" 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
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">
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
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
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
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ź">
Elementy formularzy Czyszczenie formularza <INPUT TYPE="reset" VALUE=„Wyczyść"> Przycisk <BUTTON TYPE="rodzaj">Treść przycisku</BUTTON> Rodzaj:submit reset button
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
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>
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
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
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.
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
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
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