wstawić - Kurs HTML i CSS
Losowy element...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 < limit && n >...
- Wykaz generatorów
...i tła strony oraz automatyczną konwersją DEC -> HEX i odwrotnie. Generator emotikon (emoji) Emoji to specjalne piktogramy graficzne, które możemy wstawić w zwykłym tekście. Szczególnym rodzajem tego typu ikon są graficzne emotikony pozwalające wyrażać emocje w tekście komputerowym. Dzięki temu generatorowi możesz szybko wyszukać dowolną ikonę emoji w bazie grubo ponad tysiąca piktogramów. Generator ikon Dzięki temu generatorowi możesz szybko wyszukać i pobrać darmowe ikony na stronę w...
HTML5 / Załącznik <figure, figcaption>...IMG i FIGCAPTION. Na przykład jeśli plik zdjęcia nazywa się "zdjecie.jpg" i znajduje się w tym samym katalogu co dokument *.html, w którym chcemy go wstawić, można się posłużyć następującym kodem: <figure> <img src="zdjecie.jpg" alt="Tekst zastępczy"> <figcaption>Podpis zdjęcia</figcaption> </figure>. W odróżnieniu od tekstu zastępczego - który jest używany na wypadek, gdyby zdjęcie nie mogło być załadowane - podpis zdjęcia zawsze pojawi się na stronie. Kiedy FIGURE a kiedy ASIDE? Oba te...
CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">W zasadzie aby rozpocząć przygodę z językiem CSS, wystarczy wstawić w nagłówku strony - tzn. w dowolnym miejscu pomiędzy znacznikami <head> oraz </head> - jedną dodatkową linijkę: <!doctype html> <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...
- HTML5 / Responsywny obrazek <picture, source>
...type="...", dzięki któremu przeglądarka sama wybierze sobie pierwszy z kolei, który obsługuje. Na końcu wewnątrz znacznika PICTURE zawsze należy wstawić element IMG w najpowszechniej obsługiwanym formacie graficznym (np. JPEG). Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek. Przykład <picture, source type> <picture> <source srcset="zdjecie.webp" type="image/webp"> <source srcset="zdjecie.jxr" type="image/vnd.ms-photo"> <img src="zdjecie.jpg...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
...ale jednocześnie chcielibyśmy, żeby tylko treść wstawiona w akapitach była jednak ustawiona do lewej strony. W tym celu w arkuszu stylów wystarczy wstawić następujący kod: p { text-align: left; }. Jak wyśrodkować w CSS? Jeśli chcemy, aby wszystkie akapity na stronie były ustawione na środku ekranu, to w arkuszu stylów wystarczy wstawić następujący kod: p { text-align: center; }. Możliwe jest również wycentrowanie tylko jednego akapitu. W tym celu trzeba się jednak posłużyć kodem HTML...
- CSS dla zielonych / Kolor odsyłaczy CSS {color} :hover
...zmienić kolor odnośnika w CSS? Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie były koloru czerwonego, to w arkuszu stylów wystarczy wstawić następujący kod: a { color: red; }. Jak działa hover CSS? Słowo kluczowe :hover (z dwukropkiem na początku) to tzw. pseudoklasa CSS. Dzięki niej możemy określić, jak ma się zmienić wygląd elementu po wskazaniu go myszką. Na przykład jeśli chcemy, aby wszystkie hiperłącza na stronie po naprowadzeniu wskaźnika myszki zmieniały kolor na...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...nie może być spacji! Następnie w kodzie HTML wystarczy objąć znacznikiem wybrany tekst: <div class="obramowanie">...</div>. Jeśli na stronie chcemy wstawić więcej takich samych ramek, należy powielić tylko drugie polecenie. Jak zrobić ramkę w CSS? Aby ująć tekst w ramkę z tłem np. o czerwonym kolorze, musimy wykonać dwa kroki. Najpierw w arkuszu stylów CSS wstawiamy następujący kod: .ramka { background-color: red; } - zwracam uwagę, że na początku tego kodu znajduje się znak kropki, a...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden wyraz nie zostanie ucięty w środku. W takiej sytuacji znacznie lepiej by było wstawić na końcu wiersza wielokropek, który pozwoli czytelnikowi uniknąć nieporozumień. Oczywiście wielokropka nie możemy tam wstawić ręcznie, ponieważ nigdy nie wiadomo, jak się ułoży tekst na stronie (różne rozdzielczości ekranu, kroje i ustawienia wyświetlania czcionek). Właśnie na taką okoliczność została stworzona deklaracja "text-overflow...
- HTML dla zielonych / Pozioma linia HTML <hr>
<hr> Pozwala wstawić na stronie poziomą linię (ang. horizontal rule), za pomocą której np. można rozdzielić sąsiednie grupy akapitów wyraźnie różniące się między sobą tematycznie. UWAGA! Znacznik <hr> nie posiada w języku HTML znacznika zamykającego! Przykład <hr> <p>Akapit...</p> <p>Akapit...</p> <hr> <p>Akapit...</p> <p>Akapit...</p> Pytania i odpowiedzi <hr> Jak napisać poziomą linię w HTML? W celu dodania poziomej linii na stronie WWW należy posłużyć się znacznikiem <hr>. Jak...