IGS

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

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

0% Завершено
0/24 Шагов
  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)display. Таблицы
  11. 11) Flexbox CSS
  12. 12) Padding, margin
  13. 13)Grid Layout
  14. 14) Практика
  15. 15) Вёрстка шапки, шрифты
  16. 16) Позиционирование. Вёрстка блока About
  17. 17) Вёрстка блок About. Псевдоэлемент
  18. 18) Псевдоклассы в CSS.Вёрстка блока fruits.
  19. 19) Вёрстка блок team, calc, псевдоэлементы
  20. 20) Вёрстка блока footer
  21. 21) CSS3-анимация
  22. 22) Адаптивная вёрстка. Mobile First
  23. 23) Препроцессоры в CSS
  24. 24) Форма обратной связи
Базовый курс HTML CSS 3) Язык гипертекстовой разметки HTML
В прогрессе
Урок 3 из 24
В прогрессе

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> и применить их в домашней работе