Nowoczesne tworzenie stron internetowych opiera się na koncepcji rozdzielenia treści (struktury) od jej wyglądu (stylu, formy, kształtu). Za strukturę odpowiada język HTML, za wygląd natomiast język CSS. Są to obecnie języki nierozerwalnie związane ze sobą. Przy czym w bardziej zaawansowanych serwisach język HTML często zastępowany jest językiem PHP, który daje większe możliwości tworzenia struktury strony WWW.
Wprowadzenie CSS daje:
• O wiele większe możliwości formatowania wyglądu dokumentu
• Jednoczesną modyfikację wyglądu wszystkich stron witryny WWW, które są powiązane wspólnym szablonem CSS
• Szybką zmianę wyglądu witryny (system „skórek” witryny WWW), co daje dużą elastyczność przy zdarzeniach okolicznościowych lub dostosowania tej samej treści dla komputerów stacjonarnych i urządzeń mobilnych (palm topy, telefony)
• Znaczne zmniejszenie rozmiaru serwisu, odczuwalne w postaci dużo krótszego czasu ładowania stron lub mniejszych opłat za transfer
• Ułatwienie czytania treści przez osoby niewidome (www.ivona.com ) oraz użytkowników przeglądarek tekstowych
ZASADY TWORZENIA SZABLONU STRONY INTERNETOWEJ
Szablon strony należy tworzyć na elementach DIV (blokach) w postaci:
div tekst w bloku /div. W dokumencie HTML należy nazwać dany obszar niepowtarzalną nazwą, a następnie opisać dany blok w dokumencie CSS.
Składnia:
HTML
div id=”nazwa”> tekst w bloku /div
CSS
#nazwa {cecha: wartość cechy;}
Dlaczego szablon strony powinno się tworzyć na elementach DIV a nie na tabelach?
• Tabele mają inne przeznaczenie: służą do prezentacji danych tabelarycznych, obejmujących powtarzające się zbiory (wiersze tabeli) tych samych typów (kolumny tabeli), a nie do tworzenia szablonów
• Tabele dodatkowo zwiększają rozmiar dokumentu, co wpływa na dłuższe wczytywanie stron WWW
• Tabele są mało podatne (elastyczne) na modyfikacje ich struktury, bardzo łatwo potrafią się „rozsypać”
Tabela składa się ze znaczników (wszystkie mają część zamykającą)
table - określa początek i koniec tabeli
tr - określa początek i koniec wiersza
td - określa początek i koniec komórki
Atrybut border – wyświetla obramowanie tabeli