href - Kurs HTML i CSS
Widżety HTML / Szablon strony bez ramek...główna wygląda tak: <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Tytuł strony</title> </head> <body> <ul> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> <li><a href="...">Link</a></li> </ul> Właściwa zawartość strony... </body> </html> Kolorem czerwonym zaznaczono nagłówek szablonu (jak widać nie jest to wprost odpowiednik nagłówka dokumentu - <head>...</head>), a niebieskim - stopkę szablonu. Ponadto na zielono oznaczony został...
- Odsyłacze HTML / Do etykiety <a id>
...<a id="nazwa_etykiety"></a> Następnie możemy się do niej odwoływać, zarówno z tej samej jak i z innej strony, za pomocą zwykłych odsyłaczy: <a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a> Istnieją dwa rodzaje odsyłaczy do etykiet: Etykieta zdefiniowana na tej samej stronie <a href="#nazwa_etykiety">opis odsyłacza</a> (...) <a id="nazwa_etykiety">(opis etykiety)</a> lub <a id="nazwa_etykiety">(opis etykiety)</a> (...) <a href="#nazwa_etykiety">opis odsyłacza</a>...
- HTML5 / Filmy i dźwięk <video, audio, source>
...type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'> Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a> </video> Typowa kombinacja formatów plików audio: <audio> <source src="plik.mp3" type='audio/mpeg'> <source src="plik.ogg" type='audio/ogg'> Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a> </audio> MP3/MP4 Znane od dawna, komercyjne formaty audio (MP3) i...
- Podcast HTML / #7 Widżety HTML
...ma możliwości wybrania tylko fragmentu z innego dokumentu HTML do wyświetlenia w ramce. Podstawowa składnia <iframe> <iframe src="lokalizacja"><a href="lokalizacja">Tekst alternatywny</a></iframe> "lokalizacja" to adres strony lub lokalizacja na dysku, która ma zostać wczytana do ramki. "Tekst alternatywny" jest wyświetlany tylko w przeglądarkach, które nie obsługują ramek lokalnych. Między znacznikiem otwierającym <iframe...> a zamykającym </iframe> można umieścić dowolny kod, który...
- Widżety HTML / Wczytywanie strony do ramki lokalnej <a target>
...Wczytywanie strony do ramki lokalnej <a target> Wczytanie stron do dwóch ramek Wczytywanie strony do ramki lokalnej <a target> <a target="cel" href="lokalizacja">opis</a> Jak widać powyższe polecenie jest odsyłaczem. Posiada on jednak dodatkowy atrybut target="..." pozwalający wczytać stronę do wybranej przez nas ramki - w szczególności innej niż ta, w której znajduje się odnośnik. Dzięki temu treść w takiej ramce (okienku) może się zmieniać, nawet już po załadowaniu strony. Zamiast...
- Nagłówek i treść HTML / Język strony <html lang, link hreflang>
Spis treści <html lang, link hreflang> Język dokumentu <html lang> Inne wersje językowe <link hreflang> Domyślna wersja językowa Język dokumentu <html lang> <html lang="język">...</html> gdzie jako "język" należy podać skrót nazwy wybranego języka. Polecenie to pozwala podać, w jakim języku jest napisana Twoja strona internetowa, np.: pl - polski, en - angielski, de - niemiecki, fr - francuski, it - włoski, es - hiszpański i inne [zobacz: Skróty nazw jezyków]. Nie należy również...
Dobre praktyki / Przykazania webmastera...a dzięki temu mniej podatny na błędy (od razu zauważysz ewentualny źle domknięty znacznik). Porównaj: <div class="menu"> <ul> <li> <a href="...">...</a> </li> <li> <a href="...">...</a> </li> <li> <a href="...">...</a> </li> </ul> </div> oraz <div class="menu"><ul><li> <a href="...">...</a> </li> <li> <a href="...">...</a></li> <li><a href="...">...</a> </li> </ul></div> Co prawda wcięcia zwiększają rozmiary dokumentu, wydłużając nieco...
- Odsyłacze HTML / Odsyłacz pocztowy <a "mailto">
...<a "mailto"> Odsyłacz pocztowy <a "mailto"> Ochrona adresu e-mail Dodatkowe parametry odsyłacza pocztowego Odsyłacz pocztowy <a "mailto"> <a href="mailto:adres e-mail">opis</a> gdzie jako "adres e-mail" należy podać adres poczty elektronicznej osoby, do której ma zostać wysłany list (np.: jan_kowalski@example.com). Dzięki temu odsyłaczowi, użytkownicy oglądający Twoją stronę, będą mogli wysłać list e-mail pod adres podany w poleceniu. Po kliknięciu takiego odnośnika, list nie...
- Odsyłacze HTML / Blokada indeksowania odsyłaczy <a "nofollow, ugc, sponsored">
...Treść tworzona przez użytkowników <a "ugc"> Linki sponsorowane <a "sponsored"> Blokada indeksowania wybranych odsyłaczy <a "nofollow"> <a href="http://adres strony" rel="nofollow">...</a> <a href="https://adres strony" rel="nofollow">...</a> Polecenie określa sposób zachowania się robotów-indekserów, czyli specjalnych programów zbierających informacje o stronach w Internecie, wykorzystywane później przez wyszukiwarki. Element <meta name="robots" content="nofollow"> powoduje, że...
- Odsyłacze HTML / Mapa odsyłaczy <img usemap, map, area>
...do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy"> <map id="nazwa_mapy" name="nazwa_mapy"> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny"> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny"> (...) </map> ścieżka dostępu do obrazka Lokalizacja na dysku, gdzie znajduje się żądany plik obrazka. nazwa_mapy Dowolny tekst, byleby był on taki sam w pierwszej i w drugiej linii, a dodatkowo w pierwszym wierszu musi być...