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...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
Jeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
Dla nauczycieli / Scenariusz lekcji informatyki dla branżowej szkoły I stopnia...pracy i błędów Lekcja 2 - Dodawanie obrazków i linków Czas trwania: 45 minut Cele szczegółowe Uczeń wstawia obrazki do strony. Uczeń tworzy odsyłacze do innych stron. Materiały Wstawienie obrazka HTML Odsyłacze HTML Przebieg 10 min - Wprowadzenie do znaczników <img> i <a> Wyjaśnienie atrybutów: src="...", alt="...", href="...", target="_blank" (nowe okno). 20 min - Praca praktyczna Uczniowie wstawiają obrazek na stronie. Tworzą link do innej strony i do adresu e-mail...
HTML dla zielonych / Odsyłacz pocztowy HTML <a "mailto"><a href="mailto:adres poczty e-mail">opis odsyłacza</a> Zamiast: "adres poczty e-mail" należy wpisać adres poczty elektronicznej (np.: jan_kowalski@example.com). Ten odsyłacz jest przydatny, gdy pragniesz umieścić na stronie adres swojej skrzynki poczty elektronicznej (e-mail). Dzięki temu będziesz w stałym kontakcie z internautami odwiedzającymi Twoją stronę. Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości...
- Aktywne przyciski / Animowane przyciski
Na wielu stronach w Internecie możesz spotkać aktywne przyciski. Po wskazaniu ich myszką, zmieniają swój wygląd, co sugeruje użytkownikowi, że kliknięcie wywoła jakąś akcję (najczęściej przeniesienie do innej strony). Wbrew pozorom wstawienie takich przycisków na własną stronę, wcale nie jest takie trudne. Wymagana wiedza: Odsyłacze obrazkowe (podstawowe) Aby wprowadzić na stronę zwykłe przyciski (nieaktywne), które nie zmieniają wyglądu, wystarczy skorzystać z odsyłaczy obrazkowych.
- Przeglądarka zdjęć
Spis treści Wymagana wiedza Przykład przeglądarki zdjęć Skrypt przeglądarki zdjęć Inicjalizacja Wymagana wiedza Konstruowanie ścieżek dostępu do obrazków Podstawy stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć Skrypt przeglądarki zdjęć Aby uzyskać powyższy efekt, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. przegladarka_zdjec.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl}...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
Spis treści Wymagana wiedza Skrypt indeksu, wyszukiwarki Wieloznacznik (wildcard) Wymagana wiedza Odsyłacze do podstrony Wczytywanie stron do ramki lokalnej Podstawy stylów CSS (m.in. arkusze stylów) Skrypt indeksu, wyszukiwarki Aby wstawić na swoją stronę indeks z dodatkową funkcją wyszukiwarki, postępują według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8)...
- HTML dla zielonych / Podsumowanie
To by było na tyle. Poznane tu polecenia powinny pozwolić Ci na napisanie prostej, ale zarazem dość dobrze wyglądającej strony WWW. Jeśli już teraz chcesz jak najszybciej sprawdzić w praktyce poznane wiadomości, to tutaj możesz skorzystać z szybkiego edytora stron próbnych, który pozwoli Ci napisać Twoją pierwszą testową stronę WWW. A więc do dzieła... ✅ Rozpocznij tworzenie strony WWW Jeżeli będziesz mieć więcej czasu, zajrzyj do dalszych rozdziałów tego kursu. Znajdziesz tam o wiele więcej...
- Nagłówek i treść HTML / Automatyczne wczytanie strony <meta "url">
...nowy adres. W takiej sytuacji po wejściu na stary adres przeglądarka automatycznie wczyta nową stronę, bez potrzeby klikania użytkownika w dodatkowe odsyłacze. Jak ustawić przekierowanie na inną stronę? Aby po wejściu na stronę natychmiast automatycznie przekierować użytkownika na nowy adres (np. https://www.example.com/), wystarczy wstawić w nagłówku dokumentu - tzn. gdziekolwiek wewnątrz elementu <head>...</head> - następujący znacznik: <meta http-equiv="refresh" content="0...
- Menu rozwijane, otwierane, wysuwane / Przykład menu rozwijanego
Kliknij 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 Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno