przykład html - Kurs HTML i CSS
HTML dla zielonych / Odsyłacz do podstrony HTML <a href>...na temat dodatkowych możliwości przy wstawianiu odsyłaczy do podstrony, zobacz rozdział: Odsyłacze / Do podstrony. Przykład <a href> Aby zobaczyć przykład działania takiego odsyłacza możesz kliknąć tutaj (nastąpi przejście do strony głównej tego kursu). Pytania i odpowiedzi <a href> Jak nazywa się internetowy odsyłacz? Odsyłacz internetowy to inaczej hiperłącze, odnośnik hipertekstowy bądź po prostu mniej formalnie: link. Po kliknięciu w niego następuje automatyczne przejście do nowej...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...W przypadku konfliktów ważniejsza będzie wartość id. Wartości atrybutów domyślnych są zawsze definiowane małymi literami. Na przykład jeśli nie podamy jawnie atrybutu type dla znacznika input, zostanie dla niego przyjęta wartość type="text", a nie type="TEXT". Znaki specjalne (tzw. encje) w języku HTML można zapisywać używając wartości szesnastkowych (HEX), np.: &#Xnn; lub &#xnn;, gdzie "nn" to liczba szesnastkowa. XHTML pozwala tylko na drugą wersję, tzn. &#xnn...
- Podcast HTML / #6 Multimedia HTML
Pobierz plik MP3... Zobacz więcej... Wszystkie odcinki podcastu HTML: #1 HTML dla zielonych #2 Nagłówek i treść HTML #3 Tekst HTML #4 Odsyłacze HTML #5 Tabele HTML #6 Multimedia HTML #7 Widżety HTML #8 Formularze HTML #9 HTML5 Wstawianie grafiki Element <img src="..." alt="..."> służy do wstawiania obrazków, grafik, zdjęć lub ilustracji na stronę WWW. Kluczowe atrybuty to: src: wskazuje ścieżkę dostępu do lokalizacji, w której znajduje się obrazek. alt (tekst alternatywny)...
- Tekst HTML / Wykaz <ul, ol, li>
(lista wyliczeniowa) Spis treści <ul, ol, li> Wypunktowanie - lista nieuporządkowana <ul, li> Wykaz numerowany - lista uporządkowana <ol, li> Wykaz numerowany - różne typy Wykaz numerowany z podaniem początkowego numeru Zmiana numerowania w trakcie Wykaz z wypunktowaniem innym kolorem Wykaz w akapicie Potrzebujesz pomocy? Przy tworzeniu wykazów HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet...
- Nagłówek i treść HTML / Plik robots.txt
...robot nie ma dostępu. Każda ścieżka musi rozpoczynać się od znaku ukośnika ("/") i powstaje poprzez wycięcie pierwszego członu adresu URL. Na przykład aby zablokować dostęp do pliku http://www.example.org/index.html, należy wpisać: User-Agent: * Disallow: /index.html Pusta wartość Disallow oznacza brak ograniczeń w indeksowaniu dokumentów: User-Agent: * # Wszystkie dokumenty serwisu będą normalnie indeksowane: Disallow: Aby zablokować dostęp do wszystkich plików z jakiegoś katalogu...
- HTML5 / Przeciągnij i upuść <... draggable>
...w HTML, należy ustawić atrybut draggable="true" na elemencie, który ma być przeciągany, oraz obsłużyć zdarzenia dragstart, dragover, i drop. Na przykład: <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.id)" id="dragItem">Przeciągnij mnie</div><div ondragover="event.preventDefault()" ondrop="handleDrop(event)" id="dropZone">Upuść tutaj</div>.
Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>...elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie. Komentarze w arkuszu stylów pisze się używając znaków: /* (otworzenie komentarza) oraz */ (zamknięcie komentarza), np.: /*12345*/. Wszystko...
- Czcionki CSS / Czcionki osadzone @font-face
...niestandardową czcionkę do CSS, użyj reguły @font-face, podając nazwę czcionki oraz ścieżki do plików zawierających formaty czcionki, na przykład: @font-face { font-family: 'MojaCzcionka'; src: url('sciezka/do/moja_czcionka.woff2') format('woff2'), url('sciezka/do/moja_czcionka.woff') format('woff'); }. Następnie możesz używać tak zdefiniowanej czcionki w standardowy sposób posługując się jej nazwą: body { font-family: 'MojaCzcionka', sans-serif; }.
- Odsyłacze HTML / Do etykiety <a id>
...(oprócz: BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE). Można do tego również wykorzystać istniejące wcześniej na stronie znaczniki. Idealnym przykładem są tytuły. Zwykle naturalnie wyznaczają on ważne miejsca na stronie, do którym prawdopodobnie możemy chcieć wstawić bezpośrednie odsyłacze. UWAGA! Bardzo ważne: w nazwach etykiet lepiej nie używać: wielkich liter znaków, np.: \ / : * ? " < > | spacji (jeśli musisz, w zamian używaj podkreślnika "_") polskich liter (ą, ć, ę, ł, ń...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...text-align: center; } .menu dd { margin: 0; padding: 2px 5px; background-color: #ccc; color: #000; } Aby połączyć dwa ostatnie przykłady, wystarczy wstawić wszystkie menu w jednym wspólnym bloku, który musi mieć nadaną pozycję relatywną, a kolejne menu powinny być osadzane następująco: <div class="menu"> <dl id="menu0">...</dl> <script> new Menu('menu0', 'menu0', true, false, 0, 0, -1, -1, true); </script> <dl id="menu1">...</dl> <script> new...