wygląd - Kurs HTML i CSS
Odsyłacze HTML / Do podstrony <a href>...to również pozostałych typów odsyłaczy przedstawionych na tej stronie): <a target="_blank" href="adres">opis</a> kliknij tutaj [Aby określić wygląd nowego okna (rozmiar, położenie, pokazanie/ukrycie pasków menu, narzędzi, statusu itd.), zobacz: Otwarcie nowego okna].
Aktywne przyciski / PodświetlenieAby 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 / Struktura tabeli HTML <table, tr, td>
...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 <table, tr, td> Po wpisaniu: <table> <tr> <td>komórka1</td> <td>komórka2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> </table> Otrzymamy: komórka1 komórka2 komórka3 komórka4 Jak widać, taka tabela nie ma obramowania, dlatego jest mało...
Szablon strony na DIV-ach / Płynny szablon...sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane. Cały czas jedynie stylizując niezmienny kod HTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie...
- Oprawa graficzna / Zamiennik obrazkowy
...a Google Wstęp Po lekturze rozdziałów Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana ułożenia menu nawigacyjnego z orientacji pionowej do poziomej ani przeniesienie całej...
- 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...
- Znaki specjalne HTML / Podróżowanie i miejsca - emotikony (emoji)
Możesz szybko wyszukać dowolną ikonę emoji używając w tym celu specjalnego generatora. Numer Objaśnienie Wygląd Mapa 🌍 Kula ziemska Europa-Afryka 🌍 🌎 Kula ziemska Ameryki 🌎 🌏 Kula ziemska Azja-Australia 🌏 🌐 Kula ziemska z południkami 🌐 🗺 Mapa świata 🗺 🗾 Zarys Japonii 🗾 🧭 Kompas, busola 🧭 Miejsca geograficzne 🏔 Góra z czapą śnieżną 🏔 ⛰ Góra ⛰ 🌋 Wulkan 🌋...
- Znaki specjalne HTML / Przedmioty - emotikony (emoji)
Możesz szybko wyszukać dowolną ikonę emoji używając w tym celu specjalnego generatora. Numer Objaśnienie Wygląd Ubrania 👓 Okulary 👓 🕶 Okulary przeciwsłoneczne 🕶 🥽 Gogle 🥽 🥼 Kitel (biały fartuch) 🥼 🦺 Kamizelka bezpieczeństwa 🦺 👔 Krawat 👔 👕 Koszulka 👕 👖 Dżinsy 👖 🧣 Szalik 🧣 🧤 Rękawiczki 🧤 🧥 Płaszcz, kurtka 🧥 🧦 Skarpetki 🧦...
- Znaki specjalne HTML / Symbole - emotikony (emoji)
Możesz szybko wyszukać dowolną ikonę emoji używając w tym celu specjalnego generatora. Numer Objaśnienie Wygląd Znaki transportowe 🏧 Bankomat 🏧 🚮 Znak wyrzuć śmieci we właściwym miejscu 🚮 🚰 Znak woda zdatna do picia 🚰 ♿ Symbol wózka inwalidzkiego ♿ 🚹 Dla mężczyzn 🚹 🚺 Dla kobiet 🚺 🚻 Toaleta 🚻 🚼 Znak dziecko 🚼 🚾 WC 🚾 🛂 Odprawa (kontrola) paszportowa 🛂...