IGS

IGS
Вернуться к Курс

Базовый курс HTML CSS

0% Завершено
0/25 Шагов
  1. 1) Как создать сайт
  2. 2) Программы, с помощью которых создаются файлы на HTML и CSS
  3. 3) Язык гипертекстовой разметки HTML
  4. 4)Хостинг. Cервер. Доменное имя.
  5. 5) Каскадные таблицы стилей CSS
  6. 6) Списки
  7. 7) Гиперссылка
  8. 8) Структура
  9. 9) Якорь. Селекторы
  10. 10)Практика
  11. 11)Изображение HTML
  12. 12)Изображение CSS
  13. 13) Padding, margin
  14. 14)display. Таблицы
  15. 15) Flexbox CSS
  16. 16) Макет "Paper", Figma, Pixso
  17. 17)Grid Layout
  18. 18) шрифты
  19. 19) Позиционирование.
  20. 20) Псевдоэлемент
  21. 21) Псевдоклассы в CSS.
  22. 22) CSS3-анимация
  23. 23) Адаптивная вёрстка. Mobile First
  24. 24) Форма обратной связи
  25. 25) Препроцессоры в CSS
Базовый курс HTML CSS 3) Язык гипертекстовой разметки HTML
В прогрессе
Урок 3 из 25
В прогрессе

3) Язык гипертекстовой разметки HTML

В браузере живут 3 технологи: 

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.

HTML позволяет форматировать текст, различать в нем функциональные элементы, создавать гиперссылки, вставлять изображения и т.д.

HTML — Элементы (теги)

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается тегом.

Синтаксис:

<тег> </тег>

Типы тегов

Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.

Условно теги делятся на следующие типы:

  • теги верхнего уровня;
  • теги заголовка документа;
  • блочные элементы;
  • строчные элементы;
  • универсальные элементы;
  • списки;
  • встраиваемые объекты
  • таблицы;
  • фреймы.

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги  <ol> и <ul>  и  относятся к категории списков, но также являются и блочными элементами.

Блочные элементы

Блочные элементы являются основой, которая используется для верстки веб-страниц. Такой элемент представляет собой прямоугольник, который по умолчанию занимает всю доступную ширину страницы (если иное значение не указано в CSS), а длина элемента зависит от его содержимого. Такой элемент всегда начинается с новой строки, то есть, располагается под предыдущим элементом. Блочный элемент может содержать в себе другие блочные и строчные элементы.

Примеры блочных элементов

<p>, <h1>, <h2>,<h3>  и т. д.

Строчные элементы

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

Примеры строчных элементов: span>, <strong>, <em>, <b> и т. д.

Как работает devTools

Задание

Обязательно:

1) Создать папку IGS, в ней создать папку lesson03;

2) в index.html создать базовую разметку;

3) перейти по ссылке КЛИК и восcоздать результат один в один.
 

Самостоятельная работа:

Изучить теги <sup> и <sub> и применить их в домашней работе