Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML
Курс С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.