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ąć...
- 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)...
- 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...
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.
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ą...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...na obrazku, który kliknął użytkownik. Następnie oprogramowanie na serwerze (np. skrypt PHP) odczyta te współrzędne i wyświetli odpowiednią treść. Na przykład można wstawić na stronę grafikę z mapą geograficzną jakiegoś terenu, a kliknięcie na wybrany punkt spowoduje wyświetlenie zbliżenia tego obszaru albo informacji o wskazanej okolicy. Aby użyć mapy odsyłaczy po stronie serwera, wystarczy dodać do obrazka atrybut ismap. Po kliknięciu, przeglądarka automatycznie doklei na końcu adresu...
- 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ć...
- Formularze HTML / Ramy formularza HTML <form>
...W tym celu do kodu źródłowego strony trzeba dodać znacznik FORM z atrybutem wskazującym akcję, jaka ma zostać wykonana po wysłaniu formularza. Na przykład, aby po wypełnieniu formularza mógł on być wysłany na adres e-mail jan.kowalski@example.com, można się posłużyć następującym znacznikiem: <form action="mailto:jan.kowalski@example.com" method="post">...</form>. Jak wyśrodkować formularz w HTML? Aby ustawić na środku ekranu całą zawartość formularza, można przypisać mu odpowiedni...