Веб-программирование от незрячего, урок 1: HTML

denis-skripnik (58)in #esteem • 7 years ago

Здравствуйте. Некоторые люди считают, что HTML не является языком программирования. Это так - это язык разметки. Но начну с него, так как это основа веб-разработки.

5 принципов HTML:

HTML код состоит из тегов. Тег - это конструкция, начинающаяся со знака < и заканчивающаяся знаком >
Большинство из них являются парными. Это значит, что они закрываются:
<тег> - открытие тега, </тег> - закрытие.
Но есть и исключения: теги, которые не имеют парного тега.
У HTML документа есть голова (head) и тело (body).
Тело может состоять из нескольких частей: верхняя часть (header), основа (main), дополнительная часть (aside) и нижняя часть (footer).

Образно говоря:

Представьте HTML документ, страницу в виде человека:

Голова. Здесь располагается техническая информация, которая не видна в браузере. Также как мозг человека без специальных приборов тоже не виден.
Тело документа: можно сравнить с телом человека. У него есть верхняя часть - гортань и грудь, основа - сердце, нижняя часть - живот и всё, что дальше.

html - тег, который вставляется в начале и конце html документа. Обозначает то, что он им является;
head - голова документа. Имеет закрывающий тег head, обозначающий то, что данная часть закончена
<head></head>;
body - тело документа. Имеет парный теег, сообщающий о завершении области.
<body></body>.

Структура head:

meta charset - это тег с атрибутом, указывающий кадеровку документа. Пример:
<meta charset="UTF-8">
Закрывающего тега нет;
title - заголовок документа. Выводится в списке вкладок браузера а также в поисковой выдаче. Пример:
<title>заголовок страницы</title>
тег meta с атрибутам name и значениями keywords, description - нужен для поисковых систем. В первый вставляют ключевые слова, а во второй - описание. Пример:
<meta name="description" content="Описание страницы какое-то.">;
Тег link. Подключает к страницы файлы стилей, иконки и canonical для поисковых систем (Указывает на основной url страницы). Не является парным. Пример:
<link rel="stylesheet" href="style.css">;
тег script. Имеет 2 варианта использования:
script с атрибутом src - указывает на js файл,
script без атрибута src - между тегами указывается javascript код.
Примеры:
``

`` Имеет закрывающий тег.

Общий пример:

<head> <meta charset="UTF-8"> <title>Страница</title> <meta name="keywords" content="Ключевые, слова, страница"> <meta name="description" content="Описание."> <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico"> </head>

Структура body:

Начинается всё с тега <body> и заканчивается </body>
Состав, в отличие от head, не обязательно такой, но он принят сейчас большинством верстальщиков (Теи, кто пишет на html и css). Кстати, все теги парные (Имеют закрывающий тег):

header - шапка сайта. Внутри может быть любой код, например, картинки или текст, абзацы или списки...
<header>Содержимое</header>;
main - основная часть страницы, например, контент. Пример:
<main>Что-то</main>
footer - подвал сайта. Нижняя часть, где отображается чаще всего копирайт, статистика и не очень важные ссылки. Пример:
<footer>Копирайт</footer>

Эти 3 тега идут друг за другом.
Также есть тег div, который также выводится в виде блоков. Он раньше использовался вместо header, main и footer. Сейчас же прописывается только внутри тех тегов. Пример:
<div>Содержимое</div>

Вспомогательные теги:

Форматирование текста:

<p>Абзац текста.</p>
<ul> - маркированный список
<ol> - нумерованный список
<li> - элемент списка.
Все теги парные. Пример:
<ol><li>Первый элемент нумерованного списка</li>
<li>Второй элемент нумерованного списка</li></ol>
А это маркированный список:
<ul><li>Элемент 1</li>
<li>Элемент 2</li></ul>

<center>Текст по центру. Но этот тег считается устаревшим: используйте атрибут align="center" у тега, например, p.</center>
<span>Тег, который используют для произвольного выделения текста стилями</span>
<strong>Выделение текста полужирным</strong>
<b>ещё выделение полужирным</b>

Пример центрования текста:
<p align="center">Этот текст будет по центру.</p>

Вместо center можно вставлять left (по левому краю выравнивание), right (по правому), justify (по ширине).

<h1>Заголовок первого уровня. Также вместо 1 можно подставить 2-6: получатся более мелкие заголовки. С их помощью создаётся структура содержимого страницы.</h1>
Пример заголовка h6:

Заголовок шестого уровня

Но на разных сайтах заголовки могут иметь разные стили отображения.

Функциональные теги:

<img src="адрес_к_изображению_здесь.jpg" alt="Описание изображения" title"Текст, появляющийся по наведению" width="100%" height="350px"> - изображение с шириной в 100% и высотой в 350 пикселей;
<a href="url_ссылки" target="_blank">текст ссылки, открываемой в новом окне</a> - target="_blank" не обязательный атрибут (Если его нет, ссылка откроется в текущей вкладке/окне).
<button type="button" value="кнопка с типом button, который не всегда надо указывать. Часто используется с JS функциями, что вставляются в onclick"></button>

Формы:

Открывает их тег <form>, а закрывает - </form>. Внутри тега есть атрибуты:

action (указывает адрес действия, т.е. адрес, куда отсылаются данные из формы;
method - post или get. get - это формат получения данных, где данные отправляются в параметрах url.

Поля - это <input>. В отличие от формы не имеют парного тега.
Атрибуты:

type: text (текстовое поле), textarea (многострочное текстовое поле), chackbox (флажок, галочка), radiobutton (радиокнопка), button (кнопка);
value - чаще всего пустой атрибут, так как в нём выводится значение.

Кроме input здесь используется select и option:

<select> - парный тег выпадающего (комбинированного) списка;
<option> - тег элемента сего списка.

Они имеют чаще всего только атрибут value, где выводится значение, а также между открывающим и закрывающим тегом элемента выпадающего списка пишется понятный пользователю текст. Пример:

<select name="spisok">
<option value="item1">Элемент №1</option>
<option value="item2">Элемент №2</option>
</select>

Как вы заметили, есть атрибут name - он идентифицирует поле формы.

Также есть атрибут placeholder (подсказка). Например, placeholder="Выберите вариант".

Кстати, name связывают иногда с тегом <label>, который выводит описания формы, но сейчас чаще используют placeholder. Пример:
<label for="spisok">Выберите элемент списка:</label>

Медиа:

<audio> - вставка аудио. Атрибут src. Там есть тонкости с поддержкой браузеров, поэтому рекомендую ввести в поисковой системе запрос "html тег audio" и почитать подробности.`` - видео. Также рекомендую для получения подробностей обратиться к Яндексу или Гуглу.

Оба тега имеют закрывающую пару.

Пример:
<audio src="file.mp3"></audio>

Общие атрибуты:

style - прописывание стилей внутри тега. Не рекомендуется использовать;
class - класс элемента в стилях. Пример: class="header-page"
Их может быть несколько на странице;
id="search-form" - id элемента. Значение не может повторяться на одной странице. Также относится к css стилям.
onclick="modal();" - По клику выполняет javascript функцию modal().
Остальные JS атрибуты перечислять не буду - возможно, изучим потом. Но в любом случае, как появится надобность, сможете найти.