Znaczniki html

Znaczniki html

Stworzone przez JacobSobota w dniu 31 października 2017

HTML

ZNACZNIKOPIS

<html>

Nadrzędny znacznik języka html. Potocznie nazywany elementem root (korzeniem), który w hierarchii drzewa zawiera wszystkie elementy pomiędzy znacznikami <html> i </html>. Znacznik ten jest wymagany do poprawnego działania każdej strony internetowej!
PRZYKŁAD:

Metadane

ZNACZNIKOPIS

<head>

Znacznik html, który w swoich ramach obejmuje zarówno łącza zewnętrzne, jak i wewnętrzne do innych zasobów (np. skryptów CSS/JS). Dodatkowo zawiera w swoim obrębie metadane strony. Tak jak w przypadku znacznika <html>, jest używany na każdej stronie internetowej.
PRZYKŁAD:

<title>

Znacznik stosowany do określania tytułu strony. Jest pobierany zarówno przez przeglądarki, które wyświetlają go na pasku tytułu, jak również wyszukiwarki internetowe (np. Google, Bing). Jeżeli chcecie samodzielnie zdefiniować tytuł strony, która następnie będzie wyświetlana w ww. przypadkach to musicie pamiętać o umieszczeniu tego znacznika w każdym projekcie.
PRZYKŁAD:

<base>

Ustala bazowy adres URL witryny, dzięki czemu zasoby mogą zostać podłączone do strony za pomocą krótszych adresów URL.
PRZYKŁAD BEZ BASE:
PRZYKŁAD Z UŻYCIEM BASE:

<link>

Znacznik stosowany do dołączania zewnętrznych dokumentów CSS lub JavaScript. W wersji znaczników HTML5 został uproszczony.
PRZYKŁAD:

<meta>

Znacznik, który definiuje dane przekazujące dodatkowe informacje o stronie internetowej. Mogą to być np. dane o opisie strony (meta description), frazach kluczowych (keywords) oraz wiele innych. Po więcej przykładów odsyłam na stronę W3C. Podobnie jak w przypadku znacznika title, będziecie go używać przede wszystkim ze względu na atrybut description, który pojawi się w Google i innych wyszukiwarkach internetowych (ważne z punktu widzenia SEO).
PRZYKŁAD:

<style>

Znacznik stosowany do definiowania stylów CSS wewnątrz dokumentu HTML. Można go używać na dwa sposoby:
– dodać osobną sekcję <style></style>
lub
– w znaczniku HTML zawrzeć atrybut style=””.
PRZYKŁAD BLOKU:
PRZYKŁAD INLINE:

Skrypty

ZNACZNIKOPIS

<script>

Znacznik definiujący łącze skryptów. Podobnie jak w przypadku wcześniej omawianego znacznika <link>oraz <style> możemy nim zdefiniować zarówno miejsce skryptu, który chcemy dołączyć lub dodać odpowiedni kod JavaScript bezpośrednio pomiędzy znacznikami <script></script>. Tak jak w przypadku wcześniej omawianych stylów inline, warto stworzyć zewnętrzny plik i tam umieścić dodatkowe funkcje języka JavaScript.
PRZYKŁAD:

<noscript>

Znacznik dostarcza alternatywną wersję skryptów dla użytkowników, którzy mają domyślnie wyłączoną ich obsługę (podobnie jak ma to miejsce w atrybucie altdla znacznika img).
PRZYKŁAD:

Sekcje

ZNACZNIKOPIS

<body>

Znacznik zawierający w sobie informację na temat elementów, które mają zostać wyświetlone na ekranie przeglądarki. Najprościej mówiąc jest to to, co umieścicie w body i zostanie wyświetlone na ekranie przeglądarki.
PRZYKŁAD:

<section>

Znacznik, dodany w HTML5, jako jedna z semantycznych odmian znacznika div. Znacznikiem section oznaczane są tematycznie powiązane ze sobą sekcje strony.
PRZYKŁAD:

<nav>

Znacznik nawigacji dodany w HTML5. Jak sama nazwa wskazuje służy on do oznaczania nawigacji na stronie www. Warto wspomnieć, że w związku z poprawną semantyką powinien być deklarowany tylko dla głównego menu (w przypadku, gdy występuje większa ilość menu, np. w stopce i/lub sidebarze).
PRZYKŁAD:

<article>

Znacznik, dodany w HTML5. Zawiera sekcje dokumentu, które po wyciągnięciu ze strony nadal będą posiadały pełny sens i czytelność. Stosowany głównie do oznaczania artykułów/wpisów.
PRZYKŁAD:

<aside>

Znacznik html, który przeznaczony jest do obejmowania „mniej ważnych” sekcji dokumentów, czyli tych, które nie są najważniejsze na danej stronie. Przeważnie zawierane są tam boczne menu nawigacyjne, reklamy lub odnośniki do stron partnerskich.
PRZYKŁAD:

<h1>,<h2>,<h3>,<h3>,<h5>,<h6>

Znaczniki, określające nagłówki. Jest ich 6 rodzajów, rozpoczynając od <h1> jako najważniejszego (od 1 do 2 wystąpień na stronie), a kończąc na <h6>(praktycznie niestosowany, lecz może zostać wykorzystany wielokrotnie). Ważne jest stosowanie się do hierarchii nagłówków i nie pomijanie ich struktury w budowie witryny. Oznacza to mniej więcej tyle, że po zastosowaniu nagłówka H1, powinniśmy zastosować nagłówek <h2>,a nie np. <h5>.
PRZYKŁAD:

<hgroup>

Znacznik grupujący większą ilość nagłówków na stronie. Jeżeli artykuł posiada tytuł <h1>, a następnie nazwę rozdziału <h2> to warto te elementy zgrupować za pomocą znacznika <hgroup>. We wcześniejszej wersji HTML robiło się to za pomocą znacznika <header>, lecz obecnie jest on wykorzystywany do oznaczania nagłówków stron.
PRZYKŁAD:

<header>

Znacznik html stosowany do oznaczania nagłówka dokumentu lub sekcji. W większości przypadków zawiera w swojej budowie logo strony, nawigację oraz kilka mniej ważnych elementów (np. social buttony, wyszukiwarkę).
PRZYKŁAD:

<footer>

Znacznik stosowany do oznaczania stopki dokumentu lub sekcji. W większości przypadków zawiera w swojej budowie prawa autorskie do strony oraz inne elementy, np. formularz kontaktowy.
PRZYKŁAD:

<address>

Znacznik html definiujący adres kontaktowy autora dokumentu lub artykułu. Może to być zarówno adres e-mail, jak i adres zamieszkania.
PRZYKŁAD:

Grupowanie treści

ZNACZNIKOPIS

<p>

Akapit zawierający pewną, zdefiniowaną treść. Rozpoczyna się od nowej linii. Znacznik <p> jest elementem blokowym.
PRZYKŁAD:

<hr>

Pozioma linia oddzielajaca treść.
PRZYKŁAD:

<pre>

Informuje przeglądarkę o tym, że zawartość znacznika jest wstępnie sformatowana i format ten musi zostać zachowany.
PRZYKŁAD:

<blockquote>

Zawiera informacje w formie cytatu.
PRZYKŁAD:

<ol>

Określa uporządkowaną listę elementów. Domyślnie lista ta, jest uporządkowana za pomocą cyfr „1. 2. 3. …”.
PRZYKŁAD:

<ul>

Określa nieuporządkowaną listę elementów.
PRZYKŁAD:

<figure>

Sekcja przechowująca pewne elementy, np. obrazki, wideo, animacje, o których wspomina się w treści strony, lecz nie są one wymagane z punktu widzenia czytelnika.
PRZYKŁAD:

<figcaption>

Tytuł lub podpis elementu znajdującego się w znaczniku <figure>.
PRZYKŁAD:

<div>

Kontener blokowy służący do przechowywania elementów.
PRZYKŁAD:

Formatowanie tekstu

ZNACZNIKOPIS

<a>

Odnośnik do innej strony.
PRZYKŁAD:

<em>

Wyróżnienie tekstu za pomocą emfazy.
PRZYKŁAD:

<strong>

Wyróżnienie tekstu za pomocą mocnego pogrubienia (PRO tip: wyszukiwarki to lubią, ale bez przesady!).
PRZYKŁAD:

<small>

Zmniejszenie czcionki tekstu.
PRZYKŁAD:

<s>

Zmniejszenie wagi tekstu, który nie jest istotny lub nie jest dokładny.
PRZYKŁAD:

<cite>

Reprezentuje tytuł jakiejś pracy, np. obrazu, filmu itp.
PRZYKŁAD:

<q>

Cytat zapisany w jednym wierszu (linii).
PRZYKŁAD:

<dfn>

Oznaczenie przykładowej definicji.
PRZYKŁAD:

<abbr>

Oznaczenie skrótów.
PRZYKŁAD:

<time>

Oznaczanie czasu.
PRZYKŁAD:

<code>

Oznaczenie kodu komputerowego.
PRZYKŁAD:

<var>

Reprezentuje zmienną.
PRZYKŁAD:

<samp>

Oznaczanie kodu komputerowego po kompilacji.
PRZYKŁAD:

<kbd>

Oznaczanie danych wejściowych użytkownika.
PRZYKŁAD:

<sub><sup>

Indeksy dolny oraz górny.
PRZYKŁAD:

<i>

Oznaczenie tekstu kursywą.
PRZYKŁAD:

<b>

Oznaczenie tekstu pogrubieniem.
PRZYKŁAD:

<u>

Oznaczenie tekstu podkreśleniem.
PRZYKŁAD:

<mark>

Oznaczenie tekstu na jednej stronie, w celu odwołania się do niego na innej stronie.
PRZYKŁAD:

<span>

Fragment tekstu, który nie rozpoczyna się od nowej linii. Dobry do nadawania stylów wewnątrz zdania.
PRZYKŁAD:

</br>

Znacznik nowej linii.
PRZYKŁAD:

Edycja

ZNACZNIKOPIS

<ins>

Oznacza się nim sekcję dokumentu, która została wstawiona w stosunku do poprzedniej wersji dokumentu.
PRZYKŁAD:

<del>

Oznacza się nim sekcję dokumentu, która została usunięta w stosunku do poprzedniej wersji dokumentu (usuwana treść zostaje przekreślona).
PRZYKŁAD:

Zawartość wbudowana

ZNACZNIKOPIS

<img>

Określenie obrazka.
PRZYKŁAD:

<iframe>

Ramka, w której znajduje się treść innej strony.
PRZYKŁAD:

<embed>

Znacznik umożliwiający wstawianie plików multimedialnych, np. audio.
PRZYKŁAD:

<object>

Podobnie jak w przypadku znacznika , umożliwia wstawianie plików multimedialnych, np. wideo. Aktualnie w HTML wersji 5, został wyparty przez ww. znacznik.
PRZYKŁAD:

<video>

Znacznik pozwalający na przetworzenie strumienia wideo.
PRZYKŁAD:

<audio>

Znacznik pozwalający na przetworzenie strumienia audio.
PRZYKŁAD:

<source>

Określa alternatywne źródła elementów multimedialnych jak np. <video><audio>.
PRZYKŁAD:

<track>

Pozwala przekazać napisy do elementów multimedialnych, np. <video>.
PRZYKŁAD:

<canvas>

Blok dokumentu przeznaczony głównie na renderowanie kształtów i obiektów za pomocą bitmap. Pozwala na tworzenie dość zaawansowanych kształtów opisanych w sposób matematyczny.
PRZYKŁAD:

<map>

Definicja mapy obrazu.
PRZYKŁAD:

<svg>

Definicja grafiki wektorowej.
PRZYKŁAD

<math>

Definicja formuły matematycznej.
PRZYKŁAD

Tabela

ZNACZNIKOPIS

<table>

Reprezentuje dane mające zostać umieszczone w macierzy tabeli.
PRZYKŁAD:

<caption>

Tytuł tabeli.
PRZYKŁAD:

<colgroup>

Grupowanie tabeli w strukturze dokumentu.
PRZYKŁAD:

<tbody>

Potocznie ciało tabeli zawierające wiersze i kolumny.
PRZYKŁAD:

<thead>

Nagłówek tabeli.
PRZYKŁAD:

<tfoot>

Stopka tabeli.
PRZYKŁAD:

<tr>

Wiersz tabeli.
PRZYKŁAD:

<td>

Komórka tabeli.
PRZYKŁAD:

<th>

Nagłówek tabeli umieszczony w wierszu.
PRZYKŁAD:

Formularz

ZNACZNIKOPIS

<form>

Znacznik reprezentujący formularz składający się z dodatkowych elementów (znaczników).
PRZYKŁAD:

<fieldset>

Grupuje etykiety formularza, które w sposób tematyczny do siebie pasują.
PRZYKŁAD:

<legend>

Tytuł znacznika <fieldset>.
PRZYKŁAD:

<label>

Tytuł elementów formy, np. znacznika <input>.
PRZYKŁAD:

<input>

Jeden ze znaczników formularza, które przechowuje dane. Jego właściwości zależą od wybranego atrybutu, np. text,radio,checkbox,submit, itp.
PRZYKŁAD:

<button>

Znacznik reprezentujący przycisk formularza.
PRZYKŁAD:

<select>

Lista wyboru, z pośród zadeklarowanych opcji.
PRZYKŁAD:

<datalist>

Zestaw predefiniowanych opisów dla znaczników formularza.
PRZYKŁAD:

<optgroup>

Grupowanie opcji w liście <select>.
PRZYKŁAD:

<option>

Opcja w liście wyboru znacznika <select>.
PRZYKŁAD:

<textarea>

Pole tekstowe.
PRZYKŁAD:

<keygen>

Generowanie klucza dla stworzonego formularza.
PRZYKŁAD:

<output>

Pole wynikowe.
PRZYKŁAD:

<progress>

Wskaźnik wartości w formie paska.
PRZYKŁAD:

<meter>

Wskaźnik wartości procentowej, reprezentowany w formie graficznej.
PRZYKŁAD:

Dodaj komentarz

avatar
  Subscribe  
Powiadom o