html - Kurs HTML i CSS
Menu drzewiaste / Skrypt menu drzewiastego...underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Tree(id) { this.id = id; var url = unescape(window.location.href.replace(/#.*/, '')); var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, ''); this.click = function () { for...
Szablon strony na DIV-ach / Stały szablon...przykłady w skali 1:2, czyli dwukrotnie pomniejszone): Dwie kolumny: Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left...
- Oprawa graficzna / "Duszki" CSS
...w przypadku menu pionowego, opisanego wcześniej w rozdziale Menu w CSS. Tutaj wykonamy go przy wykorzystaniu "duszków". <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px...
WyróżnieniaSerwis został umieszczony na płycie CD magazynu Komputer Świat Ekspert w numerze 03/2007: Znakomicie opracowany kurs HTML przygotowany specjalnie dla Czytelników Eksperta w wersji offline. Dzięki niemu poznamy podstawowe zagadnienia związane z tworzeniem stron internetowych, a także składnię języka HTML, XHTML, CSS2. Kurs ten zawiera także gotowe skrypty oraz generatory stron, szablonów, okien i innych elementów niezbędnych do zbudowania atrakcyjnej i funkcjonalnej strony WWW. Uzupełnieniem...
- Menu rozwijane, otwierane, wysuwane / Kolekcje dokumentów
...w którym podaje się listę adresów URL wszystkich części podzielonego artykułu: <dl id="menu0"> <dt>Nagłówek 1</dt> <dd><a href="czesc1.html" rel="Collection(czesc2.html,czesc3.html)">Artykuł stronicowany</a></dd> <dd><a href="...">Dokument 2</a></dd> <dd><a href="...">Dokument 3</a></dd> </dl> Zwracam uwagę, że w nawiasie nie może być żadnych spacji - nawet po znaku przecinka! Jeśli w nazwie plików z kolekcji znajduje się spacja, należy ją zastąpić przez: %20. Podobnie znaki...
- Selektory pseudoklas CSS / Korzeń :root
...HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu: html { cecha: wartość } Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia. Przykład :root Po wpisaniu w arkuszu stylów: :root p { color: red } a w dowolnym miejscu strony: <p>To jest akapit</p> powinniśmy otrzymać tekst koloru czerwonego: To jest akapit...
HTML5 / Główna treść <main>...nie może być również umieszczony - bezpośrednio lub pośrednio - wewnątrz znaczników innych niż: HTML, BODY, DIV, FORM. Przykład <main> <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Matrix - Serwis kinomaniaków</title> <head> <body> <header> Serwis kinomaniaków <nav> <ul> <li><a>Matrix</a></li> <li><a href="incepcja.html">Incepcja</a></li> <li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li> </ul> </nav> </header>...
- HTML5 / Pominięcie walidacji formularza <form novalidate>
(interpretuje: Internet Explorer 10, Firefox 4, Opera 15, Chrome 10) <form novalidate>...</form> novalidate to atrybut logiczny (wstawiany bez wartości), który pozwala pominąć wszelką weryfikację pól formularza. Oznacza to, że użytkownik będzie mógł wysłać formularz, nawet jeżeli nie wypełni wszystkich obowiązkowych pól albo poda nieprawidłowe wartości (np. wpisze adres e-mail w niepoprawnym formacie). Przykład <form novalidate, input required> Mimo oznaczenia pola jako obowiązkowe...
- Przeglądarka zdjęć
...poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. przegladarka_zdjec.js: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w trybie pokazu slajdów [sek] this.id = id; this.zdjecia = zdjecia; var timerID = null; this.wyswietl = function(nr) { clearTimeout(timerID); var f...
- Szablon strony na DIV-ach / Płynny szablon
...Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie...