Учебник хтмл: HTML уроки с нуля — учебник для начинающих

Содержание

Путь к файлу — Учебник HTML


❮ Назад Далее ❯


Путь к файлу описывает расположение файла в структуре папок веб сайта.

Примеры пути к файлам

ПутьОписание
<img src=»picture.jpg»> picture.jpg находится в той же папке, что и текущая страница
<img src=»images/picture.jpg»> picture.jpg находится в папке images в текущей папке
<img src=»/images/picture.jpg»> picture.jpg находится в папке images в корне текущего веб-сайта
<img src=»../picture.jpg»> picture.jpg находится в папке на один уровень выше текущей папки

Пути к HTML файлам

Путь к файлу описывает расположение файла в структуре папок вебсайта.

Пути к файлам используются при связывании с внешними файлами, например:

  • Веб-страницы
  • Изображения
  • Таблицы стилей
  • JavaScripts

Абсолютные пути к файлам

Абсолютный путь к файлу — это полный URL адрес файла:

Пример

<img src=»http://schoolssw3. com/images/picture.jpg» alt=»Горы»>

Попробуйте сами »

Теги <img> и атрибуты src и alt описаны в главе HTML Изображения.


Относительные пути к файлам

Относительный путь к файлу указывает на файл относительно текущей страницы.

В этом примере путь к файлу указывает на файл в папке images, расположенной в корне текущего веб-сайт:

Пример

<img src=»/images/picture.jpg» alt=»Горы»>

Попробуйте сами »

В этом примере путь к файлу указывает на файл в папке images находятся в текущей папке:

Пример

<img src=»images/picture.jpg» alt=»Горы»>

Попробуйте сами »

В этом примере путь к файлу указывает на файл в папке images находятся в папке на один уровень выше текущей папки:

Пример

<img src=»../images/picture.jpg» alt=»Горы»>

Попробуйте сами »


Практика HTML лучше всего

Рекомендуется использовать относительные пути к файлам (если возможно).

При использовании относительных путей к файлам, веб-страницы не будут привязаны к вашему текущему базовому URL-адрес. Все ссылки будут работать на вашем собственном компьютере (localhost), а также на вашем текущем общественном домене и вашем будущем публичном домене. 


❮ Назад Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть




ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3. CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры


Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

Примеры — Учебник HTML


❮ Назад Далее ❯


HTML Основные теги

HTML Документ HTML Заголовок HTML Параграф HTML Ссылка HTML Изображение HTML Кнопка HTML Списки

Объяснение примеров


HTML Атрибуты

Атрибут title Атрибут href Атрибуты width и height Атрибут alt Атрибут без кавычек Атрибут без кавычек не работает

Объяснение примеров


HTML Заголовки

HTML Заголовки HTML Горизонтальная Линия HTML Глава

Объяснение примеров


HTML Параграфы

HTML Параграфы HTML еще Параграфы HTML Разрыв Строк HTML проблемы с Форматированием HTML Форматирование тег <pre>

Объяснение примеров


HTML Стили

HTML Стили HTML Цвет Фона HTML Цвет Текста HTML Шрифт Текста HTML Размер Текста HTML Выравнивание Текста

Объяснение примеров


HTML Форматирование Текста

Полужирный Текст <b> Строгий Текст <strong> Курсивный Текст <i> Подчеркнутый Текст <em> Небольшой Текст <small> Маркированный Текст <mark> Удаленный Текст <del> Вставленный Текст <ins> Удалено и Вставлено <del> и <ins> Подстрочный Текст <sub> Надстрочный Текст <sup>

Объяснение примеров


HTML Цитаты и Цитирование

Короткая цитата <q>.

Цитируемый Раздел <blockquote>. Информация об Авторе <address> Аббревиатура и Акроним <abbr> Название Работ <cite> Направление Текста <bdo>

Объяснение примеров


HTML Комментарии

Комментарий Скрытый Комментарий Условный Комментарий Отладка

Объяснение примеров


HTML CSS

Встроенный CSS Внутренний CSS Наружный CSS Шрифты CSS Атрибуты id CSS Атрибуты class CSS Границы CSS Отступы CSS Поля CSS Все Стили CSS

Объяснение примеров


HTML Ссылки

Абсолютный URL Относительный URL Измененный Цвет Подчеркивание Удалить Изменить Назначение Изображение Ссылка Закладка или Якорь Выход из фрейма Почта mailto Почта mailto с темой

Объяснение примеров


HTML Изображения

Изображение Гора Изображение Размер Изображение Размер в CSS Изображение Стили Размера Изображение в Папке Изображение не Работает Изображение с Сервера Изображение Ссылка Изображение Анимация Изображение Карта Изображение Плавать

Объяснение примеров


HTML Таблицы

Таблица Основная Таблица с Границами Таблица с Границей Таблица с Ячейками Таблица с Заголовками Выравнить Заголовки в Таблице Разные Заголовки в Таблице Надпись Таблицы Ячейки в Столбце Таблицы Ячейки в Строке Таблицы Таблица с Ячейками Теги HTML в Таблице Таблица с Идентификатором (вариант-I) Таблица с Идентификатором (вариант-II) Таблица с Классом (вариант-I) Таблица с Классом (вариант-II)

Объяснение примеров


HTML Списки

Список Неупорядоченный Список Неупорядоченный Маркированный Диском Список Неупорядоченный Маркированный Кругом Список Неупорядоченный Маркированный Квадратом Список Неупорядоченный без Маркеров Список Упорядоченный Список Упорядоченный Цифрами Список Упорядоченный Буквами Заглавными Список Упорядоченный Буквами Строчными Список Упорядоченный Цифрами Римскими Заглавными Список Упорядоченный Цифрами Римскими Строчными Список Описанный Список Вложенный (вариант-I) Список Вложенный (вариант-II) Список Горизонтальный Список Меню Горизонтальное

Объяснение примеров


HTML Блочный и Встроенный

Блочный Стиль <div> Встроенный Стиль <span>

Объяснение примеров


HTML Классы

Cтиль с Именем Класса (вариант-I) Cтиль с Именем Класса (вариант-II) Несколько Классов Стиля Cтиль с Именем Класса в Другом Теге

Объяснение примеров


HTML Идентификатор

Стиль с Идентификатором Разница Класса и Идентификатора Доступ к Идентификатору с JavaScript

Объяснение примеров


HTML Макет

Макет с использованием float Макет с использованием flexbox Макет с использованием flexbox 2 Макет с использованием flexbox 3

Объяснение примеров


HTML Фрейм

Фрейм

Объяснение примеров


HTML Главные

Документ HTML без Главных Тегов Документ HTML без <head> Заголовок Документа <title> Информация о Стиле <style> Связь с Ресурсом <link> Мета Информация <meta> JavaScript <script> Базовый URL <base>

Объяснение примеров


HTML Скрипты

Вставка тега <script> Вставка тега <noscript>

Объяснение примеров


HTML Компьютерный Код

Форматирование ввода <kbd> Форматирование вывода <samp> Форматирование кода <code> Форматирование cтрок <pre> Форматирование переменных <var>

Объяснение примеров


HTML Формы

Форма ввода текста Кнопка radio Форма ввода текста и кнопка отправки Форма ввода текста без name Форма группировки данных

Объяснение примеров


HTML Теги Формы

Тег <select> Тег <selected> Тег <textarea> Тег <button> Тег <datalist> Тег <output>

Объяснение примеров


HTML Типы Формы

Типы ввода text Типы ввода password Типы ввода radio Типы ввода checkbox Типы ввода button Типы ввода number — с ограничениями Типы ввода number — с шагом Типы ввода date — с выбором даты Типы ввода date — с ограничениями Типы ввода color — с выбором цвета Типы ввода range Типы ввода month Типы ввода week Типы ввода time Типы ввода datetime Типы ввода datetime-local Типы ввода email Типы ввода search Типы ввода tel Типы ввода url

Объяснение примеров


HTML Атрибуты Формы

Атрибут autocomplete Атрибут novalidate Атрибут autofocus Атрибут form Атрибут formaction Атрибут formenctype Атрибут formmethod Атрибут formnovalidate Атрибут formtarget Атрибуты height и width Атрибут list Атрибуты min и max Атрибут multiple Атрибут pattern Атрибут placeholder Атрибут required Атрибут step

Объяснение примеров


HTML5 Холст

Нарисовать на холсте с JavaScript Нарисовать линию с lineTo() Нарисовать круг с arc() Нарисовать текст с fillText() Нарисовать текст с strokeText() Нарисовать линейный градиент Нарисовать круговой градиент Нарисовать изображение с drawImage()

Объяснение примеров


HTML5 SVG

Нарисовать SVG круг Нарисовать SVG прямоугольник Нарисовать SVG закругленный прямоугольник Нарисовать SVG звезду Нарисовать SVG логотип

Объяснение примеров


HTML5 Медиа

Воспроизвести Bunny Воспроизвести Bear видео с элементами управления Воспроизвести Bear видео с автозапуском Воспроизвести Horse звук с элементами управления

Объяснение примеров


HTML5 Геолокация

Получить координаты геолокации Обработка ошибок геолокации Получить геолокацию с карты Получить геолокации с Google карты Получить геолокации и смотреть положение

Объяснение примеров


HTML5 Локальное хранилище

Хранить имя постоянно Хранить счетчик постоянно Сохранение счетчика для одного сеанса

Объяснение примеров


Еще HTML5 Примеры

HTML5 перетаскивание HTML5 веб работник HTML5 получить обновление сервера


❮ Назад Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть




ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры


Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

HTML

HTML (язык гипертекстовой разметки) — это язык Интернета. Он позволяет создавать веб-страницы и размещать на них все, что угодно (ну почти все!).

Этот раздел Quackit содержит список статей и учебных пособий, которые помогут вам в кодировании HTML.

Учебник HTML

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

Шаблоны HTML

Бесплатные адаптивные шаблоны, которые автоматически настраивают макет в соответствии с размером экрана.

HTML-коды

Обширный список примеров кода копирования/вставки. Скопируйте и вставьте прямо на свой веб-сайт, в блог или в информационный бюллетень.

Теги HTML

Полный список всех элементов HTML.

Это алфавитный список элементов HTML со ссылкой на полную страницу с подробным описанием каждого элемента.

Редактор HTML

Используйте этот онлайн-редактор HTML для создания фрагментов HTML или целых веб-страниц.

Bootstrap Tutorial

Bootstrap — это самая популярная среда HTML, CSS и JS для разработки адаптивных мобильных проектов в Интернете.

Создание веб-сайта

Объясняет основные принципы создания веб-сайта. От хостинга, доменных имен до его создания.

Учебное пособие по таблицам HTML

Научитесь создавать таблицы в HTML с помощью этого 5-минутного учебного руководства по таблицам. Включает границы таблицы и чередующиеся цвета строк.

Цветовые коды

Включает палитру цветов и шестнадцатеричную диаграмму цветов с эквивалентными названиями цветов и значениями RGB.

  • Справочные таблицы Unicode
  • Иконки эмодзи
  • Объекты HTML5 (A–Z)
  • Что такое набор символов?
  • Коды языков
  • Онлайн-редактор HTML
  • Генератор HTML-кода
  • Генератор HTML-таблиц
  • Генератор фиктивного текста
  • Генератор бегущей строки
  • Генератор музыкального кода
  • Генератор HTML-текста
  • Генератор текстовых полей
  • Примеры HTML-текста
  • Примеры ссылок HTML
  • Примеры списков HTML
  • Примеры HTML-изображений
  • Примеры HTML-таблиц
  • Примеры HTML-форм

Краткий справочник

Шпаргалка

Используйте эту HTML-шпаргалку для быстрого создания HTML-таблиц, форм, шрифтов, цветов, карт изображений, гиперссылок и многого другого.

HTML-справка

Краткий справочник по многим распространенным задачам. Например, справка с таблицами, справка с картами изображений и т. д.

Теги HTML4

HTML4 был заменен HTML5, но я сохранил эту ссылку здесь на случай, если она кому-то понадобится.

Теги HTML5

Обратите внимание, что этот список теперь содержит те же элементы, что и теги HTML.

Другие онлайн-редакторы

Список редакторов
  • Редактор TinyMCE
  • Редактор CK (стандартный)
  • Редактор CK (полный)
  • Редактор CK (классический)
HtmlEditor.Online

Я также создал специальный веб-сайт с редактором CK по адресу HtmlEditor.Online.

Блокнот Quackit

Запустите и просмотрите свой код в Интернете. Включает полноэкранный предварительный просмотр.

Изучение HTML — лучшие учебники по HTML (2022)

  1. Главная
  2. / Учебники по кодированию
  3. / HTML

Генератор резюме разработчика

Высококачественное резюме за 5 минут — автоматически создается из вашего профиля gitconnected