Курс Сodecademy - "Learn HTML & CSS" состоит из 9 частей. В прошлый раз, немного не разобравшись, я сразу оформил его вторую часть - HTML-контент. В данной статье хочу восполнить пробел и детально разобрать первую часть курса - Основы HTML.
Что такое HTML?
Такие элементы называются тегами и необходимы для форматирования текста, который "понимает" браузер.
HTML - не является языком программирования!
!DOCTYPE html
Элемент <!DOCTYPE html> предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях.
И как раз для того, чтобы браузер не путался согласно какому стандарту отображать веб-страницу, желательно задавать <!DOCTYPE html> в первой строке кода.
<html>...</html>
Элемент <!DOCTYPE html> только сообщает браузеру, что мы планируем использовать HTML, но он фактически не добавляет никакой структуры в наш документ.
Чтобы начать добавлять структуру и содержимое HTML, нам необходимо сначала добавить открывающие и закрывающие теги <html>...</html>, например:
<!DOCTYPE html>
<html>
...
</html>
Все, что находится между <html> и </ html> как раз и считается html-кодом.
Анатомия HTML
- В HTML символы
<и>называются угловыми скобками. - Код, который находится внутри угловых скобок, называется элементом HTML или тегом.
<...>- первый или открывающий тег. Применяется для запуска HTML-элемента.</...>- второй или закрывающий тег. Применяется для завершения HTML-элемента. У закрывающих тегов есть внутри косая черта/.
Голова, тег - <head>
Тег <head> предназначен для хранения других элементов, цель которых - помочь браузеру в работе с данными.
Контейнер <head> может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением элемента <title>.
<!DOCTYPE html>
<html>
<head>
...
</head>
</html>
Названия страниц, тег - <title>
Браузер отображает название веб-страницы, потому что заголовок может быть указан непосредственно внутри элемента <head> с помощью тега <title>.
<!DOCTYPE html>
<html>
<head>
<title>Название веб-страницы</title>
</head>
</html>
Тело, тег - <body>
Элемент <body> предназначен для хранения контента веб-страницы, отображаемого в окне браузера. Это могут быть изображения, текст, кнопки и многое другое.
<!DOCTYPE html>
<html>
<head>
<title>Название веб-страницы</title>
</head>
<body>
...
</body>
</html>
Весь вышеприведенный код называют шаблонным кодом.
Термин шаблонный код используется для описания базового кода HTML, необходимого для начала создания веб-страницы.
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
<!DOCTYPE html>желательно задавать в первой строке кода.- Элемент
<html>будет содержать весь наш HTML-код. - Элемент
<head>содержит в себе информацию о веб-странице. - Можно добавить заголовок на свою веб-страницу используя тег
<title>внутри элемента<head>. - Код для видимого содержимого HTML помещается внутри элемента
<body>.
Свое мнение и личные впечатления
Самой же главной фишкой обучения в Сodecademy служит возможность моментальной практики. Прямо в образовательный портал встроена так называемая "песочница", где мы с легкостью можем редактировать наш код и видеть его результат сразу в браузере.
Конспект подготовлен для Академии Голоса @academy.
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
knopki, natalia, lumia, harhor, turkish-r, semasping, stranniksenya, galerina, vika-teplo, borisss, tatyanamishenko, dmitrijv, dimas102, smartell, mp42b, alessandarus, bounty-compaing, vsebudethorosho
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!
Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"
Молодец, так держать