Ciekawe i istotne rozwiązania dla stron www

DOMYŚLNY WYGLĄD I POŁOŻENIE ELEMENTÓW HTML NA STRONIE WWW.

Ta strona nie ma być ładna. Ma pokazać elementy (tagi) bez ustalenia stylu prezentacji i układu graficznego, prawie wyłącznie z użyciem domyślnego (default)stylu przeglądarki. Piszę 'prawie wyłącznie',bo np. dla div w którym teraz piszę, ustaliłem background-color. Są też inne ustalenia,ale generalnie elementy i ich układ to dzieło przeglądarki.

To jest pierwszy paragraf ze stylem default przeglądarki. Ma również szerokość okna przeglądarki oraz wysokość zależną od zawartości. Zauważmy, że divy i paragrafy ustawiają się jeden pod drugim a tekst zaczyna się z lewej strony.Paragraf oddziela się marginesem od poprzedzającego go elementu HTML. Również element pod paragrafem tworzy margines.

To jest drugi paragraf z 'border',reszta to styl default przeglądarki. Ma również szerokość okna przeglądarki oraz wysokość zależną od zawartości. Zauważmy,że paragraf ustawia się pod poprzednim elementem zostawiając margines.

W tym paragrafie wpisałem tekst w span .Kolor czcionki w span określiłem jako jasnobrązowy, by było to widoczne Widać,że span ustawia się w linii tekstu w paragrafie.Jest to 'inline element',tak samo jak 'b' i inne. Span bez określenia stylu nie zmienia wyglądu tekstu. Jest używany,by właśnie zmienić styl,lub manipulować zawartościa tagu z użyciem javascript.

Kolejny paragraf ma margin-left:100px; czyli wartość marginesu z lewej oraz line-height:180%. Ten ostatni atrybut , czyli wysokość linii zwiększa (w tym przypadku,bo można go też zmniejszyć) odstęp pionowy między linijkami tekstu. Domyślnie przeglądarki ustalaja go na 110-120%. Przy okazji zwróćmy uwagę na zachowanie sie tagów (elementów ) podczas zwężania,poszerzania okna przeglądarki przeż użytkownika. Div z ustaloną szerokością chowa się,pozostałe elementy typu block wydłużają się, elementy typu inline zmieniają pozycje. To chyba jest dość istotne przy wykonywaniu strony. Chodzi o to,by elementy nie rozjeżdżały się, tworząc mało czytelny wygląd strony przy zmianie wielkości okna przeglądarki.

Poniżej TABELA , czyli 'table' wyłącznie według stylu default przeglądarek.

Ilość i wartość zainstalowanych programów. To jest caption.

Programy	W sekcji A		W sekcji B
	Ilość	Wartość w zł	Ilość	Wartość w zł
Edytory tekstu	10	700,00	15	1200,00
Arkusze kalkulacyjne	12	780,00	18	1130,00
Bazy danych	7	650,00	9	920,00
Suma zł	4560,00		3450,00

W pierwszym 'tr' wpisane są trzy 'td': pierwszy z rowspan=2 i tekstem 'Programy', drugi i trzeci z colspan=2 i tekstami 'w sekcji A', 'W sekcji B' odpowiednio. Domyślnie, tekst w każdej komórce jest wyrównany do lewej. Zobaczmy dokładniej jak to wygląda, określając tylko atrybut 'border':

Widać, że szerokość kolumny tabeli określona jest przez cell zawierającą najwięcej tekstu. W tabeli możemy naturalnie umieszczać cokolwiek innego, nie tylko tekst. Stosunkowo często można spotkać strony opracowane na bazie table. Czyli cała strona jest tablicą i do niej wpisuje sie kolejne table, obrazki,linki, kod javascript i co tam jeszcze trzeba. Wydaje się jednak że opracowywanie stron www na bazie divów obecnie dominuje.

Listy-'lists' mogą być unordered-nieuporządkowane z tagiem 'ul',uporządkowane -'ol',listy definicji-'definition list' z tagiem 'dl'. Możemy wgnieżdżać jedna listę w drugą. Oto wygląd default list.

LISTY są elementami typu block.Niżej lista nieuporządkowana. Może mieć różne znaczki na początku. Za pomocą CSS można te znaczki zlikwidować. Często na bazie list wykonuje się menu, elementy nawigacji po stronie czy stronach.

• Kawa
• Mleko
• Cukier

Lista uporządkowana-ordered list. Podobnie jak poprzednia,może mieć na początku cyfry,litery duże lub małe.

1. Kawa
2. Mleko
3. Cukier

Lista definicji

Kawa

Czarny,zwykle gorący napój

Mleko

Biały napój lub proszek

Listy wgnieżdżone w listę

• Kawa
• Herbata
  • Czarna herbata
  • Zielona herbata
    • chińska
    • indyjska
• Mleko

Poniżej: FORMA . Jest to element,który zawiera szereg elementów pozwalających użytkownikowi strony na wprowadzanie różnorodnych informacji. Te elementy to text field;password field; radio buttons; checkboxes; drop down box. Form ma atrybut 'action' w którym można zapisać adres poczty lub url strony www. Naciśnięcie przycisku typu'submit' powoduje wysłanie treści formy do adresata . Wokół użytych elementów składowych formy narysowałem obramowanie i tytuł za pomocą tagu 'fieldset'