Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki. (finansowane przez EFS oraz MEiN) JĘZYK HTML

Wielkość: px
Rozpocząć pokaz od strony:

Download "Studia Podyplomowe dla nauczycieli w zakresie ICT, języka obcego i informatyki. (finansowane przez EFS oraz MEiN) JĘZYK HTML"

Transkrypt

1 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: <> 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. </> Koniec dokumentu. 1 / 33

2 Nagłówek <HEAD></HEAD> a) Standart kodowania polskich liter: <META http-equiv= content-type content= text/html; charset=iso > <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 enus amerykański Język f) <META NAME="Author" CONTENT="imię i nazwisko"> Informacje o autorze strony. g) <META HTTP-EQUIV="Creation-date" CONTENT="Sun, 21 Nov :30:01 GMT"> Data stworzenia strony. h) <META HTTP-EQUIV="Reply-to" Adres autora strony. i) <META NAME="Generator" CONTENT="nazwa generatora"> Edytor, przy pomocy którego utworzono stronę. Często jest to informacja generowana automatycznie przez edytory. 2 / 33

3 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> Tekst pogrubiony. <I> tekst </I> Tekst pochylony (kursywa). <U> tekst </U> Tekst podkreślony. <S> tekst </S> Tekst przekreślony. <STRIKE> tekst </STRIKE> <SUB> tekst </SUB> Subskrypt czcionka w dolnym indeksie. <SUP> tekst </SUP> Superskrypt czcionka w górnym indeksie. Tekst przeformatowany, czyli tekst, w którym wszystkie znaki mają taką samą wielkość. <PRE> tekst </PRE> Przykładowo można w nim wstawiać wielokrotne spacje. Pisany jest najczęściej czcionką Fourier New. Numerowanie (każdy nowy punkt zaczynamy <OL> kolejne punkty </OL> przez <LI>). Zdefiniowanie typu numeracji: type= <OL type= wartość parametru > > type= a a. b. c. kolejne punkty </OL> type= A A. B. C. type= i i. ii. iii. type= I I. II. III. <OL start= wartość > kolejne punkty </OL> <UL> kolejne podpunkty </UL> Numerowanie rozpoczynające się od określonej wartości. Punktory (każdy nowy podpunkt zaczynamy przez <LI>). 3 / 33

4 <UL type= wartość parametru > kolejne podpunkty </UL> <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> Zdefiniowanie typu punktora: DISC SQUARE o CIRCLE Zmiana rozmiaru czcionki. Skala: 1-7. Domyślna wartość wynosi 3, co odpowiada w zależności od przeglądarki czcionce około pkt. 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. Nowy akapit tekstu. Pomiędzy poszczególne akapity tekstu <P> tekst </P> wstawiana jest automatyczna interlinia, czyli jedna pusta linijka. <P id= nazwa akapitu > tekst </P> Nowy akapit tekstu o nazwie nazwa akapitu. <P align= wartość parametru > tekst </P> <SPAN style= rodzaj formatowania > tekst formatowany</span> <Hn> tekst </Hn> <Hn align= wartość parametru > tekst </Hn> <Hn title= opis tekstu > tekst </Hn> 4 / 33 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 Tekst opisujący nagłówek (żółty kartonik wyjeżdżający po przytrzymaniu myszki na tekście).

5 5 / 33

6 b) Inne (odsyłacze, tło strony, itp.). <znacznik atrybut= wartość > Opis <BODY bgcolor= nazwa koloru > Ustalenie koloru tła strony. <BODY background= nazwa obrazka lub ścieżka dostępu do obrazka > Ustalenie rysunku tła strony. <BODY text= nazwa koloru > Ustalenie koloru czcionki dla całej strony. <BODY topmargin= wartość > Podanie wartości (w pikselach) górnego marginesu. <BODY bottommargin= wartość > Podanie wartości (w pikselach) dolnego marginesu. <BODY leftmargin= wartość > Podanie wartości (w pikselach) lewego marginesu. <BODY rightmargin= wartość > Podanie wartości (w pikselach) prawego 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= > odsyłacza do strony, której adres treść odsyłacza </A> wpisano (tutaj: 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= target= _blank > treść odsyłacza </A> <A href= > treść odsyłacza </A> <A href= t=temat listu > treść odsyłacza </A> <A href= t=temat listu&body=treść listu > treść odsyłacza </A> 6 / 33 Strona otworzy się w nowym oknie. Przejście przez kliknięcie w treść odsyłacza do pisania wiadomości tekstowej (tutaj zaadresowany do: Tworzy nowy z wypełnionym tematem listu. Tworzy nowy z wypełnionym tematem listu oraz wpisaną treścią listu. Uwaga! Przy użyciu kilku parametrów oddzielane są znakiem: &. Pierwszy oddzielony został przezł?.

7 <A href= > treść odsyłacza </A> <A href= > 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 i wysyła go na adres: przesyłając kopię na adres: Tworzy nowy i wysyła go na adres: przesyłając ukrytą kopię na adres: 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ść > <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ść > Opis 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

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

9 d) Animacja <MARQUEE> Animacje tego typu rozpoznawane są przez Microsoft Internet Explorer i nie są uwzględniane w standardzie 4.0. <znacznik atrybut= wartość > <MARQUEE> tekst pływający </MARQUEE> <MARQUEE behavior= wartość parametru > tekst pływający </MARQUEE> <MARQUEE bgcolor= nazwa koloru > tekst pływający </MARQUEE> <MARQUEE direction= wartość parametru > tekst pływający </MARQUEE> <MARQUEE width= wartość > tekst pływający </MARQUEE> <MARQUEE height= wartość > tekst pływający </MARQUEE> <MARQUEE loop= wartość > tekst pływający </MARQUEE> <MARQUEE vspace= wartość >> tekst pływający </MARQUEE> <MARQUEE hspace= wartość > tekst pływający </MARQUEE> Opis Wstawianie pływającego tekstu ( ). 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. Definicja koloru tła (drogi) dla tekstu. Określenie kierunku ruchu dla tekstu: o LEFT ( ) o RIGHT ( ) Określenie szerokości pasa ruchu (drogi). Może być wyrażona jako wartość stała lub zmieniająca się procentowo. Określenie wysokości pasa ruchu (drogi). Pętla określenie ile razy ma być powtórzony ruch. Odsunięcie pływającego tekstu o określoną wartość od elementów z nim sąsiadujących. (względem pionu). Uwaga! 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 określoną wartość od elementów z nim sąsiadujących. (względem poziomu). 9 / 33

10 <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> 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. <TABLE> e) Tabele Struktura tabeli: </TABLE> <TR> </TR> <TD> </TD> Początek tabeli. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Zamknięcie wiersza. Zamknięcie tabeli. Element powtarzamy tyle razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. 10 / 33

11 Polecenia: <znacznik atrybut= wartość > <TD> &nbsp </TD> <TABLE border> zawartość tabeli </TABLE> <TABLE border= wartość > zawartość tabeli </TABLE> <TABLE cellspacing= wartość > zawartość tabeli </TABLE> <TABLE cellpadding= wartość > zawartość tabeli </TABLE> <TABLE width= wartość > zawartość tabeli </TABLE> <TABLE height= wartość > zawartość tabeli </TABLE> <TABLE align= wartość parametru > zawartość tabeli </TABLE> <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> Opis &nbsp lepka spacja wpisywana do komórki jeśli chcemy aby pozostała pusta. Pokazanie krawędzi tabeli. 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%). Określenie wysokości tabeli. Oklejenie tabeli tekstem: a. LEFT - wyrównanie tabeli do lewej strony; b. RIGHT - wyrównanie tabeli do prawej strony. 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

12 Pokazanie/ukrycie wybranych krawędzi tabeli: VOID Tylko wewnętrzne. ABOVE Wewnętrzne + górna. BELLOW Wewnętrzne + dolna. <TABLE border frame= wartość parametru > zawartość tabeli </TABLE> LHS RHS Wewnętrzne + lewa. 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

13 Pokazanie/ukrycie krawędzi tabeli (przy zastosowaniu pełnej definicji tabeli: thead-tfoot-tbody): NONE Tylko krawędź zewnętrzna tabeli. <TABLE border rules= wartość parametru > zawartość tabeli </TABLE> GROUPS ROWS Krawędzie zewnętrzne poszczególnych elementów tabeli: thead, body, tfoot. Krawędzie zewnętrzne + poziome (wiersze). thead tbody tfoot COLS Krawędzie zewnętrzne + pionowe (kolumny). ALL Wewnętrzne i zewnętrzne. <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> 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

14 <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 CENTER RIGHT Valign = TOP BOTTOM Wiersz nagłówka: <TABLE> <TR> <TH> </TH> </TR> <TR> <TD> </TD> </TR> </TABLE> Początek tabeli. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Zamknięcie wiersza. Otwarcie wiersza. Otwarcie komórki. Zamknięcie komórki. Zamknięcie wiersza. Zamknięcie tabeli. Element powtarzamy tyle razy ile komórek nagłówka chcemy uzyskać. Element powtarzamy tyle razy ile komórek chcemy uzyskać. Element powtarzamy tyle razy ile wierszy nagłówka chcemy uzyskać. Domyślnie wiersze nagłówkowe wyróżnione są czcionką pogrubioną. Element powtarzamy tyle razy ile wierszy chcemy uzyskać. 14 / 33

15 f) Wstawianie obiektów OBJECT. <znacznik atrybut= wartość > Opis <OBJECT ( )> Treść wyświetlana w przeglądarkach nieobsługujących polecenie typu obiekt. Wstawianie obiektu. </OBJECT> Pełna definicja ramki pływającej: o DATA miejsce na podanie źródła pliku; <OBJECT data= źródło pliku, który o WIDTH szerokość ramki; pojawi się jako obiekt type= typ o HEIGHT wysokość ramki; obiektu width= wartość o TYPE rodzaj danych height= wartość > Treść wczytywanych jako obiekt; alternatywna. Strona sieci Web </OBJECT> TEXT/ (html) TEXT/PLAIN Dokument tekstowy (txt) IMAGE/JPEG Obraz (jpg) g) Formularze <znacznik atrybut= wartość > <FORM> zawartość formularza </FORM> <FORM action= method= post enctype= text/plain > zawartość formularza </FORM> Opis Polecenie definiujące formularz. Akcja, jaka ma zostać wykonana po wypełnieniu formularza: przesłanie jego wyników na adres 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

16 <INPUT type= wartość parametru name= nazwa pola value= początkowa zawartość pola > Tworzy pola formularza: TYPE: 16 / 33

17 17 / 33 TEXT CHECKBOX RADIO PASSWORD HIDDEN BUTTON IMAGE FILE SUBMIT 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. 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=

18 <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ść > <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> <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> 18 / 33 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. 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. 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

19 <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> <TEXTAREA name= nazwa pola > domyślny tekst pola tekstowego </TEXTAREA> <TEXTAREA name= nazwa pola rows= wartość cols= wartość > domyślny tekst pola tekstowego </TEXTAREA> <TEXTAREA name= nazwa pola wrap= wartość parametru > domyślny tekst pola tekstowego </TEXTAREA>... </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. Zaznaczenie danej opcji. Określenie rozmiaru okna selekcji. Polecenie wstawiające większe pole tekstowe. Domyślnie ma ono rozmiar 40 kolumn i 4 wierszy. Zmiana rozmiaru pola tekstowego. 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

20 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 Definicja ramki pływającej. <IFRAME ( )> Tekst alternatywny Jeśli przeglądarka nie akceptuje tego dla przeglądarek, które nie akceptują typu ramek, odczyta jedynie tekst ramek pływających. </IFRAME> umieszczony pomiędzy znacznikami. <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> 20 / 33 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>

21 2. Ramki Ramki stosuje się w celu ułatwienia nawigacji na stronach. Polegają one na podzieleniu okna przeglądarki na kilka części i załadowaniu w nich kilku plików. 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: <> <HEAD> <TITLE> tytuł </TITLE> </HEAD> Część nagłówkowa strony. <FRAMESET COLS= 25%, *% > <FRAME SCROLLING= auto NAME= nazwa ramki SRC= nazwa pliku strony, która ma pojawiś się w ramce > <FRAME SCROLLING= yes NAME= nazwa ramki SRC= plik.html > <NOFRAMES> <BODY> Zawartość strony dla przeglądarek nieobsługujących ramek. </BODY> </NOFRAMES> 21 / 33 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. Źródło i nazwa ramki pierwszej. Źródło i nazwa ramki drugiej. Dodatkowa część zawierająca treść strony dla przeglądarek nieobsługujących ramek.

22 </> </FRAMESET> Polecenia <znacznik atrybut= wartość > <FRAMESET> zawartość ramki </FRAMESET > <NOFRAMESET> zawartość strony </NOFRAMESET > <FRAMESET cols= wartość, wartość > zawartość ramki </FRAMESET > <FRAMESET rows= wartość, wartość > zawartość ramki </FRAMESET > Opis Koniec definiowania ramek. Definicja ramki. 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

23 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 > <FRAME SRC= kol3.htm > </FRAMESET> Zdefiniowanie drugiego wiersza strony, składającego się z 3 kolumn. Zdefiniowanie strony złożonej z 3 wierszy <FRAMESET COLS=50%,50%> <FRAME SRC= kol4.htm > <FRAME SRC= kol5.htm > </FRAMESET> Zdefiniowanie trzeciego wiersza strony, składającego się z 2 kolumn. </FRAMESET> taki sposób definiuje się bardziej złożony układ ramek. W <FRAMESET border= wartość > zawartość ramki </FRAMESET > Definicja szerokości obramowania dzielącego poszczególne ramki. 23 / 33

24 <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 > <FRAME src= plik.html scrolling= wartość parametru > zawartość ramki </FRAME > <FRAME name= nazwa ramki > zawartość ramki </FRAME > <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 > 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. Definicja koloru obramowania. Przypisaniu dokumentu do ramki. 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. 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. 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

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

26 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) Nazwa koloru Syst. (ang) szesnastkowy Syst. dziesiętny biały white #FFFFFF rgb(255,255,255) czarny black # rgb(0,0,0) zielony green # rgb(0,128,0) niebieski blue #0000FF rgb(0,0,255) różowy fuchsia #FF00FF rgb(255,0,255) żółty yellow #FFFF00 rgb(255,255,0) intensywny zielony lime #00FF00 rgb(0,255,0) (limetka) ciemno żółty (oliwka) olive # rgb(128,128,0) fioletowy purple # rgb(128,0,128) zielonomodry teal # rgb(0,128,128) srebrny (szary 25%) silver #C0C0C0 rgb(192,192,192) czerwony red #FF0000 rgb(255,0,0) ciemno niebieski navy # rgb(0,0,128) ciemno czerwony maroon # rgb(128,0,0) szary (50%) gray # rgb(128,128,128) turkusowy aqua #00FFFF rgb(0,255,255) 26 / 33

27 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 ZEWNĘTRZNY WPISANY Definiowany w nagłówku, pomiędzy znacznikiem: <STYLE type= text/css > </STYLE> oraz znacznikiem komentarza: <!-- definicja stylu //--> 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 //-->. 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

28 o Grupowanie. 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 a:active a:visited a:hover Opis Zwykły link, przed uaktywnieniem go. Link aktywny: podczas ładowania się strony do której prowadzi. Link odwiedzony. Link w momencie wskazania go myszką (w chwili najechania 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

29 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

30 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 font-size krój czcionki wielkość czcionki wszystkie możliwe kroje czcionek 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 text-transform white-space cursor wcięcie pierwszego wiersza akapitu transformacja tekstu tekst normalny / preformatowany / 'niełamliwy' wiersz rodzaj kursora w punktach (pt), procentach lub pikselach (px) none, lowercase, uppercase, capitalize normal, pre, nowrap e-resize, ne-resize, n-resize, nwresize, w-resize, sw-resize, s- resize, se-resize, hand, crosshair, help, move, text, auto, default, wait Właściwości dotyczące tła backgroundattachment ELEMENT OPIS MOŻLIWE WARTOŚCI 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) 30 / 33

31 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 margin-top ELEMENT OPIS MOŻLIWE WARTOŚCI margin-bottom margin-left margin-right word-spacing letter-spacing line-height górny margines dolny margines lewy margines prawy margines odstępy pomiędzy wyrazami odstępy pomiędzy znakami odstępy pomiędzy wierszami w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) w punktach (pt), procentach lub pikselach (px) Właściwości dotyczące obramowania i pasków przewijania border-width border-style ELEMENT OPIS MOŻLIWE WARTOŚCI grubość obramowania styl obramowania w punktach (pt), procentach lub pikselach (px) none, solid, double, inset, outset, groove, ridge border-color kolor obramowania wszystkie możliwe kolory 31 / 33

32 scrollbar-face-color scrollbar-arrow-color scrollbar-track-color scrollbar-highlightcolor scrollbar-shadowcolor scrollbar-3dlightcolor scrollbardarkshadow-color elementy paska przewijania wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory wszystkie możliwe kolory Właściwości dotyczące warstw position top bottom left right ELEMENT OPIS MOZLIWE WARTOSCI pozycja warstwy: względna/bezwzględna położenie warstwy względem górnego marginesu położenie warstwy względem dolnego marginesu położenie warstwy względem lewego marginesu położenie warstwy względem prawego marginesu relative, absolute w pikselach (px) w pikselach (px) w pikselach (px) 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

33 source-include clip źródło pliku ładowanego w warstwie część warstwy, która ma zostać pokazana url("plik.hmtl") rect(x1,y1,x2,y2) 33 / 33

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

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

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych 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

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

przygotował: mgr Szymon Szewczyk PODSTAWY S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

Język HTML i podstawy CSS

Język HTML i podstawy CSS Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej

Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej Formularze Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na serwerze (gdzie potrzebne są skrypty,któredaneprzetworzą najczęściej stosuje się język PHP lub JSP)

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Znaczniki HTML. Struktura dokumentu. Nagłówek strony

Znaczniki HTML. Struktura dokumentu. Nagłówek strony Znaczniki HTML HTML (HyperText Markup Language), po polsku język hipertekstowy. Podstawą budowy każdej strony internetowej jest język znaczników HTML. Składa się on z kilkudziesięciu komend, tzw. tagów.

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

Czcionki. Rodzina czcionki [font-family] Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana

Bardziej szczegółowo

Wprowadzenie do Internetu zajęcia 3

Wprowadzenie do Internetu zajęcia 3 Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie

Bardziej szczegółowo

Tutorial. HTML Rozdział: Ramki

Tutorial. HTML Rozdział: Ramki Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Ćwiczenie 4 - Tabele

Ćwiczenie 4 - Tabele Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się

Bardziej szczegółowo

CSS - 2. Właściwości tekstu, czcionek

CSS - 2. Właściwości tekstu, czcionek CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

Tworzenie stylów w HTML

Tworzenie stylów w HTML Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron

Bardziej szczegółowo

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail. 1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

Bardziej szczegółowo

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Technologie stron www Strony www Statyczne HTML. CSS. Dynamiczne Oparte o bazy danych.

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Wykład 2 CSS. Michał Drabik

Wykład 2 CSS. Michał Drabik Wykład 2 CSS Michał Drabik XHTML CSS Struktura strony internetowej Prezentacja strony internetowej CSS = Cascading Style Sheets Kaskadowe arkusze stylów style umieszczone są według hierarchi, ustalającej

Bardziej szczegółowo

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

Tworzenie i edycja dokumentów w aplikacji Word.

Tworzenie i edycja dokumentów w aplikacji Word. Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

Edytor tekstu MS Word 2003 - podstawy

Edytor tekstu MS Word 2003 - podstawy Edytor tekstu MS Word 2003 - podstawy Cz. 4. Rysunki i tabele w dokumencie Obiekt WordArt Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład hasło reklamowe, możemy wykorzystać

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu.

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Klub Seniora - Podstawy obsługi komputera oraz korzystania z Internetu Str. 1 Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Część 3 Opis programu MS Office

Bardziej szczegółowo

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 7

Tworzenie Stron Internetowych. odcinek 7 Tworzenie Stron Internetowych odcinek 7 CSS dziedziczenie Drzewo dokumentu Drzewo dokumentu to hierarchia elementów umieszczonych w dokumencie źródłowym HTML. Każdy element w takim drzewie ma dokładnie

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

SterBox. Przygotowanie Strony Użytkownika Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie

Bardziej szczegółowo

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika. Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić teksty

Bardziej szczegółowo

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia

Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach. dr Beata Kuźmińska-Sołśnia Język CSS odpowiada za wizualną prezentację stron internetowych w przeglądarkach dr Beata Kuźmińska-Sołśnia CSS Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) specjalny język opracowany tylko

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

TECHNOLOGIE SIECI WEB TECHNOLOGIE SIECI WEB Prowadzący: dr inż. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki LABORATORIUM ĆWICZENIE nr 1 Temat: Język (X)HTML - Layout

Bardziej szczegółowo

Deklarowanie tytułu związanej z tabelą

Deklarowanie tytułu związanej z tabelą Tabele 1 Deklarowanie tytułu związanej z tabelą Przychody w latach 2007-2010 Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach

Bardziej szczegółowo

Rozwiązanie ćwiczenia 8a

Rozwiązanie ćwiczenia 8a Rozwiązanie ćwiczenia 8a Aby utworzyć spis ilustracji: 1. Ustaw kursor za tekstem na ostatniej stronie dokumentu Polska_broszura.doc i kliknij przycisk Podział strony na karcie Wstawianie w grupie Strony

Bardziej szczegółowo

HTML5 i CSS. Deklaracja musi być na początki dokumentu napisanego w HTML5 przed tagiem .

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku W swoim folderze utwórz folder o nazwie 29_10_2009, wszystkie dzisiejsze zadania wykonuj w tym folderze. Na dzisiejszych zajęciach nauczymy

Bardziej szczegółowo

TECHNOLOGIE SIECI WEB

TECHNOLOGIE SIECI WEB 1. Wybrane elementy sk³adni CSS TECHNOLOGIE SIECI WEB Prowadz¹cy: dr in. Jan Prokop, e-mail: jprokop@prz.edu.pl, Politechnika Rzeszowska, Wydzia³ Elektrotechniki i Informatyki LABORATORIUM ÆWICZENIE nr

Bardziej szczegółowo

Ćwiczenie 1 Deklarowanie metainformacji.

Ćwiczenie 1 Deklarowanie metainformacji. Zadania do wykonania: Ćwiczenie 1 Deklarowanie metainformacji. Ćwiczenie 1 poświęcone jest wypełnieniu części dokumentu HTML. Umieszczamy w niej wszystkie informacje dodatkowe interpretowane przez

Bardziej szczegółowo

Bezbolesny wstęp do CSS

Bezbolesny wstęp do CSS CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Podstawy. w HTML u HTML??? tworzenia stron internetowych. dla wszystkich. nie wiem co to jest, ale na pewno nie jest trudne.

Podstawy. w HTML u HTML??? tworzenia stron internetowych. dla wszystkich. nie wiem co to jest, ale na pewno nie jest trudne. Podstawy tworzenia stron internetowych w HTML u dla wszystkich HTML??? nie wiem co to jest, ale na pewno nie jest trudne. Opracował: Krzysztof Dzierbicki KADEK - 2003 - 1 - - 2 - Wiek XXI charakteryzuje

Bardziej szczegółowo

e r T i H M r e n L T n

e r T i H M r e n L T n s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

Podstawy języka HTML (HyperText Markup Language)

Podstawy języka HTML (HyperText Markup Language) Zasady pisania kodu Podstawy języka HTML (HyperText Markup Language) Kod HTML tworzymy używając znaczników, np. , . Niektóre znaczniki muszą być wprowadzane parami posiadają swoje odpowiedniki

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Technologie Internetowe

Technologie Internetowe Arkadiusz Liber Emil Dziubecki Technologie Internetowe Laboratorium Ćwiczenie 3. Projektowanie i implementacja dokumentów hipertekstowych zawierających ramki i tabele Legnica 2005 1 1. Wymagania wstępne

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę 1. Narzędzia główne: wycinamy tekst, grafikę stosowanie formatowania tekstu i niektórych podstawowych elementów graficznych umieszczane są wszystkie kopiowane i wycinane pliki wklejenie zawartości schowka

Bardziej szczegółowo