Viasite
Портфолио
  • Интернет-магазины
  • Сайты компаний
  • Медицинские учреждения, Салоны красоты
  • Новостные порталы
  • Развлечения, Отдых - HoReCa
  • Образовательные учреждения
  • Сайты-визитки
  • Лендинги
  • Сайты на Vcorp
  • Сайты на Аспро
  • Корпоративные порталы
Лицензии
  • Интернет-магазины
    • Аспро: Лайтшоп
    • Аспро: Максимум
    • Аспро: Next
    • Аспро: Оптимус
    • Аспро: Маркет
  • Корпоративные сайты
    • Аспро: Корпоративный сайт 3.0
    • Аспро: Корпоративный сайт 2.0
    • Аспро: Приорити
    • Аспро: Корпоративный сайт современной компании
    • Аспро: Корпортативный сайт
    • Vcorp
  • Отраслевые сайты
    • Аспро: Детский сад и образовательный центр
    • Аспро: Инжиниринг
    • Аспро: Стройка 2.0
    • Аспро: Digital 2.0
    • Аспро: Медицинский центр 3.0
    • Аспро: Металл
    • Аспро: Шины и диски 2.0
    • Аспро: Ландшафт
  • Лицензии 1С-Битрикс
    • 1С-Битрикс: Старт
    • 1С-Битрикс: Стандарт
    • 1С-Битрикс: Малый бизнес
    • 1С-Битрикс: Бизнес
    • 1С-Битрикс24: Интернет-магазин + CRM
Хостинг
Услуги
  • Готовые сайты
    • Если не знаете, что выбрать, то вам сюда
    • Готовые сайты на Битрикс
    • Готовые сайты с бесплатной лицензией
  • Интернет-магазины
    • Интернет-магазины на 1С-Битрикс и Аспро
  • Индивидуальные сайты
    • Проектирование или как мы работаем
    • Индивидуальные сайты
  • Поддержка сайтов
    • Тарифы на хостинг
      • Тариф «Старт»
      • Тариф «Оптимальный»
      • Тариф «Заботливый»
      • Тариф «Индивидуальный»
    • Хостинг для сайта, тарифы
    • Аудит сайта, поиск ошибок
    • Регистрация домена, продление домена
    • Почта для домена
    • Резервное копирование сайта
    • Мониторинг состояния сайта и сервера
    • Защита от вирусов и хакерских атак
    • HTTPS, SSL-сертификат, защищенное соединение с сайтом
  • Доработка сайта
    • Доработка интернет-магазина
    • Доработка новостного сайта, сайта СМИ
    • Выгрузка для сайта, импорт, экспорт, прайс-лист
    • Открытые линии Битрикс24
    • Чат на сайте с заказом звонка JivoSite
    • Верстка под мобильные устройства
    • Соблюдение закона 152-ФЗ "О персональных данных"
    • Технический аудит
    • SEO аудит как начало SEO продвижения
    • Микроразметка
    • Сервисы для увеличения конверсии
  • Реклама и продвижение
    • Реклама в Яндекс.Директ
    • Реклама в Google Ads
    • Таргетированная реклама в соц. сетях
    • Интеграция социальных сетей
    • Квиз-маркетинг - повышение конверсии с помощью опросов и тестов
    • Отслеживание позиций сайта в поиске
Блог
  • Новости
  • Статьи
  • Разработчикам
    • Справка
    • Вебмастеру
    • Руководства
    • Технологии
    • Интеграция
  • Обновления
Компания
  • О компании
  • Команда
  • Партнеры
  • Отзывы
  • Вакансии
  • Реквизиты
  • Бриф на разработку сайта
  • Контакты
Ещё
    Задать вопрос
    Москва
    +7 (495) 197-72-82
    Заказать звонок
    mail@viasite.ru
    Москва, Ленинский проспект, 40, офис 84
    Пн-Пт 9:00-17:00
    • Вконтакте
    • Facebook
    • Telegram
    • Github
    Москва
    +7 (495) 197-72-82
    Заказать звонок
    Viasite
    Портфолио
    • Интернет-магазины
    • Сайты компаний
    • Медицинские учреждения, Салоны красоты
    • Новостные порталы
    • Развлечения, Отдых - HoReCa
    • Образовательные учреждения
    • Сайты-визитки
    • Лендинги
    • Сайты на Vcorp
    • Сайты на Аспро
    • Корпоративные порталы
    Лицензии
    • Интернет-магазины
      • Аспро: Лайтшоп
      • Аспро: Максимум
      • Аспро: Next
      • Аспро: Оптимус
      • Аспро: Маркет
    • Корпоративные сайты
      • Аспро: Корпоративный сайт 3.0
      • Аспро: Корпоративный сайт 2.0
      • Аспро: Приорити
      • Аспро: Корпоративный сайт современной компании
      • Аспро: Корпортативный сайт
      • Vcorp
      • + Ещё 1
    • Отраслевые сайты
      • Аспро: Детский сад и образовательный центр
      • Аспро: Инжиниринг
      • Аспро: Стройка 2.0
      • Аспро: Digital 2.0
      • Аспро: Медицинский центр 3.0
      • Аспро: Металл
      • Аспро: Шины и диски 2.0
      • Аспро: Ландшафт
      • + Ещё 3
    • Лицензии 1С-Битрикс
      • 1С-Битрикс: Старт
      • 1С-Битрикс: Стандарт
      • 1С-Битрикс: Малый бизнес
      • 1С-Битрикс: Бизнес
      • 1С-Битрикс24: Интернет-магазин + CRM
    Хостинг
    Услуги
    • Готовые сайты
      • Если не знаете, что выбрать, то вам сюда
      • Готовые сайты на Битрикс
      • Готовые сайты с бесплатной лицензией
    • Интернет-магазины
      • Интернет-магазины на 1С-Битрикс и Аспро
    • Индивидуальные сайты
      • Проектирование или как мы работаем
      • Индивидуальные сайты
    • Поддержка сайтов
      • Тарифы на хостинг
        • Тариф «Старт»
        • Тариф «Оптимальный»
        • Тариф «Заботливый»
        • Тариф «Индивидуальный»
      • Хостинг для сайта, тарифы
      • Аудит сайта, поиск ошибок
      • Регистрация домена, продление домена
      • Почта для домена
      • Резервное копирование сайта
      • Мониторинг состояния сайта и сервера
      • Защита от вирусов и хакерских атак
      • HTTPS, SSL-сертификат, защищенное соединение с сайтом
      • + Ещё 4
    • Доработка сайта
      • Доработка интернет-магазина
      • Доработка новостного сайта, сайта СМИ
      • Выгрузка для сайта, импорт, экспорт, прайс-лист
      • Открытые линии Битрикс24
      • Чат на сайте с заказом звонка JivoSite
      • Верстка под мобильные устройства
      • Соблюдение закона 152-ФЗ "О персональных данных"
      • Технический аудит
      • SEO аудит как начало SEO продвижения
      • Микроразметка
      • Сервисы для увеличения конверсии
      • + Ещё 6
    • Реклама и продвижение
      • Реклама в Яндекс.Директ
      • Реклама в Google Ads
      • Таргетированная реклама в соц. сетях
      • Интеграция социальных сетей
      • Квиз-маркетинг - повышение конверсии с помощью опросов и тестов
      • Отслеживание позиций сайта в поиске
      • + Ещё 1
    Блог
    • Новости
    • Статьи
    • Разработчикам
      • Справка
      • Вебмастеру
      • Руководства
      • Технологии
      • Интеграция
    • Обновления
    Компания
    • О компании
    • Команда
    • Партнеры
    • Отзывы
    • Вакансии
    • Реквизиты
    • Бриф на разработку сайта
    • Контакты
      Запустите свой проект в онлайн
      Viasite
      Портфолио
      • Интернет-магазины
      • Сайты компаний
      • Медицинские учреждения, Салоны красоты
      • Новостные порталы
      • Развлечения, Отдых - HoReCa
      • Образовательные учреждения
      • Сайты-визитки
      • Лендинги
      • Сайты на Vcorp
      • Сайты на Аспро
      • Корпоративные порталы
      Лицензии
      • Интернет-магазины
        • Аспро: Лайтшоп
        • Аспро: Максимум
        • Аспро: Next
        • Аспро: Оптимус
        • Аспро: Маркет
      • Корпоративные сайты
        • Аспро: Корпоративный сайт 3.0
        • Аспро: Корпоративный сайт 2.0
        • Аспро: Приорити
        • Аспро: Корпоративный сайт современной компании
        • Аспро: Корпортативный сайт
        • Vcorp
        • + Ещё 1
      • Отраслевые сайты
        • Аспро: Детский сад и образовательный центр
        • Аспро: Инжиниринг
        • Аспро: Стройка 2.0
        • Аспро: Digital 2.0
        • Аспро: Медицинский центр 3.0
        • Аспро: Металл
        • Аспро: Шины и диски 2.0
        • Аспро: Ландшафт
        • + Ещё 3
      • Лицензии 1С-Битрикс
        • 1С-Битрикс: Старт
        • 1С-Битрикс: Стандарт
        • 1С-Битрикс: Малый бизнес
        • 1С-Битрикс: Бизнес
        • 1С-Битрикс24: Интернет-магазин + CRM
      Хостинг
      Услуги
      • Готовые сайты
        • Если не знаете, что выбрать, то вам сюда
        • Готовые сайты на Битрикс
        • Готовые сайты с бесплатной лицензией
      • Интернет-магазины
        • Интернет-магазины на 1С-Битрикс и Аспро
      • Индивидуальные сайты
        • Проектирование или как мы работаем
        • Индивидуальные сайты
      • Поддержка сайтов
        • Тарифы на хостинг
          • Тариф «Старт»
          • Тариф «Оптимальный»
          • Тариф «Заботливый»
          • Тариф «Индивидуальный»
        • Хостинг для сайта, тарифы
        • Аудит сайта, поиск ошибок
        • Регистрация домена, продление домена
        • Почта для домена
        • Резервное копирование сайта
        • Мониторинг состояния сайта и сервера
        • Защита от вирусов и хакерских атак
        • HTTPS, SSL-сертификат, защищенное соединение с сайтом
        • + Ещё 4
      • Доработка сайта
        • Доработка интернет-магазина
        • Доработка новостного сайта, сайта СМИ
        • Выгрузка для сайта, импорт, экспорт, прайс-лист
        • Открытые линии Битрикс24
        • Чат на сайте с заказом звонка JivoSite
        • Верстка под мобильные устройства
        • Соблюдение закона 152-ФЗ "О персональных данных"
        • Технический аудит
        • SEO аудит как начало SEO продвижения
        • Микроразметка
        • Сервисы для увеличения конверсии
        • + Ещё 6
      • Реклама и продвижение
        • Реклама в Яндекс.Директ
        • Реклама в Google Ads
        • Таргетированная реклама в соц. сетях
        • Интеграция социальных сетей
        • Квиз-маркетинг - повышение конверсии с помощью опросов и тестов
        • Отслеживание позиций сайта в поиске
        • + Ещё 1
      Блог
      • Новости
      • Статьи
      • Разработчикам
        • Справка
        • Вебмастеру
        • Руководства
        • Технологии
        • Интеграция
      • Обновления
      Компания
      • О компании
      • Команда
      • Партнеры
      • Отзывы
      • Вакансии
      • Реквизиты
      • Бриф на разработку сайта
      • Контакты
        Viasite
        Viasite
        • Портфолио
          • Назад
          • Портфолио
          • Интернет-магазины
          • Сайты компаний
          • Медицинские учреждения, Салоны красоты
          • Новостные порталы
          • Развлечения, Отдых - HoReCa
          • Образовательные учреждения
          • Сайты-визитки
          • Лендинги
          • Сайты на Vcorp
          • Сайты на Аспро
          • Корпоративные порталы
        • Лицензии
          • Назад
          • Лицензии
          • Интернет-магазины
            • Назад
            • Интернет-магазины
            • Аспро: Лайтшоп
            • Аспро: Максимум
            • Аспро: Next
            • Аспро: Оптимус
            • Аспро: Маркет
          • Корпоративные сайты
            • Назад
            • Корпоративные сайты
            • Аспро: Корпоративный сайт 3.0
            • Аспро: Корпоративный сайт 2.0
            • Аспро: Приорити
            • Аспро: Корпоративный сайт современной компании
            • Аспро: Корпортативный сайт
            • Vcorp
          • Отраслевые сайты
            • Назад
            • Отраслевые сайты
            • Аспро: Детский сад и образовательный центр
            • Аспро: Инжиниринг
            • Аспро: Стройка 2.0
            • Аспро: Digital 2.0
            • Аспро: Медицинский центр 3.0
            • Аспро: Металл
            • Аспро: Шины и диски 2.0
            • Аспро: Ландшафт
          • Лицензии 1С-Битрикс
            • Назад
            • Лицензии 1С-Битрикс
            • 1С-Битрикс: Старт
            • 1С-Битрикс: Стандарт
            • 1С-Битрикс: Малый бизнес
            • 1С-Битрикс: Бизнес
            • 1С-Битрикс24: Интернет-магазин + CRM
        • Хостинг
        • Услуги
          • Назад
          • Услуги
          • Готовые сайты
            • Назад
            • Готовые сайты
            • Если не знаете, что выбрать, то вам сюда
            • Готовые сайты на Битрикс
            • Готовые сайты с бесплатной лицензией
          • Интернет-магазины
            • Назад
            • Интернет-магазины
            • Интернет-магазины на 1С-Битрикс и Аспро
          • Индивидуальные сайты
            • Назад
            • Индивидуальные сайты
            • Проектирование или как мы работаем
            • Индивидуальные сайты
          • Поддержка сайтов
            • Назад
            • Поддержка сайтов
            • Тарифы на хостинг
              • Назад
              • Тарифы на хостинг
              • Тариф «Старт»
              • Тариф «Оптимальный»
              • Тариф «Заботливый»
              • Тариф «Индивидуальный»
            • Хостинг для сайта, тарифы
            • Аудит сайта, поиск ошибок
            • Регистрация домена, продление домена
            • Почта для домена
            • Резервное копирование сайта
            • Мониторинг состояния сайта и сервера
            • Защита от вирусов и хакерских атак
            • HTTPS, SSL-сертификат, защищенное соединение с сайтом
          • Доработка сайта
            • Назад
            • Доработка сайта
            • Доработка интернет-магазина
            • Доработка новостного сайта, сайта СМИ
            • Выгрузка для сайта, импорт, экспорт, прайс-лист
            • Открытые линии Битрикс24
            • Чат на сайте с заказом звонка JivoSite
            • Верстка под мобильные устройства
            • Соблюдение закона 152-ФЗ "О персональных данных"
            • Технический аудит
            • SEO аудит как начало SEO продвижения
            • Микроразметка
            • Сервисы для увеличения конверсии
          • Реклама и продвижение
            • Назад
            • Реклама и продвижение
            • Реклама в Яндекс.Директ
            • Реклама в Google Ads
            • Таргетированная реклама в соц. сетях
            • Интеграция социальных сетей
            • Квиз-маркетинг - повышение конверсии с помощью опросов и тестов
            • Отслеживание позиций сайта в поиске
        • Блог
          • Назад
          • Блог
          • Новости
          • Статьи
          • Разработчикам
            • Назад
            • Разработчикам
            • Справка
            • Вебмастеру
            • Руководства
            • Технологии
            • Интеграция
          • Обновления
        • Компания
          • Назад
          • Компания
          • О компании
          • Команда
          • Партнеры
          • Отзывы
          • Вакансии
          • Реквизиты
          • Бриф на разработку сайта
          • Контакты
        • +7 (495) 197-72-82
        mail@viasite.ru
        Москва, Ленинский проспект, 40, офис 84
        Пн-Пт 9:00-17:00
        • Вконтакте
        • Facebook
        • Telegram
        • Github
        • Главная
        • Статьи
        • Статьи: Вебмастеру

        Введение в HTML

        Введение в HTML

        Опубликовано: 28.01.2019

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

        Как браузер получает веб-страницы?

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

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

        Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.

        Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся:Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera.

        Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.

        Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.

        Зачем нужен HTML-редактор?

        Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор - это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.

        Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver, Visual Studio и PHPStorm. В качестве бесплатных редакторов можно использовать notepad++ и geany.

        Что из себя представляет HTML-документ?

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

        Windows:
        Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:

        1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираемсохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить. Всё, HTML-документ создан.
        2. Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.

        Открыть файл, сохраненный с расширением .html, для просмотра в браузере можно двумя способами:

        1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
        2. Кликнуть по нему ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам браузер.

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

        HTML-код:



        <html>
          <head>
            <title>Заголовок</title>
          </head>
          <body>
            <h1>Мой первый заголовок</h1>
            <p>Мой первый абзац</p>
          </body>
        </html>



        Результат данного кода в окне браузера:


        моя первая страничка

        Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам редактор, если в списке нет нужного редактора, жмемВыбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмемnotepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверхуEdit with Notepad++ (редактировать с помощью notepad++).

        Что такое HTML?

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

        • Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).
        • Запомните, он не является языком программирования, это язык разметки.
        • HTML использует теги разметки, чтобы описать структуру веб-страницы.

        Что такое теги?

        HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например <body>,<p>, <h2> и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. По стандарту HTML5 теги могут быть написаны в любом регистре.

        С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов. Без использования тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах ниже.

        Так выглядит страница, в которой используются теги для разметки:


        <html>
          <head>
            <title>Летнее меню</title>
          </head>
          <body>
            <h1>Напитки в нашем кафе</h1>

            <h3>Мультифрукт - 100р.</h3>
            <p>Фруктовый напиток, содержащий апельсиновый и ананасовый соки.</p>

            <h3>Молочный коктель - 150р.</h3>
            <p>Сливочное мороженое, перемешанное с мякотью фруктов.</p>
          </body>
        </html>


        Пример веб-страницы с использованием HTML-тегов

        То же самое, но без использования тегов:


        Напитки в нашем кафе

        Мультифрукт - 100р.
        Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

        Молочный коктель - 150р.
        Сливочное мороженое, перемешанное с мякотью фруктов.



        Пример веб-страницы без использования HTML-тегов



        • Справка
        • Вебмастеру
        • Руководства
        • Технологии
        • Интеграция
        Заказать звонок
        Написать сообщение
        Ближайший офис
        Бриф на разработку
        Услуги
        Готовые сайты
        Интернет-магазины
        Индивидуальные сайты
        Поддержка сайтов
        Доработка сайта
        Реклама и продвижение
        Лицензии
        Интернет-магазины
        Корпоративные сайты
        Отраслевые сайты
        Лицензии 1С-Битрикс
        Компания
        О компании
        Команда
        Партнеры
        Отзывы
        Вакансии
        Реквизиты
        Бриф на разработку сайта
        Контакты
        Портфолио
        Новости
        Контакты
        Обновления
        Подписка на рассылку
        +7 (495) 197-72-82
        Заказать звонок
        mail@viasite.ru
        Москва, Ленинский проспект, 40, офис 84
        Пн-Пт 9:00-17:00
        • Вконтакте
        • Facebook
        • Telegram
        • Github
        Версия для печати
        Политика информационной безопасности
        © ООО «ВИА сайт», 2010-2022
        Заказать звонок
        Написать сообщение
        Ближайший офис