Здравствуйте. Некоторые люди считают, что 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 атрибуты перечислять не буду - возможно, изучим потом. Но в любом случае, как появится надобность, сможете найти.
Всё
Вроде ничего не пропустил. Надеюсь, не было запутанно объяснено.