przykład - Kurs HTML i CSS
Szablon strony na DIV-ach / Semantyczny szablon strony...jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod HTML, który następnie będzie wykorzystywany we wszystkich przykładach w tym rozdziale. Zmieniając wygląd kolejnych przygotowywanych szablonów, będziemy projektować jedynie kolejne arkusze CSS dla wciąż niezmiennego kodu HTML. Jest to praktyczny przykład implementacji koncepcji rozdzielenia struktury i prezentacji dokumentów, dzięki czemu możliwe są do osiągnięcia wszystkie wymienione powyżej korzyści...
- Oprawa graficzna / "Duszki" CSS
...pod którym wyświetlamy tło graficzne. Zwykle nie jest obojętne, w jaki sposób ułożymy poszczególne grafiki na arkuszu. Przedstawiony powyżej przykład ikon o identycznych wymiarach, należy do rzadkości. Dalej na przykładach dowiemy się, w jaki sposób projektować optymalne rozłożenie grafik na arkuszu z "duszkami" CSS, tak aby potem nie było problemu z ich wykorzystaniem na rzeczywistej stronie WWW. Wszystkie przykłady będą oparte o ten sam, pojedynczy plik graficzny (obramowanie zostało...
Aktywne przyciski / PodświetlenieAby wprowadzić na stronę przyciski obrazkowe, które zmieniają swój wygląd, po wskazaniu ich myszką, wystarczy dodać do znacznika <img> dwa dodatkowe atrybuty: onmouseover="..." i onmouseout="...": <a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'"></a> Przykład
Tekst HTML / Wyróżnienie <em, strong>wyświetlanie: w linii Emfaza (szczególny nacisk) <em>...</em> Wysoka ważność (powaga lub pilność) <strong>...</strong> Pozwala wyróżnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie. Pierwsze polecenie zwykle wyświetla tekst napisany kursywą, natomiast drugie - pogrubiony. Różnią się one jednak od zwykłego wytłuszczenia i kursywy tym, że dodatkowo niosą ze sobą pewne informacje co do ważności tekstu. W sytuacjach kiedy szczególnie zależy nam na zwróceniu uwagi czytelnika na...
- Tekst HTML / Tekst preformatowany <pre>
<pre>...</pre> wyświetlanie: w bloku Wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br>) oraz nie jest automatycznie zawijany. Dzięki niemu możesz np. wkleić na stronę WWW tekst, wprost ze zwykłego edytora, bez stosowania dodatkowych znaczników (niestety informacje dotyczące formatowania zostaną pominięte). Należy jednak przy tym pamiętać, aby...
- Tekst HTML / Zmienna <var>
<var>...</var> wyświetlanie: w linii Wprowadza na ekran zmienną (matematyczną lub języka programowania), która zostaje wyróżniona, najczęściej poprzez pochylenie tekstu. Przykład <var> zmienna = a + 2b + 3 Pytania i odpowiedzi <var> Jak zrobić zmienną w HTML? W tym celu należy umieścić tekst wewnątrz znacznika <var>...</var>. Jak oznaczyć zmienną? Chociaż możemy w dowolny sposób wyróżnić wizualnie tekst będący zmienną (np. matematyczną, fizyczną, języka programowania albo parametr...
- Tekst HTML / Blok cytowany <blockquote>
Spis treści <blockquote> Blok cytowany <blockquote> Blok cytowany ze źródłem <blockquote cite> Blok cytowany <blockquote> <blockquote>...</blockquote> wyświetlanie: w bloku Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek (zobacz także: Cytat). UWAGA! W Strict DTD tekst...
- Aktywne przyciski / Klinięcie
Zmiana wyglądu przycisku po kliknięciu: <a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmousedown="this.src = 'obrazek_klikniety.gif'" onmouseup="this.src = 'obrazek_podstawowy.gif'"></a> Przykład
- Aktywne przyciski / Podświetlenie i klinięcie
Zmiana wyglądu przycisku po podświetleniu myszką oraz po kliknięciu: <a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'" onmousedown="this.src = 'obrazek_klikniety.gif'" onmouseup="this.src = 'obrazek_podstawowy.gif'"></a> Przykład
- Tekst HTML / Zmiany <ins, del>
Treść wstawiona <ins>opis</ins> Treść usunięta <del>opis</del> Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe rozdziały, aby o tym zakomunikować, opis tych zmian można wpisać do znacznika <ins> (taki tekst może zostać automatycznie podkreślony). Natomiast do znacznika <del> wpisujemy opis usuniętych rozdziałów, które nie są już dostępne (zwykle tekst przekreślony). Przykład <ins, del> W tym tygodniu został dodany rozdział...