Что такое HTML

Что такое HTML

HTML (HyperText Markup Language) - стандартизированный язык разметки гипертекста во Всемирной паутине.

HTML указывает браузеру (интернет-обозревателю), как разместить элементы на странице при ее отображении на экране монитора.

HTML состоит из элементов, которые называются тегами.

Между угловыми скобками < ... > находится имя тега и его параметры (если они есть).

В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>.
Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера.

Действия тегов распространяются только на их содержимое.
Теги могут иметь параметры (или атрибуты).

 

Структура документа на HTML

документ на HTML

Структура HTML

 

Создаем свою первую страничку

  1. В Windows откройте программу Блокнот.
  2. Наберите (или скопируйте) указанный ниже код в Блокноте.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Моя первая веб-страница</title>
    </head>

    <body>
    <div style="text-align: center;">
      <h2>Моя первая страница на HTML</h2>
      <br>
      <h1>Привет МИР!</h1>
      <img src="images/000-picture.jpg">
    </div>
    </body>

    </html>
  3. Сохраните готовый документ (файл) на свой ПК с любым именем, например, primer-001.html.
    Обратите внимание, что расширение у файла должно быть html.
  4. Запустите в браузере созданный вами файл: "primer-001.html".
  5. Насладитесь своей первой страничкой на HTML.

 

Смотреть пример 1-й страницы

 

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum - это "текст-рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.

Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

Жирность шрифта

Жирность шрифта
font-weight: 100 Thin (Hairline) - Тонкий (как волос)
font-weight: 200 Extra Light (Ultra Light) - Extra светлый (Ультра светлый)
font-weight: 300 Light - Светлый
font-weight: 400
font-weight: normal;
Normal or Reqular - Нормальный или Обычный
font-weight: 500 Medium - Средний
font-weight: 600 Semi Bold (Demi Bold) - Полужирный
font-weight: 700
font-weight: bold;
Bold - Жирный
font-weight: 800 Extra Bold (Ultra Bold) - Экстра жирный (Ультра жирный)
font-weight: 900 Black (Heavy) - Черный (Тяжелый)
jQuery

jQuery

jQuery - это небольшая, быстрая и многофункциональная библиотека JavaScript.
jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл:

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
viewport

Зачем нужен метатег viewport

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

Основные параметры метатега viewport

У viewport пять основных параметров:
  1. width
  2. initial-scale
  3. maximum-scale
  4. minimum-scale
  5. user-scalable

Параметр width определяет ширину области просмотра. Чаще всего используется значение device-width, что означает «использовать ширину экрана текущего устройства».

<meta name="viewport" content="width=device-width">

Параметр initial-scale задаёт начальный масштаб страницы. Значение 1 означает, что страница будет отображена без масштабирования. Записывается так: initial-scale=1. Параметры maximum-scale и minimum-scale определяют, как сильно пользователь может увеличивать или уменьшать масштаб. Параметр user-scalable имеет значения yes или no и определяет, может ли пользователь масштабировать страницу.

Какой viewport использовать

Самый распространенный и рекомендуемый вариант использования viewport выглядит так:

<meta name=="viewport" content="width=device-width, initial-scale=1">

Этот код говорит браузеру использовать ширину устройства и установить начальный масштаб в 1.
CSS. Блочная модель

Блочная модель в CSS

Важной концепцией в CSS является блочная модель, которая включает в себя:
margin, border, padding, и content.

          
p {
  margin: 20px;      /* Внешний отступ */
  border: 1px solid; /* Граница */
  padding: 10px;     /* Внутренний отступ */
  /* Содержимое */
}

Внутренние и внешние отступы на одной картинке:

magin: 25px 20px 10px 10px;
 padding: 5px 10px 15px 20px;