Урок 6.5 – HTML код, валидация HTML и CSS, ошибки верстки сайта

Урок 6.5 – HTML код, валидация HTML и CSS, ошибки верстки сайта

Урок 6.5 – HTML код, валидация HTML и CSS, ошибки верстки сайта

Программно любая веб-страница представляет собой HTML код.

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

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

Таким образом, при помощи HTML мы задаем структуру страницы, а при помощи CSS оформляем её в нужном дизайне.

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

  • <html>…</html> — между этими тегами заключается весь код страницы сайта.
  • <head>…</head> — между данными тегами обычно указывают подключаемые файлы стилей CSS, скриптов JS (можно подключать тут, но лучше в конце страницы, чтобы они не замедляли скорость загрузки), код счетчиков аналитики и др.
  • <body>…</body> — основное отображаемое содержимое страницы сайта.
  • <h1>…</h1> — основной заголовок (должен обязательно присутствовать на странице и быть только один).
  • <div>…</div> — блок.
  • <a>…</a> — ссылка.
  • <table>…</table> — таблица.
  • <ul>…</ul> — маркированный список.
  • <ol>…</ol> — нумерованный список.
  • <li>…</li> — элемент списка.
  • <b>…</b> или <strong>…</strong> — текст, выделенный жирным шрифтом.
  • <p>…</p> — абзац.
  • <i>…</i> — текст, выделенный курсивом.
  • <img/> — изображение.
  • <br/> — переход на новую строку.

Большинство тегов имеют открывающий и закрывающий тег. Если какой-то из этих тегов пропущен, то это является ошибкой HTML. Плюс каждый тег имеет свои обязательные атрибуты, если какой то из них опущен или заполнен некорректно – то это тоже ошибка.

Валидация HTML и CSS

Валидация HTML и CSS – это проверка правильно ли заданы все HTML теги на странице сайта и правильно ли прописаны CSS правила их визуального отображения.

Выполнить проверку можно при помощи валидатора W3C. Заходим в онлайн-сервис W3C, вставляем URL проверяемой страницы и запускаем проверку:

Валидация HTML и CSS

По результатам проверки формируем ТЗ для программиста на устранение ошибок верстки сайта.

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

Напишите искомую фразу и нажмите Enter

Shopping Cart

Расчет стоимости продвижения

    Нажимая кнопку "Заказать", я даю согласие на обработку персональных данных


    Индивидуальное предложение

      Нажимая кнопку "Заказать", я даю согласие на обработку персональных данных


      Заказ обратного звонка

        Нажимая на кнопку Заказать звонок Вы даете свое согласие на обработку персональных данных


        Заказать создание и продвижение сайта

          Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


          Тариф Mini

            Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


            Тариф Standart

              Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


              Тариф Premium

                Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


                Бесплатная консультация

                  Нажимая на кнопку Заказать консультацию Вы даете свое согласие на обработку персональных данных


                  Бесплатный аудит сайта

                    Нажимая на кнопку Заказать аудит Вы даете свое согласие на обработку персональных данных


                    Скидка 30% на первый месяц продвижения

                      Нажимая кнопку "Заказать продвижение", я даю согласие на обработку персональных данных


                      Скидка 50% на первый счет

                        Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных


                        Скидка 20% при предоплате за год

                          Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных


                          Скидка 10%

                            Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных


                            Скидка 10% на 1 счет

                              Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных