obrazek - Kurs HTML i CSS
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...tych znaczników. 10 min - Ćwiczenie praktyczne: strona z obrazkiem i sformatowanym tekstem Uczniowie tworzą stronę, na której wstawiają: obrazek oraz sformatowany tekst z pogrubieniem, kursywą i podkreśleniem. 5 min - Omówienie błędów, wspólna analiza kodu 5 min - Zadanie domowe: rozbudować stronę o kolejny obrazek, sformatować więcej tekstu i dodać kolejny akapit. Lekcja 3 - Listy i tabele w HTML Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi tworzyć listy...
Odsyłacze HTML / Mapa odsyłaczy <img usemap, map, area>...poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza). Po wywołaniu tej komendy, zostanie wczytany obrazek o podanej ścieżce dostępu. Następnie będzie on podzielony na kilka pól (w sposób niewidoczny), z których każde będzie przyporządkowane oddzielnemu odsyłaczowi. Dzięki temu na tylko jednym rysunku możemy umiejscowić więcej niż jeden odnośnik. Wiele edytorów HTML posiada wbudowany generator mapy odsyłaczy, dzięki któremu można w prosty i...
- Formularze HTML / Wysłanie formularza <input "submit, image">
...do obrazka" alt="informacja alternatywna"> </form> gdzie jako "ścieżka dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się obrazek, który ma zostać wyświetlony jako przycisk wysłania formularza. Natomiast zamiast "informacja alternatywna" można podać treść informacji, która powinna pojawić się w przypadku, gdy obrazek nie zostanie wyświetlony, a także po wskazaniu go myszką (atrybut ten nie jest konieczny). Polecenie wprowadza na ekran przycisk w postaci obrazka, po...
- HTML5 / Uwierzytelnienie <audio crossorigin, img crossorigin, link crossorigin, script crossorigin, video crossorigin>
...samej domeny (to samo co użycie crossorigin jako atrybut logiczny - tzn. bez podania wartości). Czyli przykładowo jeśli na naszej stronie wstawimy obrazek znajdujący się na innym serwerze, będziemy mieli pewność, że jego zawartość nie będzie w żaden sposób dopasowana do użytkownika, który aktualnie odwiedza naszą stronę (jest to wartość domyślna). use-credentials - zostaną wysłane pełne dane uwierzytelniające bez względu na domenę. Steruje przesyłaniem danych uwierzytelniających takich...
- HTML5 / Wstępne ładowanie <link "preload" as>
...w momencie, kiedy ich znacznik pojawi się w kodzie źródłowym HTML strony. Oznacza to, że jeśli na samym dole strony znajduje się np. jakiś duży obrazek, może on nie zdążyć się załadować do momentu, kiedy użytkownik przewinie do niego okno przeglądarki. Język HTML5 wprowadził specjalny mechanizm, dzięki któremu można przyspieszyć wczytywanie zewnętrznych elementów potrzebnych do wyświetlenia strony poprzez załadowane ich z wyprzedzeniem, zanim przeglądarka faktycznie będzie ich...
Selektory pseudoelementów CSS / Przed... :before...że nie został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red } To jest akapit, rozpoczynający się obrazkiem i tekstem "POCZĄTEK", pomimo że nie zostały one umieszczone w treści akapitu. Wartość atrybutu przed... :before {content: attr} Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie przed właściwą zawartością elementu wartości wybranego atrybutu, który...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...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 wyświetlenie treści...
- Selektory pseudoelementów CSS / Po... :after
...został on umieszczony w treści akapitu. Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji: p:after { content: " KONIEC " url(obrazek.gif); color: red } To jest akapit, kończący się tekstem "KONIEC" i obrazkiem, pomimo że nie zostały one umieszczone w treści akapitu. Wartość atrybutu po... :after {content: attr} Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie po właściej zawartości elementu wartości wybranego atrybutu, który został przypisany z poziomu...
- Tło CSS / Pozycja tła obrazkowego {background-position}
...być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów]. Natomiast jako "pozycja" należy wpisać: Jedną wartość: center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top - na górze bottom - na dole jednostka długości - odległość od lewej krawędzi Dwie wartości (oddzielone spacją): left top - lewy-górny róg left bottom - lewy-dolny róg right top - prawy-górny róg right bottom - prawy-dolny róg dwie jednostki długości, z których...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
...być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie) repeat - obrazek zostanie powielony na całej powierzchni round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka, zostanie on rozciągnięty w taki sposób, aby nie był przycięty) space - powielenie z...