1,0×
19 просмотров · 4 месяца назад
00:00/12:07
Описание
01 | Основы HTML5 — первые шаги в среде разработки | Стань экспертом | Учи HTML
4 месяца назад • 19 просмотров
www.youtube.com/@GoToFrontendВ данном видео представлена информация о базовых принципах HTML-разметки и создании веб-страниц.
В начале урока рассматривается создание папки для файлов уроков и выбор редактора кода, в данном случае VS Code.
ПЛЕЙЛИСТ КУРСА:
youtube.com/...mBXdYzP4HD
!!! В курсе НЕ рассматриваются CSS и JS !!!
--------------------------------------------------------------------------------
HTML | АВТОР КУРСА - Андрій Кльон
www.youtube.com/@AndrijKlyon
--------------------------------------------------------------------------------
Также упоминается доступное расширение "Russian Language Pack for Visual Studio Code", которое русифицирует интерфейс редактора, но рекомендуется использовать английский вариант для лучшего владения языком программирования.
Затем переходим к созданию первой веб-страницы.
Создается папка "lesson 1" и внутри нее создается файл "index.html".
При открытии файла в редакторе появляется базовая разметка HTML документа, созданная с помощью Emmet.
Разбирается структура HTML документа, включая теги !DOCTYPE html, html, head и body, а также метатеги meta для указания кодировки, совместимости с браузерами и масштабирования страницы.
Затем рассматривается использование заголовков разных уровней (h1-h6), которые отражают важность информации на странице. Заголовок h1 является самым важным и должен отражать суть всей страницы. Заголовки меньшего уровня (h2-h6) используются для подзаголовков и уточнений.
Также в документе упоминаются параграфы (p) и разделитель (hr), которые помогают организовать текст на странице.
В конце документа добавлены базовые стили для ограничения ширины и центрирования контента на странице.
В целом, данный документ предоставляет основные знания о разметке HTML и помогает создать первую веб-страницу.
Домашнее задание к первому уроку "Основы HTML" состоит из нескольких шагов.
Во-первых, необходимо создать файл "homework.html" в папке к первому уроку (lesson 1) и добавить в него базовую разметку.
Затем следует добавить базовые стили в заголовок документа. Документ должен быть назван "Homework 1".
В теле документа (homework.html) необходимо создать заголовок первого уровня "Homework 1", заголовок второго уровня "Text block 1" и два параграфа с текстом-заполнителем.
Далее нужно добавить разделитель текста в виде горизонтальной прямой.
После этого следует создать заголовок второго уровня "Text block 2" и два параграфа, в каждом из которых содержится по 25 слов.
Затем необходимо создать заголовок второго уровня "Text block 3" и параграф, состоящий из двух абзацев.
Между абзацами последнего параграфа необходимо поставить два разделителя br.
В конце задания нужно ответить на вопрос: к какому визуальному эффекту приводит простановка двух разделителей br подряд?
Перед вставкой элементов, описанных в пунктах 3 и 4, следует добавить соответствующие комментарии: "Heading 1", "Heading 2", "Paragraphs" и т.д.
Наконец, необходимо сохранить документ и открыть его в браузере. Он должен выглядеть примерно так, как показано на экране.
--------------------------------------------------------------------------------
СОДЕРЖАНИЕ:
⏱ - начало
⏱ - меню - "File ⇒ Open Folder", расширение - "Russian Language Pack for Visual Studio Code"
⏱ - вкладка - "Explorer"
⏱ - "index.html" - основная страница веб-проекта, расширение: "vscode-icons"
⏱ - "Базовая разметка страницы" - создание при помощи последовательного нажатия клавиш - "!" ⇒ "Tab"
⏱ - "Открывающий" и "Закрывающий" теги
⏱ - "Парные" и "Одиночные" теги
⏱ - термины "Элемент" и "Тег"
⏱ - специальная инструкция "!DOCTYPE html"
⏱ - парный тег "html", заголовок "head"
⏱ - основное тело документа "body"
⏱ - служебная информация размещенная в теге "head", одиночные теги "meta"
⏱ - метатеги "meta charset="UTF-8"", "meta http-equiv="X-UA-Compatible" content="IE=edge""
⏱ - метатег "meta name="viewport" content="width=device-width, initial-scale=1.0""
⏱ - метатег "title"
⏱ - домашнее задание
--------------------------------------------------------------------------------
#программирование #frontend #фронтенд #html #html5
HTML с нуля УРОКИ | для начинающих | базовый полный курс
Подборка ·
Go to Frontend (учу языки)
· 2 из 6Далее: 02 | DevTools | Справочные ресурсы | Оптимизация | Основы работы c HTML
HTML с нуля УРОКИ | для начинающих | базовый полный курс · 2 из 6