podstron - Kurs HTML i CSS
HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>...Deklaracja strony kodowej. UWAGA! W żadnym wypadku nie należy pomijać w powyższym szablonie następującej linijki: <meta charset="utf-8"> Co to są podstrony HTML? Praktycznie wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablonu przedstawionego powyżej). Np. ten serwis...
- Widżety HTML / Szablon strony bez ramek
Spis treści Wstęp Szablon PHP Szablon SSI Wstęp Załóżmy, że Twój serwis składa się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...struktura katalogów (szczególnie pierwsza - wszystko w jednym katalogu). Stosuje się ją szczególnie w serwisach składających się z niewielu podstron. Jeśli masz problemy ze swobodnym tworzeniem bardziej skomplikowanych ścieżek dostępu, polecam Ci właśnie ten model, ponieważ możliwość pomyłki jest tutaj naprawdę niewielka. Poprawnie: katalog/plik.gif Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik W przypadku kiedy plik.gif znajduje się w...
- HTML dla zielonych / Odsyłacz do podstrony HTML <a href>
...którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w taki sam sposób jak stronę główną). Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby...
- Odsyłacze HTML / Do podstrony <a href>
(w obrębie tego samego serwisu) Spis treści <a href> Do podstrony <a href> Dymek narzędziowy <a href title> Nowe okno <a href "_blank"> Do podstrony <a href> Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML i zawiera treść, która dość znacznie różni się tematycznie od pozostałych. Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu...
Szablon strony na DIV-ach / Semantyczny szablon strony...menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów, zamiast żmudnej modyfikacji być może setek powstałych dotychczas podstron serwisu! Bez trudu wprowadzisz okolicznościowe wersje wyglądu swojej witryny - np. z okazji Nowego Roku. Chcesz przygotować zestaw skórek dla Twojej strony? Z CSS jest to znacznie prostsze i mniej inwazyjne niż w jakimkolwiek systemie parsowania szablonów. Ponadto rozwiązanie takie jest pozbawione bardzo irytującej wady: jeśli przyszło...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak przy wstawianiu obrazka). Warto podkreślić, że jeśli Twoja strona WWW składa się z wielu podstron, na każdej z nich możesz dołączyć ten sam plik arkusza stylów. Dzięki temu zmiany wykonane tylko w jednym miejscu - czyli w pliku arkusza stylów - wpłyną na wygląd od razu wszystkich podstron Twojego serwisu. Czyż to nie jest piękne? Już nigdy więcej nie będzie Cię czekać żmudne przerabianie każdej podstrony tylko po to, aby zmienić na...
AutoIFRAME / Kilka ramek AutoIFRAME...przeszkodzie, aby wstawić więcej niż dwie ramki <iframe>...</iframe> - każda kolejna z innym identyfikatorem id="...". Następnie na końcu wszystkich podstron wczytywanych do ramki id="autoiframe" - nazwijmy ją ramką główną - umieszczamy taki kod jak poprzednio, tzn.: <script> autoiframe(null, 200); </script> lub <script> autoiframe('autoiframe', 200); </script> Natomiast na podstronach, które będą wczytywane do ramki id="autoiframe2", umieszczamy, również na końcu, nieco zmienioną formę...
- Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu
...razem będzie się prezentował zupełnie inaczej. Być może zapytasz teraz: jaki jest tego cel? Wyobraź sobie, że Twój serwis internetowy zawiera 100 podstron z artykułami. Na każdej podstronie zostało wstawione menu nawigacyjne. Jeśli teraz zechcesz zmienić jego wygląd, co będzie lepiej zrobić: modyfikować ręcznie 100 plików, czy dokonać zmiany tylko w jednym - zewnętrznym arkuszu stylów? No dobrze, stronę można wykonać w technologii ramkowej lub korzystając ze skryptów na serwerze, takich jak...
- Nagłówek i treść HTML / Tytuł strony <title>
<head> <title>Tytuł strony</title> </head> Każdy dokument HTML (podstrona serwisu) posiada własny tytuł. Może on zawierać dowolny tekst, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on również odnosić się do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu, na karcie ze stroną), a także w wyszukiwarkach sieciowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt...