dodać - Kurs HTML i CSS
Pozycjonowanie CSS / Ustawienie {float, vertical-align}...Pytania i odpowiedzi {float, vertical-align} Jak ustawić obraz w CSS? Aby ustawić obraz w CSS za pomocą właściwości float, można dodać tę właściwość do elementu zawierającego obraz i ustawić ją na left lub right w zależności od tego, po której stronie chcemy umieścić obraz. Jak ustawić zdjęcie po prawej stronie CSS? Aby ustawić zdjęcie po prawej stronie w CSS, można użyć właściwości float z wartością right, na przykład: "float: right". To spowoduje, że obraz zostanie...
- Obramowanie CSS / Cień {box-shadow}
...i rozmiar cienia. Dzięki temu można uzyskać efekt wypukłości, odcinania elementu od tła lub inny efekt wizualny. Jak zrobić cień w CSS? Aby dodać cień do elementu w CSS, można użyć właściwości box-shadow i określić wartości cienia, takie jak przesunięcie poziome, przesunięcie pionowe, rozmycie, kolor itp. Na przykład: "box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);" dodaje cień z przesunięciem 3 piksele poziomo i pionowo, rozmyciem 5 pikseli i kolorystyką szaro-czarną. Jak zrobić...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...możliwości wstawiania stylów CSS na stronach internetowych, zobacz rozdział: Wstawianie stylów. Pytania i odpowiedzi <link "stylesheet"> Jak dodać styl CSS? Najbardziej zalecanym sposobem wstawienia stylów CSS jest dodanie arkusza stylów do dokumentu HTML. Jak dodać arkusz stylów do HTML? Najczęściej spotykanym sposobem jest zapisanie arkusza stylów CSS w osobnym pliku, a następnie wstawienie odniesienia do niego w nagłówku dokumentu HTML. Na przykład jeśli plik arkusza stylów...
- CSS dla zielonych / Czcionka CSS {font-size, font-family}
...{font-size, font-family} Jak zwiększyć rozmiar czcionki? W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-size: large; } ustawi duży rozmiar tekstu na całej stronie. Jak zmienić czcionkę w CSS? W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { font-family: Arial, Helvetica, sans-serif; }...
HTML5 / Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>...być ładowane z większym priorytetem w celu poprawy wydajności strony. Atrybut ten może przyjmować wartości takie jak high, low, lub auto. Jak dodać fetchpriority="high"? Aby dodać fetchpriority="high", należy umieścić ten atrybut w tagu <img>, <link> lub <script> dla zasobów, które mają mieć wysoki priorytet pobierania. Na przykład: <img src="image.jpg" fetchpriority="high"> lub <link rel="preload" as="style" href="style.css" fetchpriority="high">. To zapewni, że przeglądarka pobierze...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...Kiedy mamy już przygotowaną grafikę pojedynczego kafelka tapety, wstawienie go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów: body { background-color: kolor tła; background-image: url(ścieżka dostępu do obrazka); color: kolor tekstu; } W wyróżnionych miejscach należy wpisać odpowiednio: kolor tła Definicja koloru który wyświetli się w tle strony w następujących przypadkach: w miejscach gdzie grafika tapety będzie miała elementy...
- HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
...z tego samego źródła? Aby traktować zawartość IFRAME jako pochodzącą z tego samego źródła (ang. same-origin), należy do atrybutu sandbox="..." dodać wartość allow-same-origin. Dzięki temu zawartość ramki będzie miała dostęp do zasobów strony nadrzędnej oraz odwrotnie, co umożliwia wymianę danych między nimi. Jak możemy pozwolić, aby ramka IFRAME w trybie piaskownicy uruchamiała skrypty z tej samej domeny? Aby pozwolić, by ramka IFRAME w trybie piaskownicy uruchamiała skrypty z tej...
Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej...przynajmniej 3 znaczników formatowania tekstu. Lekcja 2 - Wstawianie obrazków i linków Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi dodać obrazek i utworzyć odsyłacz. Rozumie znaczenie atrybutów src="...", href="...", alt="...". Materiały Wstawienie obrazka HTML Wyśrodkowanie obrazka Odsyłacz do podstrony Odsyłacz do adresu internetowego Odsyłacz obrazkowy Odsyłacz pocztowy Podcast HTML: #1 HTML dla zielonych Przebieg 5 min - Powtórzenie z poprzednich zajęć...
Aktywne przyciski / PodświetlenieAby wprowadzić na stronę przyciski obrazkowe, które zmieniają swój wygląd, po wskazaniu ich myszką, wystarczy dodać do znacznika <img> dwa dodatkowe atrybuty: onmouseover="..." i onmouseout="...": <a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'"></a> Przykład
- Menu drzewiaste / Skrypt menu drzewiastego
...href="...">Dokument 4</a></li> </ul> Folder 1 Dokument 1.1 Dokument 1.2 Dokument 2 Dokument 3 Dokument 4 Na koniec warto dodać, że opisywany tutaj skrypt posiada system automatycznego wykrywania aktualnie załadowanej strony. Dzięki niemu po wczytaniu dokumentu wybranego na liście, gałąź w drzewie menu w której znajduje się odpowiadający link jest na starcie rozwinięta, a sam link zostaje wyróżniony przy użyciu klasy CSS pod nazwą active, co natychmiast wskazuje...