przykład html - Kurs HTML i CSS
Selektory pseudoelementów CSS / Cudzysłowy {quotes}...Jak zrobić cudzysłów w cudzysłowie? Aby umieścić cudzysłów wewnątrz innego cudzysłowu, można użyć różnych kombinacji cudzysłowów. Na przykład: „To jest »cytat« w cudzysłowie” albo "To jest 'cytat' w cudzysłowie". Jak wygląda polski cudzysłów? Polski cudzysłów ma postać dwóch przeciwnie skierowanych podwójnych apostrofów: „...”. W kodzie HTML możesz użyć następujących znaków specjalnych: „...”. Czy na końcu cytatu stawiamy kropkę? Kropka kończąca cytat...
- Oprawa graficzna / Zamiennik obrazkowy
...i wygodą użycia. Nadają się do wykorzystania dla różnych elementów HTML, jednak dla uproszczenia w dalszej części tego rozdziału zostaną podane przykłady operujące na elementach DIV i SPAN. Zamienniki obrazkowe nie nadają się do zastosowania w przypadku ilustracji osadzanych w treści artykułów. Zdjęcia takie, jako elementy publikowane redakcyjnie, nie zależą od arkusza CSS (skórki), a zatem należy je traktować jako treść, a nie oprawę graficzną. W przypadku takich ilustracji należy...
- 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...
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>.
- 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...
- Znaki specjalne HTML / Encje HTML
...zainteresowanych Więcej znaków specjalnych przedstawiających różne symbole w postaci ikon piktogramów znajdziesz w rozdziale: Emotikony (emoji). Na przykład: 😀 👋 🐵 🍇 🌍 🎃 👓 🏧 🏁 i wiele więcej. Natomiast ikony na stronę do pobrania znajdziesz w rozdziale: Ikony (symbole). Potrzebujesz pomocy? Wygląd znaków Unicode wraz z odpowiadającymi im numerycznymi kodami encji HTML (znaków specjalnych) możesz sprawdzić tutaj. ✅ Rozpocznij przeglądanie Unicode Znaki specjalne HTML Co zrobić jeśli chcemy...
- Szablon strony na DIV-ach / Stały szablon
...Ułóżmy nasze szablony, przedstawione na wstępie, tak aby menu i blok dodatkowych informacji rzeczywiście były pionowymi kolumnami (wszystkie 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...