Rekomdendacja strategii - Wydział Inżynierii Zarządzania
Download
Report
Transcript Rekomdendacja strategii - Wydział Inżynierii Zarządzania
HTML – dokument
Dokument HTML :
• zwykły plik tekstowy, zawierający znaczniki (polecenia)
HTML i zwykły tekst.
•nazywane są również stronami internetowymi
• można go utworzyć za pomocą najprostszego edytora
tekstów (np. Notatnika w Windows), ręcznie wpisując
znaczniki (metoda skuteczna, lecz zbyt uciążliwa.
• Dlatego na rynku pojawiło się już wiele specjalizowanych
edytorów, które wydatnie ułatwiają konstruowanie dokumentu,
wspomagając wprowadzanie poleceń.
• Są to zazwyczaj programy komercyjne, aczkolwiek można
znaleźć też sporo programów całkowicie bezpłatnych
(freeware).
Polskie programy do tworzenia stron internetowych:
• Lepiej używać edytorów tekstowych, a nie graficznych, gdyż
można uzyskać lepszą kontrolę nad tworzonym dokumentem.
HTML – edytory
W środowisku Windows 95/98/ME/NT/2000/XP/Vista/7 do
najpopularniejszych edytorów należą m.in. :
• Pajączek NxG - program komercyjny w wersji
profesjonalnej i standardową.
• CoreEditor - polski, komercyjny edytor, porównywalny z
Pajączkiem, obsługujący także XHTML.
• kED - polski, darmowy edytor, obsługujący XHTML
• Zajączek - darmowy edytor
• HateML Pro- polski, darmowy edytor z obsługą (X)HTML.
HTML – polecenie
HTML (Hyper Text M arkup Language) :
jest językiem do opisywania stron internetowych.
POLECENIE (ZNACZNIK, TAG) HTML :
specjalny ciąg znaków, objęty nawiasami ostrymi np. <br>
znaczniki HTML zazwyczaj występują w parach, np.
<b>
i </ b>
Znacznik otwierający (początku)
znacznik zamykający (końca)
•Znaczniki opisują zawartość dokumentu
• Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi
literami interpretowane są w ten sam sposób.
• w HTML zalecane jest jednak stosowanie małych znaczników,
gdyż w XHTML, który jest kontynuacją języka HTML, małe znaczniki
są już obowiązkowe, np.
<h1>Moja strona</h1> zamiast <H1>Moja strona</H1>
HTML – polecenie
należy domykać zawsze znaczniki - dotyczy to ogromnej
większości znaczników, poza bardzo nielicznymi, jak:
<img>,
<hr> ,
<br> ,
np.
<p> To jest akapit </p>
nie należy mieszać znaczników, tzn. nie należy tworzyć z nich
"przekładańca".
Nie należy pisać więc:
lecz
<strong> <i> Jakaś tam treść</strong></i>
<strong> <i> Jakaś tam treść</i></strong>
HTML – elementy
ELEMENTY HTML :
Znaczniki HTML i elementów HTML są często używane do
opisania tego samego.
Ale ściśle mówiąc, elementem HTML określamy
wszystko co znajduje się między znacznikiem
początkowym i końcowym, w tym również znaczniki, np. :
<p> To jest akapit. </ p>
znacznik
początku
element HTML
znacznik końca
Standardowa osnowa dokumentu HTML:
<!doctype html> HTML 5
prolog (typ dokumentu i wersja HTML, definiuje
rodzaj języka użytego do opracowania dokumentu
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 (wersja I)
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
"http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 (wersja II)
<html>
ramy całego dokumentu
<head>
<title> Tytuł strony </title>
Transitional//EN"
ramy informacji nagłówkowych
treść w pasku tytułowym przeglądarki
<meta charset=”UTF-8”> (HTML 5)
<meta http-equiv = ”content-type” content = ”text/html; charset=ISO8859-2”> (HTML 4.01)
</head> informacje o stronie kodowej – standard kodowania polskich liter (Pol. Norma)
<body>
Właściwa treść (ciało) dokumentu
</body>
</html>
HTML – znacznik TITLE i META
Informacje o znaczniku TITLE:
•
Zaleca się zwykle nieprzekraczanie 40 znaków
•
Tytułu nie należy mylić z pierwszym nagłówkiem strony
•
Nie należy używać w tytułach samych WIELKICH LITER, a także
adresów internetowych gdyż wiele wyszukiwarek zignoruje stronę.
•
warto w nim podać istotne, konkretne informacje, np. nie Moja strona,
lecz podać konkretnie czyja to jest strona.
•
To, co umieszczone jest w ramach TITLE, zostanie wyświetlone jako tytuł
znalezionej strony
•
tytuł strony jest widoczny w zakładkach przeglądarki (Ulubione).
Informacje o znaczniku META:
Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o
zawartości dokumentu, np. dla celów katalogowych czy indeksów,
wykorzystywanych przez odpowiednie programy, np. wyszukiwarki
sieciowe.
Zawiera ono trzy atrybuty:
HTTP-EQUIV (definiuje zmienne systemowe)
NAME (definiuje zmienne użytkownika)
CONTENT
w kombinacji pierwszy z trzecim lub drugi z trzecim
HTML – znacznik META
Informacje o znaczniku META cd:
jest poleceniem zalecanym (choć niewymaganym), gdyż usprawnia
funkcjonowanie witryny w Sieci .
jest użytecznym instrumentem współpracującym z przeglądarkami
internetowymi i sieciowymi wyszukiwarkami.
w obrębie <meta>. można umieścić polecenia dotyczące np. :
1. strony kodowej,
2. opisu strony,
<meta name ="description" content = "jakaś tam treść">
◦
opisuje zawartość strony
◦
ułatwia pracę osobom korzystającym z wyszukiwarki
◦
zawartość Description zostanie wyświetlona pod tytułem, jako opis strony
◦
gdy nie jest użyte Description, wyszukiwarka wyświetli kilka pierwszych
wierszy dokumentu, które mogą być zupełnie przypadkowe
HTML – znacznik META
Informacje o znaczniku META cd:
3. wyrazów kluczowych,
<meta name ="keywords" content= "jakieś wyrazy kluczowe">
◦
informuje o wyrazach kluczowych dokumentu
◦
wyrazy kluczowe ułatwiają pracę sieciowym programom indeksującowyszukiwawczym i zwiększa szansę znalezienia strony przez innych
użytkowników.
4. autora strony,
<meta name="author" content ="imię i nazwisko">
5. daty utworzenia
<meta http-equiv="creation-date" content="Tue, 04 Dec 2013 21:29:02 GMT">
HTML – przeglądarki
PRZEGLĄDARKI INTERNETOWE:
•
są wyspecjalizowanymi programami, które interpretują znaczniki i
"przetwarzają" je na właściwą postać graficzną.
•
nie wyświetla tagów HTML, ale wykorzystuje znaczniki do określenia, w
jaki sposób treść strony HTML należy przedstawić i wyświetlić
użytkownikowi.
•
różnią się zaawansowaniem technicznym
•
do najlepszych należą:
1. Firefox Fundacji Mozilla,
2. Opera firmy Opera Software,
3. Safari firmy Apple,
4. Chrome firmy Google
5. Internet Explorer firmy Microsoft.
HTML – spis poleceń
POLECENIE
OPIS
POLECENIE
OPIS
<a>
kotwica
<abbr>
skrót
<acronym>
akronim
<address>
adres
<area>
obszar
<article>
artykuł
<aside>
treść poboczna,
powiązana z treścią
artykułu
<audio>
kontener pliku
dźwiękowego
<b>
pogrubienie
czcionki
<base>
adres bazowy
<basefont>
czcionka bazowa
<bdo>
kierunek tekstu
<big>
zwiększenie
czcionki
<blockquote>
<body>
ciało dokumentu
<br>
przełamanie
wiersza
cytat blokowy
<button>
przycisk
<canvas>
kontener do
renderowania
grafiki
<caption>
podpis tabeli
<center>
środkowanie
<cite>
cytat
<code>
czcionka kodu
HTML – spis poleceń
POLECENIE
OPIS
<col>
kolumna
POLECENIE
OPIS
<colgroup>
grupa kolumn
<command>
polecenie
wywoływane przez
użytkownika
<datalist>
lista danych w
funkcji
autouzupełniania
<dd>
treść definicji
<del>
usunięty tekst
<details>
pełna treść
elementu
<dfn>
definicja
<div>
wycinek
<dl>
lista definicji
<dt>
hasło definicji
<em>
emfaza czcionki
<fieldset>
grupa elementów
formularza
<embed>
<figcaption>
<font>
interfejs
osadzonego zasobu
zewnętrznego
podpis dla grupy
elementów
czcionka
<figure>
<footer>
grupa treści
multimedialnych
z podpisem
stopka strony lub
fragmentu
dokumentu
HTML – spis poleceń
POLECENIE
OPIS
POLECENIE
OPIS
<form>
formularz
<frame>
ramka
<frameset>
układ ramek
<h1-h6>
śródtytuły
<head>
nagłówek
dokumentu
<header>
nagłówek strony
lub fragmentu
dokumentu
<hgroup>
nagłówek sekcji
zawierającej wiele
śródtytułów
<hr>
pozioma linia
<html>
szkielet dokumentu
<i>
pochylenie
czcionki
<iframe>
pływająca ramka
<img>
- ilustracja
<input>
pole formularza
<ins>
wstawiony tekst
<kbd>
czcionka z
klawiatury
<label>
etykieta kontrolki
formularza
<legend>
tytuł grupy
elementów
formularza
<li>
element wykazu
HTML – spis poleceń
POLECENIE
OPIS
POLECENIE
OPIS
powiązanie
dokumentu
<map>
mapa graficzna
wyróżnienie ciągu
znaków
<menu>
menu
własności
dokumentu
<meter>
kontener
określający
wartość w
przedziale
<nav>
sekcja dokumentu
zawierająca
nawigację
<noframes>
alternatywa
ramek
<noscript>
alternatywa skryptu
<object>
obiekt
multimedialny
<ol>
wykaz
uporządkowany
<optgroup>
grupowanie opcji
w formularzu
<option>
opcja w formularzu
<output>
definicja postępu
zadania
<p>
akapit
<param>
parametr obiektu
<link>
<mark>
<meta>
HTML – spis poleceń
POLECENIE
OPIS
POLECENIE
OPIS
<pre>
blok
preformatowany
<progress>
reprezentacja
postępu zadania
<q>
cytat w wierszu
<ruby>
element anotacji
Ruby
<rp>
element anotacji
Ruby
<rt>
element anotacji
Ruby
<s>
czcionka
przekreślona
<samp>
czcionka
przykładu
<script>
definicja skryptu
<section>
sekcja grupująca
treść
<select>
rozwijane pole
formularza
<small>
zmniejszenie
czcionki
<source>
źródło zasobów
multimedialnych
<span>
blok liniowy
<strike>
czcionka
przekreślona
<strong>
silne wyróżnienie
czcionki
HTML – spis poleceń
POLECENIE
<style>
<summary>
OPIS
styl
podsumowanie
widocznego
fragmentu treści
details
POLECENIE
<sub>
OPIS
indeks dolny
czcionki
<sup>
indeks górny
czcionki
<table>
tabela
<tbody>
ciało tabeli
<td>
komórka tabeli
<textarea> -
pole tekstowe
formularza
<tfoot>
stopka tabeli
<th>
nagłówek
kolumny tabeli
<thead>
nagłówek tabeli
<time>
data/czas
<title>
tytuł dokumentu
<tr>
wiersz tabeli
<track>
ścieżka tekstowa w
wideo
<tt>
czcionka
"maszynowa"
HTML – spis poleceń
POLECENIE
OPIS
POLECENIE
OPIS
<u>
podkreślenie
czcionki
<ul>
wykaz
nieuporządkowany
<var>
nazwa zmiennej
<video>
kontener treści
wideo
<wbr>
przełamanie wyrazu <!DOCTYPE>
standard języka
dokumentu
ATRYBUTY ZNACZNIKÓW
dostarczają dodatkowych informacji o elemencie
są zawsze określone w znaczniku otwierającym
występują jako para nazwa – wartość : nazwa = ”wartość”
nazwy atrybutów i ich wartości należy pisać małymi literami.
ATRYBUTY ZNACZNIKÓW
• Należy zwrócić uwagę na używanie cudzysłowów przy podawaniu
konkretnych wartości poleceń i atrybutów, co jest wymagane we
współczesnych standardach, choć nie było egzekwowane w starszych,
np.
Przykłady atrybutów:
<img src= "fotka.jpg" alt = "fotka z wakacji">
<a href = "http://www.fem.put.poznan.pl">Link do strony WiZ
PP</a>
<p style = "color: blue" > Tekst w kolorze niebieskim.</p>
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
TD,TH
skrócony opis zawartości
komórki
FORM, INPUT
typy zawartości MIME
akceptowane przez serwer lista rozdzielana przecinkami
acceptcharset
FORM
zestaw znaków
akceptowanych przez serwer
- lista charsetów
rozdzielanych spacjami lub
przecinkami
accesskey
IINPUT, LABEL,
TEXTAREA
przypisuje klawisz szybkiego
dostępu do elementu
formularza
FORM
rodzaj akcji podejmowanej
po naciśnięciu przycisku
Submit
A
abbr
accept
action
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
align
CAPTION, COL,
Wyrównanie w poziomie,
COLGROUP, DIV, H, HR, wartości: top, bottom,
IFRAME, IMG, INPUT,
left, right, center, justify
LEGEND, P, TABLE,
TBODY,TD, TFOOT, TH,
THEAD, TR
alink
BODY
kolor aktywnego odsyłacza
alt
AREA, IMG, INPUT
tekst alternatywny, opis
tekstowy
async (HTML 5)
autocomplete (HTML 5)
SCRIPT
FORM, INPUT
OPIS
wskazuje, ze skrypt ma być
wykonywany asynchronicznie
(tylko dla zewnętrznych
skryptów); wartość: async lub
async= "async".
określa, czy formularz ma
mieć włączone
autouzupełnianie; wartość
on (domyślna) lub off
SPIS ATRYBUTÓW
ATRYBUT
autofocus
autoplay
POLECENIA
BUTTON, INPUT,
KEYGEN, SELECT,
TEXTAREA
AUDIO, VIDEO
OPIS
określa, czy dany obiekt
powinien uzyskać fokus
zaraz po załadowaniu strony;
wartość autofocus lub
autofocus= "autofocus".
atrybut powoduje
odtwarzanie pliku zaraz po
uruchomieniu strony
TD, TH
nazwa grupy, kategorii, do
której przypisywana jest
komórka, o jednym typie
danych
background
BODY
obraz jako tło strony
bgcolor
BODY, TABLE, TD, TH,
TR
Kolor tła
border
IMG, TABLE
szerokość obramowania
axis
B
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
TABLE
odległość między
zawartością komórki a jej
obramowaniem, w pikselach
cellspacing
TABLE
cellspacing - odległość
między komórkami w
pikselach
challenge
KEYGEN
char
znak, według którego
wyrównywane są znaki, np.
COL, COLGROUP,
kolumny liczb
TBODY,TD, TFOOT, TH,
(niewymagany), wartości:
THEAD, TR
przecinek, kropka, itd., np.
char=".";
charoff
pozycja znaku wyrównania,
COL, COLGROUP,
TBODY,TD, TFOOT, TH, określonego przez char, w
linii tekstu, wyrażona w
THEAD, TR
pikselach
charset
A, LINK, META, SCRIPT
C
cellpadding
określa kodowanie znaków
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
checked
COMMAND, INPUT
ustala początkowe
zaznaczenie pola, np. radio
lub checkbox
cite
BLOCKQUOTE, DEL,
INS, Q
clear
BR
color
BASEFONT, FONT
cols
FRAMESET, TEXTAREA
colspan
TD, TH
adres źródła cytatu
wymusza zrzucenie w
dół sąsiadującego
elementu, wartości:
none, left, right, all
kolor czcionki
podział na ramki w pionie
(wartości: piksele,
procenty ;
szerokość pola liczona liczbą
kolumn znaków
liczba kolumn, na które
rozciąga się komórka
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
compact
DL, OL
zwięzły rendering listy
META
ustala konkretną wartość
atrybutu własności
dokumentu
content
controls
coords
AUDIO, VIDEO
A, AREA
atrybut powoduje
wyświetlenie interfejsu
określa współrzędne obszaru
w mapie odsyłaczy po
stronie klienta
(niewymagany); wartości:
x,y,z
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
D
datetime
default
defer
DEL, INS, TIME
data zmiany wartość:
YYYY-MMDDThh:mm:ssTZD,
gdzie YYYY - rok, MM miesiąc, DD - dzień, hh
- godzina, mm - minuta,
ss - sekunda,
TZD=Time zone
designator - desygnator
strefy czasowej, np.
datetime="2006-0907T12:45:00PST
TRACK
atrybut mówi, że powinna
zostać uruchomiona dana
ścieżka, o ile użytkownik nie
określi inaczej swoich
preferencji.
SCRIPT
informuje, że skrypt niczego
nie wyświetla ; wartość:
defer lub defer="defer"
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
dir
BDO
kierunek tekstu ; wartości:
rtl, ltr, np. dir = "rtl"
disabled
BUTTON, COMMAND,
FIELDSET, INPUT,
KEYGEN, OPTGROUP,
OPTION, SELECT,
TEXTAREA
wyłączenie danego typu
obiektu
E
enctype
FORM
sposób kodowania
wysyłanych informacji, np.
enctype= "text/plain"
BASEFONT, FONT
krój czcionki
LABEL, OUTPUT
kojarzy etykietę z
elementem, którego atrybut
ID równa się wartości
atrybutu FOR dla danej
etykiety
F
face
for
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
form (HTML 5)
BUTTON, FIELDSET,
INPUT,
KEYGEN, LABEL,
METER, OUTPUT,
SELECT,TEXTAREA
wskazuje jeden lub więcej
formularzy, do których należy
przycisk; wartość form_ID
formaction (HTML 5)
formenctype
formmethod (HTML 5)
BUTTON, INPUT
określa adres, na który
wysyłane są dane z formularza,
gdy formularz jest przesyłany;
dotyczy tylko typu submit
BUTTON, INPUT
określa, jak dane z formularza
powinny byc kodowane w
chwili przesyłania; dotyczy
tylko typu submit.
BUTTON, INPUT
określa, jakiej metody HTTP
użyć, tylko dla typu submit.
Wartości get i post
SPIS ATRYBUTÓW
ATRYBUT
formnovalidate
formtarget (HTML 5)
POLECENIA
OPIS
BUTTON, INPUT
decyduje, że dane formularza
nie powinny być walidowane
przy przesyłaniu, tylko dla typu
submit. Wartość:
formnovalidate lub
formnovalidate
="formnovalidate"
BUTTON, INPUT
określa, gdzie wyświetlić
odpowiedź po przesłaniu
danych, tylko dla typu submit.
Wartości: _blank, _self, _top,
_parent, nazwa_okna
frame
TABLE
określa, które fragmenty
obramowania mają być
rysowane (niewymagany),
wartości: void, above,
below, hsides, vsides, lhs,
rhs, box, border
frameborder
FRAME, IFRAME
włączenie lub wyłączenie
obramowania ramki
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
H
headers
TD, TH
height
CANVAS, EMBED,
IFRAME, IMG, INPUT,
TD,TH, VIDEO
lista identyfikatorów
komórek nagłówkowych,
rozdzielanych spacjami
określa w pikselach wysokość
danego obiektu
high
METER
atrybut określa liczbę, który
jest uważana za wysoką na
danej skali, np. 7 (w przedziale
0-10), powyżej której
wskaźnik przybiera żółty
kolor.
href
A, AREA, BASE, LINK
odsyłacz do dokumentu ;
adres bazowy
hreflang (HTML 5)
AREA, LINK
określa język docelowego
adresu, np. hreflang="fr"
hspace
IMG
poziomy odstęp wokół obrazu
SPIS ATRYBUTÓW
ATRYBUT
http-equiv
POLECENIA
META
OPIS
ustala nazwę i rodzaj
informacji, łacząc zawartość
content z polem nagłówka
http (niewymagany); wartości:
content-type, defaultstyle, refresh
I
icon
ismap
COMMAND
IMG
K
keytype
KEYGEN
informuje o podziale obrazu
na fragmenty będące
odyłaczami - kliknięcia są
przesyłane na serwer do
przetwarzania
SPIS ATRYBUTÓW
ATRYBUT
kind
POLECENIA
OPIS
TRACK
atrybut określa rodzaj ścieżki
tekstowej; wartości: captions
(tłumaczenie dialogów i
efektów dźwiękowych,
przydatne dla głuchych),
chapters (tytuły rozdziałów,
przydatne dla nawigacji),
descriptions (tekstowy opis
zawartości wideo, przydatny
dla niewidomych), metadata
(informacje o zawartości
używane przez skrypty,
niewidoczne dla użytkownika),
subtitles (napisy w wideo).
L
label
COMMAND, MENU,
OPTGROUP, OPTION,
TRACK
określa nazwę grupy opcji
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
language
BDO, SCIPT
język tekstu
(niewymagany,
zaniechany w XHTML
1.1); wartości: kody
językowe, np.
language="fr"
link
BODY
kolor odsyłacza
List (HTML 5)
INPUT
odwołuje się do elementu
datalist, który zawiera
predefiniowane opcje dla
elementu input. Wartość
datalist_ID
longdesc
FRAME, IFRAME, IMG
adres URL dokumentu
opisujący szerzej ramkę
loop
AUDIO, VIDEO
atrybut powoduje
odtwarzanie pliku w pętli
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
METER
atrybut określa liczbę, który
jest uważana za niską na danej
skali, np. 3 (w przedziale 0-10),
poniżej której wskaźnik
przybiera żółty kolor.
Manifest (HTML 5)
HTML
podaje adres cache'a
dokumentu do
przeglądania offline.
marginheight
FRAME, IFRAME
górny i dolny margines ramki
w pikselach
marginwidth
FRAME, IFRAME
lewi i prawy margines ramki w
pikselach
max
INPUT, METER,
PROGRESS
określa maksymalną wartość
dla elementu input. Wartości:
liczba lub data
low
M
ATRYBUT
maxlength
media
method
SPIS POLECENIA
ATRYBUTÓWOPIS
INPUT, TEXTAREA
A, AREA, LINK,
SOURCE, STYLE
FORM
(dla type="file",
type="password",
type="readonly", type="text")
- ustala maksymalną długość
tekstu, który można
wprowadzić w polu
opisującym nazwę
przesyłanego pliku, polu hasła
czy polu z tekstem; gdy tekst
jest dłuższy niż szerokość pola
wyznaczona przez atrybut
size, pole jest przewijane
(niewymagany).
określa, dla jakich
mediów/urządzeń
dokument jest
optymalizowany; określa
typ docelowego medium
metoda wysyłania danych
na serwer wartości:
get, post
SPIS ATRYBUTÓW
ATRYBUT
min (HTML 5)
multiple
muted
POLECENIA
OPIS
INPUT, METER
określa minimalną wartość dla
elementu input.
Wartości: liczba lub data
INPUT, SELECT
pozwala wprowadzić w polu
input więcej niż jedną wartość.
Wartości: multiple lub
multiple="multiple"
VIDEO
określa, czy ścieżka audio
klipu powinna być wyciszona
w trakcie ładowania strony;
wartość muted lub
muted="muted".
A, BUTTON ,
FIELDSET, FORM,
FRAME, IFRAME, IMG,
INPUT, KEYGEN, MAP,
META, OUTPUT,
PARAM, SELECT,
TEXTAREA
Nazwa obiektu, np. etykiety,
przycisku, ramki, obrazka itd..
N
name
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
nohref
AREA
wyklucza obszar z adresu
noresize
FRAME
zablokowanie rozmiarów
ramki
noshade
HR
usunięcie cienia linii,
novalidate (HTML 5)
FORM
określa, czy formularz ma być
walidowany przy wysyłaniu,
czy nie; wartość novalidate lub
novalidate ="novalidate"
nowrap
TD, TH
zakaz łamania wiersza
METER
atrybut wyznaczający wartość
uznaną za optymalną
O
optimum
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
INPUT
wprowadza wyrażenie
regularne, które sprawdza
wartość wprowadzoną w polu
input
INPUT, TEXT
wprowadza wskazówkę dla
użytkownika, opisującą
oczekiwaną w polu wartość
VIDEO
atrybut podaje adres
statycznego pliku graficznego
(np. jpg), który będzie
wyświetlany w interfejsie klipu
do momentu kliknięcia
przycisku odtwarzania.
P
pattern (HTML 5)
placeholder
poster
preload
AUDIO, VIDEO
atrybut powoduje wstępne
załadowanie plików
dźwiękowych, zanim czytelnik
zechce uruchomić
odtwarzanie
ATRYBUT
SPIS ATRYBUTÓW
POLECENIA
OPIS
R
radiogroup
COMMAND
readonly
INPUT, TEXTAREA
blokuje możliwość zmieniania
zawartości pola
A, AREA, LINK
określa relację między
bieżącym dokumentem a
kotwicą opisaną przez href lub
relację między bieżącym a
docelowym dokumentem
IINPUT, TEXTAREA
określa, czy wypełnienie pola
jest wymagane. Wartość
required lub required
="required".
A, LINK
określa relację odwrotną w
stosunku do rel; określa relację
między kotwicą opisaną przez
href a bieżącym dokumentem ;
mówi, czym jest dany
dokument dla wskazanego
przez href
rel
required (HTML 5)
rev
SPIS ATRYBUTÓW
ATRYBUT
reversed (HTML 5)
rows
rowspan
rules
POLECENIA
OPIS
OL
wprowadza odwrócony
porządek, np. 3,2,1. Wartość:
reversed lub reversed
="reversed"
podział na ramki w poziomie),
wartości: piksele, procenty;
FRAMESET, TEXTAREA wysokość pola w wierszach
(wymagany)
TD, TH
liczba wierszy, na które
rozciąga się komórka
TABLE
określa sposób obramowania
grup komórek (niewymagany),
wartości: none, groups,
rows, cols, all
ATRYBUT
SPIS ATRYBUTÓW
POLECENIA
OPIS
S
sandbox
IFRAME
nakłada zbiór ograniczeń
na zawartość ramki;
allow-forms - zezwala na
działanie formularzy na
osadzonej stronie,
allow-scripts - zezwala na
wykonanie skryptów na
osadzonej stronie, za
wyjątkiem skryptu
otwierającego nowe
strony
allow-top-navigation zezwala na kontrolę
rodzica z poziomu ramki.
allow-same-origin umożliwia traktowanie
treści wyświetlanej w
osadzonej ramce jako
elementu o tym samym
pochodzeniu
ATRYBUT
SPIS ATRYBUTÓW
POLECENIA
OPIS
META
określa schemat interpretacji
informacji (niewymagany);
TD, TH
przedział komórek objęty tą
samą definicją nagłówka
(niewymagany), wartości: row,
col, rowgroup, colgroup
scoped
STYLE
określa, że styl odnosi się
jedynie do elementu
nadrzędnego dla danego
elementu, oraz elementówdzieci tamtego elementu
nadrzędnego; wartość: scoped.
scrolling
FRAME, IFRAME
określenie, czy ramka może
być, wartości: yes, no, auto
scheme
scope
seamless
IFRAME
wymusza "wtopienie" ramki w
dokument; wartość
seamless lub seamless
="seamless".
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
selected
OPTION
wstępnie zaznacza opcję
A, AREA
określa kształt obszaru w
mapie odsyłaczy po stronie
klienta (niewymagany);
wartości: default, rect,
circle, poly
shape
size
sizes
span
BASEFONT, FONT, HR,
INPUT, SELECTED
wielkość czcionki ; wysokość
linii, wartości: piksele, np.
size="3"; określa szerokość
wyświetlanego pola
LINK
określa wielkość w pikselach
(np. "16x16" lub "16x16
32x32" lub any) linkowanego
zasobu, tylko dla rel ="icon"
COL, COLGROUP
liczba kolumn na które
rozciągają się ustawienia danej
kolumny, domyślnie 1
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
src
AUDIO, EMBED, FRAME,
adres URL zewnętrznego
IFRAME, IMG, INPUT,
zasobu (pliku, dokumentu) np.
SCRIPT, SOURCE,
dźwiękowego, graficznego
TRACK,VIDEO
IFRAME
źródło strony wstawianej do
ramki, zalecany razem z
sandbox w przypadku
potencjalnie szkodliwej treści
srclang
TRACK
atrybut określa język ścieżki
tekstowej (wymagany, gdy
kind="subtitles"); wartość: kod
języka, np. en, fr lub pl.
start
OL
początkowa wartość pierwszej
pozycji, wyrażona liczbą
INPUT
"krok", określa odstępy
liczbowe między wartościami
pola
srcdoc (HTML 5)
step
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
summary
TABLE
opisuje tabelę; docelowo dla
syntezatorów mowy
SELECT, TEXTAREA
określa pozycję elementu w
trakcie nawigowania za
pomocą tabulatora
target
A, AREA, BASE, FORM,
LINK
• określa miejsce otwarcia
przywoływanego dokumentu ;
• nazwa ramki, do której jest
kierowany dokument , np.
target="_top;
• nazwa okna, do którego będą
domyślnie ładowane odwołania
text
BODY
kolor tekstu w dokumencie
LINK
pomocniczy, informacyjny tytuł
dowiązanego dokumentu
T
tabindex
title
SPIS ATRYBUTÓW
ATRYBUT
type (HTML 5)
POLECENIA
OPIS
•określa typ MIME
linkowanego dokumentu; typ
przycisku wartości: submit,
reset, button;
•określa rodzaj pola
(wymagany), wartości:
button, checkbox, file,
A, AREA, BUTTON,
hidden, image, password,
COMMAND, EMBED,
radio, reset, submit, text;
INPUT , LI, LINK, MENU, •określa znaczek przy pozycji
OL, PARAM, SCRIPT,
wykazu, np. kwadrat, koło,
SOURCE, STYLE
okrąg i pusty kwadrat
(niewymagany, przestarzały,
zaniechany w XHTML 1.1) ;
wartości: 1, A, a, I, i dla ol,
disc, square, circle, round
dla ul
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
IMG
określa adres URL mapy
odsyłaczy nałożonej na obraz
COL, COLGROUP,
TBODY,TD, TFOOTH,
TH,THEAD,TR
•pionowe wyrównanie zawartości
komórek (niewymagany),
wartości: top, middle,
bottom, baseline ;
•określa pionowe wyrównanie
elementu (niewymagany),
wartości: top, bottom,
middle, baseline
U
usemap
V
valign
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
•przypisanie przyciskowi
określonej wartości ;
• określa początkową,
domyślną wartość danego pola;
• numer pozycji wykazu
numerowanego, który może
przerywać naturalną
numerację punktów np.
value="5".
• wstępnie określona wartość,
przy jej braku pobierana jest
zawartość elementu
• podaje konkretną wartość
elementu
• określa aktualny postęp
operacji
value
BUTTON, INPUT, LI,
METER, OPTION,
PARAM, PROGRESS
valuetype
PARAM
określa typ wartości
wartości: data, ref, object
vlink
BODY
kolor odwiedzonego odsyłacza
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
vspace
IMG
pionowy odstęp wokół obrazu
W
width
CANVAS, COL,
COLGROUP, EMBED,
HR, IFRAME, IMG,
INPUT, PRE,TABLE,TD,
TH, VIDEO
• atrybut określa w pikselach
szerokość obszaru Canvas
• szerokość kolumny wyrażona
w pikselach lub procentach
szerokości tabeli, np.
width="20%"
• określa w pikselach
szerokość interfejsu, w którym
wyświetlany jest zasób
• szerokość linii, wartości:
piksele, procenty, np.
width="80%";
• szerokość ramki w pikselach
• szerokość obrazu
• określa w pikselach
szerokość elementu input,
tylko dla typu image
• określa szerokość
preformatowanego tekstu w
SPIS ATRYBUTÓW
ATRYBUT
POLECENIA
OPIS
width
CANVAS, COL,
COLGROUP, EMBED,
HR, IFRAME, IMG,
INPUT, PRE,TABLE,TD,
TH, VIDEO
•szerokość tabeli w pikselach
lub procentach szerokości
nadrzędnego pojemnika
• szerokość komórki tabeli
• określa w pikselach
szerokość interfejsu wideo
TEXTAREA
określa sposób zawijania
tekstu w polu; wartość: soft lub
hard (tylko wtedy, gdy użyto
atrybutu cols).
wrap (HTML 5)
Do zalet stosowania CSS można zaliczyć:
• oddzielenie struktury witryny od jej prezentacji, co
ułatwia jej tworzenie i utrzymywanie
• dużo większe możliwości formatowania za pomocą
stylów niż za pomocą znaczników i ich atrybutów
• znaczące zmniejszenie ilości kodu użytego do
wizualizacji
• łatwość manipulowania całymi kompleksami stron
• łatwość ujednolicenia wyglądu dokumentów opartych
na tym samym arkuszu stylów
BUDOWA STYLU:
Ogólne polecenie stylu ma postać:
selektor { cecha: wartość }- w jęz. ang.selector { property:
value}.
Selektorem jest po prostu polecenie języka, np. p, li, td,
body itd.
Cechą jest pewna własność danego znacznika, np. wielkość
i styl czcionki dla akapitu.
Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.
Zawartość nawiasów klamrowych, czyli cechę i wartość,
określamy także łącznie mianem deklaracji stylu.
BUDOWA STYLU:
Przykłady, ilustrujące użycie stylów definiowanych w
nagłówkowej dokumentu lub w zewnętrznym arkuszu stylów
części
Przykład 1
p {font-family: Times New Roman}
Selektorem jest p, cechą - rodzina czcionek, wartością - Times New
Roman.
Przykład 2
h1 {font-size: 30pt}
Selektorem jest h1, cechą - wielkość czcionki, wartością - 30 punktów.
BUDOWA STYLU:
Przykład 3
ul {font-weight: bold}
Selektorem jest ul, cechą - waga czcionki, wartością - pogrubienie.
Przykład 4
Możemy oczywiście łączyć ze sobą różne cechy i wartości, zgodnie ze
schematem:
Selektor { cecha1: wartość1; cecha2: wartość2 }
Należy zwrócić uwagę na średnik rozdzielający pary cech:wartości.
h3 {font-variant: small-caps; font-size: 15pt; color: green; font-family:
Courier}
Znaczniki w przeglądarce www nie są wyświetlane. Są one jedynie
interpretowane, tzn. pozwalają formatować tekst.
UWAGI!
1. Należy domykać zawsze znaczniki - dotyczy to ogromnej większości
znaczników, poza bardzo nielicznymi, jak <img>, <hr> czy <br>, np.
<p>Wczoraj byliśmy w lesie i było bardzo przyjemnie.</p>
2. Należy zwrócić uwagę na używanie cudzysłowów przy podawaniu
konkretnych wartości poleceń i atrybutów, co jest wymagane we
współczesnych standardach, choć nie było egzekwowane w starszych, np.
<img src="fotka.jpg" alt="fotka z wakacji">
<a href="http://www.onet.pl" >Portal Onet.pl</a>
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
<hn> Tytuł stopnia n </hn>
n=1…6
<h1> Tytuł stopnia pierwszego </h1>
…
<h6> Tytuł stopnia szóstego </h6>
h oznacza heading, natomiast cyfra n to stopień tytułu (jest ich 6).
Stopnie tytułów różnią się wielkością znaków. Wielkość znaków maleje
wraz ze wzrostem stopnia tytułu.
Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Akapit
<p> </p> (p=paragraph)
Znacznik ten wstawia interlinie (znaki końca
akapitu) między poszczególne fragmenty tekstu.
<p> Treść pierwszego akapitu </p>
<p> Treść drugiego akapitu </p>
Jeżeli tekst nie jest objęty powyższymi znacznikami,
jest interpretowany jako „masa tekstowa”. Klawisz
ENTER, użyty jako znak końca akapitów, zostanie
przez przeglądarkę zignorowany i zostanie
wyświetlony jednolity blok tekstu.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wiersz
<br>
Znacznik ten przenosi tekst o jeden wiersz w dół, nie
wprowadzając dodatkowej interlinii (znaku końca akapitu).
To jest pierwszy wiersz <br>
To jest drugi wiersz <br>
Napisanie kilku kolejnych <br> pozwala poszerzyć pionowy
odstęp między fragmentami tekstu.
Pozioma linia
<hr> (ang. horizontal rule)
Wyświetla w dokumencie poziomą linię na całej szerokości
strony.
Można rozdzielać nią logiczne fragmenty tekstu, dzięki czemu
strona jest bardziej przejrzysta
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Lista wypunktowana (wykaz nieuporządkowany)
<ul> </ul> (ang. unordered list)
W ramach szkieletu listy wypunktowanej, poszczególne punkty
wykazu wprowadzane są za pomocą znaczników: <li> </li>.
<p> Zainteresowania: </p>
<ul>
<li> sport </li>
<li> muzyka </li>
<li> fotografowanie </li>
<li> film </li>
</ul>
W efekcie uzyskamy:
Zainteresowania:
• sport
• muzyka
• fotografowanie
• film
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Lista numerowana (wykaz uporządkowany)
<ol> </ol> (ang. ordered list)
Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich.
W ramach szkieletu listy numerowanej, poszczególne punkty wykazu
wprowadzane są za pomocą znaczników <li> </li>.
<p> Zainteresowania: </p>
<ol>
<li> sport </li>
<li> muzyka </li>
<li> fotografowanie </li>
<li> film </li>
</ol>
W efekcie uzyskamy:
Zainteresowania:
1.sport
2.muzyka
3.fotografowanie
4.film
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wykazy przy użyciu arkuszy stylów
Aby zdefiniować typ stylu wykazu, należy wpisać w definicji stylu
list-style-type: wartość
Punkty wykazu mogą być na wiele sposobów wyróżniane markerami
(punktorami):
• punktor w kształcie kropki
<ul style="list-style-type: disc">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
• pierwszy punkt
• drugi punkt
• trzeci punkt
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wykazy przy użyciu arkuszy stylów
o punktor w kształcie okręgu
<ul style="list-style-type: circle ">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
o pierwszy punkt
o drugi punkt
o trzeci punkt
punktor w kształcie kwadratu
list-style-type: square
pierwszy punkt
drugi punkt
trzeci punkt
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wykazy przy użyciu arkuszy stylów
• numerowanie liczbami arabskimi
<ul style="list-style-type: decimal">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
1. pierwszy punkt
2. drugi punkt
3. trzeci punkt
numerowanie małymi liczbami rzymskimi
list-style-type: lower-roman
i. pierwszy punkt
ii. drugi punkt
iii. trzeci punkt
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wykazy przy użyciu arkuszy stylów
• numerowanie wielkimi liczbami rzymskimi
<ul style="list-style-type: upper-roman">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
I. pierwszy punkt
II. drugi punkt
III. trzeci punkt
numerowanie małymi literami alfabetu łacińskiego
list-style-type: lower-alpha
a. pierwszy punkt
b. drugi punkt
c. trzeci punkt
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wykazy przy użyciu arkuszy stylów
• numerowanie wielkimi literami alfabetu łacińskiego
<ul style="list-style-type: upper-alpha">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
A. pierwszy punkt
B. drugi punkt
C. trzeci punkt
wykaz bez numerowania
list-style-type: none
pierwszy punkt
drugi punkt
trzeci punkt
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Atrybuty czcionki
Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje
się dodatkowe atrybuty czcionki-wyróżnienie (pogrubienie) i
emfazę (pochylenie). Atrybuty pozwalają uwypuklić jakieś fragmenty
tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za
pomocą mocnego pogrubienia:
To jest tekst normalny
<strong>To jest tekst pogrubiony </strong>
<em>To jest tekst pochylony</em>
Efekt działania tych poleceń:
To jest tekst normalny
To jest tekst pogrubiony
To jest tekst pochylony
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odsyłacze
(inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki)
są chyba najbardziej charakterystycznym elementem dokumentów w światowej
sieci World Wide Web.
Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym
serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom
można wiązać ze sobą poszczególne strony.
Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca.
Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca,
przy czym może to być z powodzeniem miejsce na tej samej stronie, inna
strona w ramach tego samego, złożonego dokumentu, a nawet strona na
drugim końcu świata.
Użytkownik nie musi nawet w gruncie rzeczy wiedzieć, że powiązane ze sobą
tematycznie informacje znajdują się w miejscach oddalonych od siebie nawet o
tysiące kilometrów. Najważniejsze jest ich tematyczne powiązanie, a nie
lokalizacja.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do innej strony internetowej
<a href =”adres .strony. internetowej”> Jakaś nazwa tej strony</a>
<a href=” http://www.put.poznan.pl”>Politechnika Poznańska</a>
Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej,
zazwyczaj o nazwie index.html lub index.htm (zależy od typu serwera
WWW). Stosuje się także nazwy default.html lub default.htm.
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między
znacznikami <a href=”…”> i </a>. Jest on domyślnie wyświetlany na
niebiesko z podkreśleniem. Gdy przesuniemy kursor myszki nad odsyłacz,
w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres
internetowy. .Kliknięcie na nim spowoduje skok do strony.
Politechnika Poznańska
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do adresu poczty elektronicznej
<a href =”mailto:[email protected]">Imię i nazwisko</a>
<a href =”mailto:[email protected]”>Jan Kowalski</a>
Umieszczanie odsyłacza do adresu poczty elektronicznej jest dobrym
obyczajem, który daje użytkownikowi strony łatwy kontakt z jej autorem.
Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę
elektroniczną. Navigator wywoła swój własny moduł pocztowy Mail, Internet
Explorer zaś skorzysta z Outlook Express (albo z Ms Outlook, jeśli on jest
domyślnym programem pocztowym).
Przesunięcie kursora myszki nad tekst „autora strony” wyświetli w pasku
stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje
uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł
zredagować list do autora.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do adresu poczty elektronicznej z
predefiniowanymi informacjami
• domyślna treść w polu tematu listu:
<a href="mailto: [email protected]?subject= Termin spotkania">
• adres odbiorcy, do którego idzie kopia listu:
<a href="mailto: [email protected]?cc= [email protected] ">
• tzw. ślepa lub ukryta kopia(żaden inny odbiorca listu nie zobaczy
tego adresu):
<a href="mailto: [email protected]?bcc= [email protected] ">
• fragment ciała listu, a więc już bezpośrednio w oknie edycji:
<a href="mailto: [email protected]?body=Panie Nowak, Chciałbym
umówić się na spotkanie w sprawie...">
• list adresowany do kilku osób jednocześnie. Adresy trzeba
rozdzielić po prostu średnikami:
<a href="mailto: [email protected];[email protected]">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do adresu poczty elektronicznej z
predefiniowanymi informacjami
• umieszczenie w/w informacji jednocześnie (można je połączyć
stosując jako łącznik ciąg &.
<a href="mailto: [email protected]?cc= [email protected] &
bcc= [email protected]&subject=Bardzo ważny list&
body=Witajcie Panowie">Wyślij pocztę</a>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do etykiety (zakładki)
Etykieta (zwana też zakładką lub kotwicą - ang. anchor) jest
znakiem, swoistą elektroniczną zakładką, podobną do zakładek w
książce, która zaznacza jakieś miejsce w tekście.
Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do
zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten
sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego
punktu.
Konstrukcja etykiety jest następująca:
<a name="nazwa_etykiety"> </a>
Można utworzyć w dokumencie dowolną liczbę etykiet, które będą
służyć jako punkty docelowe dla różnych odsyłaczy. Jest to
szczególnie wygodne w przypadku dużych objętościowo stron,
wymagających podzielenia na pewne logiczne fragmenty, aby były
łatwiejsze w czytaniu. Spis zagadnień z wykorzystaniem odsyłaczy
do etykiet-zakładek jest bardzo często stosowany w Internecie.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do etykiety (zakładki)
Konieczne jest stosowanie cudzysłowu obejmującego etykiety,
podobnie jak i adresów w odsyłaczach.
Gdy etykieta zawiera kilka wyrazów, ich użycie jest wręcz niezbędne,
aby definicja była poprawna. Wyrazy te wchodzące w skład nazwy
etykiety należy połączyć znakiem podkreślenia,
np. "to_jest_zakładka_dla_pewnego_tematu".
Należy też zwracać uwagę na wielkość liter, gdyż są one na ogół
rozróżniane. Należy zalecać używanie małych liter zarówno w
etykietach, jak i odsyłaczach do nich.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
odsyłacz do etykiety (zakładki)
<a href="strona.htm#nazwa_etykiety">Tekst</a>
Należy zwrócić uwagę na znak # oddzielający nazwę
strony od nazwy etykiety.
Jeśli tworzymy odsyłacz do etykiety na tej samej stronie,
wystarczy użyć samej nazwy etykiety, czyli:
<a href="#nazwa_etykiety">Tekst, na który należy kliknąć</a>
np. <a name =”zdjecia”>moje zdjęcia</a>
<a href =”#zdjecia”>moje zdjęcia </a>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Przykłady odsyłaczy do innych plików
Odsyłacz do pliku tekstowego TXT
<a href="plik_tekstowy.txt">Plik tekstowy TXT</a>
Plik tekstowy TXT
Odsyłacz do pliku graficznego GIF
<a href="plik_graficzny.gif">Plik graficzny GIF</a>
Plik graficzny GIF
Odsyłacz do pliku dźwiękowego
<a href="pinkpant.mid">Plik dźwiękowy</a>
Plik dźwiękowy
Odsyłacz do pliku PDF
<a href="licence.pdf">dokument PDF</a>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wlasności czcionki
Nazwy czcionek, rodziny czcionek
Aby zdefiniować rodzinę czcionek, należy wpisać w definicji
stylu
font-family: czcionka
Jeżeli akapit ma być wyświetlany za pomocą czcionki
Times New Roman, można napisać
<p style="font-family: 'Times New Roman'">Treść akapitu</p>
Efekt będzie następujący:
To jest akapit napisany za pomocą czcionki Times New Roman
Analogicznie, można podać czcionkę Courier:
To jest akapit napisany za pomocą czcionki
Courier
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Nazwy czcionek, rodziny czcionek
Ponieważ nie wiadomo dokładnie, jakimi czcionkami dysponuje
czytelnik strony, można zabezpieczyć się , podając kilka kolejnych
czcionek, np:
<p style="font-family: Times, Georgia">Treść akapitu</p>
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki.
• Jeżeli podajemy kilka czcionek, rozdzielamy je przecinkami i spacją.
• Gdy czcionka ma kilka wyrazów w nazwie, ujmujemy je w apostrof ',
podczas gdy cała definicja jest objęta cudzysłowem.
• Można także poslużyć się nazwą rodzajową, np. serif, cursive co
jeszcze bardziej zwiększa szansę, że akapit zostanie wyświetlony np.
czcionką szeryfową, gdyby zabrakło w systemie czytelnika czcionek
Times, Times New Roman itd.
<p style="font-family: serif">Treść akapitu</p>
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki
szeryfowej.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wlasności czcionki
Style czcionek
Aby zdefiniować styl czcionki, należy wpisać w definicji stylu
font-style : wartość
Do dyspozycji są trzy style czcionki:
• normal (normalny)
• Italic (pochylony)
• oblique (pochylony+pogrubiony)
Dwa ostatnie są wyświetlane w podobny sposób, zatem to w dużej
mierze kwestia indywidualnego wyboru użytkownika.
<p style="font-style: normal">Treść akapitu</p>
Treść akapitu wyświetlana w stylu normal
<p style="font-style: italic">Treść akapitu</p>
Treść akapitu wyświetlana w stylu italic
<h3 style="font-style: oblique">Treść akapitu</h3>
Treść śródtytułu wyświetlana w stylu oblique
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wlasności czcionki
Warianty czcionek
Aby zdefiniować wariant czcionki, należy wpisać w definicji stylu
font-variant : wartość
W kaskadowych arkuszach stylów rozróżniane są dwa warianty
czcionek:
• normal (normalny)
• small-caps (czyli tzw. małe kapitaliki)
Można je stosować nie tylko do akapitów, ale i np. śródtytułów.
<p style="font-variant: normal">Treść akapitu</p>
Treść akapitu wyświetlana w wariancie normal
<p style="font-variant: small-caps">Treść akapitu</p>
TREŚĆ AKAPITU WYŚWIETLANA W WARIANCIE SMALL-CAPS
<h3 style=" font-variant: small-caps ">Treść akapitu</h3>
TREŚĆ ŚRÓDTYTUŁU WYŚWIETLANA W WARIANCIE SMALL-CAPS
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wlasności czcionki
Waga czcionek
Aby zdefiniować wagę czcionki, należy wpisać w definicji stylu
font-weight : wartość
W kaskadowych arkuszach stylów do dyspozycji jest aż 13
rozmaitych "wag" czcionki, różniących się stopniem pogrubienia
(nawet trudno je jest niekiedy rozróżnić na ekranie):
• normal
• bold
• bolder
• lighter
• 100
• 200
•…
• 800
• 900
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Waga czcionek
<p style="font-weight: normal">Treść akapitu</p>
Treść akapitu wyświetlana za pomocą wagi normal
Treść akapitu wyświetlana za pomocą wagi bold
Treść akapitu wyświetlana za pomocą wagi bolder
Treść akapitu wyświetlana za pomocą wagi lighter
Treść akapitu wyświetlana za pomocą wagi 100
Treść akapitu wyświetlana za pomocą wagi 200
Treść akapitu wyświetlana za pomocą wagi 300
Treść akapitu wyświetlana za pomocą wagi 400
Treść akapitu wyświetlana za pomocą wagi 500
Treść akapitu wyświetlana za pomocą wagi 600
Treść akapitu wyświetlana za pomocą wagi 700
Treść akapitu wyświetlana za pomocą wagi 800
Treść akapitu wyświetlana za pomocą wagi 900
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
Aby zdefiniować wielkość czcionki, należy wpisać w
definicji stylu
font-size: wielkość
Wielkość czcionki możemy regulować za pomocą czterech
metod:
1. imiennych wielkości absolutnych,
2. wielkości relatywnych,
3. wysokości w jednostkach miary
4. wysokości w procentach.
a. Imienne wielkości absolutne
<p style="font-size: wielkość absolutna">Treść akapitu</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
Imienne wielkości absolutne:
• xx-small (bardzo bardzo mała)
• x-small (bardzo mała)
• small
(mała)
• medium (średnia)
• large
(duża)
• x-large (bardzo duża)
• xx-large (bardzo bardzo duża)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
b. Imienne wielkości relatywne (w stosunku do
domyślnej):
<p style="font-size: wielkość relatywna">Treść akapitu</p>
• smaller
• larger
(mniejsza -1)
(większa +1)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
c. Wielkość w jednostkach miary:
W dokumencie można użyć szeregu jednostek miary:
• piksele (px),
• punkty (pt),
1pt = 1/72 in
• centymetry (cm),
• cale (in)
1in = 2.54 cm
• milimetry (mm)
• pica (pc).
1pc = 12 pt
1em - krotność wielkości domyślnego pisma
<p style="font-size: 14px">Treść akapitu</p>
<p style="font-size: 1cm">Treść akapitu</p>
<p style="font-size: 1.5em">Treść akapitu</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
c. Wielkość w jednostkach miary:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
d. Wielkość w procentach:
Podanie wielkości w procentach powinno dać w efekcie
procent wielkości domyślnej dla danego selektora, np.
akapitu, tytułu itp.
Wszystkie trzy przeglądarki interpretują to polecenie
częściowo błędnie, np. w odniesieniu do tytułu, choć akapit
jest wyświetlany poprawnie.
Na przykład:
<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego
125%</h1>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wielkość czcionki
d. Wielkość w procentach:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolory czcionki
Do określania koloru stosuje się obecnie style.
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>
Tekst w kolorze niebieskim.
Poniżej przedstawiona jest lista 16 podstawowych barw (nazwy
imienne) stosowanych w dokumentach internetowych:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolory czcionki
Tekst próbny-white
Tekst próbny-yellow
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Odstępy między wyrazami
Aby zdefiniować odstęp między wyrazami, należy wpisać w
definicji stylu word-spacing : wartość
WARTOŚCI:
• normal
• wartości w jednostkach absolutnych (in, cm, mm, pc, pt)
• wartości w jednostkach relatywnych (em, ex, px)
<p style="word-spacing: 1cm; ">1-centymetrowe odstępy
między wyrazami.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Odstępy między wyrazami
<p style="word-spacing: 2pt; ">2-punktowe odstępy między
wyrazami.</p>
<p style="word-spacing: 0.5em; ">W tym akapicie odstępy między
wyrazami wynoszą 0.5 wysokości czcionki (em).</p>
<p style="word-spacing: 5px; ">5-pikselowe odstępy między
wyrazami.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Odstępy między literami
Aby zdefiniować odstęp między wyrazami, należy wpisać w
definicji stylu letter-spacing : wartość
WARTOŚCI:
• normal
• wartości w jednostkach absolutnych (in, cm, mm, pc, pt)
• wartości w jednostkach relatywnych (em, ex, px)
<p style=”letter-spacing: 1m;">1-milimetrowe odstępy
między literami.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Odstępy między literami
<p style=”letter-spacing: 2pt; ">2-punktowe odstępy między
literami.</p>
<p style=”letter-spacing: 0.5em; ">W tym akapicie odstępy między
literami wynoszą 0.5 wysokości czcionki (em).</p>
<p style="letter-spacing: 5px;">5-pikselowe odstępy między
literami.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Odstępy między wierszami
Aby zdefiniować odstęp między wierszami, należy wpisać w
definicji stylu line-height: wartość
WARTOŚCI:
• normal,
• wielokrotność wysokości czcionki,
• procent wysokości czcionki
Style pozwalają regulować odstępy między
bazowymi elementów, np wierszy akapitu.
liniami
Można podać wielkość absolutną, np. w centymetrach, albo
względną, w procentach.
200% oznacza podwojenie odstępu, 50% - zmniejszenie o
połowę.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Odstępy między wierszami
<p style=”line-height:1cm;">To jest akapit, w którym
wiersze są odsunięte od siebie o 1 cm</p>
<p style=”line-height: 80%;">To jest akapit, w którym
odstęp między wierszami wynosi 80 proc. normalnego</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Dekoracja tekstu
Aby zdefiniować dekorację czcionki, należy wpisać w definicji stylu
text-decoration: wartość
WARTOŚCI:
• none (brak dekoracji)
• underline (podkreślenie)
• overline (nadkreślenie)
• line-through (przekreślenie)
• blink (migotanie)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Dekoracja tekstu
<a style="text-decoration: none; " href="http://www.corel.com">To jest
odsyłacz do firmy Corel.</a>
To jest odsyłacz do firmy Corel
Jak widać, za pomocą tego polecenia można się w ten sposób
pozbyć domyślnego podkreślenia w odsyłaczu, które wygląda na
ogół niezbyt estetycznie.
<p style="text-decoration:underline; ">To jest podkreślenie
tekstu.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Dekoracja tekstu
<p style="text-decoration: overline; ">To jest nadkreślenie tekstu.</p>
<p style="text-decoration: line-through; ">To jest przekreślenie
tekstu.</p>
<p style="text-decoration: blink; ">To jest migotanie tekstu.</p>
To jest migotanie tekstu.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Transformacja tekstu
Aby zdefiniować transformację tekstu, należy wpisać w definicji
stylu text-transform: wartość
WARTOŚCI:
• capitalize (zamiana pierwszych liter wyrazów na wielkie)
• uppercase (zamiana wszystkich liter na wielkie )
• lowercase (zamiana wszystkich liter na małe)
• none (pozostawienie bez zmiany)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Transformacja tekstu
<p style="text-transform: none">To jest jakiś przykładowy
akapit. Poddamy go transformacjom.</p>
To jest jakiś przykładowy akapit. Poddamy go
transformacjom.
<p style="text-transform: capitalize">To jest jakiś
przykładowy akapit. Poddamy go transformacjom.</p>
To Jest Jakiś Przykładowy Akapit. Poddamy
Transformacjom.
<p style="text-transform: uppercase">To jest jakiś
przykładowy akapit. Poddamy go transformacjom.</p>
Go
TO JEST JAKIŚ PRZYKŁADOWY AKAPIT. PODDAMY GO
TRANSFORMACJOM.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Transformacja tekstu
<p style="text-transform: lowercase">To jest jakiś
przykładowy akapit. Poddamy go transformacjom.</p>
to jest jakiś
transformacjom.
przykładowy
akapit.
poddamy
go
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Poziome wyrównanie tekstu
Aby zdefiniować poziome wyrównanie tekstu, należy wpisać w
definicji stylu text-align: wartość
WARTOŚCI:
• left (wyrównanie do lewego marginesu)
• right (wyrównanie do prawego marginesu)
• center (wyrównanie do środka)
• justify (wyrównanie do obu marginesów)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Poziome wyrównanie tekstu
<p style="text-align: left">To jest przykładowy akapit
wyrównany do lewego marginesu.</p>
<p style="text-align: right">To jest przykładowy akapit wyrównany
do prawego marginesu.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Poziome wyrównanie tekstu
<p style="text-align: center">To jest przykładowy akapit,
który środkujemy w stosunku do obu marginesów.</p>
<p style="text-align: justify">To jest przykładowy akapit, który
powinien być wyrównany w stosunku do obu marginesów </p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Wcięcie tekstu
Aby zdefiniować wcięcie tekstu, należy wpisać w definicji stylu
text-indent: wartość
Wcięcie tekstu odnosi się do bloków tekstu i oznacza
odstęp pierwszego wiersza bloku od lewego marginesu
strony.
WARTOŚCI:
• długość w jednostkach
• długość w procentach
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Własności tekstu
Wcięcie tekstu
<p style="text-indent: 10%">To jest akapit, w którym
pierwszy wiersz…</p>
<h2 style="text-indent: 1in">Tytuł rozpoczynający się w odległości 1
cala...</h2>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor
Aby zdefiniować kolor tekstu, należy wpisać w definicji stylu
color: wartość
Kolor możemy przypisywać dowolnym tekstowym elementom
strony, jak nagłówki, akapity, wykazy, tabele (tekstom w
komórkach) itd. Przykłady:
<h2 style="color: #FF0000; ">Czerwony tytuł drugiego
stopnia</h2>
Czerwony tytuł drugiego stopnia
<p style="color: #FF00FF; ">Akapit w kolorze Fuchsia</p>
Akapit w kolorze Fuchsia
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor
<table border>
<tr>
<td style="color: #808000; ">Komórka tabeli z oliwkowym
tekstem</td>
</tr>
</table>
Numerowany wykaz w kolorze niebieskim
<ol style="color: blue; ">
<li>punkt pierwszy
<li>punkt drugi
<li>punkt trzeci
</ol>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor tła
Aby zdefiniować kolor tła, należy wpisać w definicji stylu
background-color: wartość
Wiele
elementów
może
mieć
przypisany
kolor
tła.
Przykłady:
<h2 style="background-color: yellow">Tytuł stopnia drugiego na
żółtym tle</h2>
<p style="background-color: blue">Akapit na tle Aqua</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor tła
Jeśli definiowany kolor tła ma odnosić się do całej strony, można
użyć selektora BODY lub HTML.
<body style="background-color: orange“></body>
Specyfikacja CSS2 wprowadza 28 kolorów systemowych
(pochodzących z systemu operacyjnego), które integrują się z
kolorami środowiska użytkownika. Ich rolę widać np. wyraźnie po
zmianie schematu odpowiedzialnego za wyświetlanie środowiska
Windows. Akapit wyświetlany przy użyciu stylu
<p style="color:background">,
a więc za pomocą koloru pulpitu Windows. Każdy czytelnik widzi
więc ten kolor, który ma na swoim własnym pulpicie.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika jako tło
Aby zdefiniować obraz tła, należy wpisać w definicji stylu
background-image: adres obrazka
Rozmaitym elementom dokumentu, jak akapity, komórki tabel,
śródtytuły w tekście, listy elementów czy inne, możemy
przypisywać grafikę jako tło. Przykłady:
<h1 style="background-image: url('canvas2.gif')">Tytuł stopnia
pierwszego na tle płótna</h1>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika jako tło
<table border>
<tr>
<td style="height:100px; background-image:
url('/grafika/greendot.gif')>Komórka tabeli z zieloną kropką jako
tłem</td>
</tr>
</table>
Jeśli obraz miałby stanowić tło całej strony, można użyć
selektora BODY .
<body style="background-image: url('obrazki/obrazek.gif') “></body>
body {background: url(nazwa_obrazka)}
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Powtarzanie tła
Aby zdefiniować powtarzanie ilustracji jako tła elementu, należy
wpisać w definicji stylu
background-repeat: wartość
Wartości:
•
Repeat (powtarzanie tła w obu kierunkach)
•
Repeat-x (powtarzanie tła tylko w poziomie)
•
Repeat-y (powtarzanie tła tylko w pionie)
•
No-repeat (brak powtarzania tła)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Powtarzanie tła
Przykłady:
Definiując np. w stylach ciało dokumentu (body), można
podać następujące, przykładowe polecenie:
<style type="text/css">
<!-body { background: #c0c0c0; url(greendot.gif);
background-repeat: no-repeat }
-->
</style>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Powtarzanie tła
Przykłady:
Definiując np. w stylach ciało dokumentu (body), można
podać następujące, przykładowe polecenie:
<style type="text/css">
<!-body { background: #c0c0c0; url(greendot.gif);
background-repeat: repeat-x }
-->
</style>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Powtarzanie tła
Przykłady:
• <table border width="400px">
<tr>
<td style="background-image: url(/grafika/greendot.gif);
background-repeat:repeat-y;">Komórka tabeli z zieloną
kropką jako tłem Komórka tabeli z zieloną kropką jako
tłem Komórka tabeli z zieloną kropką jako tłem Komórka
tabeli z zieloną kropką jako tłem </td>
</tr>
</table>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Powtarzanie tła
Przykłady:
Definiując np. w stylach ciało dokumentu (body), można
podać następujące, przykładowe polecenie:
<style type="text/css">
<!-body { background: #c0c0c0; url(greendot.gif);
background-repeat: repeat }
-->
</style>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Aby zdefiniować pozycję tła, należy wpisać w definicji stylu
background-position: wartość
Wartości:
•
x, y
•
x%,y% (% długości, %szerokości)
•
left/ center/ right (w poziomie: do lewej/ do środka/ do prawej)
•
top/ center/ bottom (w pionie: do górnego brzegu/ do środka/
do dolnego brzegu)
• Tło może mieć różną pozycję. Typowym przykładem jest
tło strony, którym jest obrazek.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
W przykładowej tabeli (z jedną komórką) można wstawić
grafikę jako tło, bez definiowania pozycji.
td style="background-image: url(/images/grafika/pcq.gif);
background-repeat: no-repeat; height:150px;"
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
Można jednak określić pozycję tła w pionie:
td style="background-image: url(/grafika/pcq.gif); backgroundposition: top; background-repeat: no-repeat; height:150px;"
td style="background-image: url(/grafika/pcq.gif);
background-position: center; background-repeat: norepeat; height:150px;"
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
Można jednak określić pozycję tła w pionie:
td style="background-image: url(/grafika/pcq.gif); backgroundposition: bottom; background-repeat: no-repeat;
height:150px;"
W powyższych przykładach grafika ustawiała się domyślnie
na środku, jeśli chodzi o położenie poziome. Można jednak
definiować także jawnie wartości dla położenia poziomego:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
Określanie pozycji tła w poziomie:
td style="background-image: url(/grafika/pcq.gif); backgroundposition: left; background-repeat: no-repeat; height:150px;"
td style="background-image: url(/grafika/pcq.gif); backgroundposition: center; background-repeat: no-repeat; height:150px;"
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
Określanie pozycji tła w poziomie:
td style="background-image: url(/grafika/pcq.gif); backgroundposition: right; background-repeat: no-repeat; height:150px;"
Należy zauważyć, że parametr center daje ten sam wynik
w pionie i poziomie.
Można mieszać wartości pozycji pionowej i poziomej, na
przykład top left czy bottom right:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
td style="background-image: url(/grafika/pcq.gif); backgroundposition: top right; background-repeat: no-repeat;
height:150px;"
td style="background-image: url(/grafika/pcq.gif); backgroundposition: bottom left; background-repeat: no-repeat;
height:150px;"
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pozycja tła
Przykłady:
Możliwe jest wreszcie podanie wartości liczbowych, np.
background-position: 1cm 2cm, czyli 1 centymetr od lewego
brzegu i 2cm od górnego.
td style="background-image: url(/grafika/pcq.gif); backgroundposition: 1 cm 2 cm; background-repeat: no-repeat;
height:150px;"
td style="background-image: url(/grafika/pcq.gif); backgroundposition: 20% 80%; background-repeat: no-repeat;
height:150px;"
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy i odstępy
Model pojemnika
W specyfikacji kaskadowych arkuszy stylów występuje tzw.
model pojemnika, zwanego czasem potocznie pudełkiem (ang.
box model), który ilustruje, jakie są fizyczne, wizualne elementy
danego elementu, oraz jakie jest położenie danego elementu,
np. akapitu, śródtytułu czy ilustracji w stosunku do innych
elementów.
Poniższa ilustracja pokazuje, jak rozumieć model pojemnika
(czyli marginesu, obramowania, odstępu i zawartości elementu).
•W
jest pokazany zewnętrzny margines,
który oddziela dany element od innych elementów, np.
akapit od akapitu.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy i odstępy
Model pojemnika
Zewnętrzne marginesy można stosować do odsuwania od
siebie elementów w pionie.
•W
kolorze
brązowym
jest
pokazane
hipotetyczne
obramowanie elementu - gdybyśmy jawnie wstawili
obramowanie, to znajdowałoby się ono właśnie między
zewnętrznym marginesem a wewnętrznym odstępem.
• W kolorze zielonym pokazany jest wewnętrzny odstęp, czyli
przestrzeń między hipotetycznym obramowaniem a właściwą
treścią elementu.
Na czerwonym tle jest pokazana właściwa treść elementu, np.
zwykły akapit.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy i odstępy
Model pojemnika
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy cząstkowe
Aby zdefiniować margines cząstkowy, należy wpisać w definicji
stylu:
• margin-left: wartość (margines lewy)
• margin-right: wartość (margines prawy)
• margin-top: wartość (margines górny)
• margin-bottom: wartość (margines dolny)
Wartości:
•
wielkość w jednostkach
•
wielkość w procentach
•
auto
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy cząstkowe
Polecenie margin-top: xxx pozwala wprowadzić górny margines
dla danego elementu, a więc dodatkowy odstęp między nim a
poprzedzającym go elementem.
<p style="margin-top: 1cm">To jest treść akapitu</p>
Polecenie margin-right: xxx pozwala wprowadzić prawy margines dla
danego elementu, a więc dodatkowy odstęp między nim a prawym
brzegiem strony czy następującym po nim elementem.
<p style="margin-right: 2cm">To jest treść akapitu</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy cząstkowe
Polecenie margin-bottom: xxx pozwala wprowadzić dolny
margines dla danego elementu, a więc dodatkowy odstęp między
nim a następującym po nim elementem.
<p style="margin-bottom: 1cm">To jest treść akapitu</p>
Polecenie margin-left: xxx pozwala wprowadzić lewy margines dla
danego elementu, a więc dodatkowy odstęp między nim a lewym
brzegiem strony czy poprzedzającym go elementem.
<p style="margin-left: 10%">To jest treść akapitu</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy mieszane
Aby zdefiniować margines mieszany, należy wpisać w definicji
stylu:
margin: wartości
Wartości:
•
wartości marginesów cząstkowych
Przykłady:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Marginesy mieszane
Przykłady:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odstępy cząstkowe
Aby zdefiniować odstęp cząstkowy, należy wpisać w definicji stylu:
padding-left : wartości (odstęp lewy)
padding-top: wartości (odstęp górny)
padding-right : wartości (odstęp prawy)
padding-bottom : wartości (odstęp dolny)
Wartości:
•
Wielkość w jednostkach
•
Wielkość w %
•
auto
Przykłady:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odstępy cząstkowe
Zawartość elementu można oddzielać od jego obramowania,
definiując
dodatkowy
wewnętrzny
odstęp,
poszerzający
"naturalny" odstęp.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odstępy cząstkowe
W analogiczny sposób tworzymy dolny odstęp.
Tworzenie lewego odstępu
<p style="padding-left: 5em">Akapit oddzielony od od innego
elementu dodatkowym odstępem o wielkości 5em z lewej
strony.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odstępy mieszane
Aby zdefiniować margines mieszany, należy wpisać w definicji
stylu:
padding: wartości
Wartości:
•
wartości odstępów cząstkowych
Przykłady:
Można ustalić wszystkie odstępy jednocześnie, wprowadzając kolejne
wartości odstępów cząstkowych.
<p style="padding: 20px">Akapit oddzielony od obramowania
dodatkowymi odstępami o wartości 20px z każdej strony.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odstępy mieszane
<p style="padding: 40px 80px">Akapit oddzielony od swojego
naturalnego obramowania dodatkowymi odstępami o wartości 40px
górny/dolny i 80px lewy/prawy.</p>
<p style="">Akapit oddzielony od swojego naturalnego
obrampadding: 20px 30px 40px 50pxowania dodatkowymi
odstępami o wartości 20px górny, 30px prawy, 40px dolny i 50px
lewy.</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
OBRAMOWANIA:
Styl obramowania
Aby zdefiniować styl obramowania, należy wpisać w definicji stylu:
border-style: wartość
Wartości:
•
•
•
•
•
•
none (brak obramowania)
dotted (linia kropkowana)
dashed (linia przerywana)
solid
double (linia podwójna)
groove
•
ridge
•
•
inset
outset
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
OBRAMOWANIA:
Styl obramowania
Elementom można nadawać obramowanie - z jednej lub kilku stron.
Konieczne jest podanie stylu i grubości obramowania, a
dodatkowo można podać kolor obramowania.
Przykłady:
border-style: none
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
OBRAMOWANIA:
Styl obramowania
Przykłady:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
OBRAMOWANIA:
Grubość obramowania
Aby zdefiniować grubość obramowania, należy wpisać w definicji
stylu:
border-width: wartość
Wartości:
•
•
•
•
thin (cienkie),
medium (średnie),
thick (grube),
wartość w jednostkach
Grubość obramowania jest obok stylu koniecznym elementem jego
definicji, zarówno w obramowaniach cząstkowych, jak i mieszanych.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grubość obramowania
Przykłady różnych grubości:
<p style="border-style: solid; border-width: 1px">Treść akapitu</p>
<p style="border-style: solid; border-width: thin">Treść akapitu</p>
<p style="border-style: solid; border-width: medium">Treść
akapitu</p>
<p style="border-style: solid; border-width: thick">Treść akapitu</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
OBRAMOWANIA:
Kolor obramowania
Aby zdefiniować kolor obramowania, należy wpisać w definicji
stylu:
border-color: wartość
Wartości:
• wartość koloru
Kolor obramowania jest opcjonalnym elementem definicji
obramowania, w przeciwieństwie do obowiązkowych
atrybutów stylu i grubości
.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Tabela kolorów (fragment):
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Tabela kolorów (fragment):
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Tabela kolorów (fragment):
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
OBRAMOWANIA:
Kolor obramowania
Przykłady kolorów obramowania:
<p style="border-style: solid; border-width: 2px; border-color: red;
">Czerwone obramowanie (red)</p>
<p style="border-style: solid; border-width: 2px; border-color: green;
">Zielone obramowanie (green)</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Obramowanie cząstkowe
Aby zdefiniować cząstkowe obramowanie, należy wpisać w
definicji stylu:
• border-left: wartości
• border-right: wartości
• border-top: wartości
• border-bottom: wartości
Wartości:
• Wartości poszczególnych atrybutów stylu
• Wartości poszczególnych grubości
• Wartości poszczególnych kolorów
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Obramowanie cząstkowe
Obramowanie cząstkowe to obramowanie definiowane dla
pojedynczych brzegów obramowania, np. dla lewego lub prawego.
Podajemy w nim przynajmniej styl i grubość
obramowania, a dodatkowo możemy także zdefiniować jego kolor.
PRZYKŁADY:
<p style="border-left-style: solid; border-left-width: 5px; border-leftcolor: black;">Treść akapitu</p> "
<p style="border-bottom-style: groove; border-bottom-width: 10px;
border-bottom-color: olive; border-top-style: groove; border-topwidth: 10px; border-top-color: olive; ">Treść akapitu</p> "
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Obramowanie mieszane
Aby zdefiniować mieszane obramowanie, należy wpisać w definicji
stylu:
• border: wartości
• border-left: wartości
• border-right: wartości
• border-top: wartości
• border-bottom: wartości
Wartości:
• Wartości atrybutów dla obramowań cząstkowych lub
całego obramowania
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Obramowanie mieszane
Obramowanie mieszane jest obramowaniem, w którym łączymy
wartości obramowań cząstkowych do postaci ujednoliconej definicji
lub łączymy w jednej definicji różne atrybuty obramowania
cząstkowego.
Zamiast pisać po kolei border-left: atrybuty; border-right: atrybuty
itd., można napisać po prostu border: atrybuty, gdyż w ten sposób
definiujemy od razu atrybuty dla całego obramowania.
<p style="border: solid 3px red">Treść akapitu</p>
Zamiast pisać po kolei border-left-style: solid; border-left-width:
3px; border-left-color: red;, można prościej napisać border-left:
solid 3px red, gdyż w ten sposób definiujemy łącznie atrybuty dla
danego obramowania cząstkowego, np. z lewej czy prawej strony.
<p style="border-left: solid 5px red; border-top: solid 3px green; ">Treść
akapitu</p>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika na stronie
Grafika i inne elementy multimedialne są jednymi z najbardziej
charakterystycznych elementów World Wide Web, ubarwiając i
uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki
informacji.
Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia
dokumentu internetowego jest umiejętnością niezmiernie przydatną,
choć należy pamiętać, że to właśnie te elementy są główną
przyczyną ogromnego wzrostu ruchu w Sieci. Konieczne jest zatem
wybranie złotego środka między estetyką i nośnością informacyjną
grafiki z jednej, a realiami technicznymi z drugiej strony.
Należy zachować należny umiar ze względu na estetykę strony nadmiar multimediów po prostu razi. Wiele ciekawych efektów
graficznych można dziś osiągnąć za pomocą stylów, bez udziału
samej grafiki.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wstawianie grafiki do dokumentu
Grafikę można wprowadzić na stronie za pomocą polecenia:
<img src="/sciezka/plik_graficzny" alt="nazwa alternatywna">
• img jest skrótem od image (obraz),
•src jest skrótem od Source (źródło)
•alt jest nazwą alternatywną, a więc taką, która poinformuje o
zawartości ilustracji w urządzeniu nie odczytującym grafiki.
Efekt zastosowania konstrukcji jest następujący:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wstawianie grafiki do dokumentu
Gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy
podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym
katalogu, konieczne jest podanie ścieżki dostępu.
Na stronach WWW są stosowane 2 podstawowe formaty bitowych plików
graficznych- GIF i JPG, które są z założenia skompresowane, a więc
zajmują znacznie mniej miejsca niż grafiki w innych formatach. Dzięki temu
transmisja strony trwa znacznie krócej.
Jeśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest
ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału.
Można jednak użyć szeregu atrybutów, które zmienią położenie,
wielkość i inne cechy obrazka.
Przeglądarka automatycznie odczytuje właściwą wysokość i
szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są
jawnie wstawiane, np.
<img src="/grafika/sufinka.jpg" width="342" height="353" alt="Sufi
w tulipanach">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – obramowania i odstępy
Aby zdefiniować obramowanie grafiki, należy wpisać w definicji stylu:
• style=”border: wartości”
Aby zdefiniować obrys grafiki, należy wpisać w definicji stylu:
• style=”outline: wartości”
<img src="/grafika/sufinka.jpg" width="171" height="177" alt="Sufi w
tulipanach" style="border: 5px red solid; ">
<img src="/grafika/sufinka.jpg" width="171" height="177"
alt="Sufi w tulipanach" style="outline: 5px green
double; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – obramowania i odstępy
Aby utworzyć dodatkową przestrzeń w poziomie i w pionie między
grafiką a sąsiadującymi elementami, należy zdefiniować styl CSS –
margines globalny (margin) lub cząstkowy (margin-top, marginbottom, margin-left, margin-right)
<img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w
tulipanach" style="margin-left: 50px; margin-right: 50px; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – obramowania i odstępy
<img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w
tulipanach" style="margin-top: 50px; margin-bottom: 50px; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – pozycjonowanie poziome
Grafikę często umieszcza się w ramach akapitu, a wtedy ujawnia swój
naturalny charakter, czyli ukazuje się w jednym wierszu z treścią
akapitu.
Przykład:
Oczywiście takie rozwiązanie jest rażące z estetycznego punktu
widzenia. Stosuje się zatem pozycjonowanie grafiki przy prawym lub
lewym marginesie strony , natomiast treść akapitu oblewa ilustrację
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – pozycjonowanie poziome
Przykład:
Aby umieścić ilustrację przy prawym marginesie, należy jej nadać styl
style="float: right; ".
<img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w
tulipanach" style="float: right; ">
I rezultat:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – pozycjonowanie poziome
Przykład:
Aby umieścić ilustrację przy lewym marginesie, należy jej nadać styl
style="float: left; ".
<img src="/grafika/sufinka.jpg" width="171" height="176" alt="Sufi w
tulipanach" style="float: left; ">
I rezultat:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – pozycjonowanie pionowe
Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania
elementów względem siebie - wykorzystujemy w nim polecenie stylów
vertical-align,
Przykłady z użyciem grafiki i akapitu:
<img src="/grafika/sufinka.jpg" width="85" height="88" alt="Sufi w
tulipanach" style="vertical-align: top; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Grafika – pozycjonowanie pionowe
Przykłady z użyciem grafiki i akapitu:
<img src="/grafika/sufinka.jpg" width="85" height="88" alt="Sufi w
tulipanach" style="vertical-align: middle; ">
<img src="/grafika/sufinka.jpg" width="85" height="88" alt="Sufi w
tulipanach" style="vertical-align: bottom; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
TABELE
Ogólne ramy tabeli
<table> </table>
Definicja tabeli musi być umieszczona między tymi dwoma znacznikami. W ich
ramach umieszczane są definicje rzędów, definicje komórek w rzędach, konkretne
dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.
Wiersz tabeli
<tr> </tr>
Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W
ramach <table> </table> można umieścić wiele kolejnych definicji wierszy,np.
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Komórka w wierszu
<td> </td>
Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst
i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego
rzędu (wiersza),np.
<table>
<tr> <td> </td> <td> </td> <td> </td></tr>
<tr> <td> </td> <td> </td> <td> </td></tr>
<tr> <td> </td> <td> </td> <td> </td></tr>
</table>
Uwaga! Dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje
wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co
symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w
edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w
przeglądarce, wyznaczone przez definicję wiersza.
Przykład
a1 a2 a3
b1 b2 b3
c1 c2 c3
W powyższym przykładzie tabela zawiera 3 wiersze, w każdym po 3 komórki, zaś
w konkretnych komórkach zostały umieszczone dane od a1 do c3.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Obramowanie tabeli
Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o
parametr BORDER. Jeśli nie zostanie podana szerokość obramowania,
przyjmowana jest jej domyślna wartość.
<table border> </table>
Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio
zinterpretowana przez przeglądarkę, np.
<table border=”10”> </table>
Odległości między komórkami
Aby komórki (nie tabela) zawierały inne obramowanie niż domyślne, można użyć
parametru CELLSPACING (jest to właściwie odległość między komórkami),np.:
<table border cellspacing=”8”> </table>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Odstępy w komórkach
Jeśli uznamy, że odstęp między zawartością komórki a jej
obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING
(domyślnie wynosi on 1).
<table border cellspacing=”8” cellpadding=”15”> </table>
Oczywiście należy w rozsądny sposób ustawiać wartości
parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały
margines czyni tabelę mniej przejrzystą i niezbyt estetyczną.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Szerokość tabeli
Jeżeli nie definiujemy szerokości tabeli, przyjmuje ona domyślną szerokość na
ekranie przeglądarki. Parametr WIDTH daje możliwość samodzielnego
zdefiniowania szerokości tabeli.
<table border width=”600”> </table>
Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach.
Zamiast wartości absolutnej w pikselach, można także użyć wartości procentowej,
np. pół szerokości ekranu przeglądarki, pół szerokości nadrzędnego pojemnika, w
którym mieści się tabela (w naszym przykładzie połowa szerokości białego
obszaru)
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Szerokość tabeli
<table border width=”50%”> </table>
Wysokość tabeli
Wysokość tabeli jest definiowana za pomocą stylów CSS z użyciem parametru
HEIGHT, wyrażonego w pikselach lub procencie widocznej strony,np.
<table border style="height: 200px; width: 60%; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wysokość tabeli
Wartość podana w procentach będzie interpretowana jedynie
wtedy, gdy tabela będzie umieszczona w pojemniku wyższego
rzędu o podanej wysokości.
<div style="height: 200px; ">
<table border style="height: 50%; width: 60%; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Szerokość komórki
Szerokość komórki jest określana za pomocą stylów, a konkretnie szerokości
<td style ="width: 150px; ">zawartość komórki</td>
Można też podać wartość procentową, która odnosi się do
szerokości komórki w ramach tabeli, a nie całego ekranu.
<td style ="width: 50%; ">zawartość komórki</td>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wyrównanie tabeli
Do definiowania wyrównania tabeli stosuje się style CSS., np.
<table style="float:right; "></table>
W efekcie tabela zostanie przesunięta w prawo i oblana z lewej strony tekstem oraz
pod spodem.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Wyrównanie tabeli
Do definiowania wyrównania tabeli stosuje się style CSS., np.
<table style="float:left; "></table>
W efekcie tabela zostanie przesunięta w lewo i oblana z prawej strony tekstem oraz
pod spodem.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Poziome wyrównanie danych w komórkach
<td style="text-align: left; "> </td>
<td style="text-align: center; "> </td>
<td style="text-align: right; "> </td>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Pionowe wyrównanie danych w komórkach
Atrybut valign (vertical align) służy do pionowego wyrównania zawartości komórki <td valign=top></td> do górnego brzegu
<td valign=middle></td> do środka
<td valign=bottom></td> do dolnego brzegu
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor tła tabeli
<table style="background-color: red">
<tr style="background-color: beige">
<td style="background-color: green">
Przykład zdefiniowania odrębnych kolorów w każdej z komórek:
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Obrazek jako tło tabeli
Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć
gotowego obrazka
<table style="background-image: url(adres_obrazka)">
Przykład:
<table style="background-image: url(/images/grafika/canvas2.gif)">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Kolor obramowania tabeli
Możliwość definiowania kolorów obramowania dają nam obecnie style CSSpołączenie stylu, grubości i koloru obramowania.
<table border cellspacing="1" cellpadding="5" style="border: 15px outset
#D2691E; ">
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Tytuł tabeli
Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy
go umieścić zaraz za ogólnymi ramami tabeli. Na przykład:
<table border style= "width: 300px; ">
<caption>Tytuł tabeli</caption>
Za pomocą stylów CSS można zdefiniować położenie tytułu nad lub
pod tabelą:
<caption style="caption-side: bottom; ">Tytuł tabeli</caption>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Nagłówek wiersza i kolumny tabeli
Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn,
obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą
czcionki pogrubionej i w przypadku kolumn pozycjonowane na
środku.
Przykład nagłówków kolumn:
Nagłówek jest definiowany za pomocą znaczników:
<th> </th>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Nagłówek wiersza i kolumny tabeli
Powyższa, przykładowa tabela ma więc kod:
<table border cellpadding="10" width="400">
<caption>Wzrost produkcji w latach 1991-1995 (w mln USD)</caption>
<tr>
<th>1991</th> <th>1992</th><th>1993</th> <th>1994</th>
<th>1995</th>
</tr>
<tr style="text-align:center">
<td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550</t
d>
</tr>
</table>
Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn
(kolejne lata). W drugim znajdują się dane liczbowe.
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Nagłówek wiersza i kolumny tabeli
Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy
wiersz należy rozpocząć od komórki z nagłówkiem.
<table border cellpadding="10" width="500">
<caption>Wzrost produkcji masła i margaryny w latach 1991-1995
(w mln USD)</caption>
<tr><td></td><th>1991</th> <th>1992</th> <th>1993</th>
<th>1994</th> <th>1995</th> </tr>
<tr style="text-align: center; "><th>Masło</th>
<td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550
</td></tr>
<tr style="text-align: center; "><th>Margaryna</th>
<td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td
></tr>
</table>
ZNACZNIKI STOSOWANE W TREŚCI DOKUMENTU HTML c.d.
Nagłówek wiersza i kolumny tabeli
W wierszach z danymi liczbowymi wystarczyło wstawić kody
nagłówków (Masło i Margaryna), zaraz za definicją wiersza, a przed
pierwszą definicją komórki z danymi.
Zauważmy też, że wiersz nagłówków z latami został poprzedzony
pustą komórką, dzięki czemu nagłówki zostały we właściwy sposób
ułożone w stosunku do kolumn z danymi.