przykład html - Kurs HTML i CSS
HTML5 / Wstawka <aside>...ASIDE w HTML? Element ASIDE oznacza sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z resztą treści w dokumencie HTML5. Na przykład mogą to być bannery reklamowe albo wtrącone cytaty, do których nie na żadnego bezpośrednio odniesienia w pozostałej części artykułu ani one nie odnoszą się również wprost do tego artykułu, a zostały w tym miejscu zamieszczone tylko dlatego, że w sposób ogólny pasują do kontekstu treści na stronie. Kiedy ASIDE a kiedy ARTICLE? Oba te...
Selektory pseudoelementów CSS / Przed... :beforeSpis treści :before Przed... :before Obrazek przed... :before {content: url} Wartość atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. Przykład...
- Selektory pseudoelementów CSS / Po... :after
Spis treści :after Po... :after Obrazek po... :after {content: url} Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. Przykład :after Jeżeli w...
- Tekst CSS / Tryb pisania {writing-mode}
...W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od lewej do prawej strony - tzn. pierwsza linijka tekstu znajduje się przy lewej krawędzi kartki, a ostatnia - przy prawym jej brzegu. Pionowe ułożenie tekstu możemy uzyskać właśnie dzięki użyciu stylu "writing-mode: vertical-lr" (języki mongolskie) albo...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...w CSS i określ odpowiednią wartość kursora. Możesz również użyć niestandardowego obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności. Jak zrobić "customowy" kursor? Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą...
- Nagłówek i treść HTML / Automatyczne odświeżanie strony <meta "refresh">
...wewnątrz elementu <head>...</head> - następujący znacznik: <meta http-equiv="refresh" content="60">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik odświeżenia strony dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego! Pamiętaj również, że zbyt krótki czas odświeżania strony może spowodować nadmierne użycie łącza internetowego użytkowników oraz dodatkowe obciążenie serwera z Twoją stroną, przez co strona może...
- Nagłówek i treść HTML / Automatyczne wczytanie strony <meta "url">
...następujący znacznik: <meta http-equiv="refresh" content="0; url=https://www.example.com/">. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden nagłówek dokumentu. Zatem znacznik przekierowania dodajemy wewnątrz istniejącego elementu, a nie wstawiamy nowego!
- Tekst HTML / Pozioma linia <hr>
<hr> Polecenie to pozwala narysować na ekranie poziomą linię. Może ona rozdzielać grupy akapitów, które różnią się od siebie tematycznie - np. zmiana sceny w powieści albo przejście do innego tematu w obrębie tej samej sekcji podręcznika - przez co strona staje się bardziej czytelna i przejrzysta. Wygląd poziomej linii może się różnić w zależności od przeglądarki. Przykład <hr> Przykład Pytania i odpowiedzi <hr "border-width"> Co to jest HR w HTML? Jest to element wstawiający na...
- Multimedia HTML / Obrazek HTML <img>
...Shop, Ulead GIFAnimator czy GIMP i inne. Jest to po prostu specjalny plik GIF, który wstawiamy na stronę, tak jak zwykły obrazek. Może on mieć przykładowo rozmiary 400x50. Pamiętaj, że im więcej klatek animacji, tym większe rozmiary pliku i dłuższe wczytywanie strony!
- 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...