Jak wstawić odsyłacz? - Kurs HTML i CSS
Odsyłacze / Odsyłacz pocztowy <a "mailto">...listu">opis</a> UWAGA! Jeśli w powyższych parametrach występują znaki: & (ampersand - angielskie "and"), " (cudzysłów), % (procent) albo chcemy wstawić znak nowej linii (użycie Enter nic nie da), należy zamiast nich wpisać odpowiednio: %26, %22, %25 oraz %0A. Dodatkowo (dotyczy to przede wszystkim systemu Windows) jeśli w dokumencie została użyta strona kodowa utf-8, zamiast polskich liter mogą pojawić się zupełnie nieprzewidziane znaki. Na dodatek istnieją widoczne różnice kodowania...
- Multimedia / Osadzenie pliku <embed>
...która nie pasuje do wymiarów pliku! Rozmiary zależą również od posiadanej przez użytkownika wtyczki. Polecenie <embed> jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych: *.wav - plik dźwiękowy typu "wav" *.mid - plik dźwiękowy typu "midi" *.avi - plik typu "avi" *.ra - plik Real Audio Player *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3) *.mpeg - plik typu "mpeg" *.mov - plik typu "mov" *.asf - plik typu "asf" i inne Polecenie to współpracuje z...
Selektory pseudoklas / Odsyłacz podstawowy :link...Przykład :link Jeżeli nie byłeś jeszcze na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony. Pytania i odpowiedzi Jak wstawić odsyłacz? Odsyłacz w HTML wstawiamy za pomocą znacznika <a href="...">...</a>, gdzie atrybut href="..." określa adres docelowy. Na przykład: <a href="https://www.example.com">Tekst odsyłacza</a>. Jaki kolor ma link? Domyślnie linki są niebieskie (kolor #0000FF czyli blue), a odwiedzone linki są fioletowe (kolor #800080 czyli...
- Multimedia / Uniwersalny sposób odtwarzania plików <a "jpg, avi, wav, txt, doc, rtf, xls, pdf", object>
...Na przykład jeśli plik nazywa się "aplikacja.exe" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odnośnik do niego, można się posłużyć następującym znacznikiem: <a href="aplikacja.exe">Pobierz plik</a>. Do czego służy znacznik OBJECT? Element OBJECT działa podobnie jak EMBED, ale w założeniu jest bardziej uniwersalny. Za jego pomocą tak samo można osadzać bezpośrednio w stronie różnorodne pliki multimedialne: dokumenty MS Word...
- Widżety / Ramki lokalne <iframe>
...Wtedy użytkownicy niekompatybilnych przeglądarek będą mogli przynajmniej bezpośrednio do niej przejść. Oczywiście zamiast odnośnika można również wstawić jakąś alternatywną treść, przeznaczoną do przeglądania bez ramek. Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu ramek lokalnych na stronach internetowych, zobacz rozdział HTML5: Wstępne ładowanie, Leniwe ładowanie, Piaskownica zabezpieczająca, Osadzenie kodu HTML w ramce lokalnej...
- 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...
- HTML5 / Sekcja <section>
...(sekcji) książki jest dobrym miejsce na zakończenie czytania na dziś i powrócenie do niego następnego dnia. Dobrym wyznacznikiem, gdzie powinno się wstawić znacznik sekcji, jest zadanie sobie pytania, czy do tego fragmentu strony potencjalnie ktoś chciałby wstawić odsyłacz do etykiety. Dlatego takie sekcje dobrze jest dodatkowo opatrzyć identyfikatorem, do którego będzie się można potem odnosić: <section id="moja-sekcja"> <h1>Moja sekcja</h1> ... </section> (...) Przejdź do: <a...
- 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...
- Selektory pseudoklas / Łączenie selektorów
...jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły: .przyklad_selektory2 a:hover { font-weight: bold } Teraz wystarczy wstawić: <div class="przyklad_selektory2"> <a href="?">Link1</a> <a href="?">Link2</a> <a href="?">Link3</a> </div> aby zmienić wygląd po wskazaniu wszystkich odsyłaczy z tego bloku, bez wpływu na pozostałe znajdujące się na stronie: Link1 Link2 Link3 Zmiana koloru obramowania obrazka po wskazaniu go myszką: img.przyklad_selektory3...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów. Załóżmy, że mamy na stronie menu nawigacyjne, któremu chcemy zmienić kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class: <div...