docwartość - BK-S
download 
Reklamacja Transkrypt
wartość - BK-S
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
w celu: stworzenia możliwości bardziej elastycznego
zarządzania sposobem formatowania (wyglądem)
elementów znajdujących się w dokumentach
elektronicznych.
CSS nie może istnieć samodzielnie, gdyż jest ściśle
powiązane z językiem opisu struktury dokumentów
takim jak (X)HTML.
CSS daje możliwość globalnego zarządzania formą
prezentacji całej witryny internetowej.
Style stały się już praktycznie podstawowym narzędziem
formatującym
Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w
składni HTML, które dotyczą formatowania, będą stopniowo
wycofywane przez producentów przeglądarek internetowych, na
rzecz rekomendowanych analogicznych deklaracji CSS.
Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle
bardziej przejrzyste i krótsze.
Style pozwalają w łatwy sposób zarządzać całą serią dokumentów,
poprzez stosowanie zewnętrznych arkuszy stylów.
Dzięki możliwości stosowania klas selektorów, znacznie
oszczędzamy pisania.
Style dają autorowi możliwości, które do tej pory były praktycznie
niemożliwe do osiągnięcia:
Różne wartości pogrubienia czcionki (9 rodzajów)
Dodatkowe możliwości formatowania tekstu
Ogólne polecenie stylu ma postać:
selektor { cecha: wartość } –
w jęz. angielskim selector { property: value }
Selektor - w tym przypadku selektorem jest element języka
HTML, znacznik p
Właściwość i wartość - właściwość to inaczej jakaś cecha
selektora. W tym przypadku cechą jest kolor tekstu color,
wartość ustawiono na red, co oznacza kolor czerwony.
Deklaracja formatuje selektor (nadaje mu wygląd), tutaj
formatowany jest element p
Blok deklaracji może zawierać jedną lub wiele deklaracji
Całość tworzy instrukcję dla przeglądarki internetowej, którą
można opisać słowami: odnajdź wszystkie elementy <p>, ustaw
im kolor tekstu na czerwony.
Arkusz
stylu można umieścić w dokumencie (X)HTML.
W takim przypadku będzie on zastosowany tylko do
tego dokumentu
Arkusz stylu może być zachowany w oddzielnym pliku
– będzie wtedy dostępny dla wielu dokumentów
(X)HTML
Może on zostać umieszczony bezpośrednio w tekście
– będzie wtedy odpowiedzialny za formatowanie
konkretnej sekcji dokumentu
(…) <head>
(...)
<style type=”text/css”>
<!-/* Ten tekst zostanie zignorowany przez przeglądarkę, ale może zawierać informacje cenne dla
projektanta arkusza CSS */
p { color: red;
font-size: 14pt;
font-family: sans-serif
}
h1 { color: green;
background: yellow;
text-align: center
}
-->
</style>
(...)
</head> (…)
Styl
lokalny pozwala na nadanie formatowania konkretnemu
pojedynczemu elementowi strony
<selektor style="cecha: wartość; cecha2: wartość2..."> ...
</selektor>
PRZYKŁADY
<p
style="color: red">To jest jakiś tekst zapisany na
czerwono</p>
<h1 style=”color: green; background: yellow; text-align:
center”> to jest wycentrowany nagłówek I poziomu na zielono
z żółtym tłem </h1>
Arkusz
zdefiniowany w oddzielnym pliku np. style.css
zawiera dokładnie takie same informacje, jak te umieszczony
bezpośredni w dokumencie XHTM
Aby utworzyć odsyłacz do tego arkusza, należy umieścić link
poniżej elementu TITLE, w miejscu gdzie przedtem
znajdowała się definicja wewnętrznego arkusza stylu:
(…)
<head> (...)
<link rel=„stylesheet" type="text/css" href="style.css" />
(...) </head>
(…)
/* SELEKTORY: */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #003868;
background-color: #80B8E8;
margin: 6mm
}
p{
text-align: justify
}
pre, code {
font-size: 8pt;
}
h1, h2, h3 {
color: green;
background: yellow;
text-align: center
}
Klasy
tworzone są by obiektom tego samego typu
w treści jednej strony przypisywać inne właściwości
Dodatkowo dzięki klasom można zaoszczędzić
wiele miejsca
Klasa to szeroko zdefiniowany styl, który definiuje
właściwości pewnych lub wszystkich elementów
dokumentu
Definicja stylu zostanie narzucona elementowi tyko
wówczas, gdy zdefiniowano dla niego klasę
Atrybut CLASS=„…” odpowiada za formatowanie
przy pomocy CSS
Klasy (classes) i identyfikatory (IDs) służą do modyfikacji stylu
danego elementu
Identyfikatory różnią się od klas tym, że mogą być użyte tylko
jeden raz
Identyfikator składa się z:
Znak # wraz z nazwą
Zestawu formatowań objętych parą znaczników {}
Przykład konkretnego stylu
Przykład zdefiniowania identyfikatorów
h1{
color: red;
background: white;
font-size: 18pt;
text-align: left;
font-family:sans-serif;
#small {font-size: 12pt; font-style: italic}
#large {font-size: 24pt; font-style: oblique}
}
Zastosowanie w praktyce
<h1> Dlaczego warto studiować? (18pt)</h1>
<h1 id=„small”> Najczęściej zadawane pytania (12pt italic)</h1>
<h1 id=„large”> Przyszła kariera zawodowa (24 pt oblique)</h1>
Konstrukcja klasy:
<style type=„text/css”>
<!-h1.blue
{color: blue;}
-->
</style>
Metoda wywołania
<h1 class=„blue”> ten nagłówek jest niebieski </h1>
Przy
definiowaniu klas zamiast znaku # używamy kropki
.#small {font-size: 12pt; font-style: italic}
.#large {font-size: 24pt; font-style: oblique}
W
celu użycia klasy zamiast atrybutu id,
stosujemy atrybut class
<h1> Dlaczego warto studiować? (18pt)</h1>
<h1 class=„small”> Najczęściej zadawane pytania (12pt italic)</h1>
<h1 class=„large”> Przyszła kariera zawodowa (24 pt oblique)</h1>
W
arkuszu stylu można określić właściwości:
Właściwości czcionek
Właściwości tekstu
Właściwości kolorów
Właściwości ramek
Położenie
Typy urządzeń
W
przypadku czcionek można stworzyć listę czcionek
lub można określić rodziny czcionek
Kolor tła określamy po to, aby uniknąć ostrzeżenia
podczas walidacji W3C
Rodzaj czcionek
Typowe czcionki
serif
Times, Palatino
sans-serif
Helvetica, Arial
coursive
Zapf Chancery
fantasy
Western, Circus
monospace
Courier, System
Przykład:
h2{
background: white;
font-family: monospace
}
Przykład:
h3{
background: white;
font-family: courier, monaco, monospace
}
Poza rodzajem istnieją 4 własności czcionek
Własność
Wartość
font-size (wielkość
czcionki)
xx-small | x-small| samll | medium | largex | -largex | largex | x-largex | smaller | larger | wartość liczbowa
wyrażona w poprawnej jednostce | n%
font-style (pochyłość)
normal | italic | oblique
font-variant (wielkość liter)
normal | small-caps
font-weight (grubość)
bold | extra-bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900
W przypadku wartości liczbowych należy wyrazić je w prawidłowych
jednostkach:
in, mm, cm oznaczają: cal, milimetr, centymetr
pc (pika-1/6 cala) i pt (punkt-1/72 cala)
px – piksel
em (oznacza aktualną wielkość względną czcionki-szerokość znaku M w aktualnej czcionce) –np.
jeżeli czcionka jest 12pt to 2em wyniesie 24pt
ex oznacza wysokość względną znaku x w aktualnej czcionce
Warto pamiętać również o kolejności nadawanych własności czcionek
font-style, font-weight i font-variant powinny być wymienione jako pierwsze –
kolejność nie ma znaczenia
font-size
font-family
Przykład:
p{
background:white;
font-style: italic;
font-weight: bold;
font-size: 10mm;
font-family: times, sans-serif;
}
Można też określić skrótowo:
p{
background: white;
font: italic bold 10mm times, sans-serif;
}
Własność
Wartość
text-align
center | left | right | justify
tekst-decoration
none | underline | overline | line-trough | blink
text-transform
none | capitalize | uppercase | lowercase
vertical-align
baseline | super | sub | top | middle | bottom | text-top | textbottom | n%
letter-spacing
Wartość liczbowa wyrażona w przyjętej jednostce
word-spacing
Wartość liczbowa wyrażona w przyjętej jednostce
text-indent
Wartość liczbowa wyrażona w przyjętej jednostce | n%
line-height
Wartość liczbowa wyrażona w przyjętej jednostce | n%
TD
{
text-align: center;
vertical-align: bottom;
}
Deklaracja
Opis
list-style-type
disc I circle I square I decimal I lower-roman I upper-roman I loweralpha I upper-alpha I none
ol {list-style-type: lower-alpha;}
list-style-image
inside I outside
ul {list-style-image: url(images/obrazek.gif);}
list-style-postion
lenght I percentage I auto I inhert
ul {list-style: outside}
list-style
[disc I circle I square I decimal I lower-roman I upper-roman I
lower-alpha I upper-alpha I none ] II [inside I outside] II [<url> I none]
ul {list-style: upper-roman inside}
ol
{
list-style-type: lower-alpha;
color: red;
text-align: left;
margin-left: 5%
}
Istnieją 4
własności marginesów
margin-left (lewy)
margin-right (prawy)
margin-top (górny)
margin-bottom (dolny)
Kolejność wymienionych własności
top (góra)
left (lewo)
right (prawo)
bottom (dół)
Przykład:
body {margin: 40pt 20pt 30pt 50pt}
musi być:
XHTML do
określenia kolorów stosuje model RGB
Istnieje 5 sposobów określenia kolorów:
color: blue (istnieje 16 standardowych kolorów, które mogą być
określane za pomocą nazwy)
color: #0000ff (każda z dwóch par cyfr w systemie
szesnastkowym przedstawia natężenie barw- czerwonej zielonej
i niebieskiej w kolorze; wartość minimalna to 00, maksymalna – ff
color: #00f (każda z cyfr jest dupliowana)
color: rgb(0%, 0%, 100%) (każda z trzech liczb określa
procentowy udział każdej składowej – przyjmuje zatem wartości
w przedziale od 0 do 100)
color: rgb(0, 0, 255) (każda ze składowych określana jest przez
wartość liczbową z przedziału od 0 do 255)
W XHTML elementy blokowe mogą uzyskać różne obramowania
Własność
Wartość
border-color
kolor
border-style
none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width
wartość liczbowa wyrażona w przyjętej jednostce | thick | medium | thin
float
left | right | none
height
Wartość liczbowa wyrażona w przyjętej jednostce | auto
width
Wartość liczbowa wyrażona w przyjętej jednostce | auto
margin-bottom
Wartość liczbowa wyrażona w przyjętej jednostce | n%
margin-top
Wartość liczbowa wyrażona w przyjętej jednostce | n%
margin-left
Wartość liczbowa wyrażona w przyjętej jednostce | n%
margin-right
Wartość liczbowa wyrażona w przyjętej jednostce | n%
Istnieją cztery
możliwe stany odsyłacza:
Normal. Odsyłacz nie został wybrany, a wskaźnik myszy nie
znalazł się w jego obrębie
Visited. Odsyłacz ostatnio został wybrany. Czas, przez który
będzie prezentowany w tym kolorze, można skonfigurować
w przeglądarce
Selected. Odsyłacz jest właśnie wybrany, przycisk myszki
został wciśnięty, ale jeszcze nie zwolniony
Hover. Wskaźnik myszki znajduje się w obrębie nazwy
odsyłacza
Istnieje 5
własności umożliwiających określenie
położenia elementów
Własność position można zdefiniować za pomocą
czterech wartości:
static pozycjonuje dany element w danym miejscu,
w wierszu tekstu
relative umieszcza dany element w wierszu tekstu, ale
w miejscu określonym względem ciągu tekstu w dokumencie
absolute określa położenie konkretnego elementu
niezależnie od miejsca występowania pozostałych
elementów strony
inherit – położenie domyślnie jest określane przez
przeglądarkę na podstawie elementu nadrzędnego
Własność
Wartość
position
static | relative | absolute | inherit
top
Wartość liczbowa wyrażona w poprawnej jednostce | n% | auto |
inherit
bottom
Wartość liczbowa wyrażona w poprawnej jednostce | n% | auto |
inherit
right
Wartość liczbowa wyrażona w poprawnej jednostce | n% | auto |
inherit
left
Wartość liczbowa wyrażona w poprawnej jednostce | n% | auto |
inherit
Własność top, bottom, right oraz left mogą przyjmować wartości:
podane numerycznie i wyrażone we właściwej jednostce
podane w procentach
auto wartość domyślna zależna od zawartości
inherit – taka sama jak w przypadku elementu nadrzędnego
Arkusze stylów dysponują opcją definiowania warstw dokumentów na
stronie
Można określić porządek wyświetlania tekstu i ilustracji, nadając im
odpowiednią kolejność względem osi z, biegnącej prostopadle do ekranu.
Im wyższa jest wartość na osi z, tym bliżej początku ekranu umieszczony
jest dany element
Przykład fragmentu kodu odpowiadającego za napis z cieniem:
… <head>
<title>używanie warstw</title>
<link rel = „stylesheet” href = „zorder.css” type = „text/css”/>
</head>
<body>
<h1 style = „font-size: 50; postion: absolute; left: 10; top: 20; z-index: 2”>
O stylach </h1>
<h1 style =„font-size: 50; color: cyan; position: absolute; left: 14; top: 24; z-index: 1”>
O stylach
</body> …
CSS2
umożliwia zawarcie w arkuszu instrukcji
określających sposób wyświetlania danego dokumentu
w zależności od typu używanego urządzenia
Jest to użyteczna cecha arkuszy stylów, ponieważ
możliwości poszczególnych urządzeń (mediów) są
bardzo różne – komputer z dużym monitorem będzie
miał inne wymagania niż trzymany w dłoni komputer
naręczny
W celu zdefiniowania własności dokumentu dla różnych
typów urządzeń należy użyć wyrażenia @media
aural syntezator mowy
braille dotykowe urządzenia alfabetu brajla
embossed stronicowa drukarka alfabetu brajla
handheld komputer naręczny typu PDA z małym ekranem
print stronicowy materiał drukowany lub do podlądu wydruku
na ekranie
projection prezentacje wyświetlane za pomocą rzutnika
screen kolorowe monitory komputerowe
tty urządzenia typu teleksowego o stałej szerokości znaku
tv telewizory, na ogół kolorowe o niskiej rozdzielczości
W
jednym arkuszu można zawrzeć instrukcje dotyczące
różnych typów urządzeń
@media print {
body { font-size: 9pt}
}
@media screen, print, projection {
body { font-family: arial }
}
Zamiast wymieniać poszczególne typy urządzeń można
wpisać wartość all oznaczającą wszystkie urządzenia
Istnieją trzy
definiujące tło
Własności powinny być zdefiniowane w arkuszu stylu
danego dokumentu
Własność
Wartość
background-color
kolor
background-image
URL | none
background-repeat
Repat | repeat-x | repeat-y | none
body{
background-color: cyan;
}
body{
background-image: url(tlo.png)
background-repeat: repeat;
}
Jeśli własności background-repeat przypiszemy
wartość repeat, to dana ilustracja będzie
wielokrotnie wyświetlana wypełniając całe tło
Ostatnia
instrukcja ma pierwszeństwo przed
poprzednimi
Jeżeli istnieje konflikt pomiędzy ogólnie zdefiniowaną
własnością (np. dla całego dokumentu), a bardziej
szczegółową definicją (np. przypisaną konkretnemu
akapitowi), to obowiązuje ta bardziej szczegółowa, czyli
w tym przypadku ta przypisana akapitowi
Tworzenie interfejsu użytkownika
Przesyłanie wprowadzonych przez użytkownika informacji na
serwer
Element form – umieszcza się wewnątrz elementu body
<body>
<form method="post" action=„adres skryptu do odbierania">
….
</form>
</body>
Element form posiada dwa atrybuty (określają sposób przesyłania
danych na serwer oraz metod ich późniejszego przetwarzania):
method
action
CGI
– Uniwersalny Interfejs Komunikacyjny (Common
Gateway Interface), zapewnia metodę przesyłania
danych pomiędzy komputerem i serwerem
Dane przesyłane są w postaci par informacji:
nazwa i wartość
Podstawą projektowania interaktywnych dokumentów
jest tworzenie formularzy zawierających zestawy
kontrolek – dzięki którym użytkownik ma np. możliwość
wyboru pozycji z listy lub wpisania tekstu
Informacja taka jest dalej przesyłana na serwer i
odpowiednio przetwarzana
Podstawowy składnik wykorzystywany do
interaktywnych formularzy
HTML oferuje szereg obiektów tego typu:
Pole tekstowe
Pola hasła
Obszar tekstowy
Pola wyboru
Przyciski opcji
Listy
Przyciski
tworzenia
Element
input – służy do wyświetlania kontrolek
Wartość atrybutu tego typu elementu określa rodzaj
definiowanej kontrolki
Atrybuty elementu input
Atrybut
Opis
maxlength
Maksymalna liczba znaków, która może być wprowadzona do danego pola
name
Unikatowa nazwa identyfikująca kontrolkę w danym formularzu
selected
Domyślny wybór, np. pozycji listy rozwijanej, gdy formularz wyświetlany jest
po raz pierwszy
size
Rozmiar kontrolki
type
Rodzaj kontrolki: text, button, checkbox, file, hidden, image, reset lub submit
value
W kontrolkach, za pomocą których wprowadza się tekst, np. w polach
tekstowych, atrybut ten może być użyty do określenia wartości wyświetlanej
początkowo. W przypadku kontrolek przyjmujących wartości on/off, yes/no,
takich jak pola wyboru i przyciski opcji, parametr ten określa tekst, który
zostanie przesłany na serwer, gdy użytkownik nie dokona innego wyboru
Atrybut
name służy do identyfikacji kontrolek przez
serwer
Reguły, które należy przestrzegać:
Nie mogą zawierać spacji
Nie są rozróżniane ze względu na wielkość liter
Muszą być unikatowe w ramach formularza, w którym je
zdefiniowano
Wytyczne do
nazw:
powinny opisywać zawartość, której są przypisane
Nie powinny się mylić z innymi nazwami, np. nie używa się
nazw poniedziałek i poniedziałki w tym samym formularzu
Pole
tekstowe – kontrolka służąca do wprowadzania
pojedynczego wiersza tekstu
Aby utworzyć pole tekstowe, należy użyć element input i
atrybutowi type przypisać wartość text, poza tym
określamy nazwę (name) i rozmiar (size)
W polach tekstowych zwykle nie używa się atrybutu
value – zostanie mu przypisany tekst wpisany przez
użytkownika
W przypadku pola tekstowego jak i pola hasła na serwer
przesyłana jest informacja o nazwie kontrolki (name) oraz
o tekście wprowadzonym przez użytkownika (value)
<p>
<input type="text" name="imie" size="25">Imię </br>
<input type="text" name=„nazwisko” size="25">Nazwisko </br>
</p>
W przypadku pól tekstowych zazwyczaj nie określamy
wartości atrybutu value – zostanie mu przypisany tekst
wpisany przez użytkownika
W polach tekstowych zawsze należy umieszczać teksty
wyjaśniające ich przeznaczenie
Parametr value może zostać użyty do określenia tekstu,
który pojawi się w danym polu tekstowym przy jego
pierwszym wyświetleniu
<p>
<input type = „text” name = „identyfikator” maxlength = „8” value = „P” />identyfikator
</p>
Pola
hasła – definiujemy, przypisując atrybutowi type
wartość password
Dzięki temu wpisywany tekst jest niewidoczny, a zamiast
niego pokazują się znaki specjalne, np. kropki, gwizdki
<p>
<b><font face="arial" color="red">Pole hasła</b></font> 
<input type="password" name="id" maxlength="10" size="10">
<font color="blue"><b>hasło</font></b>
<p>
Pole wyboru – aby go utworzyć, należy atrybutowi type przypisać
wartość checkbox.
Kontrolki tego typu używa się do udzielenia odpowiedzi „tak” lub „nie”
Jeśli atrybutowi checked nadamy wartość checked po
wyświetleniu na stronie pole jest zaznaczone
Jeśli pole zostanie zaznaczone, to para danych: nazwa: „zawsze”
oraz wartość „yes”, jest przesyłana na serwer w celu dalszego
przetworzenia, w przeciwnym wypadku nie jest przesyłana żadna
informacja
<p> <font face="arial" color="red">Pole wyboru</b></font><br/>
<input type="checkbox" name="tak" value="yes" checked="checked"> tak
<input type="checkbox" name="nie" value="yes"> nie
<input type="checkbox" name="nie wiem" value="yes"> nie wiem
</p>
Przyciski opcji, otrzymamy
przypisując atrybutowi type
wartość radio
Kontrolki tego rodzaju są podobne do pól wyboru- można
wybrać jedną z opcji: zaznaczyć je lub nie.
Jeżeli mamy kilka przycisków stanowią one grupę i tylko jeden
z nich może zostać zaznaczony w danym momencie,
zaznaczenie jednego powoduje odznaczenie innego
<p>Jakie jest Twoje ulubione miejsce podróży? <font face="comic sans ms">
<input type="radio" name="wakacje" value="Hawaje" checked="checked"> Hawaje
<input type="radio" name="wakacje" value="Majorka"> Majorka
<input type="radio" name="wakacje" value="Trypolis">Trypolis</font>
</p>
Kontrolka do przesyłania plików – aby ją zdefiniować należy
atrybutowi type przypisać wartość file
Atrybut size określa szerokość pola tekstowego,
natomiast maxlength- maksymalną długość nazwy pliku, który
może być w tym polu wpisany
Kontrolka do przesyłania plików składa się z dwóch składników:
pola tekstowego oraz przycisku
Dodatkowo atrybut accept pozwala określić typy plików, które
mogą być przesyłane na serwer za pomocą tej kontrolki
<p>
<b><font face="arial" color="red">Kontrolka do przesyłania plików</b></font>
<input type="file" name="rys" size=40 maxlength="128" accept="image/gif, image/jpg">
</p>
Można zdefiniować jeden z trzech rodzajów przycisków:
submit (prześlij),
reset (wyczyść),
image (wygląd definiowany jest przez plik graficzny)
Atrybut value określa napis, który zostanie wyświetlony na danym
przycisku
Submit zbiera dane, a następnie przesyła je na serwer
w postaci par: nazwa, wartość
Reset – powoduje wyczyszczenie wszystkich pól formularza i
przypisanie im wartości domyślnych
W przypadku użycia przycisku w postaci graficznej nie potrzebny jest
atrybut value ponieważ na przycisku nie wyświetla się napis
<p><b><font face="arial" color="red">Przyciski</b></font>
<input type="submit" value="wyślij zamówienie"><input type="image" name=point„ src="skrzyneczka.jpg">
<input type="reset" value="wyczyść dane">
</p>
Jeśli potrzebny jest przycisk umożliwiający coś więcej niż tylko
przesyłanie danych na serwer lub czyszczenie pól formularza
należy użyć elementu button (przycisku)
Różnica – jest im przypisana nie jakaś jedna z góry
zdefiniowana funkcja, lecz dowolny zestaw komend jednego
z języków skryptowych, tj. JavaScript
<p> <button type = "button" value ="print" name = "print"
onclick ="alert('Kliknij by wydrukować'); return true;"></button>
</p>
Element textarea – kontrolka obszaru tekstowego podobna do
pola tekstowego – służy do wprowadzania tekstu; różni się od
niego tym, że pozwala na wprowadzania tekstu w wielu
wierszach
Atrybuty cols i rows umożliwiają określenie liczby kolumn
i wierszy
Teks, który ma się automatycznie pojawić przy wyświetlaniu
kontrolki należy umieścić pomiędzy znacznikiem otwierającym
<textarea> a znacznikiem zamykającym </textarea>
<p> <b><font face="arial" color="red">Blok tekstu</b></font>
<textarea name="komentarze" cols="60" rows=6>
Tutaj wpisz swoją opinię na temat zasad tworzenia formulrzy</textarea> </p>
Lista – składa się z wielu opcji, często w formie rozwijanej,
z której jednocześnie można wybrać jedną lub więcej opcji
Aby stworzyć listę, należy użyć elementów dwóch rodzajów:
Znacznik <select> określa nazwę listy i jej atrybuty np. liczbę opcji, które
na raz mogą być zaznaczone
Znacznik <option>, definiujący pojedynczy element, który jest
wyświetlany w liście
<p> <b><font face="arial" color="red">Lista</b></font><br>
Zaznacz wydziały na których studiujesz
<select name="wydzial" size="3" multiple="multiple">
<option value="Wydział IIM">INFORMATYKI I MATEMATYKI</option>
<option value="Wydział Mechaniczny" selected="selected">MECHANICZNY</option>
<option value="Wydział Transportu">TRANSPORT</option>
<option value="Wydział Ekonomiczny">EKONOMICZNY</option> </select></p>
Atrybut
multiple
Opis
name
Pozwala na zaznaczenie wielu pozycji
jednocześnie
Nazwa identyfikująca kontrolkę
size
Liczba widocznych opcji
option
Element używany do definiowania
poszczególnych pozycji listy. Za pomocą
atrybutu selected elementu option ustalamy
która pozycja ma być zaznaczona i
jednocześnie wyświetlona jako pierwsza
W
celu grupowania kontrolek stosuje się elementów
legend oraz fieldset, tworzących ramkę wokół
grupowanych kontrolek
Kontrolki, które chcemy zgrupować umieszcza się
pomiędzy parą znaczników <fieldset> a </ fieldset>
<fieldset><legend> Tytuł </legend>
Dodatkowe umiejętności<br/>
<input type "checkbox" name = "prawo jazdy" value "prawo jazdy"/> prawo jazdy - kategoria
<input type "checkbox" name = "certyfikat" value "certyfikat"/> certyfikaty
<input type "checkbox" name = "kom" value "kom"/> komunikatywność
</fieldset>
Istnieją dwie
metody dezaktywacji kontrolek, czyli
spowodowania, że są one widoczne na formularzu, ale nie
da się ich użyć
Dla kontrolek takich jak pola tekstowe, w których można
wprowadzić informacje, stosuje się atrybut:
readonly lub
disabled
<input type ="text" name ="nazwisko" readonly ="readonly" />nazwisko
Pole jest widoczne, ale nie da się wprowadzić informacji
<select name ="kraj" size = "4" disabled = "disabled">
Kontrolki przez które raczej wybiera się jakieś pozycje z listy, niż
wprowadza tekst, mogą używać tylko atrybutu disabled
Po
wprowadzeniu danych do formularza muszą zostać
wysłane na serwer w celu dalszego przetworzenia
Dane przesyłane są zawsze w postaci par: nazwa-wartość
nazwa identyfikuje kontrolkę
wartość określa jej stan
Serwer
może przetworzyć informację na 3 sposoby
Zapisać dane na dysku lub w bazie danych
Przeczytać dane z bazy danych, używając danych z formularza do
budowy odpowiedniego zapytania
Przesłać dane w dowolne inne miejsce
W
celu określenia, w jaki sposób mają być przetwarzane
dane z formularza, należy użyć znacznika <form> razem
z atrybutami method i action
Pomiędzy znacznikami <form>
i </form> umieszcza się
wszystkie kontrolki danego formularza
Znacznik <form> ma dwa atrybuty: method i action,
które należy zdefiniować
Atrybut method może przyjmować wartość post lub get,
która określa, w jaki sposób dane te są obsługiwane przez
serwer
Wartością atrybutu action jest nazwa, wraz ze ścieżką
dostępu, skryptu odpowiedzialnego za przetwarzanie danych
Istnieją dwa sposoby przesyłania danych z formularza na
serwer:
jako części adresu URL (method =„get”)
jako oddzielnego pliku (method = „post”)
Wartości get używamy do przesyłania niewielkiej liczby
danych, ograniczeniem jest rozmiar adresu URL wynosi 1024
znaki; problem utraty bezpieczeństwa danych – adresy
zapisywane są najczęściej przez dostawców Internetu do
postaci dzienników i jeżeli dane zawierają poufne dane to one
też są zapisane
Najczęściej używa się wartości post, ponieważ nie narzuca
tych ograniczeń; rozmiar pliku może być dowolnie duży,
a sam plik zaraz po jego przesłaniu i przetworzeniu jest
niszczony
Za
pomocą tego atrybutu określamy nazwę (wraz z pełną
ścieżką dostępu) skryptu służącego do przetwarzania
danych
Skrypty takie zazwyczaj przechowuje się w katalogu
o nazwie cgi-bin
Miejsce służące do przechowywania skryptów należy ustalić
z administratorem serwera
http://www.interserw.pl/ssi.php
https://developer.mozilla.org/pl/CSS/list-style-type
https://developer.mozilla.org/pl/CSS/list-style-type
http://www.kurshtml.boo.pl/
Danowski
Bartosz: HTML 4. Ćwiczenia praktyczne, Helion
Cowell John: Wprowadzenie do XHTML. Tworzenie
dynamicznych stron www z wykorzystaniem XHTML
i JavaScript, WSiP
Sokół M: Tworzenie stron WWW. Ćwiczenia praktyczne,
Helion
