podstrony - Kurs HTML i CSS
HTML dla zielonych / Odsyłacz do podstrony HTML <a href>...się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu. Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca: <a href="względna ścieżka dostępu do podstrony">opis odsyłacza</a> Zasady wpisywania ścieżki dostępu są takie same jak w przypadku obrazków. Natomiast zamiast: "opis odsyłacza", należy wpisać krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi przejście do podanej...
- 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...
- Widżety HTML / Szablon strony bez ramek
...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 stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek aktualizacji serwisu ...
- 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...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
...dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a> gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub "https://" (np.: http://www.onet.pl), adres poczty elektronicznej poprzedzony przez "mailto:" (np.: mailto:jan_kowalski@example.com). Natomiast zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje...
AutoIFRAME / Skrypt AutoIFRAME...UWAGA! Pamiętaj, aby podać taką wysokość ramki (height="..."), która będzie wygodna w przypadku, gdyby skrypt nie zadziałał! Teraz na wszystkie podstrony, które będą wczytywane do ramki lokalnej, należy wstawić następujący kod (trzeba to zrobić koniecznie w nagłówku dokumentu, czyli w ramach <head>...</head>): <script src="autoiframe.js"></script> Następnie na samym końcu podstrony (tuż przed znacznikiem zamykającym </body>) należy wkleić kod: <script> autoiframe(null, 200)...
Dobre praktyki / Przykazania webmastera...Nie nadużywaj znacznika div ani span Formatuj kod źródłowy Staraj się używać znacznika button zamiast input Dziel obszerne artykuły na osobne podstrony Nie zakładaj, że wszyscy użytkownicy posiadają tak szybkie łącze jak Twoje Sprawdzaj poprawność składni HTML Dobre praktyki CSS Nie używaj atrybutu style="..." Unikaj stosowania deklaracji !important Nie wstawiaj wewnętrznego arkusza stylów, który powtarza się na kilku podstronach Minimalizuj liczbę osobnych plików arkuszy CSS...
- Skórki
...<script>...</script>: <link rel="stylesheet" href="style.css"> <script src="skin.js"></script> Ostatnim krokiem będzie przygotowanie specjalnej podstrony, na której będą prezentowane wszystkie udostępnione dla użytkowników skórki z możliwością ich wyboru. Oczywiście wskazanym by było, aby dla każdej skórki przygotować specjalne miniaturki ze zrzutami ekranu (klawisz Print Screen), aby użytkownicy nie musieli wybierać w ciemno 🙂 Zmiana skórki będzie się sprowadzała do wstawienia...
- Widżety HTML / Ramki HTML
...wstawimy to samo menu nawigacyjne na każdej podstronie, możemy mieć w przyszłości sporo pracy, gdy do naszej witryny będziemy chcieli dodać nowe podstrony. Wtedy trzeba będzie mozolnie zmieniać menu w każdym istniejącym dotąd dokumencie, w celu dodania do niego odsyłacza do nowej podstrony. Aby wyeliminować tę niedogodność, a jednocześnie nie utrudniać naszym użytkownikom nawigacji w serwisie, możemy stworzyć jeden wspólny widżet zawierający odnośniki menu, a następnie osadzić go na każdej...
- Promocja strony WWW / Pozycjonowanie (SEO)
...najpierw ukazuje się przyjazny tytuł serwisu, a dopiero potem wyrażenia kluczowe, które niekoniecznie muszą go interesować. Natomiast jeśli chodzi o podstrony, coraz częściej spotyka się kolejność odwrotną, tzn.: Tytuł artykułu - Nazwa serwisu lub Tytuł artykułu - Tytuł działu - Nazwa serwisu Odwrócona kolejność w tytułach poza stroną główną jest korzystna, ponieważ tytuł artykułu zwykle lepiej opisuje zawartość danej podstrony niż nazwa serwisu, a słowa kluczowe umieszczone na początku...