przykład html - Kurs HTML i CSS
HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>...wprowadzania danych poprzez automatyczne sugerowanie i uzupełnianie wartości na podstawie wcześniejszych wpisów lub zapisanych danych. Na przykład, w formularzu <input type="text" name="email"> przeglądarka może automatycznie wypełnić adres e-mail użytkownika, który był wcześniej używany. Jak wyłączyć autouzupełnianie w HTML? Autouzupełnianie można wyłączyć w HTML, dodając atrybut autocomplete="off" do tagu <form>, <input>, <select> lub <textarea>. Na przykład: <input...
Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?...komentarzy w stylu C (długich): /* ... */. W trybie zgodności jeżeli deklaracja zawiera nierozpoznawaną wartość, zostaje pominięta w całości. Na przykład po podaniu: span { text-decoration: underline cross-out overline } tekst nie zostanie nawet podkreślony ani nadkreślony, ponieważ wartość cross-out jest nieprawidłowa. Natomiast starsze wersje Internet Explorera interpretowały deklarację do pierwszego nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie...
- Szablon strony na DIV-ach / Responsywny szablon
...to lista najczęściej używanych szerokości ekranu, przy których zachodzą istotne zmiany w szablonie naszej strony. Istotną zmianą może być na przykład: Zmiana typu szablonu ze stałego (który zwykle może być bardziej przydatny na dużych ekranach panoramicznych) na płynny (laptopy i większe tablety) Ułożenie menu i treści w jednej kolumnie (smartfony i mniejsze tablety bądź czytniki e-booków) oraz być może zupełne ukrycie niektórych elementów strony, które mogą być mało przydatne na...
- HTML dla zielonych / Akapit HTML <p "text-align">
<p>Tu wpisz treść akapitu</p> Akapit (w pewnych warunkach nazywany paragrafem) to pewien ustęp w tekście. Następujące po sobie akapity, są rozdzielone linijką przerwy. Treść akapitu należy wpisać pomiędzy znacznikami <p> oraz </p>. Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: <br><br>, można po prostu objąć...
- Tekst HTML / Kod poprawny semantycznie
...ale nie jest to wymagane. Są to np.: H1-H6 (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie...
- HTML5 / Zdarzenia HTML5
...działania użytkownika. Zdarzenia w HTML można przypisywać bezpośrednio do elementów jako atrybuty, dodając przedrostek on przed nazwą zdarzenia. Na przykład, aby wykonać akcję po kliknięciu przycisku, można użyć atrybutu onclick="...": <button onclick="alert('Kliknięto przycisk!')">Kliknij mnie</button> W przypadku gdy wybrane zdarzenie nie posiada odpowiadającego mu atrybutu (patrz tabela poniżej), można się posłużyć znacznikiem <script>...</script>. Wpisuje się w nim bezpośrednio kod...
- CSS dla zielonych / Edytory CSS
...to często dawno przestały być już rozwijane. Najlepszym rozwiązaniem jest użycie edytora HTML, który ma wbudowaną obsługę również języka CSS. Na przykład Brackets to jeden z lepszych edytorów HTML i CSS. Posiada szereg wbudowanych funkcji przydatnych przy tworzeniu stron internetowych. Obsługuje instalowanie darmowych rozszerzeń, które mogą dodatkowo zwiększyć jego możliwości. Jest przy tym całkowicie darmowy i dostępny w wersjach dla każdego systemu operacyjnego.
- Formularze HTML / Hasło <input "password">
...głównej, do której wszyscy mają normalny dostęp, wstawić następujący kod: <form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false"> <input type="password" name="password"> <input type="submit" value="OK"> </form> Hasłem w tym przypadku jest nazwa strony bez rozszerzenia, którą chcemy zabezpieczyć. Przykładowo: hasłem do strony tajna_strona.html (która znajduje się w tym samym katalogu co strona główna, czyli tam gdzie wstawiliśmy powyższy skrypt)...
Rozwijane menu...się umieścić w innym miejscu również zwykłych odsyłaczy tekstowych. <select onchange="self.location.href = this.value"> <option VALUE="adres1.html">Opis1</option> <option VALUE="adres2.html">Opis2</option> ... </select> adres1.html, adres1.html Adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać po wybraniu danej pozycji na liście Opis1, Opis2 Test, który pojawi się na liście i po wybraniu których nastąpi wczytanie stron Można również zaznaczyć opcję domyślną...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...inteligentne ładowanie? Inteligentne ładowanie można włączyć, stosując atrybut loading="lazy" dla elementów, takich jak <img> i <iframe>. Na przykład: <img src="obrazek.jpg" loading="lazy">. Dzięki temu zasoby te będą ładowane tylko wtedy, gdy użytkownik przewinie stronę w ich pobliże. Dlaczego leniwe ładowanie? Leniwe ładowanie jest stosowane, aby przyspieszyć czas ładowania początkowej części strony, zmniejszając ilość zasobów ładowanych od razu. Pozwala to na szybsze...