menu - Kurs HTML i CSS
HTML dla zielonych / Wstawienie obrazka HTML <img src alt>...najlepiej wszystkie obrazki były zapisane w jednym z trzech formatów: GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość. JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. W żadnym wypadku nie...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
Wszystkie odsyłacze przedstawione do tej pory, miały postać tekstową. Jeśli chcesz umieścić w swoim serwisie np. menu z obrazkowymi przyciskami, należy w tym celu użyć następującego polecenia: <a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a> gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img>
...uruchomiony, gdy klikniemy myszką grafikę, do której podajemy ścieżkę dostępu. Dzięki niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony. Obrazki przycisków najlepiej zapisywać w formacie GIF bądź PNG, a większe zdjęcia - JPG. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski. Darmowe ikony graficzne do pobrania, które możesz wykorzystać...
- HTML dla zielonych / Jak zrobić dobrą stronę HTML
...miejsce". Większość dobrych stron w Internecie zbudowana jest następująco: na górze znajduje się banner lub logo serwisu, po lewej lub po prawej - menu, a obok - treść strony. Nie znaczy to, że musisz koniecznie podporządkować się takiemu kanonowi, lecz jeżeli chcesz uzyskać podobną strukturę, we właściwej treści strony (BODY) wpisz np.: <header style="text-align: center">Tutaj można umieścić logo serwisu</header> <nav style="width: 300px; float: left; overflow: hidden"> Tu umieszcza się...
- Formularze HTML / Lista rozwijalna <select, option, optgroup>
...Atrybuty value="..." są obowiązkowe, jeśli zamierzamy wykorzystać formularz w skrypcie. Polecenie pozwala wprowadzić listę rozwijalną (menu) - inaczej zwaną również polem kombi - z której możemy wybrać jedną (typ podstawowy) lub kilka możliwości (typ rozszerzony) - za pomocą klawisza Ctrl. Każdy znacznik <option>...</option> odpowiada jednej opcji na liście. Możliwe jest oczywiście wprowadzenie więcej niż dwóch opcji wyboru (w miejsce kropek). UWAGA! W zawartości elementu OPTION...
- Promocja strony WWW / Bannery i buttony
...konkretnej akcji. Często dobre rezultaty dają bannery imitujące różnorakie kontrolki i okna dialogowe systemu Windows - np. przycisk OK, rozwijane menu, które zachęca do sprawdzenia co jest dalej albo pole z częściowo zakrytym tekstem i z widocznymi suwakami do przewijania treści (użytkownik chcąc zatwierdzić wybór przyciskiem OK, rozwinąć menu lub przesunąć suwaki, podświadomie kliknie banner, co spowoduje przejście do Twojego serwisu). Oczywiście powstają tutaj kontrowersje, czy nie...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...wyjaśnia je i udziela wskazówek, jak je poprawić. 5 min - Zadanie domowe: rozbudować stronę o kolejny odsyłacz do innej podstrony i linki menu Uczniowie mają za zadanie dodać koleją wewnętrzną podstronę oraz menu nawigacyjne w serwisie. Lekcja 2 - Wstawianie obrazków i podstawowe formatowanie tekstu Czas trwania: 45 minut Cele szczegółowe Uczeń potrafi wstawiać obrazki do strony HTML. Uczeń formatuje tekst, używając podstawowych znaczników (pogrubienie, kursywa...
- Komendy HTML 4.01 / Wykaz elementów
... Punkt listy LINK wymag/zabr Odnośnik MAP wymag/wymag w linii Mapa odnośników klienta MENU wymag/wymag w bloku Lista menu META wymag/zabr Informacje profilowe dokumentu NOFRAMES wymag/wymag w bloku Brak obsługi ramek NOSCRIPT wymag/wymag w bloku Brak obsługi skryptów OBJECT wymag/wymag w linii Osadzony obiekt OL wymag/wymag w bloku Lista uporządkowana OPTGROUP wymag/wymag Grupa opcji OPTION wymag/opcj Opcja wyboru...
Selektory pseudoklas CSS / Łączenie selektorów...zwykle chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu myszką. Mogą to być np. linki z menu, które powinny wyglądać inaczej niż normalne hiperłącza w tekście. Jeżeli jednak chcemy zmienić wygląd wszystkich odsyłaczy znajdujących się 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...
- Kursory CSS / Kształt kursora {cursor}
...brak kursora (CSS 3) - interpretuje MSIE 9, Firefox 3, Opera, Chrome Przykład Wskaż ten tekst myszką Odsyłacze i kursory statusu context-menu - menu kontekstowe, zwykle dostępne po kliknięciu prawym przyciskiem myszki (CSS 3) - interpretuje MSIE 9, Firefox 3 Przykład Wskaż ten tekst myszką help - kursor pomocy Przykład Wskaż ten tekst myszką pointer - wskaźnik (wskazuje odsyłacz) Przykład Wskaż ten tekst myszką progress - "postęp" (CSS 2.1, ale nie CSS 2) Przykład...