przykład - Kurs HTML i CSS
CSS dla zielonych / Kolor odsyłaczy CSS {color} :hover...Odsyłacz odwiedzony, Aktywacja, Wskazanie myszką. Pytania i odpowiedzi {color} :hover Jak 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ą...
- Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}
...oprócz wyrazów składających się z liter często występują również dane liczbowe. Przyjęło się wyświetlać takie dane w określonym formacie. Na przykład proste ułamki zwykłe występujące w tekście często zapisujemy z ukośną kreską ułamkową oraz nieco pomniejszonym licznikiem i mianownikiem: ½. Taki znak jednak nie występuje na klawiaturze, dlatego łatwiej jest wpisać po prostu: 1/2, a następnie przekształcić tekst w taki sposób, aby wyglądał jak ułamek. Pozwala na to wariant czcionki...
- Tekst CSS / Orientacja tekstu {text-orientation}
...vertical-lr; text-orientation: upright; } otrzymamy: Kolumna 1 Kolumna 2 Kolumna 3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 [Porównaj przykład z rozdziału: Tryb pisania] Niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy: To jest pierwsza linijka... obszar tekstowy lista rozwijalna opcja 1 opcja 2 lista rozwijalna opcja 1 opcja 2 ...a to jest kolejna linijka. Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja...
Tekst HTML / Blokada indeksowania fragmentów treści <... data-nosnippet>...wyświetlają się nieadekwatne treści? Może to mieć miejsce, m.in. kiedy w treści strony są umieszczone jakieś elementy interfejsu użytkownika. Na przykład jeśli w naszym serwisie znajdują się fragmenty przykładowych tekstów (kody źródłowe, polecenia, wzory itp.), możemy chcieć ułatwić użytkownikowi skorzystanie z nich poprzez dodanie przycisku "Skopiuj do schowka". Niestety roboty wyszukiwarek nie zawsze właściwie zinterpretują takie elementy i w efekcie mogą się one pojawić w wynikach...
- Nagłówek i treść HTML / Plik robots.txt
...robot nie ma dostępu. Każda ścieżka musi rozpoczynać się od znaku ukośnika ("/") i powstaje poprzez wycięcie pierwszego członu adresu URL. Na przykład aby zablokować dostęp do pliku http://www.example.org/index.html, należy wpisać: User-Agent: * Disallow: /index.html Pusta wartość Disallow oznacza brak ograniczeń w indeksowaniu dokumentów: User-Agent: * # Wszystkie dokumenty serwisu będą normalnie indeksowane: Disallow: Aby zablokować dostęp do wszystkich plików z jakiegoś katalogu...
- HTML5 / Wyszukiwarka <search>
<search>...</search> Element ten pozwala semantycznie wskazać, że objęty nim fragment kodu HTML stanowi formularz wyszukiwania. Może to być na przykład: formularz wyszukiwania w aktualnym serwisie mechanizm filtrowania danych w bieżącym dokumencie wyszukiwarka w całym Internecie Elementem tym powinien być objęty tylko sam formularz, a nie wyniki wyszukiwania. Znacznik SEARCH nie tworzy samoczynnie wyszukiwarki, a jedynie wskazuje miejsce na stronie, gdzie się znajduje jej formularz. Do...
- HTML5 / Wstępne ładowanie <link "preload" as>
...aplikacji. Działa to poprzez wczytywanie zasobów, takich jak skrypty lub style, z wyprzedzeniem, aby były one dostępne, gdy będą potrzebne. Na przykład, aby wstępnie załadować skrypt, można użyć <link rel="preload" href="script.js" as="script">. Stosuje się je, gdy zasoby są kluczowe dla wydajności lub w czasie, gdy nie są jeszcze bezpośrednio używane, ale będą potrzebne wkrótce. Jak działa wstępne ładowanie? Wstępne ładowanie działa poprzez wczytywanie zasobów, takich jak pliki...
- HTML5 / Element edytowalny <... contenteditable>
...atrybut contenteditable="true" do dowolnego elementu HTML, co sprawi, że użytkownicy będą mogli edytować jego zawartość bezpośrednio na stronie. Na przykład: <div contenteditable="true">Edytowalny tekst</div>. To sprawia, że zawartość tego <div> stanie się edytowalna. Jaki jest pożytek z contenteditable w HTML? Atrybut contenteditable w HTML jest użyteczny do tworzenia obszarów na stronie, które użytkownicy mogą edytować bezpośrednio w przeglądarce, co jest przydatne w aplikacjach...
- HTML5 / Przeciągnij i upuść <... draggable>
...w HTML, należy ustawić atrybut draggable="true" na elemencie, który ma być przeciągany, oraz obsłużyć zdarzenia dragstart, dragover, i drop. Na przykład: <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.id)" id="dragItem">Przeciągnij mnie</div><div ondragover="event.preventDefault()" ondrop="handleDrop(event)" id="dropZone">Upuść tutaj</div>.
- HTML5 / Element ukryty <... hidden>
...Aby ukryć coś w HTML, można użyć atrybutu hidden, który sprawia, że dany element nie jest widoczny na stronie i nie zajmuje miejsca w układzie. Na przykład: <div hidden>Ukryty element</div>. Taki element pozostaje w kodzie HTML, ale nie jest wyświetlany użytkownikom. Jak zrobić ukryty tekst w HTML? Aby zrobić ukryty tekst w HTML, można użyć atrybutu hidden na elemencie zawierającym tekst. Przykład: <span hidden>Ukryty tekst</span>. Taki tekst nie będzie widoczny na stronie, ani nie...