Тесты на знание HTML, CSS, JavaScript, PHP, SQL
Вы здесь:
Главная — Тесты
Теперь на сайте доступно тестирование на знание следующих тем: HTML, CSS, JavaScript, PHP, SQL.
Каждый тест состоит из 10-ти вопросов по определённой теме. Я старался в каждом вопросе затрагивать самые разнообразные области применения конкретного языка, чтобы максимально тщательно проверить Ваш уровень знаний.
Безусловно, все тесты бесплатные и пройти их может любой желающий.
Порядок прохождения теста:
- Переходите по ссылке «Начать тестирование» у соответствующего теста.
- Отвечаете на поставленные вопросы, выбрав единственный правильный вариант.
- По завершению тестирования Вы увидите свой балл, количество ошибок, а также разбор каждого вопроса из теста.
Внимание! Вернуться к предыдущему вопросу не получится, поэтому прежде, чем отвечать, думайте.
Доступные на данный момент тесты
-
HTML
- Всего тест прошло: 80672 человека
- Средний балл: 2.82 из 5 баллов.
Тест на знание основ HTML. От Вас потребуется знание основных HTML-тегов, а также грамотное их использование. Так же необходимо понимание особенностей стандарта XHTML 1.1.
Начать тестирование -
CSS
- Всего тест прошло: 35046 человек
- Средний балл: 3.35 из 5 баллов.
Тест проверяет знания по основам CSS. Для успешного прохождения теста Вы должны знать основные виды селекторов (их синтаксис), знать основные свойства и их возможные значения, а также знать назначение самых популярных псевдоэлементов.
Начать тестирование -
JavaScript
- Всего тест прошло: 25907 человек
- Средний балл: 3.3 из 5 баллов.
Данный тест проверяет Ваши знания по языку JavaScript. Вопросы из теста затрагивают разные области применения данного языка. Очень много вопросов имеется на понимание «мелких» нюансов. В остальном же от Вас требуется знание базовых вещей: работа с переменными, основные функции JavaScript, приоритеты операций и прочее.
Начать тестирование -
PHP
- Всего тест прошло: 33936 человек
- Средний балл: 3.02 из 5 баллов.
Данный тест проверяет Ваши знания по языку PHP. От Вас требуется знание основных конструкций PHP, работы с переменными, сессий, реализации редиректа и прочих стандартных вещей.
Убедительная просьба: В тесте содержится много вопросов по типу: «Что выведет скрипт?». Большая просьба, не надо копировать его и проверять. Будьте честны перед самими собой.
Начать тестирование -
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 кодинга.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Для изучения урока, скачайте архив с необходимыми файлами.
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>
|
<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>
|
<div>
|
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>. Пример: <div> <div> Текст во вложенном блоке </div> </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, который также находился в архиве.
- Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
- Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
- Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.
На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
Премиум уроки от WebDesign Master
Другие уроки по теме «HTML и CSS»
Работа с текстом | Справочник HTML CSS
Назад к списку задач
Уровень: Начинающий
Задача по HTML и CSS: работа с тегами для оформления текста и стилизация текста используя CSS.
Выполните все пункты задания и сравните с результатом. Для поиска неизвестных вам тегов и свойств используйте поиск справочника.
- Создайте папку в удобном для вас месте на вашем компьютере
- В этой папке создайте новый HTML документ — index.html
- В index.html создайте HTML скелет документа
- Создайте новый CSS файл — style.css
- Подключите CSS файл к HTML файлу
- Создайте заголовок первого уровня в теге body и напишите там текст «Оформление текста»
- Добавьте данному заголовку класс title
- В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили — шрифт Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
- В CSS файле создайте селектор для класса title, и напишите следующие стили — размер шрифта 40px, цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
- После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
- После абзаца создайте заголовок второго уровня, напишите текст «Заголовок второго уровня» и придайте ему класс subtitle
- В CSS файле создайте селектор для класса subtitle, и напишите следующие стили — размер шрифта 30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
- После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор случайного текста lipsum.com
- После абзаца создайте ненумерованный список с тремя пунктами
- В каждом пункте напишите немного текста, на свой выбор
- Задайте списку класс list
- В 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-элементов
- Внутренний - с использованием элемента