1. Zasady nazywania i zapisywania plików: 2
Transkrypt
1. Zasady nazywania i zapisywania plików: 2
Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML 1. Zasady nazywania i zapisywania plików: a. Nazwa pliku nie powinna zawierać znaków specjalnych typu: - polskie litery (tzw. ogonki): ĘęÓ󥹌śŁłŻżŹźĆćŃń; - puste znaki (spacja) – zastępujemy je innymi znakami (np. podkreślnikiem: _); - znaki specjalne, np. „’\?/><.,&^%$#@*; - duże litery. b. Plik strony startowej nosi najczęściej nazwę index.html lub index.htm (nie zalecane). c. Nie wolno tworzyć odwołań do miejsc bezpośrednio na naszym dysku. Pliki zapisujemy we wspólnym katalogu, co pozwala nam na skrócenie ich ścieżki. Jeżeli dany plik znajduje się w tym samy katalogu, w atrybucie wywołującym plik (np. src="") wpisujemy po prostu nazwę pliku: src="plik.html". Jeśli jest on w katalogu podrzędnym, piszemy pełną ścieżkę dostępu: src="katalog/plik.html". 2. Struktura dokumentu: HyperText Markup Language, czyli język hipertekstowy. Definicja języka: <!DOCTYPE html public ”-//w3c//dtd html 4.01 transitional//en”> Struktura dokumentu: <HTML> Początek dokumentu. <HEAD> Otwarcie nagłówka. Informacje nagłówkowe o dokumencie, łącznie z tytułem </HEAD> Zamknięcie nagłówka. <BODY> Otwarcie ciała strony. Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp. </BODY> Zamknięcie ciała strony. </HTML> Koniec dokumentu. 1 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML • Nagłówek <HEAD></HEAD> a) Standart kodowania polskich liter: <META http-equiv=”content-type” content=”text/html; charset=iso8859-2”> <META http-equiv=”content-type” content=”text/html; charset=windows-1250”> (nie zalecane!) b) <TITLE> tytuł strony, który ukazuje się w belce tytułowej przeglądarki </TITLE> Nie należy używać w tytułach samych WIELKICH LITER ani wpisywać adresów internetowych, ponieważ niektóre przeglądarki mogą to zignorować. Należy podawać jako tytuł informacje rzeczywiste o tym co znajduje się na stronie unikając ogólników. c) <META NAME ="Description" CONTENT="Opis treści znajdującej się na stronie"> Jest to opis zawartości strony, który osoba posługująca się wyszukiwarką zobaczy pod tytułem strony. d) <META NAME="Keywords" CONTENT="wyrazy, kluczowe, oddzielone, przecinkami"> Nie powinno się powtarzać słów, ponieważ wyszukiwarki mogą potraktować stroną jako spam. Nie należy przekraczać 1000 słów. e) <META HTTP-EQUIV="Content-Language" CONTENT="pl"> Zdefiniowanie języka (kraju) strony. Przeglądarki używają tego polecenia wyszukując strony stworzone w danym języku. pl Język polski en Język angielski de Język niemiecki fr Język francuski en- Język us „amerykański” f) <META NAME="Author" CONTENT="imię i nazwisko"> Informacje o autorze strony. g) <META HTTP-EQUIV="Creation-date" CONTENT="Sun, 21 Nov 2004 13:30:01 GMT"> Data stworzenia strony. h) <META HTTP-EQUIV="Reply-to" CONTENT="[email protected]"> Adres e-mail autora strony. i) <META NAME="Generator" CONTENT="nazwa generatora"> Edytor HTML, przy pomocy którego utworzono stronę. Często jest to informacja generowana automatycznie przez edytory. 2 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML j) <META NAME="Refresh" CONTENT="wartość (co ile sekund strona ma być odświeżana)"> Narzucenie przeglądarce częstotliwości odświeżania strony. Polecenie to nie jest zalecane. <META NAME="Refresh" CONTENT="5; url=http://www.onet.pl"> Przekierowanie strony na inny adres. W przykładzie po 5 sekundach nastąpi przekierowanie na stronę Onetu. • Polecenia <BODY></BODY> Polecenia należy domykać w odwrotnej kolejności niż ta wg, której się pojawiały. Odpowiada to matematycznej notacji nawiasów: {poziom 3 [poziom 2 (poziom 1) poziom 2] poziom 3}, czyli przykładowo: poziom 3 poziom 2 poziom 1 poziom 2 poziom 3, będzie odpowaiadało zapisowi: <u> poziom 3 <i> poziom 2 <b>poziom 1</b> poziom 2</i> poziom 3</u>. a) Czcionka. <znacznik atrybut=”wartość”> Opis <B> tekst </B> <I> tekst </I> <U> tekst </U> <S> tekst </S> <STRIKE> tekst </STRIKE> <SUB> tekst </SUB> <SUP> tekst </SUP> Tekst pogrubiony. Tekst pochylony (kursywa). Tekst podkreślony. Tekst przekreślony. Subskrypt – czcionka w dolnym . indeksie Superskrypt – czcionka w górnym . Tekst przeformatowany, czyli tekst, w którym wszystkie znaki mają taką samą wielkość. Przykładowo można w nim wstawiać wielokrotne spacje. Pisany jest najczęściej czcionką Fourier New. Numerowanie (każdy nowy punkt zaczynamy przez <LI>). Zdefiniowanie typu numeracji: type=”1” 1. 2. 3. type=”a” a. b. c. type=”A” A. B. C. type=”i” i. ii. iii. type=”I” I. II. III. indeksie <PRE> tekst </PRE> <OL> kolejne punkty </OL> <OL type=” wartość parametru”> > kolejne punkty </OL> <OL start=”wartość”> kolejne punkty </OL> Numerowanie rozpoczynające się od określonej wartości. <UL> kolejne podpunkty </UL> Punktory (każdy nowy podpunkt zaczynamy przez <LI>). 3 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Zdefiniowanie typu punktora: • • o <UL type=” wartość parametru”> kolejne podpunkty </UL> DISC SQUARE CIRCLE Zmiana rozmiaru czcionki. Skala: 1-7. Domyślna wartość wynosi 3, co odpowiada w zależności od przeglądarki czcionce około 10-12 pkt. <FONT size=”rozmiar”> tekst </FONT> <FONT size=”+/-rozmiar”> tekst </FONT> <BASEFONT size=”wartość”> <FONT size=”normal”> tekst <SMALL> tekst </SMALL> tekst tekst <BIG> tekst </BIG> tekst <FONT color=”nazwa koloru”> tekst </FONT> <FONT face=”nazwa czcionki”> tekst </FONT> <BR> <FIELDSET> tekst </ FIELDSET > <FIELDSET> <LEGEND> tekst legendy </LEGEND> </FIELDSET> <CENTER> treść </ CENTER > <DIV align=”center”>treść</DIV> Zwiększenie/zmniejszenie rozmiaru czcionki (skala rozmiarów możliwych do przyjęcia: 1-7). Ustalenie domyślnego rozmiaru czcionki. Powrót do domyślnego rozmiaru czcionki. Pomniejszenie tekstu o 1 pomiędzy znacznikami. Powiększenie tekstu o 1 pomiędzy znacznikami. Zmiana koloru tekstu. Zmiana typu czcionki (np. Arial, Times New Roman, Vivien, Txt,…). Pisanie tekstu od nowej linii. Tekst w ramce. Dodaje opis do ramki. Dodając parametr ALIGN można wyrównać odpowiednio opis. Wyśrodkowanie na stronie. <Hn align=”wartość parametru”> tekst </Hn> Nowy akapit tekstu. Pomiędzy poszczególne akapity tekstu wstawiana jest automatyczna interlinia, czyli jedna pusta linijka. Nowy akapit tekstu o nazwie nazwa akapitu. Wyrównanie tekstu: a. LEFT – do lewej krawędzi strony; b. CENTER – do środka strony; c. JUSTIFY – wyjustowanie tekstu; d. RIGHT – do prawej krawędzi strony. Pozwala na tymczasową zmianę stylu, przypisanie określonego formatowania do elementu. Tekst automatycznego nagłówka: stopień n=1,2,3,4,5,6 (H6-najmniejszy; H1-największy). Wyrównanie nagłówka na stronie: LEFT CENTER RIGHT <Hn title=” opis tekstu”> tekst </Hn> Tekst opisujący nagłówek (żółty kartonik wyjeżdżający po przytrzymaniu myszki na tekście). <P> tekst </P> <P id=”nazwa akapitu”> tekst </P> <P align=”wartość parametru”> tekst </P> <SPAN style=”rodzaj formatowania”> tekst formatowany</SPAN> <Hn> tekst </Hn> 4 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML 5 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML b) Inne (odsyłacze, tło strony, itp.). <znacznik atrybut=”wartość”> Opis <BODY bgcolor=”nazwa koloru”> <BODY background=”nazwa obrazka lub ścieżka dostępu do obrazka”> Ustalenie koloru tła strony. Ustalenie rysunku tła strony. Ustalenie koloru czcionki dla całej strony. Podanie wartości (w pikselach) górnego <BODY topmargin=” wartość”> marginesu. Podanie wartości (w pikselach) dolnego <BODY bottommargin=” wartość”> marginesu. Podanie wartości (w pikselach) lewego <BODY leftmargin=” wartość”> marginesu. Podanie wartości (w pikselach) prawego <BODY rightmargin=” wartość”> marginesu. <BODY link=”nazwa koloru”> Ustalenie koloru nowych linków. <BODY alink=”nazwa koloru”> Ustalenie koloru aktywnych linków. <BODY vlink=”nazwa koloru”> Ustalenie koloru odwiedzonych linków. Przejście przez kliknięcie w treść <A href=”http://www.onet.pl”> odsyłacza do strony, której adres treść odsyłacza </A> wpisano (tutaj: http://www.onet.pl). Odsyłacze mogą być BLISKIE (w obrębie serwera naszej strony) lub DALEKIE (odsyłające na inny serwer). Zamiast odnośnika do strony można użyć dowolnego pliku: kliknięcie na link spowoduje otwarcie danego dokumentu w oknie przeglądarki, przy ewentualnym uruchomieniu odpowiedniego programu z dysku użytkownika strony (np. Media playera dla plików *.avi). Próba uruchomienia pliku typu *.exe, *.zip, *.rar (itp.) zaowocuje pojawieniem się okna z zapytaniem czy chcemy plik otworzyć z bieżącej lokalizacji (z serwera strony), czy zapisać go na naszym dysku. <A href=”http://www.onet.pl” target=”_blank”> treść odsyłacza Strona otworzy się w nowym oknie. </A> Przejście przez kliknięcie w treść <A href=”mailto:[email protected]”> odsyłacza do pisania wiadomości treść odsyłacza </A> tekstowej (tutaj email zaadresowany do: [email protected]). <A Tworzy nowy e-mail z wypełnionym href=”mailto:[email protected]?subjec tematem listu. t=temat listu”> treść odsyłacza </A> Tworzy nowy e-mail z wypełnionym <A tematem listu oraz wpisaną treścią listu. href=”mailto:[email protected]?subjec Uwaga! t=temat listu&body=treść listu”> treść Przy użyciu kilku parametrów odsyłacza </A> oddzielane są znakiem: &. Pierwszy oddzielony został przezŁ ?. <BODY text=”nazwa koloru”> 6 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML <A href=”mailto:[email protected]?cc=ko [email protected]”> treść odsyłacza </A> <A href=”mailto:[email protected]?bcc=u [email protected]”> treść odsyłacza </A> <A href=”#nazwa akapitu”> treść odsyłacza </A> <HR> <HR color=”nazwa koloru”> <HR noshade> <HR size=”wartość”> <HR width=”wartość”> <HR width=”wartość” align=”wartość parametru”> <!-- tekst komentarza --> lub: <!— tekst komentarza // --> Tworzy nowy e-mail i wysyła go na adres: [email protected], przesyłając kopię na adres: [email protected]. Tworzy nowy e-mail i wysyła go na adres: [email protected], przesyłając ukrytą kopię na adres: [email protected]. Przejście (w ramach tej samej strony) przez kliknięcie w treść odsyłacza do akapitu oznaczonego wcześniej jako: nazwa akapitu. Linia pozioma. Linia pozioma o określonym kolorze. Linia pozioma bez cieniowania. Linia pozioma o określonej grubości. Linia pozioma o określonej szerokości: a. bezwzględnej: wartość liczbowa (np.600) b. względnej: wartość procentowa (np.50%) Linia pozioma (o zmienionej szerokości!) wyrównana względem szerokości strony: LEFT CENTER RIGHT Komentarz (tekst, który zostanie zignorowany przez przeglądarkę). c) Multimedia. <znacznik atrybut=”wartość”> Opis <IMG src=”nazwa lub źródło obrazka”> <IMG src=”nazwa lub źródło obrazka” width=”wartość”> <IMG src=”nazwa lub źródło obrazka” height=”wartość”> Wstawianie obrazka lub innego elementu (film). Nazwę podajemy wraz z rozszerzeniem. Zmiana szerokości obrazka: a. bezwzględna: wartość liczbowa (np.600) b. względna: wartość procentowa (np.50%) Zmiana wysokości obrazka. 7 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML <IMG src=”nazwa lub źródło obrazka” alt=”opis obrazka”> <IMG src=”nazwa lub źródło obrazka” border=”wartość”> <IMG src=”nazwa lub źródło obrazka” align=”wartość parametru”> <IMG src=”nazwa lub źródło obrazka” align=”left” vspace=”wartość”> <IMG src=”nazwa lub źródło obrazka” align=”left” hspace=”wartość”> <IMG src=”nazwa lub źródło obrazka” usemap=”#nazwa mapy”> <IMG src=”nazwa lub źródło filmu” start=” wartość parametru”> Opis pojawiający się na obrazku w oknie przeglądarki po przytrzymaniu na nim myszki. Zamiast ALT można użyć TITLE. Obramowanie obrazka ramką o określonej szerokości. „Oklejenie” obrazka tekstem: a. LEFT - wyrównanie obrazka do lewej strony b. RIGHT - wyrównanie obrazka do prawej strony Inne zastosowanie tego polecenia to wyrównanie tekstu względem obrazka: - TOP – tekst wyrównany względem górnej krawędzi; - MIDDLE - tekst wyrównany względem środka; - BOTTOM - tekst wyrównany względem dolnej krawędzi obrazka. Uwaga! <BR clear=”left/right – tak jak dla align”> powoduje kontynuację pisania tekstu poniżej obrazka. Odsunięcie tekstu wokół obrazka o określoną wartość (względem pionu). Odsunięcie tekstu wokół obrazka o określoną wartość (względem poziomu). Przypisuje mapę do obrazka. Ustalenie momentu uruchamiania multimediów: ONLOAD – po całkowitym załadowaniu się strony MOUSEOVER – po najechaniu kursorem na film 8 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML d) Animacja <MARQUEE> Animacje tego typu rozpoznawane są przez Microsoft Internet Explorer i nie są uwzględniane w standardzie HTML 4.0. <znacznik atrybut=”wartość”> Opis <MARQUEE> tekst pływający </MARQUEE> Wstawianie pływającego tekstu (). <MARQUEE behavior=”wartość parametru”> tekst pływający </MARQUEE> Zdefiniowanie sposobu poruszania się tekstu: • SCROLL – tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu; • SLIDE – tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się tam; • ALTERNATE – tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. <MARQUEE bgcolor=”nazwa koloru”> tekst pływający </MARQUEE> <MARQUEE direction=”wartość parametru”> tekst pływający </MARQUEE> Definicja koloru tła (drogi) dla tekstu. Określenie kierunku ruchu dla tekstu: o LEFT () o RIGHT () Określenie szerokości pasa ruchu <MARQUEE width=”wartość”> tekst (drogi). pływający </MARQUEE> Może być wyrażona jako wartość stała lub zmieniająca się procentowo. <MARQUEE height=”wartość”> tekst Określenie wysokości pasa ruchu pływający </MARQUEE> (drogi). <MARQUEE loop=”wartość”> tekst Pętla – określenie ile razy ma być pływający </MARQUEE> powtórzony ruch. Odsunięcie pływającego tekstu o określoną wartość od elementów z nim sąsiadujących. (względem pionu). <MARQUEE vspace=”wartość”>> Uwaga! tekst pływający </MARQUEE> Akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>. Odsunięcie pływającego tekstu o <MARQUEE hspace=”wartość”> tekst określoną wartość od elementów z nim pływający </MARQUEE> sąsiadujących. (względem poziomu). 9 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Określenie płynności ruchu oraz jego tempa: - mała wartość parametru (np. 5) powoduje ruch płynny i powolny; - duża wartość parametru (np. 50) powoduje ruch szybki, ale „szarpany”. Określa odstępy pomiędzy skokami (w milisekundach). 1000=1sekunda Ustala, na jakiej wysokości pola (drogi) pojawi się tekst.: - TOP – tekst wyrównany względem górnej krawędzi; - MIDDLE - tekst wyrównany względem środka; - BOTTOM - tekst wyrównany względem dolnej krawędzi obrazka. <MARQUEE scrollamount=”wartość”> tekst pływający </MARQUEE> <MARQUEE scrolldelay=”wartość”> tekst pływający </MARQUEE> <MARQUEE align=”wartość parametru”> tekst pływający </MARQUEE> e) Tabele Struktura tabeli: <TABLE> <TR> <TD> </TD> </TR> </TABLE> Początek tabeli. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Element Element powtarzamy powtarzamy tyle razy ile tyle razy ile komórek wierszy chcemy chcemy uzyskać. uzyskać. Zamknięcie wiersza. Zamknięcie tabeli. 10 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) Polecenia: JĘZYK HTML <znacznik atrybut=”wartość”> Opis <TD>   </TD>   – lepka spacja – wpisywana do komórki jeśli chcemy aby pozostała „pusta”. <TABLE border> zawartość tabeli </TABLE> Pokazanie krawędzi tabeli. <TABLE border=”wartość”> zawartość tabeli </TABLE> <TABLE cellspacing=”wartość”> zawartość tabeli </TABLE> <TABLE cellpadding=”wartość”> zawartość tabeli </TABLE> <TABLE width=”wartość”> zawartość tabeli </TABLE> Przypisanie określonej szerokości dla krawędzi zewnętrznej tabeli (obramowanie). Przypisanie określonej szerokości dla krawędzi wewnętrznych tabeli. Określenie marginesu pomiędzy zawartością komórek, a ich krawędziami. Określenie szerokości tabeli: a. bezwzględna: wartość liczbowa (np.600); b. względna: wartość procentowa (np.50%). <TABLE height=”wartość”> zawartość tabeli </TABLE> Określenie wysokości tabeli. <TABLE align=”wartość parametru”> zawartość tabeli </TABLE> „Oklejenie” tabeli tekstem: a. LEFT - wyrównanie tabeli do lewej strony; b. RIGHT - wyrównanie tabeli do prawej strony. <TABLE color=”nazwa koloru”> zawartość tabeli </TABLE> <TABLE bgcolor=”nazwa koloru”> zawartość tabeli </TABLE> <TABLE background=”ścieżka dostępu do obrazu”> zawartość tabeli </TABLE> <TABLE border bordercolor=” nazwa koloru”> zawartość tabeli </TABLE> <TABLE border bordercolorlight=”nazwa koloru” bordercolordark=”nazwa koloru”> zawartość tabeli </TABLE> Ustalenie koloru czcionki tabeli. Ustalenie koloru tła tabeli. Ustalenie obrazu tła tabeli. Przypisanie jednego koloru dla krawędzi tabeli. Przypisanie dwóch kolorów dla krawędzi tabeli. 11 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Pokazanie/ukrycie wybranych krawędzi tabeli: <TABLE border frame=”wartość parametru”> zawartość tabeli </TABLE> VOID Tylko wewnętrzne. ABOVE Wewnętrzne + górna. BELLOW Wewnętrzne + dolna. LHS Wewnętrzne + lewa. RHS Wewnętrzne + prawa. VSIDES Wewnętrzne + zewnętrzne pionowe (prawa, lewa). HSIDES Wewnętrzne + zewnętrzne poziome (górna, dolna). BOX Wewnętrzne i zewnętrzne. 12 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Pokazanie/ukrycie krawędzi tabeli (przy zastosowaniu pełnej definicji tabeli: thead-tfoot-tbody): <TABLE border rules=”wartość parametru”> zawartość tabeli </TABLE> <TD align=”wartość parametru”> zawartość komórki </TD> <TD valign=”wartość parametru”> zawartość komórki </TD> <TD rowspan=”ilość wierszy”> zawartość komórki </TD> <TD colspan=”ilość kolumn”> zawartość komórki </TD> <CAPTION align=”wartość parametru”> tytuł tabeli </CAPTION> NONE Tylko krawędź zewnętrzna tabeli. GROUPS Krawędzie zewnętrzne poszczególnych elementów tabeli: thead, body, tfoot. ROWS Krawędzie zewnętrzne + poziome (wiersze). COLS Krawędzie zewnętrzne + pionowe (kolumny). ALL Wewnętrzne i zewnętrzne. thead tbody tfoot Wyśrodkowanie zawartości komórki względem poziomu: LEFT CENTER RIGHT Wyśrodkowanie zawartości komórki względem pionu: TOP MIDDLE BOTTOM Rozciągnięcie komórki na określoną ilość wierszy: scalenie komórek w pionie. Rozciągnięcie komórki na określoną ilość kolumn: scalenie komórek w poziomie. Przypisanie tytułu tabeli z ustaleniem jego położenia: TOP – nad tabelą; BOTTOM – pod tabelą. 13 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML <CAPTION align=”wartość parametru” valign=”wartość parametru”> tytuł tabeli </CAPTION> Przypisanie tytułu tabeli z ustaleniem jego położenia i wyśrodkowania: Align= LEFT Valign = CENTER RIGHT TOP BOTTOM Wiersz nagłówka: <TABLE> <TR> <TH> </TH> <TR> <TD> </TD> </TABLE> Zamknięcie komórki. Zamknięcie wiersza. </TR> </TR> Początek tabeli. Otwarcie wiersza. Otwarcie komórki. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Element powtarzamy tyle razy ile Element wierszy powtarzamy tyle razy ile nagłówka chcemy komórek uzyskać. nagłówka Domyślnie chcemy wiersze uzyskać. nagłówkowe wyróżnione są czcionką pogrubioną. Element powtarzamy tyle razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. Zamknięcie wiersza. Zamknięcie tabeli. 14 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML f) Wstawianie obiektów OBJECT. <znacznik atrybut=”wartość”> Opis <OBJECT (…)> Treść wyświetlana w przeglądarkach nieobsługujących polecenie typu obiekt. </OBJECT> Wstawianie obiektu. <OBJECT data=”źródło pliku, który pojawi się jako obiekt” type=”typ obiektu” width=”wartość” height=”wartość”> Treść alternatywna. </OBJECT> Pełna definicja ramki pływającej: o DATA– miejsce na podanie źródła pliku; o WIDTH – szerokość ramki; o HEIGHT – wysokość ramki; o TYPE– rodzaj danych wczytywanych jako obiekt; TEXT/HTML TEXT/PLAIN IMAGE/JPEG Strona sieci Web (html) Dokument tekstowy (txt) Obraz (jpg) g) Formularze <znacznik atrybut=”wartość”> Opis <FORM> zawartość formularza </FORM> Polecenie definiujące formularz. <FORM action=”mailto:[email protected]” method=”post” enctype=”text/plain”> zawartość formularza </FORM> Akcja, jaka ma zostać wykonana po wypełnieniu formularza: przesłanie jego wyników na adres [email protected]. Jeśli zamiast POST wpiszemy GET (wartość domyślna) wynikiem będzie pobranie informacji o czytelniku i np. zapisanie ich w bazie danych albo dopisanie informacji do podanego wcześniej w ACTION adresu URL(wyszukanie słowa na stronie). Parametr enctype=”text/plain” spowoduje przesłanie danych w postaci tekstowej (rozkodowanej). Do grupowanie poleceń w obrębie danego formularza można wykorzystać polecenie FIELDSET oraz TABLE. 15 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML <INPUT type=”wartość parametru” name=”nazwa pola” value=”początkowa zawartość pola”> Tworzy pola formularza: TYPE: 16 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML TEXT CHECKBOX Jednowierszowe pole tekstowe. Jest to wartość domyślna tego parametru. Dla pól tekstowych można dodatkowo zdefiniować parametr SIZE=”wartość”, określający rozmiar pola. Pole do „fajkowania” tekstu przy kwadraciku zaznaczania. Możemy wybrać więcej niż jedną opcję. W poniższym przykładzie wartość przy parametrze VALUE zostanie przesłana do autora formularza, natomiast tekst wpisany po zdefiniowaniu pola będzie widoczny dla osoby wypełniającej formularz: <INPUT TYPE="checkbox" NAME="jezyk" VALUE="angielski"> angielski <INPUT TYPE="checkbox" NAME="jezyk" VALUE="francuski"> francuski Pole wyboru tylko jednej z istniejących opcji: kropeczka przeskakuje pomiędzy odpowiednimi polami. RADIO PASSWORD HIDDEN BUTTON IMAGE FILE SUBMIT 17 / 33 W poniższym przykładzie podobnie jak wcześniej oprócz podania wartości parametru VALUE, należy wpisać treść, która będzie widoczna dla użytkownika: <INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked> Kobieta <INPUT TYPE="radio" NAME="plec" VALUE="mężczyzna"> Mężczyzna Możliwość wpisania hasła Ukryte pole. Nie wyświetla się w oknie przeglądarki, a może służyć do przechowywania pewnych danych, których nie może zmieniać internauta. Pole w postaci przycisku. Pole w postaci grafiki. Należy podać również jaki obraz ma zostać wyświetlony (SRC=”obrazek.jpg”). Umożliwia przeglądnięcie dysku komputera, celem znalezienia pliku do wysłania. Wysyła informację do autora formularza. Wartość parametru VALUE w tym przypadku pojawi się na przycisku, a informacje zostaną wysłane na adres zdefiniowany w poleceniu <FORM ACTION=”mailto:Nick@poczta. Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML <INPUT type=”wartość parametru” name=”nazwa pola” value=”wartość parametru” readonly> <INPUT type=”wartość parametru” name=”nazwa pola” id=”nazwa identyfikująca pole”> <INPUT type=”wartość parametru” name=”nazwa pola” value=”wartość parametru” maxlength=”wartość”> Blokuje możliwość modyfikacji pola przez użytkownika. Wprowadza identyfikator pola. Ogranicza ilość znaków możliwych do wpisania w polu. Umożliwia określenie kolejności poruszania się po elemantach formularza (przy użyci klawisza tabulatora). Umożliwia zdefiniowanie klawisza skrótu do elementu. Często klawisz skrótu działa łącznie z klawiszem ALT. <INPUT type=”wartość parametru” name=”nazwa pola” tabindex=”wartość”> <INPUT type=”wartość parametru” name=”nazwa pola” accesskey=”klawisz skrótu”> <INPUT type=”wartość parametru” name=”nazwa pola” disabled> <LABEL for=”nazwa identyfikująca pole”> treść etykiety </LABEL> Wyłączenie elementu. Etykieta przypisywana do pola o określonej nazwie (parametr ID pola). Wstawia przycisk. Wewnątrz przycisków można stosować wszystkie inne polecenie i tworzyć np. przycisk z wklejonym na nim obrazkiem. <BUTTON> treść przycisku </BUTTON> <BUTTON disabled> treść przycisku </BUTTON> <BUTTON name=”nazwa przycisku”> treść przycisku </BUTTON> <BUTTON type=”button/submit/reset”> treść przycisku </BUTTON> <BUTTON title=”podpis”> treść przycisku </BUTTON> <SELECT name=”nazwa pola”> lista opcji możliwych do wybrania </SELECT> Wyłącza przycisk Przypisuje nazwę do przycisku. Przyporządkowanie akcji do kliknięcia. Podpis pojawiający się po najechaniu myszką na przycisk. Służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje. Kolejne wiersze definiowane są przy pomocy polecenia: <OPTION> <SELECT NAME="nazwa_listy"> <OPTION> pierwsza pozycja <OPTION> druga pozycja <OPTION> trzecia pozycja 18 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML ... </SELECT> Dopisanie tego polecenia zamienia listę rozwijaną na listę pokazującą więcej wierszy możliwości wyboru. Domyślnie są to 4 wiersze. Wielokrotny wybór możliwy jest przez klikanie z wciśniętym klawiszem CTRL. <SELECT name=”nazwa pola” multiple> lista opcji możliwych do wybrania </SELECT> <SELECT name=”nazwa pola”> <OPTION selected> opcja domyślnie wybrana </SELECT> <SELECT name=”nazwa pola” multiple size=”wartość”> lista opcji możliwych do wybrania </SELECT> Zaznaczenie danej opcji. Określenie rozmiaru okna selekcji. <TEXTAREA name=”nazwa pola”> domyślny tekst pola tekstowego </TEXTAREA> Polecenie wstawiające większe pole tekstowe. Domyślnie ma ono rozmiar 40 kolumn i 4 wierszy. <TEXTAREA name=”nazwa pola” rows=”wartość” cols=”wartość”> domyślny tekst pola tekstowego </TEXTAREA> Zmiana rozmiaru pola tekstowego. <TEXTAREA name=”nazwa pola” wrap=”wartość parametru”> domyślny tekst pola tekstowego </TEXTAREA> Zawijanie tekstu: OFF – wyłącza zawijanie tekstu (opcja domyślna); PHYSICAL – zawijanie tekstu w okienku I wysyłanie również jako zawinięty; VIRTUAL – zawijanie tekstu w okienku, ale wysyłanie go jako tekst niezawijany. 19 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML h) Ramki pływające (floating frame, inline frame) Ramki pływające mogą być umieszczone w dowolnym miejscu na stronie. <znacznik atrybut=”wartość”> Opis <IFRAME (…)> Tekst alternatywny dla przeglądarek, które nie akceptują ramek pływających. </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku"> Tekst alternatywny dla przeglądarek, które nie akceptują ramek pływających. </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" frameborder=”wartość parametru”> Tekst alternatywny </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" scrolling=”wartość parametru”> Tekst alternatywny </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" marginwidth=”wartość”> Tekst alternatywny </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" marginheight=”wartość”> Tekst alternatywny </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" hspace=”wartość”> Tekst alternatywny </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" vspace=”wartość”> Tekst alternatywny </IFRAME> <IFRAME width=”wartość” height=”wartość” src="źródło pliku" name=”nazwa ramki”> Tekst alternatywny </IFRAME> Definicja ramki pływającej. Jeśli przeglądarka nie akceptuje tego typu ramek, odczyta jedynie tekst umieszczony pomiędzy znacznikami. Pełna definicja ramki pływającej: o Width – szerokość ramki; o Height – wysokość ramki; o Src – źródło pliku, jaki ma pojawić się w ramce. Pokazywanie (1) lub ukrywanie (0) obramowania ramki. Zezwalanie (YES) lub zakazywanie (NO) na przewijanie ramki (suwaki). Wprowadzenie marginesów z prawej i lewej strony ramki. Wprowadzenie marginesów u góry i u dołu ramki. Wprowadzenie odstępu poziomego ramki od elementów sąsiadujących. Wprowadzenie odstępu pionowego ramki od elementów sąsiadujących. Nadanie ramce nazwy. Uwaga! Jeśli nazwiemy ramkę możemy utworzyć grupę odsyłaczy otwierających się w danej ramce, np. <A href="plik.htm" TARGET="nazwa ramki pływającej"> Treść odsyłacza </A> 20 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) 2. Ramki JĘZYK HTML Ramki stosuje się w celu ułatwienia nawigacji na stronach HTML. Polegają one na podzieleniu okna przeglądarki na kilka części i załadowaniu w nich kilku plików HTML. Struktura strony opartej na ramkach Podstawową sprawą jest stworzenie strony „bazowej” opartej na ramkach, z której tworzymy odwołania do innych stron, będących w stosunku do bazowej stronami podrzędnymi. Na stronie bazowej definiujemy układ ramek oraz sposób otwierania innych dokumentów. Na podstawowej (bazowej) stronie nie umieszczamy znaczników, za wyjątkiem zdefiniowania postaci ramek oraz bloku nagłówka. Znacznik <BODY> </BODY> umieszcza się pomiędzy <NOFRAMESET> </NOFRAMESET>. Przykładowo: <HTML> <HEAD> Część nagłówkowa <TITLE> tytuł </TITLE> strony. </HEAD> <FRAMESET COLS=”25%, *%”> Zdefiniowanie rozkładu kolumn poszczególnych ramek na 25% szerokości strony dla rakmi pierwszej oraz na 75% (reszta szerokości strony) dla ramki drugiej. <FRAME SCROLLING=”auto” NAME=”nazwa ramki” SRC=”nazwa pliku strony, która ma pojawiś się w ramce”> Źródło i nazwa ramki pierwszej. <FRAME SCROLLING=”yes” NAME=”nazwa ramki” SRC=”plik.html”> Źródło i nazwa ramki drugiej. <NOFRAMES> <BODY> Zawartość strony dla przeglądarek nieobsługujących ramek. </BODY> </NOFRAMES> Dodatkowa część zawierająca treść strony dla przeglądarek nieobsługujących ramek. 21 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Koniec definiowania ramek. </FRAMESET> </HTML> Polecenia <znacznik atrybut=”wartość”> Opis <FRAMESET> zawartość ramki </FRAMESET > Definicja ramki. <NOFRAMESET> zawartość strony </NOFRAMESET > <FRAMESET cols=”wartość, wartość” > zawartość ramki </FRAMESET > <FRAMESET rows=”wartość, wartość” > zawartość ramki </FRAMESET > Dodatkowa część zawierająca treść strony dla przeglądarek, które nie obsługują ramek. Jeśli dana przeglądarka obsługuje ramki, treść pomiędzy tymi znacznikami zostanie zignorowana. Definicja szerokości kolumn (ramek). Po przecinkach podaje się odpowiednie wartości w postaci liczbowej lub procentowej szerokości kolejnych kolumn. Wpisanie gwiazdki (*) zamiast wartości oznacza wykorzystanie pozostającej szerokości okna przeglądarki dla kolumny. Definicja ilości i szerokości wierszy (ramek). 22 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Uwaga! Jeśli chcemy podzielić stronę jednocześnie na kilka kolumn i wierszy, najpierw definiujemy podział na wiersze, a następnie w ramach definicji danego wiersza deklarujemy podział na kolumny. Przykładowo: <FRAMESET ROWS=”10%,*%,20%”> <FRAME SRC=”wiersz1.htm”> Zdefiniowanie pierwszego wiersza strony. <FRAMESET COLS=35%,*,35%> <FRAME SRC=”kol1.htm”> <FRAME SRC=”kol2.htm”> Zdefiniowanie drugiego wiersza strony, składającego się z 3 kolumn. <FRAME SRC=”kol3.htm”> </FRAMESET> Zdefiniowanie strony złożonej z 3 wierszy <FRAMESET COLS=50%,50%> <FRAME SRC=”kol4.htm”> <FRAME SRC=”kol5.htm”> Zdefiniowanie trzeciego wiersza strony, składającego się z 2 kolumn. </FRAMESET> </FRAMESET> taki sposób definiuje się bardziej złożony układ ramek. <FRAMESET border=”wartość” > zawartość ramki </FRAMESET > W Definicja szerokości obramowania dzielącego poszczególne ramki. 23 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Określenie czy obramowanie rozdzielające ramki ma być pokazane czy nie: o YES lub 1 – pokaż obramowanie; o NO lub 0 – ukryj obramowanie. Domyślnie jest ono wyświetlane. Uwaga! Aby usunąć obramowania w IE, we FRAMESET oprócz FRAMEBORDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0. <FRAMESET frameborder=”wartość parametru”> zawartość ramki </FRAMESET> <FRAMESET bordercolor=” nazwa koloru”> zawartość ramki </FRAMESET > <FRAME src=”nazwa pliku, który pojawi się w ramce”> zawartość ramki </FRAME > Definicja koloru obramowania. Przypisaniu dokumentu do ramki. <FRAME src=”plik.html” scrolling=”wartość parametru”> zawartość ramki </FRAME > Zezwolenie na przewijanie dokumentu w ramce: o YES– zezwala na przewijanie; o NO– zakazuje przewijania; o AUTO– tworzy suwaki automatycznie kiedy strona nie mieści się w ramce. <FRAME name=”nazwa ramki”> zawartość ramki </FRAME > Przypisanie nazwy do ramki. Zablokowanie możliwości modyfikowania przez użytkownika szerokości poszczególnych ramek (skalowania). Określenie czy obramowanie danej ramki będzie wyświetlane: o YES lub 1 – pokaż obramowanie; o NO lub 0 – ukryj obramowanie. Uwaga! Oprócz FRAMEBORDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0. <FRAME noresize> zawartość ramki </FRAME > <FRAME frameborder=”wartość parametru”> zawartość ramki </FRAME > <FRAME bordercolor=”nazwa koloru”> zawartość ramki </FRAME > <FRAME marginheight=”wartość”> zawartość ramki </FRAME > <FRAME marginwidth=”wartość”> zawartość ramki </FRAME > Zdefiniowanie koloru ramki. Wymuszenie dodatkowego odstępu u dołu i i góry ramki. Wymuszenie dodatkowego odstępu z prawej i lewej strony ramki. 24 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML <A href=”nazwa pliku” target=”wartość parametru”> zawartość ramki </A > Zdefiniowanie odsyłacza (linku) oraz miejsca, gdzie się powinien otworzyć: o _BLANK – otwarcie strony nastąpi w nowym oknie przeglądarki; o _SELF – nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku; o _PARENT – przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu; o _TOP – przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę"; o nazwa ramki – otwarcie nastąpi ramce o podanej nazwie. 25 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML 3. Kolory podstawowe: Kolory można podawać trzema sposobami: 1- słownie, używając ich angielskich nazw; 2- używając systemu Red-Green-Blue; 3- za pomocą trypletu szesnastkowego. Nazwa koloru (pl) biały czarny zielony niebieski różowy żółty intensywny zielony (limetka) ciemno żółty (oliwka) fioletowy zielonomodry srebrny (szary 25%) czerwony ciemno niebieski ciemno czerwony szary (50%) turkusowy Nazwa koloru (ang) white black green blue fuchsia yellow lime Syst. szesnastkowy #FFFFFF #000000 #008000 #0000FF #FF00FF #FFFF00 #00FF00 rgb(255,255,255) rgb(0,0,0) rgb(0,128,0) rgb(0,0,255) rgb(255,0,255) rgb(255,255,0) rgb(0,255,0) olive purple teal silver red navy maroon gray aqua #808000 #800080 #008080 #C0C0C0 #FF0000 #000080 #800000 #808080 #00FFFF rgb(128,128,0) rgb(128,0,128) rgb(0,128,128) rgb(192,192,192) rgb(255,0,0) rgb(0,0,128) rgb(128,0,0) rgb(128,128,128) rgb(0,255,255) Syst. dziesiętny 26 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML 4. Kaskadowe arkusze stylów CSS Style CSS służą do definiowania wyglądu poszczególnych elementów na stronie. o Budowa: selektor1 {parametr1:wartość1; parametr2:wartość2} Selektor to nazwa Tagu, który chcemy modyfikować, np. h2, p, img,… o Rodzaje i metody zapisu stylów: Typ stylu Opis Przykład OSADZONY Definiowany w nagłówku, pomiędzy znacznikiem: <STYLE type=”text/css”> </STYLE> oraz znacznikiem komentarza: <!-- definicja stylu //--> ZEWNĘTRZNY Definiowany w oddzielnym pliku, zapisywanym z rozszerzeniem: style.CSS. W nagłówku strony tworzymy odnośnik do pliku stylów: <LINK href=”STYLE.CSS” rel=”stylesheet” type=”text/css”>. W pliku stylu (style.css) definiujemy właściwości elementów pomiędzy znacznikiem komentarza: <!-- definicja stylu //-->. WPISANY Definiowany tylko dla jednego znacznika (elementu), poprzez dodanie do jego definicji (bezpośrednio w sekcji BODY) parametru: STYLE=”parametr1:wartość1; parametr2:wartość2”. <HEAD> <STYLE type=”text/css”> <!-Tutaj definiujemy styl! Np. H1 {font-family:txt; color:red} H2 {font-family:arial; color:blue} //--> </STYLE> </HEAD> Plik index.html: <HEAD> <LINK href=”STYLE.CSS” rel=”stylesheet” type=”text/css”> </HEAD> Plik style.css: <!-Tutaj definiujemy styl! Np. H1 {font-family:txt; color:red} H2 {font-family:arial; color:blue} //--> <P style=”color:blue; font-weight:bold”> Tekst paragrafu będzie napisany niebieską i pogrubioną czcionką. </P> 27 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) o Grupowanie. JĘZYK HTML Aby przyporządkować ten sam styl do kilku elementów (selektorów) podajemy je oddzielone od siebie przecinkami: selektor1, selektor2, selektor3 {parametr1:wartość1; parametr2:wartość2} o Klasy. Klasy umożliwiają wprowadzenie odstępstw od stylu (wyjątki). Definiuje się je w arkuszu style.CSS w postaci: .wyjatek1 {parametr1:wartość1} a następnieprzy elemencie do którego odnosi się wyjątek dodajemy parametr: class=”wyjatek1”. Przykładowo: Plik index.html: <h3 class=”kolorek”> Nagłówek objęty regułą wyjątku. </h3> Plik style.css: H3 {text-align:center; color:red} .kolorek {color:green} o Pseudoklasy. Służą do definiowania wyglądu hiperłączy: Polecenie a:link Opis Zwykły link, przed uaktywnieniem go. Link aktywny: podczas ładowania się strony do której a:active prowadzi. a:visited Link odwiedzony. Link w momencie wskazania go myszką (w chwili najechania a:hover na niego wskaźnikiem myszy). Wpisywane są w arkuszu stylów style.css w postaci: a:link {parametr1:wartość1; parametr2:wartość2} 5. Warstwy. 28 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Warstwa jest to wycięty kawałek strony, który możemy umieścić w dowolnym miejscu. Warstwy mogą być umieszczane jedna na drugiej. Właściwości warstw definiowane są w pliku stylów style.css w postaci: #warstwa1 {position:relative; background-color:yellow} #warstwa2 {position:absolute; top:100px; left:100px background-color:green} W pliku index.html w sekcji <BODY> warstwy definiuje się poprzez znacznik: <DIV id=”warstwa1”> Zawartość warstwy. </DIV> Ustalanie położenia warstwy: POSITION:RELATIVE, czyli położenie względne odpowiadające umiejscowieniu warstwy zgodnie z układem elementów strony. POSITION:ABSOLUTE; TOP:999PX; LEFT:999PX, czyli położenie bezwzględne, definiowane jako odległość lewego górnego rogu warstwy od takiegoż rogu strony. Kolejność warstw: parametr Z-INDEX=”wartość”. Warstwa znajdująca się na spodzie ma najmniejszą wartość parametru z-index (czyli z-index:1), czyli im większa wartość tym wyżej znajdzie się dana warstwa. z-index:3 z-index:1 z-index:4 z-index:2 29 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML Wybrane właściwości CSS Właściwości dotyczące tekstu ELEMENT OPIS MOZLIWE WARTOSCI 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, xsmall, 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 rodzaj kursora e-resize, ne-resize, n-resize, nwresize, w-resize, sw-resize, sresize, se-resize, hand, crosshair, help, move, text, auto, default, wait cursor Właściwości dotyczące tła ELEMENT OPIS MOŻLIWE WARTOŚCI backgroundattachment 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") w punktach (pt), procentach lub pikselach (px) background-position pozycja tła 30 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML background-repeat sposób powtarznia tła repeat, repeat-x, repeat-y, norepeat Właściwości dotyczące odstępów i marginesów ELEMENT OPIS MOŻLIWE WARTOŚCI margin-top górny margines w punktach (pt), procentach lub pikselach (px) margin-bottom dolny margines w punktach (pt), procentach lub pikselach (px) margin-left lewy margines w punktach (pt), procentach lub pikselach (px) margin-right prawy margines w punktach (pt), procentach lub pikselach (px) word-spacing odstępy pomiędzy wyrazami w punktach (pt), procentach lub pikselach (px) letter-spacing odstępy pomiędzy znakami w punktach (pt), procentach lub pikselach (px) line-height odstępy pomiędzy wierszami w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące obramowania i pasków przewijania ELEMENT OPIS MOŻLIWE WARTOŚCI border-width grubość obramowania w punktach (pt), procentach lub pikselach (px) border-style styl obramowania none, solid, double, inset, outset, groove, ridge border-color kolor obramowania wszystkie możliwe kolory 31 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML scrollbar-face-color wszystkie możliwe kolory scrollbar-highlightcolor wszystkie możliwe kolory scrollbar-shadowcolor wszystkie możliwe kolory scrollbar-3dlightcolor wszystkie możliwe kolory elementy paska przewijania wszystkie możliwe kolory wszystkie możliwe kolory scrollbar-arrow-color scrollbar-track-color wszystkie możliwe kolory scrollbardarkshadow-color Właściwości dotyczące warstw ELEMENT OPIS MOZLIWE WARTOSCI position pozycja warstwy: relative, absolute względna/bezwzględna top położenie warstwy względem górnego marginesu w pikselach (px) bottom położenie warstwy względem dolnego marginesu w pikselach (px) left położenie warstwy względem lewego marginesu w pikselach (px) right położenie warstwy względem prawego marginesu w pikselach (px) z-index kolejność warstwy liczby całkowite width wysokość warstwy w pikselach (px) height szerokość warstwy w pikselach (px) visibility widoczność warstwy: pokazana/ukryta visible, hidden dla IE, show, hide dla NN background-color kolor tła wszystkie możliwe kolory background-image grafika jako tło url("plik.jpg") 32 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki (finansowane przez EFS oraz MEiN) JĘZYK HTML source-include źródło pliku ładowanego url("plik.hmtl") w warstwie clip część warstwy, która ma zostać pokazana rect(x1,y1,x2,y2) 33 / 33 Katedra Informatyki i Metod Komputerowych Akademia Pedagogiczna im. KEN w Krakowie