html odsyłacze - Kurs HTML i CSS
Menu rozwijane, otwierane, wysuwane / Pozycja absolutna...jeśli przeglądarka użytkownika nie będzie obsługiwać JavaScript. Samo menu nadal będzie funkcjonalne pod względem nawigacji, tzn. jego elementy (odsyłacze) będą dostępne, ale oczywiście funkcja rozwijania nie będzie działać. Jest to jednak sytuacja dopuszczalna. Natomiast niedopuszczalne mogłoby być w takiej sytuacji ułożenie wypozycjonowanego absolutnie menu, które zakrywałoby na stałe fragmenty innych elementów strony, które znajdują się poniżej określonej pozycji. Dlatego pozycję należy...
HTML dla zielonych / Ćwiczenia...właściwej treści strony. Wyniki swojej pracy możesz na bieżąco oglądać w przeglądarce internetowej. W tym celu zapisz plik pod nazwą index.html, a następnie odszukaj go na dysku za pomocą dowolnego programu do przeglądania plików (w systemie Windows możesz użyć np. Eksploratora plików) i dwukrotnie kliknij ikonę stworzonego właśnie dokumentu. Dzięki temu Twoja strona otworzy się w przeglądarce. Za każdym razem kiedy coś na niej zmienisz, po prostu ponownie zapisz plik w edytorze, a...
Widżety HTML / Wczytywanie strony do ramki lokalnej <a target>...Różnice można zauważyć dopiero w przypadku większej liczby zagnieżdżonych ramek - np. strona w stronie w stronie. Załóżmy, że mamy plik "index.html", w którym umieszczamy taką ramkę: <iframe src="ramka1.html"></iframe> Jak widać, spowoduje to osadzenie na stronie ramki i załadowanie do niej dokumentu "ramka1.html". Załóżmy teraz, że w pliku "ramka1.html" znajduje się m.in. taki kod: <iframe src="ramka2.html"></iframe> Tutaj znowu osadzamy ramkę, ale tym razem z innym dokumentem. W...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
...Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8): /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Indeks(id, ramka) { this.id = id; if (typeof ramka == 'undefined') this.ramka = self; else if (typeof ramka == 'string') { if (ramka == '_blank') this.ramka = ''; else if (ramka == '_self') this.ramka = self; else if (ramka...
- Przeglądarka zdjęć
...stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w trybie pokazu slajdów [sek] this.id = id; this.zdjecia = zdjecia; var timerID = null; this.wyswietl = function(nr) { clearTimeout(timerID); var f...
- Odsyłacze HTML / Do etykiety <a id>
...etykiety... ... ... ... ... ... ... ... ... ... ... ...testowa etykieta Odsyłacz drugiego rodzaju (do etykiety "#wstep" na stronie "przegladarki.html" - spójrz na pasek stanu przeglądarki po wskazaniu odsyłacza myszką): Przeglądarki - wstęp... Pytania i odpowiedzi <a id> W jaki sposób przejść do etykiety w innym dokumencie? Wystarczy w odnośniku po adresie strony wstawić znak krzyżyka (skrót klawiaturowy Shift+3), a po nim nazwę etykiety, która znajduje się na stronie docelowej. Ten...
- Menu drzewiaste / Skrypt menu drzewiastego
...underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Tree(id) { this.id = id; var url = unescape(window.location.href.replace(/#.*/, '')); var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, ''); this.click = function () { for...
- Rozwijane menu
...się umieścić w innym miejscu również zwykłych odsyłaczy tekstowych. <select onchange="self.location.href = this.value"> <option VALUE="adres1.html">Opis1</option> <option VALUE="adres2.html">Opis2</option> ... </select> adres1.html, adres1.html Adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać po wybraniu danej pozycji na liście Opis1, Opis2 Test, który pojawi się na liście i po wybraniu których nastąpi wczytanie stron Można również zaznaczyć opcję domyślną...
- Odsyłacze HTML / Do podstrony <a href>
...pomocniczy w "dymku" narzędziowym. Można tam podać np. szerszy opis strony, do której ma nastąpić przeniesienie, np. po wpisaniu: <a href="../index.html" title="Do strony głównej">Strona główna</a> Otrzymamy (wskaż odsyłacz myszką, aby zobaczyć opis): Strona główna Nowe okno <a href "_blank"> Jeśli chcesz, aby po kliknięciu odsyłacza otworzyło się nowe okno, wpisz następujący kod (dotyczy to również pozostałych typów odsyłaczy przedstawionych na tej stronie): <a target="_blank...
CSS dla zielonych / Zaczynamy kurs CSS!...Skoro nadal czytasz, zapewne oznacza to, że potrafisz stworzyć przynajmniej prostą stronę internetową zawierającą tekst, obrazki i odsyłacze. Chociaż treść jest najważniejszym elementem każdej strony WWW, to przecież wygląd też się liczy. I właśnie do tego służy język CSS (Kaskadowe Arkusze Stylów). Zapamiętaj prostą zasadę: treść wraz ze znacznikami wprowadza się na stronę internetową za pomocą języka HTML, a następnie dzięki CSS można zmienić jej wygląd. Dlatego właśnie...