przykład html - Kurs HTML i CSS
HTML5 / Główna treść <main>...nie może być również umieszczony - bezpośrednio lub pośrednio - wewnątrz znaczników innych niż: HTML, BODY, DIV, FORM. Przykład <main> <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Matrix - Serwis kinomaniaków</title> <head> <body> <header> Serwis kinomaniaków <nav> <ul> <li><a>Matrix</a></li> <li><a href="incepcja.html">Incepcja</a></li> <li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li> </ul> </nav> </header>...
- HTML5 / Pominięcie walidacji formularza <form novalidate>
(interpretuje: Internet Explorer 10, Firefox 4, Opera 15, Chrome 10) <form novalidate>...</form> novalidate to atrybut logiczny (wstawiany bez wartości), który pozwala pominąć wszelką weryfikację pól formularza. Oznacza to, że użytkownik będzie mógł wysłać formularz, nawet jeżeli nie wypełni wszystkich obowiązkowych pól albo poda nieprawidłowe wartości (np. wpisze adres e-mail w niepoprawnym formacie). Przykład <form novalidate, input required> Mimo oznaczenia pola jako obowiązkowe...
Selektory pseudoklas CSS / Korzeń :root...HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu: html { cecha: wartość } Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia. Przykład :root Po wpisaniu w arkuszu stylów: :root p { color: red } a w dowolnym miejscu strony: <p>To jest akapit</p> powinniśmy otrzymać tekst koloru czerwonego: To jest akapit...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...padding, border-width, border-style, border-color, border-radius} Wszystkie powyższe deklaracje można ze sobą dowolnie łączyć. Na przykład jeśli w arkuszu stylów umieścimy następującą definicję klasy: .ramka { background-color: silver; padding: 10px; border-width: 1px; border-style: solid; border-color: gray; border-radius: 5px; } a następnie w dowolnym dokumencie HTML wstawimy taki kod: <div class="ramka">To jest przykład ramki z tekstem...</div> to na stronie...
- 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...
- Znaki specjalne HTML / Encje HTML
...tam tabelę z wykazem znaków specjalnych (tzw. encji), których nie można wpisać bezpośrednio z klawiatury. Stosuje się tu pewną "sztuczkę". Na przykład jeśli chcemy napisać tekst: <p>, wpisujemy zamiast niego: <p> lub <p> i gotowe. Przeglądarka sama zinterpretuje te znaki jako właściwe. Jak widać, każdy znak specjalny rozpoczyna się od ampersand ("&"), a kończy średnikiem (";"). Z tego powodu, jeśli chcemy, aby ampersand pojawił się na ekranie, powinniśmy użyć: & lub...
- 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...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...{ list-style-type: nazwa; } Punkt pierwszy Punkt drugi Punkt trzeci Punkt czwarty Punkt piąty Punkt szósty Zwróć uwagę, że w powyższym przykładzie symbole muszą być ujęte w cudzysłowy (albo apostrofy), ponieważ niestandardowy identyfikator nie może się rozpoczynać od cyfry. System addytywny @counter-style {system: additive} (CSS 3 - interpretuje Firefox 33, Opera 77, Chrome 91) @counter-style typ { system: additive; additive-symbols: symbole-addytywne; } Symbole-addytywne...
- Tabele HTML / Struktura tabeli HTML <table, tr, td>
...tabeli. Z kolei wewnątrz każdego znacznika TR trzeba dodać taką samą liczbę elementów TD, które tworzą pojedyncze komórki (rubryki) tabeli. Na przykład, aby utworzyć tabelę z dwoma wierszami i dwiema kolumnami, można się posłużyć następującym kodem: <table> <tr> <td>wiersz 1, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>. Co to jest TD w HTML? Jest to znacznik tworzący nową komórkę w tabeli - czyli...
- HTML5 / Element edytowalny <... contenteditable>
...atrybut contenteditable="true" do dowolnego elementu HTML, co sprawi, że użytkownicy będą mogli edytować jego zawartość bezpośrednio na stronie. Na przykład: <div contenteditable="true">Edytowalny tekst</div>. To sprawia, że zawartość tego <div> stanie się edytowalna. Jaki jest pożytek z contenteditable w HTML? Atrybut contenteditable w HTML jest użyteczny do tworzenia obszarów na stronie, które użytkownicy mogą edytować bezpośrednio w przeglądarce, co jest przydatne w aplikacjach...