2. HTML Cheatsheet, czyli ściągawka z języka

Język HTML nie jest skomplikowany, by go opanować, wystarczy pisać kod. Trzymanie się tej zasady, podparte kilkoma aktualnymi źródłami informacji jak w3school, pozwoli opanować HTML.

Poniższe zestawienie nie będzie zawierało zdeprecjonowanych tagów HTML, takich jak B czy font face albo font color. Lista jest aktualna na dzień 18.10.2020r i w razie zmian, będzie sukcesywnie korygowana. Przejdźmy więc do konkretu.

 

Podstawowe tagi

<html> </html>

Tworzy dokument HTML

<head> </head>
Określa tytuł i inne informacje, które nie są wyświetlane

<body> </body>
Wyznacza widoczną część dokumentu

<title> </title>
Umieszcza nazwę dokumentu na pasku tytułu czy tytuł zapisanej zakładki do strony

Atrybuty treści (używane tylko w biuletynach e-mailowych)

<body bgcolor =?>
Ustawia kolor tła, używając nazwy lub wartości szesnastkowej

<body text =?>
Ustawia kolor tekstu, używając nazwy lub wartości szesnastkowej

<body link =?>
Ustawia kolor linków, używając nazwy lub wartości szesnastkowej

<body vlink =?>
Ustawia kolor odwiedzanych linków, używając nazwy lub wartości szesnastkowej

<body alink =?>
Ustawia kolor aktywnych linków (podczas klikania myszą)

Tagi tekstowe

<pre> </pre>
Tworzy wstępnie sformatowany tekst

<h1> </h1> -> <h6> </h6>
Hx, czyli nagłówki . Tag tworzy nagłówki od H1 (największy) do H6(najmniejszy)

<tt> </tt>
Tworzy tekst w stylu maszyny do pisania

<code> </code>
Służy do definiowania kodu źródłowego, zwykle o stałej szerokości

<cite> </cite>
Tworzy cytat, zwykle pisany kursywą

<address> </address>
Tworzy sekcję adresową, zwykle pisaną kursywą

<em> </em>
Podkreśla słowo (zwykle pisane kursywą)

<strong> </strong>
Podkreśla słowo (zwykle wytłuszczone)

Linki, odnośniki, odsyłacze, hiperłącza

<a href="URL"> klikalny tekst, zwany anchorem lub anchor tekstem</a>
Tworzy hiperłącze do Uniform Resource Locator, czyli URL

<a href="mailto:EMAIL_ADDRESS">tekst, który można kliknąć</a>
Tworzy hiperłącze do adresu e-mail

<a name="NAME">
Tworzy tak zwaną kotwicę, czyli lokalizację docelową w dokumencie. Często to link do odpowiedniego miejsca w obrębie tego samego dokumentu HTML

<a href="#NAME">klikalny tekst</a>
Tworzy łącze do wyjaśnionej wyżej kotwicy, czyli tej lokalizacji docelowej

Formatowanie

<p> </p>
Tworzy nowy akapit

<br>
A Wstawia znak końca wiersza (powrót karetki)

<blockquote> </blockquote>
Umieszcza treść w cudzysłowie – wcina tekst z obu stron

<div> </div>
Blok, Służy do formatowania zawartości bloku za pomocą CSS, zazwyczaj względem innych bloków.

<span> </span>
Służy do formatowania treści w tekście za pomocą CSS

Listy

<ul> </ul>
Tworzy nieuporządkowaną listę

<ol start=?> </ol>
Tworzy uporządkowaną listę (start = xx, gdzie xx jest liczbą zliczającą)

<li> </li>
Obejmuje każdy element listy

<dl> </dl>
Tworzy listę definicji

<dt>
Poprzedza każdy termin definicji

<dd>
Poprzedza każdą definicję

Elementy graficzne

<hr>
Wstawia poziomą linię

<hr size=?>
Ustawia rozmiar (wysokość) linijki poziomej

<hr width=?>
Ustawia szerokość reguły (jako % lub bezwzględną długość wyrażaną w pixelach)

<hr noshade>
Tworzy poziomą linię bez cienia

<img src="URL" />
Dodaje obraz; jest to osobny plik znajdujący się pod adresem URL

<img src="URL" height=?>
Ustawia wysokość obrazu w pikselach

<img src="URL" width =?>
Ustawia szerokość obrazu w pikselach

<img src="URL" alt =?>
Ustawia tekst alternatywny dla przeglądarek, które nie mogą załadować obrazka, np. ze względu na usunięcie go na serwerze

Formularze

<form> </form>
Deklaruje/ definiuje formularz

<select multiple name=? size=?> </select>
Tworzy przewijane menu. Rozmiar określa liczbę elementy menu widoczne, zanim użytkownik będzie musiał przewinąć.

<select name=?> </select>
Tworzy menu rozwijane

<option>
Ustawia opcję wyboru w menu rozwijanym

<textarea name=? cols="x" rows="y"> </textarea>
Tworzy obszar pola tekstowego. Kolumny (cols) ustawiają szerokość; wiersze (rows) ustawiają wysokość.

<input type="checkbox" name=? wartość=?>
Tworzy pole wielokrotnego wyboru.

<input type="checkbox" name=? value=? checked>
Tworzy pole wyboru, które jest wstępnie zaznaczone.

<input type="radio" name=? value=?>
Tworzy przycisk opcji.

<input type="radio" name=? value=? checked>
Tworzy przycisk typu radio, który jest wstępnie zaznaczony.

<input type= "text" name =? size =?>
Tworzy jednowierszowy obszar tekstowy. Rozmiar ustawia długość, cale postacie.

<input type="submit" value="Wyślij">
Tworzy przycisk wysyłania danych z formularza. Wartość (value) ustawia tekst na przycisku wysyłania.

<input type="image" name=? src=? border=? alt=?>
Tworzy przycisk przesyłania za pomocą obrazu.

<input type = "reset">
Tworzy przycisk resetowania wypełnionego formularza

Tabele

Tabel należy używać tylko do układu danych. Do formatowania tabel, dostosowania ich wyglądu należy używać CSS. Atrybuty tabeli należy używać wyłącznie w szablonach wiadomości e-mail.

<table> </table>
Tworzy tabelę

<tr> </tr>
Wyznacza każdy wiersz w tabeli

<td> </td>
Wyznacza każdą komórkę w rzędzie

<th> </th>
Ustawia nagłówek tabeli (normalna komórka pogrubiona, tekst wyśrodkowany)

Atrybuty tagu wejściowego HTML5

UWAGA! niżej wymienione atrybuty nie są obsługiwane przez wszystkie przeglądarki

<input type="email" name=?>
Ustawia jednowierszowe pole tekstowe dla adresów e-mail

<input type="url" name=?>
Ustawia jednowierszowe pole tekstowe dla adresów URL

<input type="number" name=?>
Ustawia jednowierszowe pole tekstowe dla liczby

<input type="range" name=?>
Ustawia jednowierszowe pole tekstowe dla zakresu liczb

<input type="date/month/week/time" name =?>
Ustawia jednowierszowe pole tekstowe z kalendarzem wyświetlanie daty / miesiąca / tygodnia / godziny

<input type="search" name =?>
Ustawia jednowierszowe pole tekstowe do wyszukiwania

<input type="color" name =?>
Ustawia jednowierszowe pole tekstowe do wybierania koloru

Atrybuty tabeli (używaj tylko do biuletynów e-mailowych)

<table border=?>
Ustawia szerokość obramowania wokół komórek tabeli

<table cellspacing=?>
Ustawia ilość miejsca między komórkami tabeli

<table cellpadding=?>
Ustawia odstęp między obramowaniem komórki a jej zawartością

<table width=?>
Ustawia szerokość tabeli w pikselach lub w procentach

<tr align=?>
Ustawia wyrównanie komórek w wierszu (left/ center/ right)

<td align=?>
Ustawia wyrównanie komórek (left/ center/ right)

<tr valign=?>
Ustawia wyrównanie pionowe komórek w wierszu(top/middle/bottom)

<td valign=?>
Ustawia wyrównanie pionowe komórki (top/middle/bottom)

<td rowspan=?>
Ustawia liczbę wierszy, które powinna obejmować komórka (domyślnie = 1)

<td colspan=?>
Ustawia liczbę kolumn, które powinna obejmować komórka

<td nowrap>
Atrybut definiuje blokowanie przełamywanie akapitów

 

 

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *