akapit html - Kurs HTML i CSS
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...HTML5. 10 min - Omówienie struktury dokumentu HTML i podstawowych znaczników Wyjaśnienie struktury HTML Omówienie nagłówków Omówienie akapitu Przykłady kodu i omówienie atrybutów. 10 min - Omówienie odsyłaczy (linków) Wyjaśnienie, czym są odsyłacze i jak je tworzyć Odsyłacz do innej strony Odsyłacz do innej podstrony Odsyłacz do adresu e-mail Przykłady linków do stron, podstron i adresów e-mail. 10 min - Ćwiczenie praktyczne: utworzenie strony z tytułem, nagłówkami...
Selektory pseudoklas CSS / Atrybut języka :lang...tj. nagłówek HTTP Content-Language, język strony, propagację atrybutu lang="..." przypisanego dla elementu nadrzędnego: <body lang="pl"> <p>Ten akapit jest napisany w języku polskim.<p> </body> /* Ta reguła zostanie zastosowana: */ p:lang(pl) { color: red } /* Ta reguła nie zostanie zastosowana: */ p[lang|="pl"] { color: blue } Przykład :lang Po wpisaniu w arkuszu stylów: p:lang(en) { color: red } div:lang(en) { border: 1px solid red } a następnie w kodzie źródłowym: <p lang="en">1...
- Selektory pseudoelementów CSS / Cudzysłowy {quotes}
...następująco: q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" } q:before { content: open-quote } q:after { content: close-quote } To jest akapit w języku polskim (pl). Ferdynand Wspaniały powiedział: Słyszałem, jak Bill G. mówił: Przeglądarka Chrome 10 tego nie wyświetli... i miał rację 😉 albo (rzadziej spotykane): q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" } q:before { content: open-quote } q:after { content: close-quote } To jest akapit w języku polskim (pl)...
- Selektory specjalne CSS / Klasy selektorów <... class>
...class> Lista klas Podzbiory klas Klasy selektorów <... class> selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako klasa należy podać dowolny pojedynczy wyraz, który...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
selektor#identyfikator { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Identyfikator to wartość atrybutu id="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki...
- Selektory pseudoelementów CSS / Przed... :before
...atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. Przykład :before Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:before...
- Selektory pseudoelementów CSS / Po... :after
...Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. Przykład :after Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:after { content...
- Tło CSS / Tło obrazkowe {background-image}
...Firefox, Opera, Chrome) selektor { background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Polecenie...
HTML5 / Nowe elementy HTML5...<h2>Podsekcja 1.2</h2> <section> <h3>Podsekcja 1.2.1</h3> </section> ...utworzy następujący spis treści: Sekcja 1 Podsekcja 1.1 (zawiera akapit "Akapit podsekcji 1.1") Podsekcja 1.2 (nie ma żadnej zawartości oprócz nagłówka) Podsekcja 1.2.1 (nie ma żadnej zawartości oprócz nagłówka) Jest to równoważne następującej strukturze ze wszystkimi sekcjami jawnymi: <section> <h1>Sekcja 1</h1> <section> <h2>Podsekcja 1.1</h2> <p>Akapit podsekcji 1.1</p> </section> <section>...
- HTML dla zielonych / Pozioma linia HTML <hr>
<hr> Pozwala wstawić na stronie poziomą linię (ang. horizontal rule), za pomocą której np. można rozdzielić sąsiednie grupy akapitów wyraźnie różniące się między sobą tematycznie. UWAGA! Znacznik <hr> nie posiada w języku HTML znacznika zamykającego! Przykład <hr> <p>Akapit...</p> <p>Akapit...</p> <hr> <p>Akapit...</p> <p>Akapit...</p> Pytania i odpowiedzi <hr> Jak napisać poziomą linię w HTML? W celu dodania poziomej linii na stronie WWW należy posłużyć się znacznikiem <hr>. Jak...