text - Kurs HTML i CSS
Formularze HTML / Ramy formularza HTML <form>...można wprowadzić interaktywny formularz. Po wpisaniu: <form action="..." onsubmit="alert(this.tekst.value); return false"> <input type="text" name="tekst"><input type="submit" value="OK"> </form> Otrzymamy: Wpisz tutaj coś i naciśnij OK: Innym ważnym zastosowanie skryptów wykonywanych po stronie klienta, jest sprawdzenie poprawności wypełnienia formularza, jeszcze przed jego wysłaniem: <form action="mailto:adres e-mail" method="post" onsubmit="if (this.tekst2.value == '')...
Pozycjonowanie CSS / Ustawienie {float, vertical-align}...linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie) middle - ustawia element na środku wysokości elementów sąsiadujących text-top - wyrównuje szczyt elementu do szczytu tekstu elementu nadrzędnego text-bottom - wyrównuje podstawę elementu do podstawy tekstu elementu nadrzędnego super - tworzy indeks górny z elementu, ale nie zmienia wielkości tekstu sub - tworzy indeks dolny z elementu, ale nie zmienia wielkości tekstu top - wyrównuje szczyt elementu do szczytu...
- Menu w CSS / Menu z nagłówkami
...0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold; font-size: larger; text-align: center; } dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display...
Wyszukiwarka / Możliwość wyboru...świecie W serwisie/W Polsce Światowy/Polski Internet Lista rozwijalna <form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <select name="lr"> <option value="">Na świecie</option> <option value="lang_pl">W Polsce</option> </select> <input type="submit" value="Szukaj"> </form> Przykład Na świecie W Polsce Pole opcji <form action="https://www.google.pl/search" method="get"> <input type="text...
Wstęp do JavaScript i ECMAScript / Jak osadzić skrypt JavaScript na stronie?...dokumentu. Może to potrwać nieco dłużej niż w przypadku użycia atrybutu async. XHTML W języku XHTML skrypty osadzamy następująco: <script type="text/javascript"> // <![CDATA[ /* Tutaj umieść kod skryptu. */ // ]]> </script> oraz <script type="text/javascript" src="plik.js"></script> W przypadku XHTML 1 możliwe jest dodatkowo użycie jedynie atrybutu defer: <script defer="defer" type="text/javascript" src="plik.js"></script> W XHTML5 można również użyć async="async". HTML 4.01...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
... ... */. W trybie zgodności jeżeli deklaracja zawiera nierozpoznawaną wartość, zostaje pominięta w całości. Na przykład po podaniu: span { text-decoration: underline cross-out overline } tekst nie zostanie nawet podkreślony ani nadkreślony, ponieważ wartość cross-out jest nieprawidłowa. Natomiast starsze wersje Internet Explorera interpretowały deklarację do pierwszego nierozpoznanego składnika, tzn. w tym przypadku tekst zostałby pokreślony, ale nie nadkreślony. Miało to wpływ na...
- Menu w CSS / Pionowe menu
...{ display: block; list-style: none; margin: 0; padding: 0; } ul { width: 200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu HTML! Krótkie wyjaśnienie użytych deklaracji CSS: Na początku wstawiamy znaną już regułę...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...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; margin: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W wyróżnionych miejscach wpisano zdefiniowany...
- HTML5 / Napisy do filmów <track>
...nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space. Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem: ::cue { color: white; background: black; } Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać: ::cue(b) { color: red; }...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...Quirks interpretacja będzie zupełnie inna. Dla uzyskania analogicznego efektu również w trybie Quirks należy wpisać: <div style="width: 600px; text-align: center"> <div style="text-align: left; margin-left: auto; width: 400px; margin-right: auto">...</div> </div> Sposób ten jest przydatny np. do centrowania tabeli (względem elementu BODY stanowiącego blok obejmujący) zgodnie z zaleceniami CSS. <html> <head>...</head> <body style="text-align: center"> <table style="margin-left...