PROGRAMOWANIE APLIKACJI U.- WYKŁAD, PROG. APLIKACJI UŻYTKOWYCH- WYKŁAD 2

PROGRAMOWANIE APLIKACJI UŻYTKOWYCH- WYKŁAD 2 13.10.2010r.

1. WYKAZY

<UL> </UL> -wykaz wypunktowany

np. <UL>

<LI> komputer </LI>

<LI> monitor </LI>

<LI> drukarka </LI>

</UL>

<OL> </OL> - wykaz numerowany

np. <OL>

<LI> złoty medal </LI>

<LI> srebrny medal </LI>

<LI> brązowy medal </LI>

</OL>

2. TABELE- ATRYBUTY

<TH> </TH> nagłówek tabeli, pierwszy wiersz

<table border=1

bgcolor=”yellow”

width=85%

height=170>

<TABLE border=x> -obramowanie tabeli (x≥0)

<TABLE width=x> - szerokość tabeli (x>0)

<TR height=x> - wysokość wiersza (x>0)

<TD width=x> - szerokość kolumny (x>0), gdzie x wartość absolutna wyrażona
pikselach

<TALBE width=x%> - szerokość tabeli odpowiada wartości % szerokości ekranu np. 30%

<TD width=x%> - szerokość komórki w ramach tabeli (nie ekranu)

np.

<table border=1

bgcolor=”yellow”

width=85%

height=170>

<tr> <td align=”center” malign=”Middle”>…

</td>… </tr>

</table>

poziome wyrównanie- <td align'”left”> </td> ; left, center, right
pionowe wyrównanie- <td valign=”top”> </td> ; top, middle, bottom

3. ZAGNIEŻDZANIE ZNACZNIKÓW (FONT)

To jest czcionka standardowa <br>

To jest czcionka niebieska o wielkości 7

</font><br>

Dalsza część tekstu bez formatowania <br>

<font size=7 color=”blue”> to jest czcionka o wielkości 7

</font>

To jest czcionka standardowa <br>

0x08 graphic
<font size=6>

0x08 graphic
<font color=”blue”>

To jest czcionka niebieska o wielkości 6

</font><br>

Dalsza część tekstu <br>

</font>

Dalsza część już bez formatowania

4. STYLE CSS- WSTĘP

JĘZYK HTML- definiowanie struktury tworzonej witryny internetowej oraz poszczególnych dokumentów
JĘZYK CSS- definiowanie
CSS- nazwa kaskadowe arkusze stylów pochodzi od hierarchii źródeł stylów
ZALETY:

większe możliwości formatowania niż za pomocą znaczników i ich atrybutów
oddzielanie struktury stron od ich prezentacji
łatwość ujednolicenia i modyfikowania wyglądu grupy dokumentów

5. PRZYKŁADY

<p style=”text-transform:uppercase;”> -wersaliki

p {font-family:Helvetica;font size:12pt;}

u {font-weight:bald; color:#FF0000}

Grupowanie selektorów h1,h2,h3 {font family:Helvetica; color: blue;}

6. CSS- BUDOWA STYLU

Budowa stylu:

- selektor {cecha:wartość;}

- selektor {lista_cech_i_wartości;}

selektor- znacznik (Tag, polecenie języka) np. body, p, li itp.
cecha- własność danego znacznika np. wielkość i styl czcionki dla akapitu
wartość- konkretna wartość cechy, np. bold lub 12pt dla czcionki

Np.

p {font-size:12pt;}

ul {font-weight:bold; color:#FF0000;}

<p style=”text_transform:uppercase;”>- wersaliki

7. HIERARCHIA RODZAJÓW STYLÓW

Style wewnętrzne:

styl lokalny
<p style=”font-size:12pt;color:blue;”>
styl zagnieżdzony- zawsze w nagłówku dokumentu
<head>

body {margin-left:1cm;margin-right:1cm;}

p {font-size:10pt;font-family:Arial,Helvetica;

font-weight:normal;}

-->

</style> </head>

Style zewnętrzne:

styl dołączany- arkusz stylów (plik)
<head>

…

…

</head>

styl imporotwany

8. CSS- ZASIĘG STYLU

styl lokalny styl zagnieżdżony styl zewnętrzny

!GENERALNA ZASADA- im styl jest zdefiniowany bliżej miejsca użycia w dokumencie tym jest ważniejszy w hierarchii formatowania

9. STRONA KODOWA iso8859-2 lub UNICODE

<!doctype html public”-//w3c//dtd html 4.0 transitional//en”>

<HTML>

<HEAD> itd.

10. WALIDACJA DOKUMENTU

walidacja dokumentu- sprawdzenie poprawności struktury dokumentu i użytych w nim znaczników
Proser w3c html validation Service
http://validator.w3.org/
<!doctype html public”-//w3c//dtd html 4.0 transitional//en”>

!doctype określa wariant języka HTML