Инвесторы видят перспективу
Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.
Что думает общественность
В реальности существует только Ubuntu с таким странным именем "Зайцелоп".
Изучение HTML5 от нуля до гуру
Автор (режиссер):
Андрей Бернацкий
Жанр:
HTML5, CSS3, web
Продолжительность:
25:51:27
Качество видео:
PCRec
Видео:
AVC/H.264, 1024x768, ~283 - 681 Kbps
Аудио:
AAC, 2 ch, 106 Kbps
Описание:
Без преувеличения на сегодняшний день это самый полный и актуальный курс в Рунете. Вдумайтесь сами: только лишь основной раздел курса (без учета бонусов) состоит из 47 подробнейших видеоуроков, образующих собой пошаговую практическую систему.
После изучения этой системы вы освоите полностью адаптивную верстку с использованием последних новшеств этих двух языков гипертекстовой разметки и каскадных таблиц стилей.
В нашем новом курсе ВСЕ макеты верстаются сразу АДАПТИВНЫМИ и КРОССБРАУЗЕРНЫМИ.
Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».
Я не просто научу вас верстать простейшие веб-страницы, мы с вами очень подробно (вплоть до малейших деталей) проработаем верстку на примере трех различных по своей сложности наиболее популярных видов веб-сайтов в современном Интернете:
Сайта-визитки
блога и...
интернет-магазина
ПЕРВАЯ ЧАСТЬ
Верстка макета сайта-визитки
Урок 2. Определение разметки для страницы
Урок 3. Описание стилей шапки сайта
Урок 4. Описание стилей основного блока сайта. Часть1
Урок 5. Описание стилей основного блока сайта. Часть2. Заключение
ВТОРАЯ ЧАСТЬ
Верстка макета блога
Урок 1. Введение. Настройка страницы
Урок 2. Определение разметки шапки сайта
Урок 3. Подключение нестандартных шрифтов
Урок 4. Описание стилей шапки сайта
Урок 5. Описание разметки основного блока сайта
Урок 6. Описание разметки блока постов
Урок 7. Назначение стилей для блока постов
Урок 8. Описание разметки боковой колонки
Урок 9. Назначение стилей для боковой колонки
Урок 10. Описание разметки постраничной навигации
Урок 11. Назначение стилей для постраничной навигации
Урок 12. Верстка footer’а сайта
Урок 13. Доработка верстки макета
Урок 14. Адаптация верстки под мобильные устройства. Часть 1
Урок 15. Адаптация верстки под мобильные устройства. Часть 2
Урок 16. Добавление эффектов CSS3 на страницу. Часть 1
Урок 17. Добавление эффектов CSS3 на страницу. Часть 2
ТРЕТЬЯ ЧАСТЬ
Верстка макета интернет-магазина
Урок 1. Введение
Урок 2. Подключение нестандартного шрифта к странице
Урок 3. Определение разметки шапки сайта
Урок 4. Описание стилей шапки сайта. Часть 1
Урок 5. Описание стилей шапки сайта. Часть 2
Урок 6. Подключение слайдера к странице
Урок 7. Назначение стилей и настройка слайдера
Урок 8. Описание разметки блока новостей
Урок 9. Назначение стилей для блока новостей
Урок 10. Описание разметки блока «Популярные продукты»
Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1
Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2
Урок 13. Улучшение блока «Популярные продукты»
Урок 14. Описание разметки блока «О магазине»
Урок 15. Назначение стилей для блока «О магазине»
Урок 16. Описание разметки блока «Подписка»
Урок 17. Назначение стилей для блока «Подписка»
Урок 18. Описание разметки для footer’a
Урок 19. Назначение стилей для блока «footer»
Урок 20. Делаем макет адаптивным. Часть 1
Урок 21. Делаем макет адаптивным. Часть 2
Урок 22. Делаем макет адаптивным. Часть 3
Урок 23. Делаем макет адаптивным. Часть 4
Урок 24. Делаем макет адаптивным. Часть 5
Урок 25. Заключение
БОНУС 1
Премиум курс. Учебник по основам HTML
Урок 1. Введение. Основы HTML
Урок 2. Структура HTML документа
Урок 3. Теги форматирования текста
Урок 4. Изображения
Урок 5. Ссылки. Ссылки-изображения
Урок 6. Списки
Урок 7. Таблицы
Урок 8. Формы
БОНУС 2
Премиум курс. Учебник по основам CSS
Урок 1. Способы подключения
Урок 2. Назначения классов и id
Урок 3. Свойства шрифта
Урок 4. Свойства текста
Урок 5. Фон
Урок 6. Ширина, высота. Тег Div и Span
Урок 7. Рамка
Урок 8. Отступы
Урок 9. Основы CSS. Float, Clear, Display
Урок 10. Основы CSS. Свойство position
БОНУС 3
Премиум курс. Верстка сайтов для начинающих
Урок 1. Определение разметки
Урок 2. Описание разметки
Урок 3. CSS шапки сайта
Урок 4. CSS области контента
Урок 5. Доработка верстки
БОНУС 4
Премиум курс. HTML 5: основы
Урок 1. Структура документа HTML 5
Урок 2. Обзор тегов header и footer
Урок 3. Тег article
Урок 4. Тег section
Урок 5. Теги nav, main и aside
Урок 6. Теги figure и figcaption
Урок 7. Кроссбраузерное оформление
HTML 5 тегов
Урок 8. Тег input. Новые типы тега в html 5.
Часть 1
Урок 9. Тег input. Новые типы тега в html 5. Часть 2
Урок 10. HTML 5 video. Вставка видео на сайт
Урок 11. HTML 5 audio. Вставка аудио на сайт
Урок 12. HTML 5 canvas. Рисование в HTML 5
Урок 13. HTML 5 geolocation. Определение местоположения в HTML 5
БОНУС 5
Премиум курс по CSS3
Урок 1. Работа с фоном в CSS3
Урок 2. Тени и закругленные углы
Урок 3. Прозрачность фона, картинки, текста и цвета в CSS
Урок 4. Линейные градиенты CSS
Урок 5. Колонки
Урок 6. Радиальные градиенты
Урок 7. Шрифт
Урок 8. Работа с текстом в css 3
Урок 9. Псевдоклассы
Урок 10. Селекторы
Урок 11. Трансформация
БОНУС 6
Анатомия прибыльного лендинг пейдж
Урок 1. Анатомия прибыльного лендинг пейдж
БОНУС 7
Создание лендинг пейдж за один вечер
Урок 1. Введение
Урок 2. Подключаем нестандартный шрифт к странице
Урок 3. Определяем разметку шапки сайта
Урок 4. Описываем стили шапки сайта
Урок 5. Определяем разметку слайдера
Урок 6. Назначаем стили для слайдера
Урок 7. Верстаем блок "Особенности"
Урок 8. Верстаем блок "Галерея"
Урок 9. Определяем разметку блока видео
Урок 10. Описываем стили блока видео
Урок 11. Верстаем блок "Скачать приложение"
Урок 12. Просматриваем макет. Устраняем недочеты
Урок 13. Определяем разметку блока контактов
Урок 14. Описываем стили блока контактов
Урок 15. Верстаем футер
Урок 16. Адаптируем слайдер
Урок 17. Заключение
Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и CMS, а с помощью исключительно HTML 5 и CSS 3. В дальнейшем, когда уже будете делать проекты с использованием популярных CMS, применяя полученные знания, вы сможете вмешаться в исходный код сайта, переделав оформление и структуру под свои нужды.
Курс состоит из 25 уроков. Первая его часть научит понимать и писать код HTML, вторая познакомит с каскадными таблицами стилей (CSS). Именно с этих материалов и рекомендую начать изучать сайтостроение.
- 1
Как создать сайт в Блокноте
Сделайте свою первую HTML-страницу, не прибегая ни к чему, кроме известного всем простейшего текстового редактора, встроенного в любую Windows - Блокнота. Но не просто сделайте, а поймите, как это работает.
- 2
Adobe Dreamweaver - программа для создания сайта
Вы познакомитесь с одним из самых популярных и многофункциональных средств, призванных упростить рабочие будни верстальщикам и веб-дизайнерам - программой Adobe Dreamweaver.
- 3
Что такое HTML
Основные вопросы, мучающие новичков. Что такое HTML? Зачем он нужен? Что позволяет делать? Что лучше - HTML4 или HTML5? Все ответы - в статье.
- 4
Теги
Теги - основная единица языка HTML. Без них не обходится ни одна веб-страница. Статья познакомит вас с основными контейнерами HTML. Из неё вы узнаете, как правильно записываются теги, научитесь частично понимать HTML-код.
- 5
Атрибуты
У тегов есть не только содержимое, но также атрибуты, которые, в свою очередь, наделены значениями. Обо всём этом и пойдёт речь в статье. Где искать атрибуты? Как правильно записывать? Какие атрибуты можно присвоить любому без исключения тегу? А ещё вы узнаете, как разрешить пользователю редактировать любой элемент страницы, как задать для каждого объекта уникальное контекстное меню и как скрыть содержимое элемента, чтобы оно не отображалось в браузере.
- 6
Форматирование текста в HTML
Всё, что связано с оформлением текста: как сделать заголовки, назначить полужирный шрифт или курсив, уменьшить/увеличить размер текста или что-нибудь процитировать. В статье вас ждёт ещё много интересных секретов форматирования текста средствами HTML. А главное - всё это показано на наглядных примерах.
- 7
Создание списков
Маркированные, нумерованные, вложенные - какие хотите. Также вы узнаете, как нумеровать список большими латинскими буквами или римскими цифрами, да ещё и в обратную сторону, как начинать нумерацию не с единицы и тому подобные вещи. А ещё вас ждёт знакомство с мало кому известным списком определений.
- 8
Создание ссылок
Ссылки - чуть ли не основной элемент Интернета, без которого никакой связности страниц бы и не было. Научитесь создавать ссылки на примерах, узнайте, чем относительные пути отличаются от абсолютных, познакомьтесь с внутренними и графическими ссылками, научитесь ставить их на e-mail и Skype.
- 9
Вставка изображений
Картинки украшают страницу, поэтому уметь добавлять их - навык очень полезный. А если превратить изображение в навигационную карту, то оно становится не только симпатичным, но и очень полезным элементом. Научитесь создавать такие объекты на наглядных примерах, которые есть в статье.
- 10
Вставка таблиц
Внимательно изучив этот раздел, вы научитесь самостоятельно работать с таблиц. На основе таблиц когда-то создавались целые структуры сайтов, но об этом будет идти речь в следующем уроке.
- 11
Табличная вёрстка сайта
Как вообще можно сверстать целый сайт? Способов есть много, один из них - делать его с помощью таблиц. О том, что представляет собой такой метод, вы и узнаете. Наглядные примеры, как всегда, присутствуют, и помогут без труда освоить табличный подход.
- 12
Фреймы
Статья для тех, кто хочет научиться отображать в одном HTML документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.
- 14
CSS текст
На примерах показано, как выровнять текст по горизонтали и вертикали, изменить отступ и междустрочный интервал, добавить подчёркивание или надчёркивание, увеличить расстояние между символами и сменить регистр.
- 15
CSS шрифты
Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.
- 16
CSS ссылки
Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель - зелёной с подчёркнутым текстом, щёлкнули - жёлтой и полужирной, а перешли - курсивной и фиолетовой.
- 17
CSS таблицы
Всё о правильном оформлении таблиц: ширина и высота, расположение заголовка, удаление двойных границ, определение расстояний, скрытие фона и многое другое, подкреплённое живыми примерами.
- 18
CSS списки
А вы знали, что в качестве маркера списку можно задавать не только круг, но и окружность или даже квадрат? Да хоть произвольную картинку. А знали, что помимо стандартных нумераций можно установить, например, традиционную армянскую? А как превратить маркер из вынесенного в обтекаемый? Нет? Тогда загляните в статью, там ждёт не только теория, но и примеры.
- 19
CSS фон
Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.
- 20
13 Что такое CSS
Какие основные операторы и элементы присутствуют в документе каскадных таблиц стилей, что вообще такое этот CSS, зачем он нужен и чем отличается от HTML, а главное - как связать каскадную таблицу стилей с HTML-элементом.
Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …
Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.
Для выполнения заданий вам потребуются (будет повод обновиться):
Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5 . Пройдите по ссылке http://html5test.com , там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?
В этом тьюториале, мы:
- создадим с вами страницу по стандарту HTML5
- воспользуемся новыми семантическими элементами,
- немного порисуем,
- проверим как выводится видео на нашей странице,
- проверим работу новых элементов формы.
Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css . В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.
Готовим каркас страницы
Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.
Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.
Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.
Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.
Всё что мы здесь описали есть в листинге №1:
Листинг 1. Базовая структура документа HTML5
Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang . Для метатега достаточно написать charset . Кроме того, для тега link не нужно указывать type .
Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.
Делаем разметку контента
Разместим на каркасе семантические блоки
Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.
Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.
Разместим блоки в контейнере
. Будем придерживаться следующей последовательности этих элементов:– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer
В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer , в котором мы разместим дополнительную информацию о контенте наших страниц.
Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами
… .Листинг 2. Размещение семантических блоков HTML5
ООО Рога и копыта
Полный текст новости
Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.
Покрасим фасад
У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana . Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.
Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.
box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px
, либо других линейных единицах (em
, pt
), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset
. Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.
text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.
border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius
ещё и в эту парочку параметров.
Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css .
Листинг 3. CSS для новых семантических элементов HTML5
* { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 480px; margin: 0px auto; } header.mainH { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px; text-align: center; } header h1 { font-size: 36px; margin: 0px; } header h2 { font-size: 18px; margin: 0px; color: #888; font-style: italic; } nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #666; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #EFD3D3; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 14px; display: block; width: 26px; padding: 2px; text-align: center; background-color: #993333; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h1 { font-size: 20px; float: left; margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888; } article > header h1 a { color: #993333; text-decoration: none; } article > section header h1 { font-size: 16px; } article p { clear: both; } footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } article > section { -moz-border-radius: 6px 0 0 0; -webkit-border-radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; color: #665588; margin-top: 40px; }
Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР
Рисунок 1. Вид стилизованой страницы
Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.
Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.
Меня зовут Михаил Русаков, и я уже около 9 лет занимаюсь программированием и из них последние 5 лет - созданием сайтов. На данный момент у меня больше сотни заказчиков, с некоторыми из которых я работаю постоянно. Так же я веду обучающую деятельность, и сейчас у меня несколько десятков тысяч учеников по всему миру и несколько тысяч клиентов. С отзывами некоторых из моих учеников Вы можете ознакомиться у меня на стене в контакте:
http://vk.com/myrusakov
Не люблю о себе писать, но в данном случае это необходимо, ведь, возможно, Вы узнали обо мне совсем недавно. И чтобы Вы были уверены в моей компетенции, приходится себя расхваливать, хотя очень это не люблю в силу природной скромности.
А что особенного в HTML5 и CSS3?
Действительно, ведь обходились же как-то и HTML 4.01, разработанной ещё в 1999 году. То же самое касается и CSS 2.1. Однако, HTML5 и CSS3 внесли огромные возможности по вёрстке страниц сайта, в разы упростив этот процесс.
Вот лишь некоторые новые возможности HTML5:
- Возможность вставки аудио и видео без использования Flash. Это стало возможным благодаря новым тегам, добавленным в HTML5.
- Улучшенные возможности по поисковой оптимизации. В HTML5 страницы не будут создаваться на одних только div-ах. Теперь есть масса элементов, характеризирующих конкретную часть сайта (шапка сайта, подвал, меню навигации, статья и т. д.). Это очень хорошо скажется на оптимизации под поисковые системы.
- Богатые возможности по работе с формами. Появилась масса новых типов полей. Например, e-mail, tel, url. Благодаря этим типам Вам больше не нужно писать код на JavaScript для проверки формы. Теперь с помощью HTML5 форма автоматически проверяется на корректность заполнения, сразу выдавая все сообщения об ошибках пользователю. Причём всё это сделано очень красиво и аккуратно, впрочем, через CSS можно будет изменить внешний вид всего этого. Также появился элемент datalist, позволяющий создать список вариантов, которые пользователь сможет выбрать при наборе текста. Такой функционал очень часто используется при наборе поискового запроса, когда вводя первые символы, сразу появляются возможные варианты. Никогда такая сложная функциональность не создавалась так легко. В общем, здесь ещё очень долго можно говорить, возможностей по работе с формами стало очень много.
- Упрощённая реализация drag and drop. Теперь реализовать подобный механизм стало намного проще. Пример использования drag and drop – это, например, перетаскивание мышкой картинку товара в корзину, и он автоматически туда добавляется. Раньше это была достаточно сложная задача, теперь же она делается в течение нескольких минут.
- Появилась возможность узнать местоположение пользователя. То есть узнать точные координаты, где находится посетитель Вашего сайта. Использование этого механизма вносит такие возможности, что дух захватывает.
- Появились Canvas, что позволило рисовать прямо на Web-странице через JavaScript. Это позволяет генерировать картинки без перезагрузки страницы. Раньше без использования PHP это было сделать невозможно.
Это не все возможности HTML5, но и этого достаточно, чтобы Вы поняли, что изучать HTML5 обязательно нужно.
А что же нового в CSS3?
- Появились новые селекторы, которые упрощают выборку. Например, простая задача – сделать особый стиль у последнего пункта меню (например, у всех пунктов внизу есть рамка, а у последнего пункта её нет). Раньше нужно было задавать отдельный класс для последнего пункта, а в CSS3 есть новый селектор, который поможет сразу вытащить этот последний элемент. Это сократит время работы и уменьшит размер кода. И таких полезных мелочей в CSS3 очень и очень много благодаря новым селекторам.
- Богатые возможности по работе с фоном. Наконец-то, в CSS3 появилась возможность задать для одного элемента сразу несколько фонов. Так же их теперь можно растягивать по ширине и высоте.
- Появилась возможность задать прозрачный цвет, чего сильно не хватало раньше. Так же появилась возможность задать цвет через HSL (оттенок-насыщенность-яркость).
- Очень легко стало создавать закруглённые рамки. Практически в любом более-менее сложном дизайне присутствуют закругления у различных блоков и элементов формы. Раньше это была целая проблема, а в CSS3 это делается одной строчкой.
- Теперь можно задать свой шрифт на сайте, и не нужно бояться, что у кого-то он не отобразится. Вы просто скачиваете шрифт, копируете на свой сайт, а через CSS3 его подключаете к странице. В CSS 2.1 не было такой возможности, что сильно ограничивало возможности по дизайну страницы.
- Необычайно легко стало добавлять тень к элементам. На многих сайтах есть тень у некоторых элементов, и если раньше её делали долго и напряжённо, то сейчас это опять же одна небольшая строчка в файле стилей.
- Можно создавать линейные и сферические градиенты. Очень часто на страницах встречаются градиенты, и раньше без нарезки картинок, подключения её в качестве фона и повторения по X или по Y не обходилось. В CSS3 же задать градиент очень и очень легко, а возможности там таковы, что можно создать даже очень сложный градиент, где хоть 10 переходов между цветами.
- Появились трансформации. Теперь очень легко можно, например, повернуть, например, целый блок на определённый угол, или растянуть/сжать его на определённый процент, или подвинуть его (особенно полезно в совокупности с JavaScript).
- Появилась анимация. Теперь Вам не нужно при наведении курсора мыши на элемент плавно менять его состояние через JavaScript. Огромное количество возможностей, которые встречаются на сайтах, теперь можно сделать через анимацию в CSS3. В некоторых случаях это поможет Вам отказаться от того же jQuery, который весит весьма прилично, тем самым, Вы увеличите скорость загрузки страницы, что так же хорошо скажется на поисковой оптимизации.
Опять же это не все возможности, появившиеся в CSS3, но даже это уже позволит упростить вёрстку страницу, порой, многократно.
Таким образом, HTML5 и CSS3 уже надо изучать и можно использовать уже сейчас. Вопрос только один.
Как изучить HTML5 и CSS3?
Тут надо всё разбить на 3 этапа.
1-й и 2-й этапы относительно несложные. Благо, книг достаточно много, в некоторых есть и упражнения. Поэтому можно поискать и что-нибудь найти.
А вот 3-й этап значительно сложнее. Тут обязательно нужно посмотреть сначала пример вёрстки страницы. А вот с этим уже серьёзные проблемы. В книге тяжело передать процесс вёрстки, и понять его хоть и можно, но сделать это будет значительно труднее, чем в видеоформате.
Плюс большой минус книг, что они очень долго издаются. А HTML5 и CSS3 – это новинки, поэтому абсолютно все книги, которые Вы найдёте уже устарели. Отсюда вывод: искать информацию по HTML5 и CSS3 можно в онлайн-справочниках (убедитесь, что там есть постоянное обновление), где упражнений нет, да и покопаться там ещё придётся немало, а пример вёрстки и вовсе не сыскать. Плюс всех этих мучений только один – бесплатно.
Я предлагаю Вам не только
самый простой,
но и самый лучший путь!
Представляю Вашему вниманию свой новый Видеокурс, который называется «HTML5 и CSS3 с Нуля до Гуру»:
Курс состоит из нескольких разделов, которые Вы можете увидеть на скриншоте главного меню:
Что Вы узнаете из этого курса? Начнём с раздела по HTML5.
Из этого раздела:
- Вы узнаете очень важные особенности HTML5, которые обязательно необходимо учитывать при использовании этой Web-технологии.
- Вы узнаете, как правильно вставлять видео и аудио на сайт. Тут тоже есть свои нюансы, без учёта которых у некоторых пользователей Ваше видео или аудио просто не запустится. Обо всех этих нюансах Вы узнаете из этого раздела.
- Вы узнаете, как использовать новые семантические теги для грамотной оптимизации под поисковые системы.
- Вы увидите все новые возможности по работе с формами.
- Вы увидите на конкретном примере, как реализуется с использованием HTML5 механизм Drag and Drop.
- Вы узнаете, как можно получить координаты местоположения посетителей Вашего сайта.
- Вы узнаете, как можно рисовать на Web-странице, используя новый элемент Canvas.
Следующий раздел – это CSS3.
Из этого раздела:
- Вы узнаете особенности CSS3, которые обязательно нужно знать, прежде чем его использовать. Без учёта этих особенностей могут возникнуть огромные проблемы с отображением сайта в разных браузерах (кроссбраузерностью).
- Вы увидите, как использовать новые селекторы.
- Вы увидите новые возможности по работе с текстом.
- Вы узнаете все возможности по заданию фона через CSS3.
- Вы узнаете, как создавать прозрачный цвет с помощью CSS3.
- Вы узнаете, как правильно задавать собственный шрифт. В этом разделе разбираются мелкие детали, которые очень многие верстальщики не учитывают, а потом появляются проблемы со шрифтами на сайте. После просмотра соответствующего урока из этого раздела Вы будете знать, что это за проблемы и как их решить очень быстро и легко.
- Вы узнаете, как создаются тени у текста и блоков.
- Вы увидите, как делаются самые различные градиенты.
- Вы узнаете, как трансформировать элементы, например, поворачивать те же изображения на определённый угол.
- Вы узнаете, как сделать анимацию на CSS3. Несколько самых различных и в то же время очень используемых в практике примеров Вы увидите своими глазами. Когда я впервые увидел возможности по анимации в CSS3, то был очень удивлён, уверен, что и Вам всё очень понравится.
После этих 2-х разделов по HTML5 и CSS3 Вы будете обладать всеми необходимыми знаниями для успешной вёрстки страниц.
Однако, крайне важно увидеть пример вёрстки
реальной страницы на HTML5 и CSS3
Поэтому в курсе «HTML5 и CSS3 с Нуля до Гуру» есть ещё один раздел, где показывается вёрстка для моего сайта с использованием HTML5 и CSS3.
Кстати, вот дизайн страницы, которая верстается в курсе абсолютно с нуля:
В этом разделе Вы увидите, как верстается конкретная страница с использованием HTML5 и CSS3. И после прохождения этого раздела Вы уже самостоятельно сможете верстать самые различные страницы с использованием современных технологий.
Безусловно, почти к каждому уроку каждого раздела идут различные упражнения, которые позволят Вам закрепить материал из урока уже на практике. Большинство упражнений я брал из своей практики, поэтому Вы будете не только закреплять знания, но ещё и сразу применять их при решении реальных практических задач.
А что насчёт вёрстки под мобильные устройства?
Вполне справедливый вопрос, ведь мобильные устройства такие как смартфоны и планшеты давно вошли в нашу жизнь. В 2013-м году мобильный трафик составил в среднем 38% от общего числа. Это очень крупная доля пользователей, о которых не стоит забывать. Поэтому для многих сайтов обязательно требуется создание мобильной версии сайта. И самая главная задача – это сделать правильную вёрстку для мобильной версии сайта.
А как сделать вёрстку для мобильной версии сайта?
Для ответа на этот вопрос был записан
Бонусный Видеокурс «Вёрстка под мобильные устройства».
Пройдя этот курс:
- Вы узнаете все особенности вёрстки под мобильные устройства. Эти особенности крайне важно знать перед тем, как делать вёрстку.
- Вы узнаете, как правильно изменить дизайн для вёрстки под мобильные устройства.
- Вы увидите, как верстается главная страница MyRusakov.ru под мобильные устройства.
- Вы сможете самостоятельно создавать мобильные версии своих сайтов, и это самое главное, что Вы получите, изучив этот курс.
И самое главное, что этот курс является бесплатным Бонусом к курсу «HTML5 и CSS3 с Нуля до Гуру».
А нужно ли знать HTML 4.01 и CSS 2.1,
если теперь есть HTML5 и CSS3?
Обязательно! HTML5 и CSS3, несмотря на всю их глобальность, являются лишь расширением базовых возможностей HTML и CSS. Поэтому прежде чем приступать к изучению HTML5 и CSS3, обязательно нужно знать все базовые возможности этих технологий, а также уметь верстать сайты с их помощью.
Всему этому обучает Видеокурс «Вёрстка сайта с нуля».
Пройдя данный курс, Вы сможете сверстать страницы любой сложности. А уже после надо проходить курс «HTML5 и CSS3 с Нуля до Гуру», который упростит Вашу работу и увеличит её качество.
Для тех, кто любит всё по максимуму!
У данного курса есть несколько различных комплектов.
1) Комплект «Стандарт» - сюда входит курс «HTML5 и CSS3 с Нуля до Гуру» с Бонусным курсом «Вёрстка под мобильные устройства».
2) Комплект «Вёрстка+». В данный комплект входит всё то, что есть в комплекте «Стандарт», а также курс «Вёрстка сайта с нуля», важность которого была описана немного выше. Если Вы ещё не умеете верстать сайты, или ещё даже плохо знаете HTML или CSS, то обязательно изучите сначала именно курс «Вёрстка сайта с нуля».
3) Комплект «Профи в создании страниц». В данный комплект входит всё то, что есть в комплекте «Вёрстка+», а также курс «JavaScript, jQuery и Ajax с Нуля до Гуру», который позволит Вам «вдохнуть жизнь» в страницы Вашего сайта. Несмотря на богатые возможности HTML5 и CSS3, даже им необходим JavaScript. Например, та же работа с Canvas или механизмом Drag and Drop требует JavaScript, поэтому его знать необходимо, если Вы хотите создавать страницы с любой сложностью и с любым функционалом.
4) Комплект «Профи в создании сайтов». Данный комплект содержит всё то, что есть в «Профи в создании страниц», а также курс «PHP и MySQL с Нуля до Гуру». Данный курс научит Вас создавать весь внутренний функционал сайта: регистрацию, авторизацию, поиск по сайту, динамическую генерацию страниц сайта и многое-многое другое. Комплект «Профи в создании сайтов» научит Вас создавать любые сайты с использованием самых современных Web-технологий.
Видеоотзыв о курсе от ученика
На мой взгляд, никто лучше и честнее не расскажет о курсе, чем те, кто его уже прошёл.
Отзыв от Рустама Садыкова
Подведём итог того, что Вы получаете
Приобретя Видеокурс «HTML5 и CSS3 с Нуля до Гуру»:
- Вы узнаете новые возможности HTML5, а также увидите, как они работают.
- Вы узнаете, что нового появилось в CSS3, и как это используется на практике.
- Вы увидите конкретный пример вёрстки сайта.
- Вы сможете верстать любые сайты с использованием HTML5 и CSS3.
- Вы сможете создавать мобильную версию для своих сайтов.
- Приобретя комплект «Профи в создании страниц», Вы сможете использовать максимум возможностей HTML5 и CSS3 с помощью JavaScript.
- Приобретя комплект «Профи в создании сайтов», Вы сможете не только верстать любые сайты, но и реализовывать весь функционал, который делается на PHP и MySQL.
Вы боитесь, что у Вас ничего не получится?
Вы ничем не рискуете, так как я предоставляю Вам 100% гарантию на возврат денег. Я могу её предоставить, так как уверен в качестве своих курсов, что доказывает масса положительных отзывов обо мне и о моих курсах. Но если вдруг Вам курс не подойдёт, то просто напишите в мою службу поддержки https://support.myrusakov.ru , и я верну Вам все потраченные на курс деньги. Гарантия сроком не ограничена. Я уже давно известная фигура в Интернете, поэтому Вы можете мне доверять.
Сколько стоит?
Цена зависит от выбранного комплекта.
Помните, что Вы на 100% защищены моей гарантией. Поэтому смело выписывайте счёт прямо сейчас, оплачивайте его и сразу приступайте к обучению.
Действуйте, Дорогой Друг!
С Уважением, Михаил Русаков!
P.S. «Чтобы хорошо жить,
надо хорошо работать,
чтобы крепко стоять на ногах,
надо много знать»
Максим Горький
ВОПРОСЫ И ОТВЕТЫ
Выдаётся ли сертификат?
Да, на каждый Видеокурс выдаётся отдельный именной сертификат.
Мне какой-то "Вася" предложил купить этот курс за 500 рублей. Это Ваш партнёр?
Нет, это не мой партнёр, а мошенник, пытающийся заработать денег. Ко мне уже обращались люди, которые заплатили им деньги, а потом эти "продавцы" просто пропадали. Так же были случаи, когда они вместо платного курса, подсовывали мои бесплатные курсы и уроки. А даже если Вы и получите полную версию платного курса со всеми уроками и файлами, то никакой поддержки автора, то есть меня, не предусмотрено. Вместе с этим отсутствуют любые гарантии на возврат денег для таких "клиентов". Поэтому остерегайтесь таких "продавцов", легально мои курсы можно приобрести только на этом сайте и больше нигде и ни у кого. И я НЕ несу никакой ответственности за действия 3-их лиц.
Куда Вы заливаете курс?
Я заливаю на платный сервер (я за него плачу). Поэтому сразу после оплаты Вы получаете прямые ссылки на скачивание курса с качественного сервера. Ни на каких файлообменниках, народе и прочих бесплатных сервисах я этот курс не держу. Если вдруг у Вас возникнет проблема со скачиванием с одного сервера (например, из-за большой нагрузки), то у меня имеется запасной. Просто напишите дать запасные ссылки, и я их Вам вышлю.
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег
сообщает о том, что начинается структура html-документа,
— что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,
