Тест видеокурса HTML5

Этот сайт показывает результаты работы видеокурса Виктора Томилина: Создание сайта на HTML5

Видеокурс "Создание сайта на HTML5"

Внимание! Этот текст тестовый и не ищите в нем смысл. Сайт предназначен для того, что бы показать примеры использования HTML5 и CSS3.

Установка изображения на веб-странице

С помощью HTML

результаты работы видео-курса

Этот видеокурс предназначен для веб-мастеров. После прохождения курса Вы сможете создавать качественные веб-страницы и небольшие сайты на HTML5. Так как все мы находимся на разной степени подготовки, просто невозможно сделать курс “для всех”, и этот курс не исключение. Начинающие - как правило самые дисциплинированные, просто делают пошагово вместе с видео-курсом. И в итоге получают необходимое качество знаний и сайта. Поэтому мы советуем тем, кто уже создавал сайты - используйте нашу схему. Важно пройти все шаги по очереди. Уверен, что у Вас есть своя схема, но Вы тут не просто так - попробуйте полностью нашу схему, она рабочая и эффективная. Только тогда Вы сможете оценить всю важность этого курса! После прохождения курса сохраните его, он может пригодиться и через месяц и через год. Мы советуем загрузить курс на один из облачных сервисов, то есть не нужно даже держать его у себя на компьютере.


С помощью блока div и правила CSS

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


Увеличение картинки на веб-странице с помощью HTML-тегов.

результаты работы видео-курса

Наведите мышку на картинку!

Для верстки сайта на html5 я использую программу Google Web Designer и вам рекомендую. Также можно использовать любой текстовый редактор. Создаем новый документ, даем ему имя Index и сохраняем, указывая расширение html (index.html). Любой код в html начинается с указания типа документа, пишем: Это новый упрощенный доктайп html5, в котором не нужно указывать режим совместимости с браузерами. Такой доктайп легко запомнить и набирать по памяти, но если вы используете программу Google Web Designer, вам даже это не придется делать, так как основные элементы кода вводятся автоматически...


результаты работы видео-курса

Наведите мышку на картинку!

Атрибуты (свойства) тега - это слова на англ. языке, которые находится в открывающемся теге. Свойства дают дополнительные возможности форматирования контента. Каждое свойство имеет свое значение, которое указывается в кавычках. Пример №1 открывающегося тега


Нажмите левой кнопкой мышки на изображение!

результаты работы видео-курса

В итоге поисковые системы могут четко отделить контент страницы от вспомогательных элементов, что поможет лучше индексировать сайт. Рассмотрим особенности новых тегов, на которые стоит обратить внимание


Нажмите левой кнопкой мышки на изображение!


результаты работы видео-курса

Также нужно оставить место для картинки в изначальном виде, так как место блока с позиционированием absolute будет автоматически заполняться другим контентом. Решить это можно так: создаем таблицу с одной ячейкой на том месте, где должна отображаться картинка в изначальном виде. Добавляем этот код перед кодом картинки


Цвет ссылок

Цвет ссылок


Оформление текста

Текст: цвет, размер и шрифт

текст

Блок и первый параграф

Второй параграф