przykład - Kurs HTML i CSS
Szablon strony na DIV-ach / Płynny szablon...na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone): Dwie kolumny: Nagłówek szablonu Menu nawigacyjne Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...itp. W celu wyznaczenia cyklu za pomocą wzoru najpierw podstawiamy pod wielkości A i B liczby całkowite (dodatnie, ujemne lub zero) - przyjmijmy dla przykładu wzór: 2n+1 (wprost w takiej postaci należy wpisać go do selektora). Teraz, kiedy znamy już konkretną postać wzoru, zaczynamy podstawiać do niego pod n kolejne liczby naturalne rozpoczynając od zera, a wynik całego wyrażenia określi kolejne numery wierszy, które otrzymają podany sposób formatowania: A=2, B=1 n wzór wynik 0 2*0+1 1...
HTML5 / Napisy do filmów <track>...zostać dodany, jak i pominięty. W tym przypadku raczej korzystniej będzie go dodać (Notatnik robi to automatycznie). Przykład <track> Zobacz przykład: TRACK Rodzaj napisów Istnieje możliwość podania więcej niż jednego znacznika <track> dla tego samego materiału wideo. Mogą to być tłumaczenia napisów na różne języki. W takim przypadku pomocny jest atrybut srclang="...", w którym podajemy nazwę kodową języka (zobacz: Skróty nazw języków). Oprócz tego zaleca się również podanie atrybutu...
- Odsyłacze HTML / Odsyłacz pocztowy <a "mailto">
(e-mail) Spis treści <a "mailto"> Odsyłacz pocztowy <a "mailto"> Ochrona adresu e-mail Dodatkowe parametry odsyłacza pocztowego Odsyłacz pocztowy <a "mailto"> <a href="mailto:adres e-mail">opis</a> gdzie jako "adres e-mail" należy podać adres poczty elektronicznej osoby, do której ma zostać wysłany list (np.: jan_kowalski@example.com). Dzięki temu odsyłaczowi, użytkownicy oglądający Twoją stronę, będą mogli wysłać list e-mail pod adres podany w poleceniu. Po kliknięciu takiego...
- Tabele HTML / Komórki nagłówkowe tabeli <th>
...nagłówek w tabeli HTML? W tym celu wystarczy wstawić normalny wiersz na początku tabeli, ale zamiast znaczników TD dodać w nim elementy TH. Na przykład, aby utworzyć dwukolumnową tabelę składającą się z jednego wiersza nagłówka i dwóch zwykłych wierszy, można się posłużyć następującym kodem: <table> <tr> <th>nagłówek, kolumna 1</th> <th>nagłówek, kolumna 2</th> </tr> <tr> <td>wiersz 1, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2...
- Tabele HTML / Łączenie komórek tabeli <td colspan rowspan>
...nich umieszczamy tylko jeden znacznik TD lub TH, ale dodajemy do niego atrybut colspan="..." o wartości odpowiadającej liczbie scalanych komórek. Na przykład, aby utworzyć tabelę składająca się z dwóch kolumn, gdzie w pierwszym wierszu komórki są scalone, można się posłużyć następującym kodem: <table> <tr> <td colspan="2">wiersz 1, kolumna 1+2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>. Co robi ROWSPAN? Jest to atrybut, który możemy dodać do...
- Formularze HTML / Przycisk <button>
<button type="rodzaj">Treść przycisku</button> gdzie "rodzaj" określa typ przycisku i można tutaj podać: "submit" - przycisk wysłania formularza (domyślnie) "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis">. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić...
- Formularze HTML / Ramy formularza HTML <form>
...W tym celu do kodu źródłowego strony trzeba dodać znacznik FORM z atrybutem wskazującym akcję, jaka ma zostać wykonana po wysłaniu formularza. Na przykład, aby po wypełnieniu formularza mógł on być wysłany na adres e-mail jan.kowalski@example.com, można się posłużyć następującym znacznikiem: <form action="mailto:jan.kowalski@example.com" method="post">...</form>. Jak wyśrodkować formularz w HTML? Aby ustawić na środku ekranu całą zawartość formularza, można przypisać mu odpowiedni...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...sposób zoptymalizować ładowanie arkuszy stylów, zobacz rozdział HTML5: Wstępne ładowanie, Priorytet ładowania. Przykład <link "stylesheet"> A oto przykładowy zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Strona kodowa @charset Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne...
- Wstawianie stylów CSS / Kaskadowość stylów
...important Kaskadowość stylów Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze...