obrazek tekstu - Kurs HTML i CSS
Rozmiary CSS / Szerokość i marginesy automatyczne...niezwykle długiego wyrazu albo ustawienia blokady przełamania wierszy bądź kiedy wstawiony zostanie element z określoną dużą szerokością, jak np. obrazek. Aby do tego nie dopuścić, można dla wszystkich bloków ustawić dodatkowy styl overflow: hidden, co spowoduje przycięcie prawej części treści, która nie mieści się w wyznaczonej szerokości. Co prawda wtedy nie będzie można odczytać uciętej treści, ale układ strony nie zmieni się w sposób niekontrolowany. 6. Elementy z oblewaniem (float)...
- Tabele CSS / Rozplanowanie tabeli {table-layout}
...rozmiar, do którego można ścieśnić komórkę tak, aby jej zawartość mieściła się jeszcze w jej obrębie. Jeżeli w komórce znajduje się tylko obrazek lub inny element o ustalonych rozmiarach, to określa on minimalną możliwą szerokość takiej komórki. Natomiast w przypadku tekstu będzie to zwykle szerokość najdłuższego wyrazu (biorąc pod uwagę, że tekst może się zawijać do następnych linii). Maksymalna możliwa szerokość to największy rozmiar, do którego można rozszerzyć komórkę tak, aby...
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
...Nowy model obramowania tabeli Przykład komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 Pozycjonowanie Przykład To nie jest obrazek! To nie jest obrazek! Zmiana kształtu kursora. Przykład Wskaż ten tekst myszką Kursor wczytany z pliku: Wskaż ten tekst myszką Zmiana wyglądu odsyłacza, po wskazaniu go myszką Przykład Wskaż ten tekst myszką Dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania. I wiele innych. Dodatkowo w ciągłym...
- Menu w CSS / Pionowe menu
...wygenerować znacznika <img>, który byłby nam potrzebny do stylizacji punktów. Można natomiast wstawiać grafikę w tle. Tak właśnie został osadzony obrazek punktów listy (punkt.gif). Normalnie jeżeli grafika wstawiona w tle jest mniejsza od rozmiarów elementu, zostaje powielona, tak aby zajmowała cały dostępny obszar. W naszym przypadku takie zachowanie nie jest pożądane, dlatego blokujemy to powielanie (no-repeat). Musimy również określić lewy margines wewnętrzny pozycji listy (padding-left)...
Losowy element...z innymi serwisami. Pozwala to zaoszczędzić miejsce na stronie i skrócić czas wczytywania, ponieważ za każdym razem ładowany jest tylko jeden obrazek. Aby wstawić na stronę losowy tekst lub obrazek, należy w wybranym miejscu dokumentu wkleić następujący kod: <script> Array.prototype.random = function(limit) { if (typeof limit == 'undefined' || limit < 0) limit = 1; else if (!limit) limit = this.length; for (var i = 0, source = this, target = new Array(), n = source.length; i <...
- Ochrona strony
Spis treści Ochrona strony Blokada prawego klawisza myszki Blokada zaznaczania i kopiowania tekstu Blokada przeciągania elementów strony Blokada drukowania Blokada zapisu wybranych zdjęć Blokada paska narzędziowego obrazów Blokada klawisza Print Screen Podsumowanie Ochrona strony Czasami zdarza się, że chcemy opublikować w sieci jakieś ważne informacje. Zależy nam jednak, aby można się było z nimi zaznajomić tylko bezpośrednio na naszej stronie WWW i nie chcemy udostępniać takich...
HTML dla zielonych / Znaczniki HTML...on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie. Widoczne są tylko efekty jego działania (np. wstawienie obrazka). Ja sam aby umieszczony powyżej znacznik <b> był widoczny, musiałem się posłużyć pewną "sztuczką" (jeśli nie możesz wytrzymać i już teraz chcesz wiedzieć jaką, zajrzyj na stronę: Znaki specjalne). Ponieważ znaki: "<...
Dla nauczycieli / Scenariusz lekcji informatyki dla branżowej szkoły I stopnia...odsyłacze) Wyjaśnienie atrybutów: src="...", alt="...", href="...", target="_blank" (nowe okno). 20 min - Praca praktyczna Uczniowie wstawiają obrazek na stronie. Tworzą link do innej strony i do adresu e-mail. 10 min - Analiza błędów i zapisanie pracy 5 min - Zadanie domowe: dodać więcej obrazków i linków. Lekcja 3 - Formatowanie strony i style CSS Czas trwania: 45 minut Cele szczegółowe Uczeń rozumie podstawy CSS. Uczeń dodaje style do elementów HTML. Materiały CSS dla...
- Szablon strony na DIV-ach / Responsywny szablon
...Responsywne obrazki Następnie powinniśmy zadbać, aby w miarę możliwości wszystkie ilustracje na stronie były responsywne - zobacz: Responsywny obrazek. Punkty przeskoku Na koniec pozostaje użycie zapytań mediów w celu zdefiniowania dynamicznych zmian w szablonie strony w zależności od dostępnej szerokości ekranu urządzenia. Zauważmy, że w wielu przypadkach zwykle nie ma potrzeby, aby szablon naszej strony idealnie dopasowywał się do maksymalnej poziomej przestrzeni na ekranie. Na...
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia spoczynkowego o 50px (pikseli), a od górnej o 45px. Położenie spoczynkowe Przykład pozycjonowania tekstu: To jest tekst powiększony To jest pozycjonowane pogrubienie tekstu Pozycjonowanie tabel: komórka1 komórka2 komórka3 komórka4 komórka1 komórka2 komórka3 komórka4...