VSCode и организация папок

Перед тем как начать писать свои первые странички, сразу разберемся как работать в программе VSCode - мощном инструменте для написания страниц и как правильно организовывать хранение файлов в проектах.

Перейди по ссылке, ознакомься с информацией и затем вернись на эту страничку и продолжи изучение =)
https://digit.center/structure_files

HTML: Основа

HyperText Markup Language - это язык разметки гипертекста.

Разметка - что это такое? Представь, что ты передаешь текст по сети. Как в тексте выделить заголовок? Подчеркнуть слово? Самый простой вариант - пометить начало и конец выделяемого текста условными метками.

Например:

<заголовок> что такое HTML</заголовок>
<полужирный> это и есть </полужирный> <курсив>язык разметки гипертекста</курсив>
HTML позволил создавать документы, в которых были заголовки, абзацы, ссылки, таблицы, картинки и куча всего прочего.
Теги
В HTML для описания элементов страницы используются теги.
С их помощью браузер понимает, где элемент создается, начинается и заканчивается.

Существует 2 вида тегов : одинарные и двойные.

Двойные теги показывают начало и конец элемента, а между ними содержание - контент.
Начало элемента обозначается открывающим тегом <…> , а конец - закрывающим </…>.

Двойной тег обязательно должен быть закрыт, иначе все сломается!
Одинарные теги не имеют пары. Их закрывать ненужно.
Например:

... прекрасные создания. 
<br>
<hr> 
Так же кошки...
<br> - тег переноса строки.
<hr> - горизонтальная линия.

Результат кода выше:
Теги можно вкладывать друг в друга. При этом важно соблюдать «принцип матрёшки», т.е. мы не можем менять закрывающие теги местами, например:
Верный код

<p>
  <em>Курсив внутри абзаца</em>
</p>
Неверный код

<p> 
  <em> Так делать нельзя
</p>
  </em>
И ещё, не все теги можно вкладывать в другие теги, например тег <h1> нельзя вкладывать в <p>.
Атрибуты
Атрибуты — это свойства тега. С помощью них мы задаём параметры тега.

Сразу возьмём пример: тег <a> — это ссылка.
Для задания адреса, куда будет вести эта ссылка, нам понадобится атрибут href.

Вот так будет выглядеть ссылка на страницу Цифры Вконтакте:

<a href="https://vk.com/digitcenter">Цифра Вконтакте</a>
Имя атрибута говорит браузеру, какой признак нужно поменять, а значение — каким этот признак должен стать. Значение атрибута href представляет собой адрес ресурса, на который можно перейти.
Атрибуты присутствуют в любых тегах там, где нужна дополнительная информация.
Атрибут встраивается в открывающий тег.
Cначала пишется имя атрибута. Например, href.
За именем следует знак равенства и значение атрибута в кавычках href="https://vk.com/digitcenter".
Вместо двойных кавычек можно использовать одинарные 'https://vk.com/digitcenter'
Структура HTML-документа
Структура HTML документа - скелет, на основе которого строится вся страница.

<!DOCTYPE html> <!-- сообщает браузеру, что в этом документе используется пятая версия HTML. Всегда начинайте страницу именно с него. -->
<html> 
  <head>  <!-- Голова сайта. В ней располагается техническая информация. -->
    <meta charset="utf-8">
    <title>Страница</title>
  </head>
  <body>  <!-- Тело сайта. В нем находится вся видимая посетителю сайта информация -->
    <h1>Заголовок первого уровня</h1>
    <h2> Заголовок второго уровня</h2>
    <!-- Комментарий -->
    <p>Новый абзац текста</p>
    <p>А тут еще один абзац текста</p>
  </body>
</html>
Это обязательные теги каждой страницы, которые задают структуру всего будущего сайта.
Разберем, что написано выше.
Валидация
Перед тем как завершать создание любой страницы нужно провести её проверку на https://validator.w3.org

Валидация покажет есть ли на странице ошибки.
Полезные ссылки
Справочник тегов
Практика
1. Тест всех систем
Давай проверим, что все что мы узнали работает.

  • Создай новый проект- папку с названием "Practice-1" как было показано в настройке VSCode.
  • В новом проекте создай новую страницу с названием "work1.html", вставь в нее код из "необходимых материалов", написанных ниже.
  • Сохрани проект и проверь результат в браузере.
  • Пройди валидацию измененной страницы.
  • Результат должен быть как на картинке ниже.

Необходимые материалы:

<!DOCTYPE html> 
<html lang="ru">
  <head>
  <meta charset="UTF-8">
  <title>Пальма</title>
   </head>
  <body>
  <p>Родина кокосовой пальмы точно неизвестна — предположительно она родом из Юго-Восточной Азии (Малайзии).</p>
  <p>Сейчас она повсеместно распространена в тропиках обоих полушарий, как в культурном, так и в дикорастущем виде. На Филиппинах, Малайском архипелаге, полуострове Малакка, в Индии и на Шри-Ланке её разводят с доисторических времён.</p>
  <p>Кокос — растение морских побережий, предпочитающее песчаные почвы, поэтому первое место по объёмам производства с большим отрывом занимает многоостровное государство с обширной прибрежной площадью — Индонезия.</p>
  <p>Расширение его ареала шло с помощью человека и естественным путём: кокосовые орехи водонепроницаемы и свободно держатся на воде, далеко разносятся океаническими течениями, сохраняя при этом жизнеспособность.</p>
  </body>
</html>
Примечание:
- В результате этого и следующих заданий будут получаться html файлы.
Создавай для каждого задания отдельную папку, сохраняй все результаты там.
- При сохранении, укажи кодировку UTF-8.

Результат:
2. Доделай за ленивым
В задании закрались ошибки, но ты же с ними справишься, верно?

  • Создай страницу с названием "work2.html"
  • Скопируй код из "необходимых материалов" ниже.
  • Исправь и дополни код, чтобы получившаяся страница успешно прошла валидацию.
  • Результат должен быть как на картинке ниже.

Необходимые материалы:

<html>
  <head>    
  <title>Я заголовочек</title>
  <head>
 
  <bod>
    <p>А я текстик
  </body>
Результат:
3. Повтори страницу
Повтори страницу по примеру ниже.

  • Создай страницу с названием "work3.html"
  • Добавь структуру HTML-документа
  • Добавь тег title в "голову" документа
  • Добавь теги заголовков 1 и 2 уровня, теги абзацев и тег ссылки в "тело" документа.

Удачи! =)
Тексты для копирования:
Зимние каникулы: как провести их незабываемо!

Тут можно найти больше развлечений

Зимние каникулы - это время, когда можно насладиться морозным воздухом, белоснежными сугробами и невероятными зимними развлечениями. В этом году я решил провести свои зимние каникулы с пользой и удовольствием, и вот как это было.

Катание на лыжах и сноуборде

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

Зимние игры

В этом году я впервые принял участие в зимних играх. Они включали в себя множество различных видов спорта, таких как хоккей, керлинг, сноуборд, лыжные гонки и другие. Я очень волновался перед началом игр, но в итоге получил массу удовольствия, участвуя в них.
Следующее занятие