wygląd - Kurs HTML i CSS
Aktywne przyciski / Animowane przyciskiNa 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.
- Aktywne przyciski / Podświetlenie
Aby wprowadzić na stronę przyciski obrazkowe, które zmieniają swój wygląd, po wskazaniu ich myszką, wystarczy dodać do znacznika <img> dwa dodatkowe atrybuty: onmouseover="..." i onmouseout="...": <a href="adres"><img src="obrazek_podstawowy.gif" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'obrazek_podswietlony.gif'" onmouseout="this.src = 'obrazek_podstawowy.gif'"></a> Przykład
- Menu drzewiaste / Skrypt menu drzewiastego
...Najbardziej zewnętrzny znacznik <ul>...</ul> powinien mieć przypisaną klasę CSS: class="tree". Dzięki temu punkty menu przyjmą odpowiedni wygląd. Ten sam najbardziej zewnętrzny znacznik <ul>...</ul> musi posiadać atrybut: id="tree0" Zaraz poniżej kodu menu musi się znajdować blok <script>...</script>. Zauważ, że wyróżniony w nim identyfikator tree0 musi być identyczny z tym, co wpisano jako wartość atrybutu id="..." na początku menu! UWAGA! Wewnątrz wszystkich znaczników...
Tabele HTML / Tytuł tabeli <caption>...tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ wierszy i kolumn, a także zdefiniujesz estetyczny wygląd poprawiający prezentację treści. ✅ Rozpocznij konfigurację tabeli Przykład <caption> To jest tytuł tabeli komórka1 komórka2 komórka3 komórka4 Pytania i odpowiedzi <caption> Co to jest CAPTION w HTML? Jest to znacznik odpowiadający za tytuł (podpis) tabeli. Jak zrobić tytuł tabeli? W tym celu zaraz po znaczniku...
- Tabele HTML / Łączenie komórek tabeli <td colspan rowspan>
...tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ wierszy i kolumn, a także zdefiniujesz estetyczny wygląd poprawiający prezentację treści. ✅ Rozpocznij konfigurację tabeli Przykład <td colspan rowspan> Poziome łączenie komórek: Dla pierwszej komórki <td colspan="2"> (druga komórka nie istnieje, ponieważ została połączona z pierwszą) komórka1+2 komórka3 komórka4 Aby otrzymać powyższą tabelę, należy wpisać: <table> <tr> <td...
- Formularze HTML / Pole tekstowe <input "text">
Spis treści <input "text"> Pole tekstowe <input "text"> Odpowiedź domyślna <input "text" value> Długość pola <input "text" size> Maksymalna ilość znaków, które można wpisać do pola <input "text" maxlength> Pole tylko do odczytu <input "text" readonly> Blokada pola <input "text" disabled> Tabulator <input text tabindex> Pole tekstowe <input "text"> <form action="..."> <input type="text" name="nazwa"> </form> lub <form action="..."> <input name="nazwa"> </form> gdzie jako "nazwa...
- Formularze HTML / Hasło <input "password">
Spis treści <input "password"> Hasło <input "password"> Strona na hasło Hasło <input "password"> <form action="..."> <input type="password" name="nazwa"> </form> gdzie jako "nazwa" należy wpisać nazwę danego pola. Zostanie ona później wysłana wraz z formularzem. Nazwa nie powinna być zbyt długa! Wprowadza pole, w którym można wpisać hasło. Od zwykłego pola tekstowego różni się tylko tym, że podczas wpisywania do niego tekstu, nie są widoczne podawane znaki, ale jedynie gwiazdki ("*")...
- Formularze HTML / Grupowanie pól <fieldset, legend>
Wersja podstawowa: <fieldset> (Pola formularza) </fieldset> Wersja z tytułem: <fieldset> <legend>Tytuł</legend> (Pola formularza) </fieldset> Pozwala zgrupować tematycznie kilka pól formularza, dzięki czemu zostają one objęte ramką. Wygląd ramki grupującej może się różnić w zależności od przeglądarki. W drugiej z podanych wersji powoduje pojawienie się tytułu na ramce grupującej. UWAGA! Znacznik <legend>...</legend> (tytuł ramki grupującej) musi znajdować się bezpośrednio po...
- Formularze HTML / Obszar tekstowy <textarea>
Spis treści <textarea> Obszar tekstowy <textarea> Pole tylko do odczytu <textarea readonly> Blokada pola <textarea disabled> Obszar tekstowy <textarea> <form action="..."> <textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea> </form> gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem. Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które...
- Promocja strony WWW / Projekt graficzny
...to, żeby Twoja strona była arcydziełem sztuki webdesignerskiej, ale dobrze jest trzymać się przynajmniej elementarnych zasad projektowania tak, aby wygląd serwisu już na wstępie nie odrzucał odwiedzających (podstawowe zasady projektowania layoutu strony znajdziesz w rozdziale: Jak zrobić dobrą stronę). Dobrym pomysłem może być konsultowanie każdego etapu swojej pracy z innymi. Można np. poddać stronę do oceny na forum dyskusyjnym jednego z wielu popularnych serwisów webmasterskich. Oczywiście...