Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
arey1983
7 лет назад

Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML


 Всем здравствуйте. Я продолжаю принимать участие в проекте "Академия" от @ontofractal. Мною был выбран курс online-образовательного портала Сodecademy - "Learn HTML & CSS".

  Курс Сodecademy - "Learn HTML & CSS" состоит из 9 частей. В прошлый раз, немного не разобравшись, я сразу оформил его вторую часть - HTML-контент. В данной статье хочу восполнить пробел и детально разобрать первую часть курса - Основы HTML.



Основы HTML

 В этой части курса будут рассмотрены основные правила и принципы построения правильной структуры веб-страницы.



Что такое HTML?

HTML (HyperText Markup Language, язык гипертекстовой разметки) - это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице.

 Такие элементы называются тегами и необходимы для форматирования текста, который "понимает" браузер.

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 в данном курсе.



  1. В HTML символы < и > называются угловыми скобками.
  2. Код, который находится внутри угловых скобок, называется элементом HTML или тегом.
  3. <...> - первый или открывающий тег. Применяется для запуска HTML-элемента.
  4. </...> - второй или закрывающий тег. Применяется для завершения 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, необходимого для начала создания веб-страницы.

Подводим итоги

 Давайте посмотрим чему мы научились и что нового мы для себя узнали:

  1. <!DOCTYPE html> желательно задавать в первой строке кода.
  2. Элемент <html> будет содержать весь наш HTML-код.
  3. Элемент <head> содержит в себе информацию о веб-странице.
  4. Можно добавить заголовок на свою веб-страницу используя тег <title> внутри элемента <head>.
  5. Код для видимого содержимого HTML помещается внутри элемента <body>.


Свое мнение и личные впечатления

 В целом курс Сodecademy - "Learn HTML & CSS" мне показался довольно информативным и сбалансированным. Материал уроков интересен и излагается в довольно простой форме, что очень удобно для новичка.

 Самой же главной фишкой обучения в Сodecademy служит возможность моментальной практики. Прямо в образовательный портал встроена так называемая "песочница", где мы с легкостью можем редактировать наш код и видеть его результат сразу в браузере.



Конспект подготовлен для Академии Голоса @academy.

2
269.485 GOLOS
На Golos с July 2017
Комментарии (2)
Сортировать по:
Сначала старые