przykład - Kurs HTML i CSS
Tekst HTML / Blok <div><div>...</div> wyświetlanie: w bloku Polecenie to wydziela większy blok tekstu. W odróżnieniu od akapitu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy zastosować znacznik <p>...</p> albo <br>). Przykład <div> To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy blok... To jest pierwszy...
Jednostki CSS / Częstotliwość...Wartość ujemna jest niedozwolona! Jednostkami częstotliwości są: Hz - herce (1Hz = 0.001kHz) kHz - kiloherce (1kHz = 1000Hz) Na przykład: dźwięk o częstotliwości 200Hz (lub 200hz) jest basowy, a o częstotliwości 6kHz (lub 6khz) - sopranowy. Jeśli chcesz szybko przeliczyć wartości pomiędzy różnymi jednostkami częstotliwości, to tutaj możesz skorzystać ze specjalnego generatora. ✅ Rozpocznij przeliczanie jednostek
- 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...
- Tekst HTML / Wyświetlanie znaczników HTML
Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii. Wyjątkiem od tej reguły...
- 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
- 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
- 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...