Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми
Html5 для начинающих: HTML5 для начинающих. Учебник по основам HTML
Содержание
Уроки по теме «HTML5» для начинающих
В каталоге хекслета найдено 47 уроков по теме «HTML5». Уроки по теме «HTML5» есть в курсах: Основы современной верстки, Основы верстки контента, Основы HTML, CSS и веб-дизайна, CSS: Transform (трансформация объектов).
Урок «Знакомство с HTML»
В курсе
«Основы HTML, CSS и веб-дизайна»
Познакомиться с HTML и попробовать его в деле.
Урок «Элементы, теги и атрибуты»
В курсе
«Основы HTML, CSS и веб-дизайна»
Изучить простую идею HTML и структуру элементов страницы.
Урок «Правило близости»
В курсе
«Основы HTML, CSS и веб-дизайна»
Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.
Урок «Интеграция с соц. сетями и семантический веб»
В курсе
«Основы HTML, CSS и веб-дизайна»
Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.
Урок «Размещение на GitHub Pages»
В курсе
«Основы HTML, CSS и веб-дизайна»
Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.
Урок «Chrome DevTools»
В курсе
«Основы HTML, CSS и веб-дизайна»
Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.
Урок «Верстальщик vs. веб-дизайнер»
В курсе
«Основы HTML, CSS и веб-дизайна»
Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.
Урок «div, span и display»
В курсе
«Основы HTML, CSS и веб-дизайна»
Познакомиться с принципами, по которым элементы выводятся на страницу и получают определённый размер.
Урок «Структура страницы»
В курсе
«Основы HTML, CSS и веб-дизайна»
Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.
Урок «Каскад»
В курсе
«Основы HTML, CSS и веб-дизайна»
Понять принцип, по которому стили собираются в один набор из разных источников.
При верстке сайта важно вовремя найти ошибки или понять, как правильно преобразовать нужный нам блок. Ранее это делалось преимущественно вручную. Сейчас современные браузеры имеют функцию веб-инспектора. Рассмотрим возможности одного из них – Chrome DevTools.
Урок «Каскадность в CSS»
В курсе
«Основы современной верстки»
Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.
Урок «Базовая структура HTML документа»
В курсе
«Основы современной верстки»
Любой HTML-документ имеет базовую структуру, состоящую из тегов и служебных элементов. Они нужны браузеру для корректного отображения информации. В данном уроке разберемся с каждой строчкой этой структуры
Урок «Основы CSS»
В курсе
«Основы современной верстки»
Для визуального оформления веб-страницы создан язык CSS. Изучаем базовые возможности языка, разбираемся, как их использовать вместе с HTML. Учимся подключать CSS файлы и знакомимся с базовыми типами селекторов.
Урок «Блочная модель»
В курсе
«Основы современной верстки»
Какие элементы отвечают за каркас страницы, а какие помогают в процессе ее стилизации или добавления функциональных частей? Знакомимся с блочными и строчными элементами HTML и изучаем влияние стилей на итоговую ширину элементов.
Урок «Редакторы кода»
В курсе
«Основы современной верстки»
Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить Visual Studio Code. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке.
Урок «Emmet»
В курсе
«Основы современной верстки»
Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.
Урок «Семантический HTML»
В курсе
«Основы современной верстки»
Основная цель любой HTML-верстки — передача смысла блоков. В этом уроке мы рассмотрим возможности последнего стандарта HTML5 в области семантики и узнаем о доступности в веб.
Урок «Графические редакторы»
В курсе
«Основы современной верстки»
На рынке существует несколько основных редакторов. Некоторые из них специфичны только для одной операционной системы, другие имеют возможность установки на любую из них. В этом разделе посмотрим на основные действия при работе верстальщика с онлайн-редактором Figma.
Урок «Введение»
В курсе
«Основы современной верстки»
Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.
Урок «Публикация в интернете»
В курсе
«Основы современной верстки»
Чтобы выложить проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить файлы и предоставит доступ к ним через доменное имя. В этом уроке мы рассмотрим бесплатный хостинг GitHub.
Урок «Введение в HTML»
В курсе
«Основы современной верстки»
Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.
Урок «Переполнение»
В курсе
«Основы верстки контента»
Переполнением считается ситуация, при которой контент внутри контейнера больше, чем размер самого контейнера. Эта ситуация способна подпортить макет даже матерому верстальщику. Что с этим делать и как управлять скрытием контента с помощью свойства overflow изучим в этом уроке. Разберем свойство text-overflow и научимся делать многоточие в текстах, если для него не хватает места
Урок «Псевдоэлементы»
В курсе
«Основы верстки контента»
Не хватило элементов на странице? На помощь приходят псевдоэлементы — элементы, созданные с помощью CSS. В этом уроке разберемся с тем, как создаются псевдоэлементы, зачем они нужны и какие особенности имеют. Увидим, как стилизуют маркеры списка в CSS
Урок «Фон»
В курсе
«Основы верстки контента»
Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. Для этого можно установить фон для блока с контентом, а как это сделать, с помощью свойства background, узнаем в этом уроке. Изучим свойства для установки цвета, изображения, научимся позиционировать фон и устанавливать его размеры
Нашли 4 курса
по тегу «HTML5»
Основы современной верстки
Developer Tools
Верстка
9 часов
Посмотреть
Основы верстки контента
Доступность
CSS Columns
CSS Units
селекторы
18 часов
Посмотреть
Основы HTML, CSS и веб-дизайна
вёрстка
Веб-дизайн
GitHub Pages
Developer Tools
5 часов
Посмотреть
CSS: Transform (трансформация объектов)
вёрстка
CSS перспектива
7 часов
Посмотреть
Вам могут быть интересны темы:
Верстка
Трёхмерные объекты
CSS Units
селекторы
CSS перспектива
Веб-дизайн
CSS Columns
вёрстка
Анимации
GitHub Pages
CSS Transforms
CSS3
Developer Tools
Доступность
обучение html верстке для начинающих
Бесплатный курс
Для стандартизации вывода текста внутри браузера был придуман стандарт HTML, описывающий правила оформления текстовых данных для корректного вывода. Этот курс посвящён азам HTML разметки, работы с типографикой, вывода медиа документов и работы с формами
11 часов54569 студентов41 урок с практикой в браузере
Начать обучение
Основы разметки HTML
1. HTML разметка
2. Теги
3. Текст в HTML
4. Вложенность тегов
5. Атрибуты HTML
Для стандартизации вывода текста внутри браузера был разработан язык разметки HTML, описывающий правила оформления текстовых данных. Несмотря на долгое развитие языка, базовые концепции не поменялись даже спустя более 20 лет. В первом модуле разберём основные концепции HTML: тег, атрибут, вложенность тегов и научимся базовым возможностям по разметке текста с помощью параграфов
Текст в HTML
6. Параграфы
7. Начертание текста
8. Заголовки
9. Списки
10. Вложенные списки
11. Таблицы
12. Объединение ячеек внутри строк и столбцов
13. Специальные символы HTML
14. Ссылки
15. Форматированный текст
16. Вставка компьютерного кода в HTML
HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Корректная разметка текста — один из ключевых навыков при работе с сайтом.
Медиаэлементы
17. Изображения
18. Аудио
19. Видео
HTML разметка позволяет добавлять на страницы изображения, а в последнем стандарте HTML5 появилась возможность работы с аудио и видео контентом
Структура HTML документа
20. Базовая структура
21. Метатеги
22. link
23. Viewport
24. Блочные и строчные элементы
Каждая HTML страница состоит из нескольких общих блоков, в которых описывается набор данных: метатеги, заголовок страницы, контент. На каждую часть в стандарте HTML есть свои блоки и конструкции.
25. Формы в HTML
26. Поле для ввода текста
27. Чекбокс
28. Радиокнопка
29. Textarea
30. Список
31. Отправка формы
Одним из важнейших элементов в HTML являются формы. Они позволяют взаимодействовать пользователю с сайтом. Поиск, обратные звонки, анкеты — всё это создаётся с помощью форм.
Семантические элементы HTML5
32. Семантические элементы
33. Шапка
34. Меню
35. Уникальный контент страницы
36. Секция
37. Самостоятельная секция
38. Боковая панель
В HTML5 появилось множество новых тегов для семантической разметки. Они призваны помочь браузерам корректнее обрабатывать документ, использовать «режим чтения». Поисковые системы также будут благодарны вам за то, что поможете им чётко видеть структуру вашего сайта. В данном модуле разметим типичную веб-страницу, используя новые теги HTML5
Разное
39. Семантический WEB
40. Микроразметка
41. Ошибки в HTML-разметке
Говоря об HTML, нельзя пропустить темы, связанные с работой интернета в целом. Микроразметка, семантика, валидация — важные знания при работе с HTML документами.
Готовы попробовать?
Регистрация не требуется
Демо урок
Как встроить видео в HTML5
Реклама
В этом уроке вы узнаете, как встроить видео в документ HTML.
Встраивание видео в HTML-документ
Вставить видео на веб-страницу было непросто, поскольку веб-браузеры не имели единого стандарта для определения встроенных мультимедийных файлов, таких как видео.
В этой главе мы продемонстрируем некоторые из множества способов добавления видео на веб-страницы, начиная с последней версии HTML5 к популярным видео на YouTube.
Использование элемента HTML5 video
Недавно представленный элемент HTML5 к популярным видео на YouTube.
Использование элемента HTML5 video
Недавно представленный элемент HTML5 обеспечивает стандартный способ встраивания видео в веб-страницы. Тем не менее, элемент видео относительно новый, но он работает в большинстве современных веб-браузеров.
В следующем примере видео просто вставляется в HTML-документ с использованием набора элементов управления браузера по умолчанию, причем один источник определяется атрибутом src .
Пример
Попробуйте этот код »
Ваш браузер не поддерживает элемент видео HTML5.
Видео, использующее набор элементов управления браузера по умолчанию, с альтернативными источниками.