1. Zasady nazywania i zapisywania plików: 2

Transkrypt

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
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
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
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
JĘZYK HTML
5 / 33
JĘZYK HTML
b) Inne (odsyłacze, tło strony, itp.).
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
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”>

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.
Opis
<IMG src=”nazwa lub źródło
obrazka”>
<IMG src=”nazwa lub źródło obrazka”
width=”wartość”>
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
JĘZYK HTML
alt=”opis obrazka”>
border=”wartość”>
align=”wartość parametru”>
align=”left” vspace=”wartość”>
align=”left” hspace=”wartość”>
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
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.
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ść
</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
(drogi).
<MARQUEE loop=”wartość”> tekst
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).
<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
sąsiadujących. (względem poziomu).
9 / 33
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
<MARQUEE scrolldelay=”wartość”>
tekst pływający </MARQUEE>
<MARQUEE align=”wartość
</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

Polecenia:
JĘZYK HTML
Opis
<TD> &nbsp </TD>
&nbsp – 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ść”>
<TABLE cellpadding=”wartość”>
<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ść”>
Określenie wysokości tabeli.
<TABLE align=”wartość parametru”>
„Oklejenie” tabeli tekstem:
a. LEFT - wyrównanie tabeli do lewej
strony;
b. RIGHT - wyrównanie tabeli do
prawej strony.
<TABLE color=”nazwa koloru”>
<TABLE bgcolor=”nazwa koloru”>
<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”>
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
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
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”>
<TD rowspan=”ilość wierszy”>
<TD colspan=”ilość kolumn”>
<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
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
JĘZYK HTML
f) Wstawianie obiektów OBJECT.
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
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
JĘZYK HTML
<INPUT type=”wartość parametru”
name=”nazwa pola”
value=”początkowa zawartość pola”>
Tworzy pola formularza:
TYPE:
16 / 33
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.
JĘZYK HTML
name=”nazwa pola” value=”wartość
parametru” readonly>
name=”nazwa pola” id=”nazwa
identyfikująca pole”>
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.
tabindex=”wartość”>
accesskey=”klawisz skrótu”>
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
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ść”>
</TEXTAREA>
Zmiana rozmiaru pola tekstowego.
<TEXTAREA name=”nazwa pola”
wrap=”wartość parametru”>
</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
JĘZYK HTML
h) Ramki pływające (floating frame, inline frame)
Ramki pływające mogą być umieszczone w dowolnym miejscu na stronie.
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>
height=”wartość” src="źródło pliku"
frameborder=”wartość parametru”>
Tekst alternatywny </IFRAME>
scrolling=”wartość parametru”>
Tekst alternatywny </IFRAME>
marginwidth=”wartość”> Tekst
alternatywny </IFRAME>
marginheight=”wartość”> Tekst
hspace=”wartość”> Tekst
vspace=”wartość”> Tekst
name=”nazwa ramki”> Tekst
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
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
JĘZYK HTML
Koniec definiowania
ramek.
</FRAMESET>
</HTML>

Polecenia
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
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
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”>
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ść”>
<FRAME marginwidth=”wartość”>
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
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
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
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:

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:
.
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
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;
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;
5. Warstwy.
28 / 33
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
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
background-image
grafika jako tło
url("plik.jpg")
pikselach (px)
background-position pozycja tła
30 / 33
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
pikselach (px)
margin-bottom
dolny margines
pikselach (px)
margin-left
lewy margines
pikselach (px)
margin-right
prawy margines
pikselach (px)
word-spacing
odstępy pomiędzy
wyrazami
pikselach (px)
letter-spacing
odstępy pomiędzy
znakami
pikselach (px)
line-height
odstępy pomiędzy
wierszami
pikselach (px)
Właściwości dotyczące obramowania i pasków przewijania
ELEMENT
OPIS
MOŻLIWE WARTOŚCI
border-width
grubość obramowania
pikselach (px)
border-style
styl obramowania
none, solid, double, inset,
outset, groove, ridge
border-color
kolor obramowania
31 / 33
JĘZYK HTML
scrollbar-face-color
scrollbar-highlightcolor
scrollbar-shadowcolor
scrollbar-3dlightcolor
elementy paska
przewijania
scrollbar-arrow-color
scrollbar-track-color
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
background-image
grafika jako tło
url("plik.jpg")
32 / 33
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

1. Zasady nazywania i zapisywania plików: 2

Transkrypt

Podobne dokumenty

wk³adki do ramki/pier¶cionek - Arex-Pol

Instrukcja montażu/Assembly instruction Produkt/Product

Zestaw zadań nr 4 – ramki

INFORMACJE DO ZAPAMIĘTANIA

ODCINEK 2 RAMKA NA ZDJĘCIA

RAMKI Układ ramek jest definiowany w pliku HTML, w

R Wszystkie zmienne, dane, funkcje, wyniki itp. są

Załącznik nr 9 - opis naklejki