przykład html - Kurs HTML i CSS
HTML dla zielonych / Akapit HTML <p "text-align"><p>Tu wpisz treść akapitu</p> Akapit (w pewnych warunkach nazywany paragrafem) to pewien ustęp w tekście. Następujące po sobie akapity, są rozdzielone linijką przerwy. Treść akapitu należy wpisać pomiędzy znacznikami <p> oraz </p>. Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w akapitach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: <br><br>, można po prostu objąć...
- Tekst HTML / Kod poprawny semantycznie
...ale nie jest to wymagane. Są to np.: H1-H6 (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie...
- HTML5 / Zdarzenia HTML5
...działania użytkownika. Zdarzenia w HTML można przypisywać bezpośrednio do elementów jako atrybuty, dodając przedrostek on przed nazwą zdarzenia. Na przykład, aby wykonać akcję po kliknięciu przycisku, można użyć atrybutu onclick="...": <button onclick="alert('Kliknięto przycisk!')">Kliknij mnie</button> W przypadku gdy wybrane zdarzenie nie posiada odpowiadającego mu atrybutu (patrz tabela poniżej), można się posłużyć znacznikiem <script>...</script>. Wpisuje się w nim bezpośrednio kod...
CSS dla zielonych / Edytory CSS...to często dawno przestały być już rozwijane. Najlepszym rozwiązaniem jest użycie edytora HTML, który ma wbudowaną obsługę również języka CSS. Na przykład Brackets to jeden z lepszych edytorów HTML i CSS. Posiada szereg wbudowanych funkcji przydatnych przy tworzeniu stron internetowych. Obsługuje instalowanie darmowych rozszerzeń, które mogą dodatkowo zwiększyć jego możliwości. Jest przy tym całkowicie darmowy i dostępny w wersjach dla każdego systemu operacyjnego.
- Formularze HTML / Hasło <input "password">
...głównej, do której wszyscy mają normalny dostęp, wstawić następujący kod: <form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false"> <input type="password" name="password"> <input type="submit" value="OK"> </form> Hasłem w tym przypadku jest nazwa strony bez rozszerzenia, którą chcemy zabezpieczyć. Przykładowo: hasłem do strony tajna_strona.html (która znajduje się w tym samym katalogu co strona główna, czyli tam gdzie wstawiliśmy powyższy skrypt)...
Rozwijane menu...się umieścić w innym miejscu również zwykłych odsyłaczy tekstowych. <select onchange="self.location.href = this.value"> <option VALUE="adres1.html">Opis1</option> <option VALUE="adres2.html">Opis2</option> ... </select> adres1.html, adres1.html Adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać po wybraniu danej pozycji na liście Opis1, Opis2 Test, który pojawi się na liście i po wybraniu których nastąpi wczytanie stron Można również zaznaczyć opcję domyślną...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...inteligentne ładowanie? Inteligentne ładowanie można włączyć, stosując atrybut loading="lazy" dla elementów, takich jak <img> i <iframe>. Na przykład: <img src="obrazek.jpg" loading="lazy">. Dzięki temu zasoby te będą ładowane tylko wtedy, gdy użytkownik przewinie stronę w ich pobliże. Dlaczego leniwe ładowanie? Leniwe ładowanie jest stosowane, aby przyspieszyć czas ładowania początkowej części strony, zmniejszając ilość zasobów ładowanych od razu. Pozwala to na szybsze...
- Selektory specjalne CSS / Klasy selektorów <... class>
...selektor uniwersalny, który pozwala przypisać własności klasy do wszystkich elementów, którym zostanie ona nadana bez względu na typ znacznika. Na przykład jeżeli w arkuszu stylów strony została umieszczona następująca reguła: *.przyklad_uniwersalna { color: red } Dlatego teraz każdy element, któremu nadamy klasę przyklad_uniwersalna, będzie miał kolor czerwony: To jest akapit, któremu została przypisana klasa class="przyklad_uniwersalna". To jest pogrubienie, któremu została nadana klasa...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...na stronie poza tym okienkiem.</p> </div> <button type="button" popovertarget="popover1">Otwórz/zamknij popover</button> Bardziej zaawansowany przykład z osobnym przyciskiem zamykania i blokadą przypadkowego zamknięcia: <div id="popover2" popover="manual"> <p>To jest popover, który powinien się wyświetlić ponad standardową zawartością strony.</p> <p>Aby go zamknąć, kliknij przycisk:</p> <button type="button" popovertarget="popover2" popovertargetaction="hide">Zamknij...
- Formularze HTML / Przycisk <button>
<button type="rodzaj">Treść przycisku</button> gdzie "rodzaj" określa typ przycisku i można tutaj podać: "submit" - przycisk wysłania formularza (domyślnie) "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis">. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić...