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...
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...
- 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...
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...
- Podcast HTML / #1 HTML dla zielonych
...4 Odsyłacze HTML #5 Tabele HTML #6 Multimedia HTML #7 Widżety HTML #8 Formularze HTML #9 HTML5 Podstawy języka HTML HTML to skrót od Hypertext Markup Language, czyli Hipertekstowy Język Oznaczania. Jest to język komputerowy służący do tworzenia stron internetowych. Dokument HTML jest po prostu plikiem tekstowym, w którym umieszczamy polecenia dotyczące formatowania i wstawiania grafiki. Struktura dokumentu HTML Dokument HTML składa się z sekcji nagłówkowej <head>...</head> oraz...
- 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 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...
- 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łę...
- 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...