wstawianie - Kurs HTML i CSS
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...Omówienie roli multimediów w stronach internetowych i ich znaczenia. 10 min - Wstawianie wideo i audio Omówienie tagów <video> i <audio>, wstawianie plików multimedialnych na stronę oraz ich atrybuty (np. controls, autoplay, loop). 10 min - Wstawianie widżetów (iframe) Wyjaśnienie tagu <iframe>, jego zastosowanie i sposób osadzania zewnętrznych treści (np. YouTube). 10 min - Ćwiczenie praktyczne: strona z obrazkami, wideo i audio Uczniowie tworzą stronę, na której wstawiają...
Oprawa graficzna / Zamiennik obrazkowy...połączeń np. w przypadku telefonii komórkowej, może być sporym obciążeniem finansowym, a już na pewno znacząco wydłuży ładowanie strony. Statyczne wstawianie obrazków, tworzących oprawę graficzną, jest niepoprawne semantycznie. Każdy znacznik IMG obowiązkowo musi posiadać atrybut alt="...", który jest przydatny np. dla osób niewidomych. Jednak w takim przypadku będzie on kompletnie pozbawiony sensu, ponieważ nie ułatwia, tylko utrudnia odbiór treści. Syntezator mowy, używany przez osobę...
- Czcionki CSS / Wielkość czcionki {font-size}
Spis treści {font-size} Wielkość czcionki {font-size} Najlepszy sposób ustalania wielkości czcionki Jednostka "em" Jednostka "px" Jednostka "pt" Podsumowanie Wielkość czcionki {font-size} selektor { font-size: rozmiar } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: Imienne...
- Selektory specjalne CSS / Klasy selektorów <... class>
...elementów - umieścisz w zewnętrznym arkuszu stylów, tym szybciej przebiegnie późniejsza ewentualna modyfikacja stron! Dobrym pomysłem jest również wstawianie komentarza przed każdą deklaracją klasy w arkuszu (znaki: /* ... */), w którym opisuje się jej przeznaczenie. Po jakimś czasie w Twoim arkuszu stylów może znaleźć się tyle klas, że zapomnisz, do jakich elementów się one odnosiły. Wtedy właśnie bardzo przydatny może się okazać wpisany wcześniej komentarz. Przykład <... class> Jeżeli w...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
selektor { background: none } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy...
- Pozycjonowanie CSS / Pozycja statyczna {position: static}
selektor { position: static } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Przywraca normalne pozycjonowanie elementu. Jest to przydatne np. w celu usunięcia ogólnej deklaracji pozycjonowania, umieszczonej w arkuszu stylów. Wystarczy wtedy, dla wybranych elementów strony, umieścić powyższe polecenie w stylu inline. Spowoduje to usunięcie pozycjonowania dla tych elementów, a jednocześnie utrzymanie dla innych (tego samego typu). Przykład {position: static}...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanegoJeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
- Selektory pseudoklas CSS / Pusty element :empty
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) selektor:empty { cecha: wartość } Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Zdarza się, że w dokumencie HTML znajdują się elementy, które nie zawierają żadnej treści, ani dzieci. Możemy mieć z tym do czynienia w przypadku elementów, które z definicji nie posiadają znacznika...
- Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej
Spis treści Wstęp Cel ogólny cyklu lekcji Wymagania podstawy programowej Lekcja 1 - Wprowadzenie do HTML i struktury dokumentu Lekcja 2 - Wstawianie obrazków i linków Lekcja 3 - Dostosowanie wyglądu strony i podsumowanie Zadanie końcowe / projekt Podsumowanie Wstęp Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla klas IV-VIII szkoły podstawowej z zakresu informatyki oraz materiałach ze strony HTML dla zielonych. Lekcje zostały rozplanowane na...
Multimedia HTML / Obrazek HTML <img>...nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Edytory HTML posiadają często specjalny generator, który wspomaga wstawianie multimediów na strony WWW (nie tylko obrazków). Należy jednak pamiętać, że multimedia bardzo wyraźnie zwiększają objętość strony, a co za tym idzie, wydłużają czas wczytywania. Większość bardziej zaawansowanych programów graficznych udostępnia funkcję kompresji obrazów, co pozwala zmniejszyć ich objętość bez wyraźnego spadku jakości...