odsyłacze - Kurs HTML i CSS
Rozwijane menuWykorzystując element <select>...</select> można stworzyć rozwijane menu, które działa w ten sposób, że po wyborze konkretnej opcji z listy, następuje wczytanie określonej strony (podobnie jak w przypadku odsyłaczy). Może to być przydatne np. jeżeli chcemy zaoszczędzić trochę miejsca na stronie (lista rozwijalna zajmuje tylko jedną linijkę). Ale uwaga! Jeśli przeglądarka użytkownika nie będzie obsługiwać skryptów JavaScript, strony z takiego menu będą niedostępne. Dlatego zaleca się umieścić w...
- Galeria zdjęć HTML / Klasyczna galeria zdjęć
...zdjęć, zwykle o dużych rozmiarach. Najczęściej jest ona tworzona w ten sposób, że na głównej stronie umieszcza się pomniejszone kopie obrazków oraz odsyłacze, po kliknięciu których następuje wczytanie obrazka w pełnych rozmiarach. Pozwala to uchronić się od wczytywania wszystkich dużych obrazków jednocześnie (użytkownik powiększa tylko te, które mu odpowiadają), a także zachowuje estetykę strony. Uwaga! Miniaturki grafik muszą być pomniejszone fizycznie, tzn. nie mogą to być oryginalne duże...
- Menu rozwijane, otwierane, wysuwane / Czas rozwijania/zwijania
Aby przyspieszyć lub zwolnić rozwijanie/zwijanie pozycji menu, należy powtórzyć wszystkie przedstawione kroki, poza ostatnim (wywołanie skryptu), który tym razem należy wykonać następująco: <script> new Menu('menu0', '', false, false, czasRozwin, czasZwin); </script> czasRozwin Czas w milisekundach (1 s = 1000 ms), w którym następuje rozwinięcie pojedynczego elementu menu (<dd>...</dd>). Aby wymusić natychmiastowe rozwinięcie wszystkich elementów, należy podać wartość 0 (zero). czasZwin...
- Menu rozwijane, otwierane, wysuwane / Menu otwierane
Spis treści Menu otwierane Opóźnienie przy otwieraniu/zamykaniu Menu otwierane Czasem przydatne jest wstawienie menu, które otwiera się po wskazaniu nagłówka myszką, a chowa automatycznie po usunięciu wskaźnika myszki z obrębu wybranego fragmentu menu. <script> new Menu('menu0', '', true); </script> Przykład Wskaż poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje...
- Menu rozwijane, otwierane, wysuwane / Łączenie opcji
Wszystkie z przedstawionych powyżej opcji można ze sobą łączyć, uzyskując w ten sposób dodatkowy efekt, np. następujące wywołanie skryptu: <script> new Menu('menu0', 'position: absolute', true, true, 0, 100, 0, 250); </script> spowoduje osadzenie wypozycjonowanego absolutnie menu otwieranego w wersji wysuwanej ze zmodyfikowanymi czasami rozwijania/zwijania oraz opóźnieniem przy otwieraniu i zamykaniu. Aby pominąć określenie pozycji, należy po prostu wpisać '' (dwa apostrofy). Aby pominąć...
Selektory pseudoklas CSS / Etykieta :target...szukać "ręcznie". W takiej sytuacji stosuje się etykiety (np.: <h2 id="nazwa_etyiety">Nazwa sekcji</h2>). Do takich etykiet można później tworzyć odsyłacze. Problemem takiego rozwiązanie może być fakt, że jeśli czytelnik przewinie stronę, może mieć problemy z późniejszym odszukaniem etykiety, do której pierwotnie został skierowany. Prezentowane tutaj polecenie pozwala wyróżnić wizualnie właśnie taką etykietę, podczas gdy ewentualne pozostałe etykiety na tej samej podstronie pozostaną bez...
HTML dla zielonych / Ćwiczenia...(czyli w pliku index.html). O tym co to są i jak się tworzy podstrony przeczytasz w podrozdziale: Ramy dokumentu. Na podstronie linki.html wstaw odsyłacze do ciekawych stron w internecie, na których czytelnik będzie mógł znaleźć więcej informacji na opisywany przez Ciebie temat. Jeżeli tworzysz stronę o sobie, możesz tutaj umieścić odnośniki do Twojego profilu w serwisach społecznościowych: Facebook, Twitter, YouTube, LinkedIn itp. Stwórz podstronę o nazwie kontakt.html (nowy plik HTML w...
- Odsyłacze HTML / Ćwiczenia
...pełnowymiarową ilustrację, a nigdy nie powiększaj miniaturki. Podmień ilustracje na stronie na ich wersje pomniejszone. Następnie przekształć je w odsyłacze obrazkowe i podlinkuj do pełnowymiarowych wersji zdjęć. Użyj przy tym atrybutu target="_blank", który otworzy zdjęcie w nowym oknie (nowej karcie przeglądarki). Nie musisz w tym celu tworzyć żadnych nowych podstron. Wystarczy że jako odnośnika użyjesz po prostu lokalizacji pliku z dużym zdjęciem. Otwórz stronę w przeglądarce internetowej...
- 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...
- CSS dla zielonych / Kolor odsyłaczy CSS {color} :hover
a { color: kolor; } a:hover { color: podświetlenie; } gdzie "kolor" oznacza definicję koloru, jaką mają przyjąć wszystkie odsyłacze na stronie. Natomiast "podświetlenie" określa definicję koloru, jaką przyjmie odsyłacz po wskazaniu go myszką. Zwróć uwagę, że koloru podświetlenia nie da się podać w inny sposób, niż przy pomocy języka CSS. A jest to bardzo przydatna możliwość. W ten sposób po wskazaniu elementu myszą użytkownik od razu widzi, że jest to element interaktywny, który można...