link strony - Kurs HTML i CSS
HTML5 / Nowe atrybuty HTML5...(dla wspieranych metod wprowadzania) autofocus Wszystkie elementy Automatycznie ustawia zogniskowanie (fokus) na elemencie po załadowaniu strony blocking LINK (rel="stylesheet" lub rel="expect"), SCRIPT, STYLE Czy element może potencjalnie blokować wyświetlanie charset META Deklaracja strony kodowej contenteditable Wszystkie elementy Czy element jest edytowalny crossorigin AUDIO, IMG, LINK, SCRIPT, VIDEO Sposób, w jaki element obsługuje żądania z mechanizmem CORS...
- Nagłówek i treść HTML / Strona mobilna <link media>
<head> <link rel="alternate" media="media" href="adres"> </head> gdzie jako "media" podaje się typ(y) mediów alternatywnych albo zapytanie mediów. Natomiast zamiast "adres" wpisuje się bezwzględny adres strony (rozpoczynający się od http:// lub https://), która stanowi odpowiednik bieżącego dokumentu specjalnie przystosowany na podane urządzenia. W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu...
- HTML5 / Wstępne ładowanie <link "preload" as>
(interpretuje: Firefox 85, Opera 37, Chrome 50) <link rel="preload" as="rodzaj" type="typ" href="lokalizacja"> rodzaj W zależności od języka, w którym wybrane zasoby zewnętrzne są używane, można podać następujące wartości: w języku HTML - audio, document (dokument HTML), embed, frame, iframe, image, object, track, video w języku CSS - font, style (zewnętrzny arkusz stylów oraz import arkusza stylów) w języku JavaScript - fetch, json, script w języku XML - xslt (ang. Extensible...
- Nagłówek i treść HTML / Strona kanoniczna <link "canonical">
...jest przekazywany identyfikator sesji - np. index.php?PHPSESSID=0123456789abcdef0123456789abcdef lub index.php?sid=0123456789abcdef0123456789abcdef linki prowadzące do tej samej strony mają różną postać: jeśli domyślnym numerem strony artykułu będzie 1, to adres artykul.php?strona=1 może być równoważny artykul.php podobnie kolejność parametrów adresu URL, podawanych po pytajniku i rozdzielonych znakami "&", zwykle nie ma znaczenia, tzn. adres artykul.php?id=1&strona=1 zwykle jest równoważny...
Menu drzewiaste / Skrypt menu drzewiastego...li a:hover { text-decoration: underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Tree(id) { this.id = id; var url = unescape(window.location.href.replace(/#.*/, '')); var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, ''); this.click...
CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">...<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ł rozszerzenie *.css. W powyższym przykładzie...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...Wyjaśnienie, czym są odsyłacze i jak je tworzyć Odsyłacz do innej strony Odsyłacz do innej podstrony Odsyłacz do adresu e-mail Przykłady linków do stron, podstron i adresów e-mail. 10 min - Ćwiczenie praktyczne: utworzenie strony z tytułem, nagłówkami, akapitem i odsyłaczem Uczniowie tworzą dokument HTML zawierający: tytuł, nagłówek, akapit z tekstem, odsyłacz do zewnętrznej strony. Używają interaktywnego edytora lub osobnego edytora HTML, aby wprowadzić zmiany i wyświetlić...
- Menu w CSS / Poziome menu
...nowrap; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich. Zalety: Prawidłowa interpretacja w większości przeglądarek Możliwość łatwego wyrównania odnośników do lewej lub prawej strony, a także wyśrodkowania Nie wpływa na elementy znajdujące się poniżej Wady: Brak możliwości ustalenia jednakowej...
- Czcionki CSS / Czcionki osadzone @font-face
...osoby, które obawiają się, że Google kiedyś zaprzestanie udostępniania darmowych czcionek, mogą skopiować sobie pliki na własny serwer 😉 <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=rodzaj"> <style> selektor { font-family: rodzaj } </style> </head> Jeżeli nazwa rodzaju czcionki zawiera spację, w adresie arkusza musi być ona zastąpiona znakiem plusa. Natomiast już wewnętrznym arkuszu CSS wstawiamy normalnie znak spacji. Oczywiście jako wartość atrybutu...
- Podcast HTML / #9 HTML5
...ich pobliże, poprawiając wydajność początkowego ładowania strony. fetchpriority: pozwala określić priorytet ładowania krytycznych zasobów (<img>, <link>, <script>) jako low, high lub auto, co zapewnia szybsze wczytywanie ważnych elementów. rel="preload" w <link>: służy do wstępnego ładowania zewnętrznych zasobów, zanim będą potrzebne, za pomocą atrybutów as="..." (określającego rodzaj zasobu, np. image, script, style) i href="...". async w <script>: włącza asynchroniczne ładowanie skryptu...