przykład html - Kurs HTML i CSS
Wykazy CSS / Typ stylu wykazu {list-style-type}Spis treści {list-style-type} Typ stylu wykazu {list-style-type} Znakowy typ stylu wykazu Alfabetyczny typ stylu wykazu Numeryczny typ stylu wykazu Typ stylu wykazu {list-style-type} selektor { list-style-type: typ } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "typ" odpowiada za wygląd wyróżnika (markera) wykazu. Należy zamiast niego wpisać dowolny z poniżej...
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...
- HTML5 / Asynchroniczne ładowanie skryptów <script src async>
...Co to jest skrypt src w HTML? Skrypt src w HTML to atrybut tagu <script>, który określa ścieżkę do pliku JavaScript, który ma być załadowany. Na przykład: <script src="script.js"></script>. Używając src, zamiast pisać kod JavaScript bezpośrednio w tagu <script>, możemy załadować kod z zewnętrznego pliku. Na czym polega asynchroniczność? Asynchroniczność polega na wykonywaniu zadań niezależnie od głównego wątku aplikacji, co pozwala na równoległe przetwarzanie i unikanie blokowania...
- 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...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...który odpowiada przypadkowi, z którym się będziesz borykać. Wtedy to już nie będzie "sucha" teoria, ale od razu zastosowanie praktyczne w konkretnym przykładzie, a więc dużo łatwiej będzie to sobie przyswoić. Przed dalszą lekturą tego podrozdziału warto zwrócić uwagę na wartości domyślne, jakie przyjmują poszczególne własności, kiedy nie przypisze się im żadnych innych. Na przykład, jeżeli nie ustalimy marginesów elementu, przyjmą one wartości 0 (zero), co jest dosyć logiczne. To samo dotyczy...
Przeglądarka zdjęć...miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku przegladarka_zdjec.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array( new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis') )); </script> zdjęcie Lokalizacja pliku zdjęcia Tytuł Tytuł zdjęcia Opis Szerszy opis zdjęcia (opcjonalnie)...
- 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>...