HTML

Text Markup

Tag Structure

Tag structure

Tag Types

  • Парные:

    • <div></div>

    • <header></header>

    • <a></a>

    • …​

Tag Types

  • Не парные:

    • <br/>

    • <img/>

    • <input/>

    • <link/>

    • <meta/>

Attributes

Для атрибутов тегов используются значения по умолчанию, а так же существую атрибуты без значений.

<form action="self.php">
    <p><input type="text"></p>
    <p><input type="submit" disabled></p>
</form>

В данном примере используется атрибут disabled, у которого явно не задано значение. Подобная запись называется сокращенный атрибут тега.

Attributes

  • Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.

  • Форматы атрибутов:

    • Текст

    • Число

    • Ссылка

Example

<img src="images/html.png" width="189" height="255" alt="HTML">
<link rel="stylesheet" href="style.css">

Attributes

Атрибуты могут располагаться как в одну строку, так и в несколько. Главное условие - наличие разделительного символа.

<img src="images/girl.png" width="189" height="255" alt="boy">

<img src="images/girl.png"
    width="189"
    height="255"
    alt="boy">

Document Structure

Example

<!DOCTYPE html> (1)
<html>
    <head> (2)
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> (6)
        <title>Пример веб-страницы</title> (4)
    </head>
    <body> (3)
        <h1>Заголовок</h1>
        <!-- Комментарий -->
        <p>Первый абзац.</p>
        <p>Второй абзац.</p>
    </body>
</html>

Links

Internet

Internet

File System Hierarchy

File System Hierarchy

Links

<a href="https://rakovets.by">Visit rakovets.by!</a>

https://rakovets.by - это адрес (URI/URL)

URI

Адреса (URI) бывают:

  • относительные

  • абсолютные

Absolute path

https://rakovets.by/catalog

  • https:// - protocol

  • rakovets.by - domain name for host

  • /catalog - path

Relative path

Текущий адрес

Адрес в ссылке

Преобразуется в

https://rakovets.by/course/python-developer

java-developer

https://rakovets.by/course/java-developer

https://rakovets.by/course/python-developer

..

https://rakovets.by/course

https://rakovets.by/course/python-developer

../../review

https://rakovets.by/review

HTML Tables

HTML tags for table

TagDescription

caption

название таблицы

table

таблица

thead

заголовки таблицы

tbody

содержимое таблицы

tr

table row, строка

th

table header, заголовок столбца

td

table data, ячейка в строке

HTML tags for table: example

<table>
    <tr>
        <td>1 строка 1 ячейка</td>
        <td>1 строка 2 ячейка</td>
    </tr>
    <tr>
        <td>2 строка 1 ячейка</td>
        <td>2 строка 2 ячейка</td>
    </tr>
</table>

Style for table

CSS-propertyDescription

border-collapse: collapse;

Схлопывание границ ячеек

border-collapse: separate;

«Расклеивание» границ ячеек

border-spacing: 10px;

Отступы между ячейками

Complex table

AttributeDescription

colspan

объединяет ячейки по горизонтали

rowspan

объединяет ячейки по вертикали

Forms

Example Form

Form

<form>

<form action="https://rakovets.com/login" method="get">
    поля формы
</form>

  • action - задает адрес (URL) отправки формы

  • method - задает метод отправки формы

<label>

Связывает текст (подпись) и поле ввода.

<label>
    Подпись<input type="text" name="username">
</label>
Label
Label

<input>

<form action="https://rakovets.com/registr" method="get">
    <input type="${type}" name="${name}">
</form>

  • type - задает тип поля

  • name - задает имя поля

Values for attribute type

Values for attribute `type`

Values for attribute type (HTML5)

Values for attribute `type` (HTML5)

Values for attribute type (HTML5) support

Values for attribute `type` (HTML5) support

<input type="text" hidden>

<input type="text" name="hide" value="15135" hidden>

<input type="checkbox">

<input type="checkbox" checked>

Работает как выбор: ДА или НЕТ. checked – по умолчанию установить

checkbox

<input type="radio">

<input type="radio" name="question-tag" value="p">
<input type="radio" name="question-tag" value="b" checked>

Работает как выбор ОДНОГО из вариантов. checked - значение по умолчанию

radio

<input type="submit">

<input type="submit" value="text">
submit

<input type="file">

<form action="https://rakovets.com/file" method="get" enctype="multipart/form-data">
    <input type="file" name="upload-file">
</form>
file

<textarea>

<textarea rows="45" cols="32"> text </textarea>
textarea

<select>

<select name="year">
    <option value="2000">2000 год</option>
    <option value="2005">2005 год</option>
    <option value="2010">2010 год</option>
    <option value="2015">2015 год</option>
</select>

Работает как выбор ОДНОГО из вариантов.

select

<select multiple>

<select name="years" size="2" multiple>
    <option value="2000" selected>2000 год</option>
    <option value="2005">2005 год</option>
    <option value="2010">2010 год</option>
    <option value="2015">2015 год</option>
</select>

  • multiple - мультиселект

  • size - высота мультиселекта

  • selected - выбор вариантов по умолчанию