HTML и CSS уроки. Обучение и самоучители для начинающих с нуля

Всем привет. Добро пожаловать на обзор по HTML5. В своих статьях я буду постоянно затрагивать тему нового языка разметки и вместе с Вами создавать поистине великолепные шедевры сайтов. Сразу забегу вперед. Мы действительно! будем создавать отличный игровой портал, благодаря новейшим технологиям. И поэтому нашей основной задачей на сегодня будет понять, что же такое HTML5, что он из себя представляет.

HTML5 – что это?

HTML5 – это новый язык разметки. Но не стоит пугаться и думать, что Ваши знания по предыдущей версии html пропадут зря. На самом деле новая разметка воплотила все преимущества предыдущей версии html и добавила много всего вкусного.

Многие искренне считают, что HTML5 – это некий новый язык программирования. На самом деле это не так. Я считаю, что html5 – это совокупность различных самых современных элементов, благодаря которым, мы и получаем такие великолепные страницы.

HTML5 – это совокупность CSS3 (языка представления страницы), разметки (усовершенственный код html) и JavaScript (взаимодествие, интерактивность). Имея такой богатый арсенал мы можем с уверенностью сказать, что HTML5 это поистине новый рывок в создании не только веб-страниц, но и целых веб-приложений.

Естественно, подходить к созданию интерактивных страниц необходимо, имея, хотя бы базовые знания в области программирования на JavaScript и знанием html и css. Без этого никак.

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

Моя первая страница /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size: 30px; color: red; } Привет var my_first=document.getElementById("first"); my_first.innerHTML="Это моя первая запись"; // Здесь Вы можете писать любую функцию. HTML5 видит css и javascript. Ему теперь не нужно указывать, что перед ним. Очень удобно.

< ! doctype html > < ! -- Обратитевниманиенановоеопределениедокументов. Теперьненужнозапоминатьисохранятькод. Выегосамизапомните. Посмотрите, каквыглядитВашкод. -- > < html > < head > < meta charset = "utf-8" > < ! -- Вотивсеmeta дляВашегодокумента. Короткость, сестраталанта-- > < title > Мояперваястраница< / title > < link rel = "stylesheet" href = "index.css" > < ! -- Подключениестилейиjavascript сталопрощенекуда-- > /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size : 30px ; color : red ; < / head > < body >

Автор (режиссер): Андрей Бернацкий
Жанр: 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. Заключение

Также можно скачать XHTML версию данного шаблона!

Шаг 1 - Дизайн

Каждый процесс создания сайта начинается с идеи. В этой стадии дизайнеры обычно используют Photoshop для проработки всех деталей.

После этого весь дизайн кодируются с помощью HTML и CSS.

Шаг 2 - HTML

Важно заметить, что работа над HTML5 все еще ведется. И она по разным оценкам продлится до 2022 года (абсолютно серьезно). Однако, некоторые части уже готовы и ими можно пользоваться сегодня.

В этом уроке мы используем несколько новых тегов:

header - в него обернем нашу шапку
footer - для футера
section - группирует контент в секции (к примеру, главная секция, сайдбар...)
article - отделяет статьи от всей страницы
nav - содержит навигацию
figure - обычно содержит картинку-иллюстрацию к статье

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

Однако, есть некоторые ограничения использования HTML5 сегодня. Одно из них - эта вся линейка браузеров Internet Explorer - они не поддерживают эти теги (но это можно решить добавив небольшой JavaScript). Поэтому пока еще рановато полностью переходить на HTML5.

Поэтому в начале урока Вам также доступна ссылка на скачивание такого же шаблона, но в XHTML версии (работает во всех браузерах сейчас).

template.html - шапка

Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo .clear { zoom: 1; display: block; }

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

После указания таблицы стилей и названия документа мы подключаем специальный JavaScript, который поможет правильно отображать HTML5 в любом IE. Это означает, что пользователь IE с отключенным JS ничего красивого не увидит. Именно поэтому стоит задуматься об использовании XHTML версии данного шаблона.

template.html - тело документа

В конце у нас идет тег футера.

Шаг 3 - CSS

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

styles.css - часть 1

Header,footer, article,section, hgroup,nav, figure{ display:block; } article .line{ /* Разделяющая полоса : */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; } footer .line{ margin:2em 0; } nav{ background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #FCFCFC; -moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; } nav ul li{ display:inline; } nav ul li a, nav ul li a:visited{ color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; } nav ul li a:hover{ text-decoration:none; background-color:#f0f0f0; } nav, article, nav ul li a,figure{ /* Applying CSS3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

Нам необходимо установить значение правила display на block для новых тегов. После этого можем обращаться с ними также, как и с обычными тегами.

Мы придаем стиль горизонтальной линии, статьям, и кнопкам навигации. В самом низу мы прописываем свойство border-radius для четырех разных типов элементов сразу для экономии.

styles.css - часть 2

/* Стили для статей : */ #page{ width:960px; margin:0 auto; position:relative; } article{ background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 black; } figure{ border:3px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; } figure:hover{ -moz-box-shadow:0 0 2px #4D7788; -webkit-box-shadow:0 0 2px #4D7788; box-shadow:0 0 2px #4D7788; } figure img{ margin-left:-60px; } /* Стили для футера : */ footer{ margin-bottom:30px; text-align:center; font-size:0.825em; } footer p{ margin-bottom:-2.5em; position:relative; } footer a,footer a:visited{ color:#cccccc; background-color:#213e4a; display:block; padding:2px 4px; z-index:100; position:relative; } footer a:hover{ text-decoration:none; background-color:#142830; } footer a.by{ float:left; } footer a.up{ float:right; }

Во второй части кода мы придаем более детальные стили нашим объектам.

Давайте перейдем к последнему шагу.

Шаг 4 - jQuery

Для модернизации данного шаблона мы создадим плавный эффект скролла после нажатия на ссылку с использованием jQuery плагина scrollTo. Для его работы необходимо пройтись по всем ссылкам и присвоить событие onclick, которое вызовет функцию $.srollTo(), описанную в скрипте плагина.

$(document).ready(function(){ /* Выполнение скрипта после загрузки страницы */ $("nav a,footer a.up").click(function(e){ // Если нажата ссылка - плавный скролл к нужному объекту : $.scrollTo(this.hash || 0, 1500); e.preventDefault(); }); });

Заключение

В этом уроке мы ознакомились с возможностями новых семантических свойств 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. Заключение