title - Kurs HTML i CSS
Komendy HTML 4.01 / Specyfikacja HTML...informacji o języku HTML5, zobacz: Składnia (X)HTML5 Nowe elementy HTML5 Nowe atrybuty HTML5 Zmienione elementy i atrybuty HTML5 Przykład <b title id> Znacznik B można wpisać następująco: <b title="Tytuł" id="identyfikator">Tekst pogrubiony</b> albo też: <b>Tekst pogrubiony</b> przy czym znacznik <b> jest otwierający, natomiast </b> - zamykający.
- Tabele HTML / Komórki nagłówkowe tabeli <th>
...komórka4 Dymek narzędziowy Dla bardzo obszernych tabel, z dużą ilością komórek nagłówkowych, przydatne może się okazać, określenie atrybutu title="tekst" dla każdej zwykłej komórki <td>. Jako wartość tego atrybutu podajemy tekst, który powinien pojawić się na ekranie w dymku podpowiedzi, kiedy użytkownik wskaże myszką określoną komórkę tabeli. Można wpisać tam treść nagłówka, do którego należy dana komórka. Ułatwi to czytanie, jeśli komórki nagłówkowe znikną już z ekranu, z powodu...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl"> <head> <title>Przykład wewnętrznego arkusza CSS</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font-weight: bold; } </style> </head> <body> <p> To jest tekst, który używa naszego <code>wewnętrznego arkusza stylów</code>. </p> </body> </html> Wyświetlenie dokumentu XHTML jako czystego XML wywoła...
- HTML5 / Szablon strony w HTML5
...Spróbujmy to wykonać, przekształcając kod podany w rozdziale: Szablon strony na DIV-ach. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> </head> <body> <div id="top"> <header id="NAGLOWEK">Nagłówek szablonu</heade> <nav id="MENU">Menu nawigacyjne</nav> <aside id="INFORMACJE">Dodatkowe informacje</aside> <article id="TRESC">Treść strony</article> <footer id="STOPKA">Stopka serwisu</footer> </div> </body> </html> Znaczenie wyróżnionych...
- HTML5 / Możliwy koniec linii <wbr>
...może być użycie znacznika PRE w połączeniu z elementami WBR. Przykład <wbr> <pre> <!doctype html> <html> <head><wbr><title>...</title><wbr></head> <body><wbr>...<wbr></body> </html> </pre> <p>Popsuła<wbr>mi<wbr>się<wbr>spacja</p>
- HTML5 / Główna treść <main>
...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> <main> <h1>Matrix</h1> <nav> <ul> <li><a...
- HTML5 / Walidacja pól formularza <input pattern>
...formacie". Niestety użytkownik może się nie domyślić, co właściwie oznacza ten "wymagany format". Dlatego zaleca się dodatkowo ustawić atrybut title="...", w którym możemy bardziej szczegółowo opisać, co powinno być wpisane w danym polu. W takiej sytuacji przeglądarka może dopisać wartość tego atrybutu do komunikatu błędu. Atrybut pattern="..." nie blokuje wysłania formularza, jeśli użytkownik w ogóle nie wypełni pola. Może to być pomocne, kiedy nie jest ono obowiązkowe, ale gdy już...
Definicje / Drzewo dokumentu...w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root). Przykład Po wpisaniu: <html> <head> <title>...</title> </head> <body> <h1>...</h1> <p>...</p> <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> </body> </html> Otrzymamy następujące drzewo dokumentu: gdzie: Element TABLE jest dzieckiem elementu BODY. Element TABLE jest potomkiem elementu...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...dodatkową linijkę: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał...
Ochrona strony...Treść dokumentu </div> </body> </html> Oczywiście w nagłówku dokumentu mogą - a nawet powinny (!) - znaleźć się również inne znaczniki (<meta>, <title>...</title> itp.). Nie można zapomnieć o deklaracji DTD. Nic nie stoi również na przeszkodzie, aby dodać atrybuty do znacznika BODY, określające np. kolor tekstu i tła strony. Ważne jest jedynie, aby skrypt został wstawiony w ramy dokumentu tak jak pokazano. Podsumowanie Niestety takie rozwiązania zwykle nie są idealne i zawsze znajdzie...