Содержание

Тесты на знание HTML, CSS, JavaScript, PHP, SQL

Вы здесь:
Главная — Тесты

Тесты на знание Web-технологий

Теперь на сайте доступно тестирование на знание следующих тем: HTML, CSS, JavaScript, PHP, SQL.

Каждый тест состоит из 10-ти вопросов по определённой теме. Я старался в каждом вопросе затрагивать самые разнообразные области применения конкретного языка, чтобы максимально тщательно проверить Ваш уровень знаний.

Безусловно, все тесты бесплатные и пройти их может любой желающий.

Порядок прохождения теста:

  1. Переходите по ссылке «Начать тестирование» у соответствующего теста.
  2. Отвечаете на поставленные вопросы, выбрав единственный правильный вариант.
  3. По завершению тестирования Вы увидите свой балл, количество ошибок, а также разбор каждого вопроса из теста.

Внимание! Вернуться к предыдущему вопросу не получится, поэтому прежде, чем отвечать, думайте.

Доступные на данный момент тесты


  1. HTML

    • Всего тест прошло: 80672 человека
    • Средний балл: 2.82 из 5 баллов.

    Тест на знание основ HTML. От Вас потребуется знание основных HTML-тегов, а также грамотное их использование. Так же необходимо понимание особенностей стандарта XHTML 1.1.


    Начать тестирование


  2. CSS

    • Всего тест прошло: 35046 человек
    • Средний балл: 3.35 из 5 баллов.

    Тест проверяет знания по основам CSS. Для успешного прохождения теста Вы должны знать основные виды селекторов (их синтаксис), знать основные свойства и их возможные значения, а также знать назначение самых популярных псевдоэлементов.


    Начать тестирование


  3. JavaScript

    • Всего тест прошло: 25907 человек
    • Средний балл: 3.3 из 5 баллов.

    Данный тест проверяет Ваши знания по языку JavaScript. Вопросы из теста затрагивают разные области применения данного языка. Очень много вопросов имеется на понимание «мелких» нюансов. В остальном же от Вас требуется знание базовых вещей: работа с переменными, основные функции JavaScript, приоритеты операций и прочее.


    Начать тестирование


  4. PHP

    • Всего тест прошло: 33936 человек
    • Средний балл: 3.02 из 5 баллов.

    Данный тест проверяет Ваши знания по языку PHP. От Вас требуется знание основных конструкций PHP, работы с переменными, сессий, реализации редиректа и прочих стандартных вещей.

    Убедительная просьба: В тесте содержится много вопросов по типу: «Что выведет скрипт?». Большая просьба, не надо копировать его и проверять. Будьте честны перед самими собой.


    Начать тестирование


  5. SQL

    • Всего тест прошло: 18367 человек
    • Средний балл: 3.28 из 5 баллов.

    Данный тест проверяет Ваши знания по языку запросов SQL. Вопросы затрагивают только самые базовые знания этого языка, без какого-либо углубления. От Вас потребуется знание самых основных SQL-запросов, а также грамотное их использование.


    Начать тестирование

Задачи на основные CSS свойства

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На цвета

Для решения задач данного блока вам понадобятся следующие CSS свойства:
color.

Сделайте все абзацы <p> красного цвета.

Сделайте все <h2> зеленого цвета.

Сделайте все <h3> голубого цвета.

Сделайте все <h4> оранжевого цвета.

На style

Для решения задач данного блока вам понадобятся следующие HTML атрибуты:
style.

Сделайте первый на странице абзац <p> зеленого цвета.

Сделайте второй на странице абзац <p> красного цвета.

На ширину и высоту

Для решения задач данного блока вам понадобятся следующие CSS свойства:
width,
height.

Сделайте все абзацы <h3> шириной 300px.

Сделайте все таблицы <table> шириной 400px, высотой 200px.

На выравнивание

Для решения задач данного блока вам понадобятся следующие CSS свойства:
text-align.

Поставьте все <h2> по центру.

Поставьте все <h3> по правому краю.

Сделайте так, чтобы текст в абзацах <p> был выровнен одновременно и по правому и по левому краю.

Сделайте так, чтобы во втором абзаце <p> текст был выровнен по центру.

Поставьте все <th> по левому краю.

Поставьте все <td> по центру.

На жирность

Для решения задач данного блока вам понадобятся следующие CSS свойства:
font-weight.

Сделайте все <td> жирным.

Сделайте <h2> нежирным.

Сделайте одновременно <th>, <h2> и <h3> нежирным.

На курсив

Для решения задач данного блока вам понадобятся следующие CSS свойства:
font-style.

Сделайте все <h3> курсивом.

Сделайте все абзацы <p> курсивом, а первый абзац — нет.

На размер шрифта

Для решения задач данного блока вам понадобятся следующие CSS свойства:
font-size.

Сделайте все <h3> 20px.

Сделайте все абзацы <p> 15px.

На семейство

Для решения задач данного блока вам понадобятся следующие CSS свойства:
font-family.

Сделайте для абзацев <p> шрифт Arial.

Сделайте для <h3> шрифт Times New Roman.

Сделайте для <h4> любой шрифт без засечек.

На межстрочный интервал

Для решения задач данного блока вам понадобятся следующие CSS свойства:
line-height.

Сделайте межстрочный интервал для абзацев <p> в 30px.

На свойство-сокращение font

Для решения задач данного блока вам понадобятся следующие CSS свойства:
font.

Закомментируйте все стили для абзацев.

Для <p> сделайте шрифт Arial, 16 пикселей, курсив, жирный, межстрочный интервал в 30px.

Для <h2> сделайте следующий шрифт: нежирный, 20 пикселей, Verdana.

На красную строку

Для решения задач данного блока вам понадобятся следующие CSS свойства:
text-indent.

Сделайте красную строку в абзацах 30px.

Для второго абзаца <p> уберите красную строку.

На вертикальное выравнивание

Для решения задач данного блока вам понадобятся следующие CSS свойства:
vertical-align.

Поставьте текст в таблице <table> по верхнему краю по вертикали.

Поставьте текст в <th> по центру по вертикали.

Повторите страницы по образцу

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Первые практические задачи по HTML-разметке

Меню

  • Главная
  • Рубрики

    • Рецепты

    • Медбабуля

      • Диета, здоровый образ
        жизни

      • Сердце и сосуды

      • Инфекции

        • Корь: чем опасна,
          методы профилактики
          и лечения
        • Вирусный гастроэнтерит:
          симптомы и лечение
        • Дизентерия: причины,
          симптомы, лекарства,
          профилактика
        • Проктит и парапроктит:
          симптомы и лечение,
          диета
        • Лептоспироз: что нужно
          знать об этой болезни
        • Туберкулёз
          мультирезистентный:
          новые препараты лечения
        • Хламидиоз: симптомы,
          опасность, диагностика,
          лечение
        • Кишечная палочка
          (эшерихиоз, коли-инфекция):
          симптомы, лечение
        • Дифтерия: лечение,
          сыворотка, вакцинация
        • Гарднереллез, или
          бактериальный вагиноз
      • Рецепты и диагностика

        • Микоплазмоз:
          эффективные лекарства
          для лечения
        • Лекарства от тахикардии
          при низком давлении
        • Аритмия: лечение разных
          нарушений сердечного ритма
        • Таблетки от
          гипертонической болезни
        • ЛПОНП в липидограмме
        • Пропранолол при
          лечении гипертонии
        • Тепловой, солнечный удар:
          симптомы, первая помощь
          и профилактика
        • Пяточная шпора:
          диагностика и лечение
        • Цистит: препараты для
          однократного приема
        • Синдром беспокойных ног:
          причины, симптомы,
          лечение
        • Мочевая кислота: влияние
          на развитие подагры
        • Сухая мозоль со стержнем
          и другие омозолелости:
          лечение
        • Диабетическая кома: виды,
          причины, первая помощь
        • Аллергия на пыльцу, солнце,
          холод: причины, симптомы,
          лекарства
        • Вегетативная нервная
          система: строение,
          функции, расстройства
        • Головная боль: виды,
          причины, диагностика,
          лечение
        • Противовирусные препараты
          при ОРВИ
        • Что используют в мире
          для лечения SARS-CoV-2,
          препараты, протокол МОЗ
        • Чтобы клещ не укусил.
          Правила в вопросах
          и ответах
        • Грибок ногтей и
          кожи ног: лекарства
          и народные средства
        • Акцентуация личности,
          неврозы, психозы,
          психосоматика, тесты онлайн
        • Народные методы при
          лечении щитовидной железы
        • Анафилактический шок,
          анафилаксия: что нужно знать
    • РелаксБабуля

    • Дизайн интерьера

    • ПрорабБабуля

    • Дети

  • КиберБабуля

    • CMS, фреймворки

    • Курс Java

    • Python2: тесты и
      практические задания по
      основам программирования

    • Веб-программирование
      с Python3 и JavaScript

      • Git
      • Адаптивный дизайн: CSS,
        Sass, Bootstrap,
        подробнее о Git
      • Flask, WSGI, Werkzeug,
        Jinja2, Django
      • Python, SQL и
        PostgreSQL:
        примеры использования
      • Объектно-ориентированное
        программирование (ORMs),
        APIs
      • Интеграция JavaScript
        с Python и Flask
      • Front Ends, Single-Page
        Apps, шаблоны JS,
        CSS и SVG анимация
      • Django
      • Testing, CICD
      • GitHub, Travis CI
      • Scalability
      • Security
      • Запуск файлов Python
        на локальном сервере
    • Курс CS50 2019

      • Задания первой недели
        курса CS50 (Hello,
        Mario, Cash, Credit)
      • Задания второй недели
        курса CS50 (Caesar,
        Vigenere)
      • Задания третьей недели
        курса CS50 (Whodunit,
        Resize легкий, Resize,
        Recover)
      • Задания четвертой недели
        курса CS50 (Speller
        хеш таблицы и Speller
        префиксного дерева)
      • Лекция 6-й недели.
        Введение в Python
      • Задания шестой недели
        курса CS50 на Python
        (Bleep, Hello, Caesar,
        Cash, Mario, Vigenere)
      • Задания седьмой недели
        курса CS50 (Similarities)
      • Запуск старой версии
        CS50 finance по-новому
    • Android

    • HTML, CSS, JavaScript

      • Введение. Основные понятия:
        front-end, HTML, CSS,
        JavaScript
      • Введение в HTML
      • Первые практические
        задачи по HTML-разметке
      • Введение в CSS
      • JavaScript: примерный план
        изучения для начинающих
      • Fronted Developer:
        дорожная карта
        для изучения
      • Тест на знание
        JavaScript начального
        уровня, 50 вопросов
      • Тест на знание
        JavaScript (2) начального
        уровня, 75 вопросов
      • События в JavaScript
        краткий обзор управления
      • События жизненного
        цикла страницы
        load, resize, scroll
      • JavaScript: добавление
        интерактивности в
        документы HTML
      • Converter js методом
        toString
      • URL Decoder/Encoder,
        Text To Hex/Hex To Text
      • Currency Converter
        (конвертер валют bank.gov.ua)
        на JS
      • Приложение на JavaScript:
        проверка IP, местное
        время, погода
      • Приложение календарь, IP
        прогноз погоды, дата и время
      • Прогноз погоды с
        OpenWeather forecast,
        конвертер валют
      • Прогноз погоды, конвертер
        валют с графиками
        canvas Chart.js
      • Карты и геолокация:
        примеры использования
        бесплатных API с
        открытым исходным кодом
        (Open Street Map
        и Leaflet API)
      • Аудио плеер на JS:
        визуализация частот
        Canvas
      • Аудио плеер на Java
        Script продвинутый
      • Слайдер, карусель
        на Java Script
      • Цветной текст на
        изображение: фильтр
        css ‘mix-blend-mode’
      • Background CSS:
        множественный фон,
        смешивание, blend-mode
      • Бегущая строка. Чем
        заменить HTML-тег
        marquee
      • Видеопоток:
        GetUserMedia API,
        запись, загрузка
      • Приложение Смешная
        ВебКамера с
        GetUserMedia API
      • Canvas: рисование и
        анимация графики,
        введение
      • Основы Canvas HTML5:
        принципы рисования
      • Режим немедленного
        рисования в canvas
      • Режим path mode (режим
        рисования пути) canvas
      • Контекст canvas: градиенты,
        узоры, тени, стили линий
      • Three.JS: 3D-графика
        с canvas WebGL
      • Графики. Строим кривые
        для конвертера валют
        с Chart.js
      • Короткий тест по canvas
      • Генераторы цветовых схем:
        создаём палитру сайта
      • Объект в JavaScript: создаём
        и преобразуем на практике
      • Приложение прогноз погоды
        на JS с выбором города
      • React: точка входа.
        Базовые примеры (1)
      • React.js: точка входа.
        Базовые примеры (2)
      • Что нужно знать, чтобы
        начать работать с JAMstack
      • JAMstack Gatsby +
        NetlifyCMS с oAuth
        видео
      • Создаем тест «jQuery
        начальный уровень»
        на … jQuery
      • Доступ к содержимому
        iframe на странице
        на javascript
      • Эффект fade, toggle
        на vanilla js и jQuery:
        сравнение, примеры
      • 3Д анимация CSS3:
        img реверс/аверс
        perspective + transform
      • Множественные свойства CSS
        на jQuery, animation, button
  • Отзывы
  • Приложения

    • Пандемия:
      статистика онлайн
    • Проверка любого IP
    • Транспортні засоби,
      що перебувають у
      розшуку в Україні
    • Проверка лицензии субъектов,
      которые предлагают
      посреднические услуги в
      трудоустройстве за границей
    • Приложение календарь, IP, прогноз погоды, дата и время
    • Прогноз погоды с OpenWeather forecast, конвертер валют
    • Прогноз погоды, конвертер валют с графиками canvas Chart.js
    • Прогноз погоды с выбором любого города, карта
    • Почасовый прогноз погоды с картой и конвертером валют
    • Конвертер валют, наличный курс, другие валюты
    • Converter js методом toString за полчаса
    • URL Decoder/Encoder, Text To Hex/Hex To Text
    • Редактор-конвертер MD в HTML, HTML в MD
    • Генератор цветовых схем
    • Аудио плеер на JS Canvas
    • Аудио плеер на Java Script улучшенныйый
    • Тюнер для гитары
    • Анализатор высоты звука
    • Лунный календарь, зодиак, восточный гороскоп на JavaScript
    • Уровень тревожности: тест Ч. Д. Спилбергера и Ю. Л. Ханина
    • Синтезатор с использованием WebAudio API
    • Синтезатор-секвенсер с использованием WebAudio API
    • Смешная веб-камера
    • Bubble-shooter
    • 2048
    • Пятнашки
    • Судоку
    • Игра «Найди пару»
    • Гомоку-1
    • Рендзю
    • Сапёр

MENU

  • Главная Babulya
  • Содержание
    • Рецепты
    • МедБабуля
      • Диета, здоровый образ жизни
      • Сердце и сосуды
      • Инфекции
        • Корь: чем опасна, методы профилактики и лечения
        • Вирусный гастроэнтерит: симптомы и лечение
        • Дизентерия: причины, симптомы, лекарства, профилактика
        • Проктит и парапроктит: симптомы и лечение, диета
        • Лептоспироз: что нужно знать об этой болезни
        • Туберкулёз мультирезистентный: новые препараты лечения
        • Хламидиоз: симптомы, опасность, диагностика, лечение
        • Кишечная палочка (эшерихиоз, коли-инфекция): симптомы, лечение
        • Дифтерия: лечение, сыворотка, вакцинация
      • Рецепты, диагностика, препараты
        • Цистит: препараты для однократного приема
        • Лекарства от тахикардии при пониженном давлении: медикаменты и народные средства
        • Аритмия: лечение разных нарушений сердечного ритма
        • Таблетки от гипертонической болезни
        • Пропранолол при лечении гипертонии
        • Микоплазмоз: эффективные лекарства для лечения
        • ЛПОНП в липидограмме
        • Пяточная шпора: диагностика и лечение
        • Тепловой, солнечный удар: симптомы, первая помощь и профилактика
        • Синдром беспокойных ног: причины, симптомы, лечение
        • Мочевая кислота: влияние на развитие подагры
        • Диабетическая кома: виды, причины, первая помощь
        • Сухая мозоль со стержнем и другие омозолелости: лечение
        • Аллергия на пыльцу, солнце, холод: причины, симптомы, лекарства
        • Вегетативная нервная система: строение, функции, расстройства, лечение
        • Головная боль: виды, причины, диагностика, лечение
        • Противовирусные препараты при ОРВИ
        • Что используют в мире для лечения SARS-CoV-2, препараты, протокол МОЗ
        • Чтобы клещ не укусил. Правила в вопросах и ответах
        • Грибок ногтей и кожи ног: лекарства и народные средства
        • Акцентуация личности, неврозы, психозы, психосоматика, тесты онлайн
        • Народные методы при лечении щитовидной железы
        • Анафилактический шок, анафилаксия: что нужно знать
    • Дети
    • КиберБабуля
      • CMS, фреймворки
      • Курс программирования на java
      • Курс CS50 2019
      • Андроид
      • Pythoh 2.х.х: тесты и практические задания
      • Веб-программирование с Python 3.х.х и JavaScript (конспекты CS50)
        • Git и GitHub, HTML, CSS: основные понятия, примеры
        • Адаптивный дизайн: CSS, Sass, Bootstrap, подробнее о Git
        • Flask, WSGI, Werkzeug, Jinja2, Django
        • Python, SQL и PostgreSQL: примеры использования
        • Объектно-ориентированное программирование в Python, API
        • Интеграция JavaScript с Python и Flask
        • Front Ends, Single-Page Apps, шаблоны JS, CSS и SVG анимация
        • Django
        • Запуск файлов Python на локальном сервере
      • HTML, CSS, JavaScript
        • Введение. Основные понятия: front-end, HTML, CSS, JavaScript
        • Введение в HTML
        • Первые практические задачи по HTML-разметке
        • Введение в CSS
        • JavaScript: примерный план изучения для начинающих
        • Fronted Developer: дорожная карта для изучения
        • Тест на знание JavaScript начального уровня, 50 вопросов
        • Тест на знание JavaScript (2) начального уровня, 75 вопросов
        • События в JavaScript краткий обзор управления
        • События жизненного цикла страницы load, resize, scroll
        • JavaScript: добавление интерактивности в документы HTML
        • Converter js методом toString за полчаса
        • URL Decoder/Encoder, Text To Hex/Hex To Text
        • Currency Converter (конвертер валют bank.gov.ua) на JS
        • Приложение на JavaScript: проверка IP, время, погода
        • Приложение календарь, IP, прогноз погоды, дата и время
        • Прогноз погоды с OpenWeather forecast, конвертер валют
        • Прогноз погоды, конвертер валют с графиками canvas Chart.js
        • Карты и геолокация: примеры использования бесплатных API с открытым исходным кодом (Open Street Map и Leaflet API)
        • Аудио плеер на JS: визуализация частот Canvas
        • Аудио плеер на Java Script продвинутый
        • Слайдер, карусель на Java Script для сайта
        • Цветной текст на изображение: фильтр css ‘mix-blend-mode’
        • Background CSS: множественный фон, смешивание, blend-mode
        • Бегущая строка. Чем заменить HTML-тег marquee
        • Видеопоток: GetUserMedia API, запись, загрузка
        • Приложение Смешная ВебКамера с GetUserMedia
        • Canvas: рисование и анимация графики, введение
        • Основы Canvas HTML5: принципы рисования
        • Режим немедленного рисования в canvas
        • Режим path mode (режим рисования пути) canvas
        • Контекст canvas: градиенты, узоры, тени, стили линий
        • Three.JS: 3D-графика с canvas WebGL
        • Графики. Строим кривые для конвертера валют с Chart.js
        • Короткий тест по canvas
        • Генераторы цветовых схем: создаём палитру сайта
        • Объект в JavaScript: создаём и преобразуем на практике
        • Приложение прогноз погоды на JS с выбором города
        • React: точка входа. Базовые примеры (1)
        • React.js: точка входа. Базовые примеры (2)
        • Что нужно знать, чтобы начать работать с JAMstack
        • JAMstack Gatsby + NetlifyCMS с oAuth видео
        • Создаем тест «jQuery начальный уровень» на … jQuery
        • Доступ к содержимому iframe на странице на javascript
        • Эффект fade, toggle на vanilla js и jQuery: сравнение, пример
        • 3Д анимация SCC3: img реверс/аверс perspective + transform
        • Множественные свойства CSS на jQuery, animation, button
    • РелаксБабуля

Основы HTML для начинающих

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить


Создание контентного сайта на Jekyll от А до Я

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?

На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.

Этакий Word для HTML. Такие визуальные редакторы называются:


WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
  • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
  • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
  • Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html> 
<html> 
<head> 
	<title>Заголовок</title> 
	<meta charset="UTF-8"> 
	<link rel="icon" href="favicon.ico"> 
	<link rel="stylesheet" href="style.css"> 
	<script src="script.js" type="text/javascript"></script>
</head> 
<body> 
	Тело документа 
</body> 
</html>

Обратите внимание, документы HTML имеют расширение .html.

Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)
<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

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

<html> — начало документа
<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

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

Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>
<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег> 
	содержание или другие теги
</тег>

Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.

Тег <title> — заголовок документа
<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

Метатег <meta charset=»UTF-8″ >
<meta charset="UTF-8" >

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

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа
<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSSкаскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>
<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body
<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.



















Тег
Описание

<a>


Тег для создания ссылок в документе.
Пример:

<a href="http://webdesign-master.ru">текст ссылки</a>


Атрибут href указывает документ, на который будет вести данная ссылка.

<em>,
<strong>


Делает текст курсивом или жирным (акцентируемым).
Пример:

<em>текст курсивом</em>

<strong>жирный (акцентируемый) текст</strong>

<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>


Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа.
Примеры:

<h2>Заголовок первого уровня</h2> 
<h3>Заголовок второго уровня</h3> 
<h4>Заголовок третьего уровня</h4> 
... и т. д.

<ol>,
<ul>


Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li>
Примеры:

<ul> 
	<li>Элемент маркированного списка 1</li>
	<li>Элемент маркированного списка 2</li>
</ul> 

<ol> 
	<li>Элемент нумерованного списка 1</li>
	<li>Элемент нумерованного списка 2</li>
</ol> 

<p>


Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.
Пример:

<p>Внешний вид HTML разметки во многом 
определяется CSS стилями.</p> 

<p>Тем не менее, некоторые веб-мастера 
предпочитают не использовать стили на первых 
этапах проекта.</p>

<img>


Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся».
Пример:

<img src="путь_до_картинки.jpg" alt="Текст">

<form> 
+ <input> 
+ <textarea>


Формы и элементы ввода.
Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер.
Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст:


<form action="ссылка_на_скрипт_обработки_формы"> 
	<input type="text" name="name">
	<input type="text" name="email">
	<textarea name="text">
		Текст сообщения
	</textarea>
	<input type="submit" value="Написать">
</form>

<span>


Определяет подстроку в строке.
Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.
Пример:

Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.

<video>,
<audio>


Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.
Примеры:

<video src="rolik_chuma.mp4" controls></video> 
<audio src="muzichka.mp3" controls></audio>


Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.

<div>


Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.
Пример:

<div> 
	<div> 
		Текст во вложенном блоке 
	</div> 
</div>


Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.

<iframe>


Данный тег загружает внешнюю страницу в документ.
Пример:

<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

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

Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

  1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
  2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
  3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

Работа с текстом | Справочник HTML CSS

Назад к списку задач

Уровень: Начинающий

Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.

Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.

  1. Создайте папку в удобном для вас месте на вашем компьютере
  2. В этой папке создайте новый HTML документ — index.html
  3. В index.html создайте HTML скелет документа
  4. Создайте новый CSS файл — style.css
  5. Подключите CSS файл к HTML файлу
  6. Создайте заголовок первого уровня в теге body и напишите там текст «Оформление текста»
  7. Добавьте данному заголовку класс title
  8. В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили — шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
  9. В CSS файле создайте селектор для класса title, и напишите следующие стили — размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
  10. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
  11. После абзаца создайте заголовок второго уровня, напишите текст «Заголовок второго уровня» и придайте ему класс subtitle
  12. В CSS файле создайте селектор для класса subtitle, и напишите следующие стили — размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
  13. После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
  14. После абзаца создайте ненумерованный список с тремя пунктами
  15. В каждом пункте напишите немного текста, на свой выбор
  16. Задайте списку класс list
  17. В CSS файле создайте селектор для класса list, и напишите следующие стили — размер шрифта 20px, цвет текста #444, все буквы наклонные, стиль маркеров списка — square

Назад к списку задач

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Практические задания по теме «Web-дизайн и программирование»

Язык гипретекстовой разметки HTML 4.0

Практическая работа № 1 – «Разметка страницы тегами HTML»

  • Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»

Практическая работа № 2 – «Создание простого web-сайта»

  • Задание № 2.1 – «Создание первого web-сайта с тремя html-страницами» (+ пример: стр. 1, стр. 2, стр. 3)

Практическая работа № 3 – «Разметка web-страниц с использованием таблиц»

  • Задание № 3.1 – «Размещение таблиц на html-странице. Форматирование текста в таблице»
  • Задание № 3.2 – «Размещение таблиц на html-странице. Форматирование ячеек таблицы»
  • Задание № 3.3 – «Размещение таблиц на html-странице. Объединение ячеек таблицы»
  • Задание № 3.4 – «Создание web-страницы с использованием таблиц» (+ пример 3.4)

Практическая работа № 4 – «Дополнительные элементы языка HTML для форматирования web-страниц»

  • Задание № 4.1 – «Горизонтальные линии (тег <HR>)»
  • Задание № 4.2 – «Escape-поcледовательности»
  • Задание № 4.3 – «Физические и логические стили»

Практическая работа № 5 – «Форматирование web-страниц с использованием фреймов»

  • Задание № 5.1 – «Создание простых фреймовых структур»
  • Задание № 5.2 – «Создание сложных фреймовых структур»
  • Задание № 5.3 – «Форматирование элементов фреймовых структур»
  • Задание № 5.4 – «Создание сайта содержащего фреймовую структуру» (+ пример 5.4: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)

Практическая работа № 6 – «Отправка данных на web-сайт с использованием форм»

  • Задание № 6.1 – «Создание формы с использованием тега <BR> »
  • Задание № 6.2 – «Создание формы с использованием тега <HR> »
  • Задание № 6.3 – «Создание формы с использованием тега <PRE> »
  • Задание № 6.4 – «Создание формы с использованием таблиц»
  • Задание № 6.5 – «Создание формы с использованием тега <P> »
  • Задание № 6.6 – «Создание формы с использованием cписка определений»
  • Задание № 6.7 – «Создание формы с использованием нумерованного списка»
  • Задание № 6.8 – «Создание формы с использованием с размещением флажков/переключателей по горизонтали»
  • Задание № 6.9 – «Создание формы с использованием с размещением флажков/переключателей в списке»
  • Задание № 6.10 – «Создание формы с использованием сетки переключателей»
  • Задание № 6.11 – «Создание html-документа с несколькими формами»

Практическая работа № 7 – «Размещение на web-странице мультимедийных объектов»

  • Задание № 7.1 – «Встаивание в web-странницу модулей, содержащих flash-графику» (+ пример 7.1)
  • Задание № 7.2 – «Встаивание в web-странницу модулей, содержащих avi-изображение» (+ пример 7.2)
  • Задание № 7.3 – «Создание web-страниц с элементами ActiveX» (+ пример 7.3)
  • Задание № 7.4 – «Создание сайта с внедрением мультимедийных модулей» (+ пример 7.4 и страница page1.php)

Практическая работа № 8 – «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»

  • Задание № 8.1 – «Форматирование HTML-страницы с помощью листа стилей – тег <style>...</style> (+ пример 8.1)
  • Задание № 8.2 – «Cоздание внешнего листа стилей для форматирования HTML-страниц (+ пример 8.2)
  • Задание № 8.3 – «Создание web-сайта с использованием листов стилей» (+ пример 8.3: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)
  • Задание № 8.4 – «Применение визуальных фильтров для Internet Explorer» (+ пример 8.4)
  • Задание № 8.5 – «Форматирование страниц с использованием CSS»

Динамический HTML (DHTML)

Практическая работа № 9 – «Объектная модель DHTML. События»

  • Задание № 9.1 – События onMouseOver, onMouseOut. Объекты self и status (+ пример 9.1)
  • Задание № 9.2 – Событие onDblClick (двойной щелчок). Метод alert (+ пример 9.2)
  • Задание № 9.3 – Событие onHelp (+ пример 9.3)
  • Задание № 9.4 – Событие onMouseMove (+ пример 9.4)
  • Задание № 9.5 – События onClick, onMouseOut, onMouseOver и onMouseUp (+ пример 9.5)
  • Задание № 9.6 – Использование форм и JavaScript (+ пример 9.6)
  • Задание № 9.7 – Событие onChange (+ пример 9.7)

Практическая работа № 10 – «Объектная модель DHTML. Методы»

  • Задание № 10.1 – Методы click и alert. Свойство returnValue ( + пример 10.1)
  • Задание № 10.2 – Метод insertAdjacentHTML ( + пример 10.2)
  • Задание № 10.3 – Метод insertAdjacentText ( + пример 10.3)

Практическая работа № 11 – «Объектная модель DHTML. Свойства»

  • Задание № 11.1 – Свойство className ( + пример 11.1)
  • Задание № 11.2 – Свойство id. Метод innerHTML ( + пример 11.2)
  • Задание № 11.3 – Свойство style ( + пример 11.3)
  • Задание № 11.4 – Свойство title ( + пример 11.4)

Практическая работа № 12 – «Объектная модель DHTML. Визуальные фильтроы в DHTML для Internet Explorer»

  • Задание № 12.1 – Фильтр переходов RevealTrans. Методы Apply, Play, Stop ( + пример 12.1)

Практическая работа № 13 – «Объектная модель DHTML. Примеры программ на JavaScript. Управление окнами»

  • Задание № 13.1 – Объект Window. Метод open. Событие onClick ( + пример 13.1)
  • Задание № 13.2 – Объект Window. Методы open, clоse. Событие onClick ( + пример 13.2)
  • Задание № 13.3 – Объект navigator. Метод appName ( + пример 13.3)
  • Задание № 13.4 – Методы alert, confirm, promt ( + пример 13.4)
  • Задание № 13.5 – Метод scroll ( + пример 13.5)

Практическая работа № 14 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание слайд-шоу»

  • Задание № 14.1 – Коллекция тегов image. Атрибут src ( + пример 14.1)
  • Задание № 14.2 – Событие onChange. Массив Array. Свойство selectedIndex ( + пример 14.2)

Практическая работа № 15 – «Объектная модель DHTML. Примеры программ на JavaScript. Работа с датой и временем»

Практическая работа № 16 – «Объектная модель DHTML. Примеры программ на JavaScript. Абсолютное и относительное позиционирование элементов»

Практическая работа № 17 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание раскрывающихся меню с иерархической структурой»

HTML-стилей CSS


CSS — это каскадные таблицы стилей.

CSS экономит много работы. Он может управлять макетом нескольких
веб-страницы сразу.


Управление текстом

цветов,
Ящики


Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

С помощью CSS вы можете контролировать цвет, шрифт, размер текста, интервал
между элементами, как элементы расположены и расположены, какой фон
изображения или цвета фона, которые будут использоваться, разные дисплеи для разных устройств
и размеры экрана, и многое другое!

Совет: Слово каскадно означает, что стиль
примененный к родительскому элементу, также будет применяться ко всем дочерним элементам внутри
родитель.Итак, если вы установите цвет основного текста на «синий», все заголовки,
абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете
что-то другое)!


Использование CSS

CSS можно добавить в HTML-документы тремя способами:

  • Inline — с использованием атрибута стиля внутри HTML-элементов
  • Внутренний - с использованием элемента