znaczniki - Kurs HTML i CSS
Nagłówek i treść HTML / Tytuł strony <title>...ten sam fragment z nazwą serwisu, ale oprócz tego każdy dokument powinien zawierać dalszą część tytułu, opisującą jego zawartość. Tytuł strony jest znacznikiem obowiązkowym. Pominięcie go stanowi błąd! Ponadto treść tytułu nie może zawierać żadnych znaczników. Pytania i odpowiedzi <title> Co to jest tytuł strony? Tytuł strony to tekst, który zwykle pojawia się na karcie przeglądarki ze stroną oraz w wynikach wyszukiwania np. Google. Gdzie można umieścić <title>? Znaczniki...
- HTML5 / Czy XHTML umarł?
...Extensible Markup Language - czyli Rozszerzalny Język Oznaczania). XML to bardziej uniwersalny język oznaczania tekstu, w którym możemy tworzyć nowe znaczniki. Przy jego użyciu można zbudować dowolny dokument, a nie tylko stronę internetową, nadając mu wewnętrzną strukturę - tzn. umieszczać wybrane fragmenty tekstu w znacznikach, które mogą być następnie ułożone jeden wewnątrz drugiego, tak aby stanowiły logiczne połączenie. Przykładem struktury w języku HTML mogą być ramy dokumentu...
Tryb Quirks / X-UA-Compatible...Aby opisany tutaj znacznik META funkcjonował prawidłowo, musi znajdować się w nagłówku strony, a przed nim mogą być wstawione tylko inne znaczniki <meta> lub element <title>...</title>! Co zmienia przejście z trybu Compatibility View (MSIE 7) do trybu Standards Compliance (MSIE 8)? HTML Prawidłowe dodawanie cudzysłowów obejmujących tekst zawarty w znaczniku <q>...</q> Zawartość atrybutu <img src="..." alt="..."> nie wyświetla się już w "dymku" narzędziowym (co było...
- HTML5 / Nowe atrybuty HTML5
Język HTML5 definiuje nie tylko zupełnie nowe elementy (znaczniki), ale również dodatkowe atrybuty, które można przypisywać również do elementów, które były zdefiniowane już w specyfikacji HTML 4.01. Atrybuty Zastosowanie Opis allow IFRAME Polityka uprawnień, która ma zostać zastosowana do zawartości elementu IFRAME allowfullscreen IFRAME Czy pozwolić zawartości elementu IFRAME na użycie funkcji requestFullscreen() as LINK (rel="preload" lub rel="modulepreload") Potencjalny...
- HTML5 / Stopka <footer>
...zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp. Mimo z pozoru analogicznej znaczeniowo nazwy, element FOOTER, inaczej niż HEADER, stanowi stopkę sekcji, podczas gdy ten drugi nie oznacza...
- HTML5 / Szablon strony w HTML5
...zwykle były potem formatowane przy pomocy CSS, a więc takie użycie znaczników było poprawne. W języku HTML5 zostały jednak wprowadzone zupełnie nowe znaczniki, dzięki którym możemy zbudować szablon strony w sposób jeszcze bardziej semantyczny. Spróbujmy to wykonać, przekształcając kod podany w rozdziale: Szablon strony na DIV-ach. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> </head> <body> <div id="top"> <header id="NAGLOWEK">Nagłówek szablonu</heade>...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
...display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci układane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie...
- HTML5 / Wstawka <aside>
...w tym miejscu zamieszczone tylko dlatego, że w sposób ogólny pasują do kontekstu treści na stronie. Kiedy ASIDE a kiedy ARTICLE? Oba te znaczniki tworzą nową sekcję w dokumencie, która w innym kontekście mogłaby funkcjonować niezależnie. Stosuj element ASIDE do oznaczania wszelkich elementów pobocznych, które można by było swobodnie usunąć z dokumentu bez żadnej utraty jego wewnętrznej spójności. Natomiast jeśli usunięcie samodzielnej sekcji spowodowałoby, że pozostała treść na...
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...który wcześniej wstawiliśmy do naszego dokumentu HTML. Wszystko co znajduje się wewnątrz tak wskazanego znacznika - czyli zarówno tekst, jak i inne znaczniki - otrzyma style podane w deklaracji. Przykładowo, aby zmienić kolor tła oraz teksu na całej stronie, możemy się posłużyć selektorem body, ponieważ właśnie wewnątrz znacznika <body>...</body> znajduje się cała zawartość strony. Zatem w arkuszu stylów wystarczy umieścić następujący kod: body { background-color: black; color: white; }...
- HTML5 / Załącznik <figure, figcaption>
...używany na wypadek, gdyby zdjęcie nie mogło być załadowane - podpis zdjęcia zawsze pojawi się na stronie. Kiedy FIGURE a kiedy ASIDE? Oba te znaczniki dodają do dokumentu HTML5 jakiegoś rodzaju wtrąconą treść. Oba również z powodzeniem moglibyśmy umieścić na osobnej stronie - poza artykułem, w którym pierwotnie się znalazły. Jednak treść artykułu zwykle bezpośrednio odnosi do występujących w nim ilustracji i diagramów, dlatego co najwyżej moglibyśmy przenieść je na inną podstronę...