przykład html - Kurs HTML i CSS
HTML5 / Sekcja <section>...Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do czynienia z podrozdziałami. Podział treści na sekcje jest niezwykle przydatny czytelnikowi. Akapity w...
- Nagłówek i treść HTML / Strona mobilna <link media>
<head> <link rel="alternate" media="media" href="adres"> </head> gdzie jako "media" podaje się typ(y) mediów alternatywnych albo zapytanie mediów. Natomiast zamiast "adres" wpisuje się bezwzględny adres strony (rozpoczynający się od http:// lub https://), która stanowi odpowiednik bieżącego dokumentu specjalnie przystosowany na podane urządzenia. W niektórych przypadkach autorzy udostępniają specjalną wersję strony na urządzenia mobilne. Zwykle ma ona węższy układ treści, mniej zdjęć i menu...
- Tabele HTML / Tytuł tabeli <caption>
...tytuł tabeli? W tym celu zaraz po znaczniku otwierającym tabeli trzeba wstawić element CAPTION, wewnątrz którego umieszcza się tytuł tabeli. Na przykład, aby utworzyć tabelę z tytułem oraz dwoma wierszami i dwiema kolumnami, można się posłużyć następującym kodem: <table> <caption>Tytuł tabeli</caption> <tr> <td>wiersz 1, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>. Domyślnie tytuł wyświetla się na środku...
Selektory atrybutów CSS / Prosty selektor atrybutu...określony atrybut (przy czym jego wartość nie ma znaczenia). Pozwala nadać konkretne cechy elementom, które posiadają właśnie taki atrybut. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="..." (który powoduje wyświetlenie tekstu informacji, po wskazaniu myszką). W tym przypadku nie ma znaczenia jaką wartość ma atrybut, ważne jest jedynie, aby został on nadany. UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko...
- HTML5 / Nawigacja <nav>
...przedzierania się przez mniej istotne treści, które w kodzie źródłowym dokumentu znajdują się przed nim. Przykład <nav> Poniżej przedstawiony przykład zawiera dwie sekcje nawigacyjne: pierwsza dla całego serwisu, a druga w obrębie artykułu na stronie. <nav> <ul> <li><a href="index.html">Strona główna</a></li> <li><a href="contents.html">Spis treści</a></li> </ul> </nav> <article> <h1>Mój artykuł</h1> <nav> <ul> <li><a href="#sec1">Rozdział 1</a></li> <li><a...
- Układ elastyczny CSS / Kolejność {order}
...W ten sposób potrzeby obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i...
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...tła oraz tekstu na całej stronie, najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład: body { background-color: black; color: white; } ustawi czarny kolor tła i biały kolor tekstu. Jak ustawić kolor RGB w CSS? W języku CSS możemy stosować takie same kolory jak w HTML. Na przykład aby ustawić na całej stronie czarny kolor tła i biały kolor tekstu w notacji heksadecymalnej, wystarczy w arkuszu stylów wstawić...
- Nagłówek i treść HTML / Edytor <meta "generator">
...HTML, który został wykorzystany do utworzenia dokumentu. Przykład <meta "generator"> <meta name="generator" content="MetBod (https://www.kurshtml.edu.pl/generatory/metbod.html)">
- HTML dla zielonych / Wielkość czcionki HTML <span "font-size">
<span style="font-size: rozmiar">Tu wpisz tekst</span> gdzie jako "rozmiar" należy wpisać: xx-small Czcionka najmniejsza x-small Czcionka bardzo mała small Czcionka mała medium Czcionka średnia large Czcionka duża x-large Czcionka bardzo duża xx-large Czcionka największa Przykład <span "font-size"> <span style="font-size: xx-small">Czcionka o rozmiarze xx-small</span> Czcionka o rozmiarze xx-small <span style="font-size: x-small">Czcionka o rozmiarze x-small</span> Czcionka o...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu. Dla...