przykład html - Kurs HTML i CSS
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...
- Tekst HTML / Komentarz HTML
...ponownie wstawić taki fragment, usuwając tylko znaki komentarza - nie musimy wtedy wpisywać całego kodu od początku: <!--<p> Ten fragment pokazuje przykład, w jaki sposób można używać <b>komentarz HTML</b>... </p>--> Należy jednak pamiętać, aby nie obejmować w ten sposób przesadnie długich fragmentów strony, ponieważ niezależnie od tego, że nie są one widoczne na ekranie, to nadal figurują w kodzie źródłowym i spowalniają wczytywanie. Nie są natomiast wczytywane obrazki i inne osadzone...
- HTML dla zielonych / Koniec linii HTML <br>
...do następnej linii za pomocą klawisza Enter (ignoruje również postawienie obok siebie więcej niż jednej spacji - zobacz: Znaki specjalne). Na przykład jeśli wpiszesz w edytorze taki tekst: To jest pierwsza linia... a to jest druga linia. w przeglądarce pojawi się: To jest pierwsza linia... a to jest druga linia. Linia zostanie zakończona automatycznie tylko wtedy, gdy podany tekst będzie zbyt długi, aby zmieścić się w jednym wierszu. Jeśli jednak koniecznie chcemy natychmiast...
- Oprawa graficzna / "Duszki" CSS
...pod którym wyświetlamy tło graficzne. Zwykle nie jest obojętne, w jaki sposób ułożymy poszczególne grafiki na arkuszu. Przedstawiony powyżej przykład ikon o identycznych wymiarach, należy do rzadkości. Dalej na przykładach dowiemy się, w jaki sposób projektować optymalne rozłożenie grafik na arkuszu z "duszkami" CSS, tak aby potem nie było problemu z ich wykorzystaniem na rzeczywistej stronie WWW. Wszystkie przykłady będą oparte o ten sam, pojedynczy plik graficzny (obramowanie zostało...
Menu drzewiaste / Skrypt menu drzewiastego...lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów listy będzie automatycznie odzwierciedlał strukturę drzewa menu. Oto przykładowy kod: <ul id="tree0" class="tree"> <li><a href="...">Dokument 1</a></li> <li><a>Folder 2</a> <ul> <li><a href="...">Dokument 2.1</a></li> <li><a href="...">Dokument 2.2</a></li> </ul> </li> <li><a>Folder 3</a> <ul> <li><a href="...">Dokument 3.1</a></li> <li><a>Folder 3.2</a> <ul> <li><a href="...">Dokument 3.2.1</a></li>...
- 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...
- 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...
- Tekst HTML / Tytuł nagłówka <h1, h2, h3, h4, h5, h6>
...na dany tytuł. Atrybut ten (title="...") można stosować praktycznie w stosunku do wszystkich znaczników HTML (oprócz: <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <title>). UWAGA! W treści atrybutu title="..." nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: " Przykład <h4 title> Przykład Pytania i odpowiedzi <h1, h2, h3, h4, h5, h6> Jak zrobić tytuł w HTML? Aby tekst na stronie był czytelniejszy, dobrze jest...