Главная › Телефон › Изучаем html5. Для тех, кто любит всё по максимуму! Мой путь в изучении HTML и CSS

Изучаем html5. Для тех, кто любит всё по максимуму! Мой путь в изучении HTML и CSS

Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и 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 документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.

13 Что такое CSS

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

14 CSS текст
На примерах показано, как выровнять текст по горизонтали и вертикали, изменить отступ и междустрочный интервал, добавить подчёркивание или надчёркивание, увеличить расстояние между символами и сменить регистр.
15 CSS шрифты
Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.
16 CSS ссылки
Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель - зелёной с подчёркнутым текстом, щёлкнули - жёлтой и полужирной, а перешли - курсивной и фиолетовой.
17 CSS таблицы
Всё о правильном оформлении таблиц: ширина и высота, расположение заголовка, удаление двойных границ, определение расстояний, скрытие фона и многое другое, подкреплённое живыми примерами.
18 CSS списки
А вы знали, что в качестве маркера списку можно задавать не только круг, но и окружность или даже квадрат? Да хоть произвольную картинку. А знали, что помимо стандартных нумераций можно установить, например, традиционную армянскую? А как превратить маркер из вынесенного в обтекаемый? Нет? Тогда загляните в статью, там ждёт не только теория, но и примеры.
19 CSS фон
Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.
20

Название : HTML5 и CSS3 с нуля до профи
Автор : Андрей Бернацкий
Год выхода : 2016
Жанр : Видеокурс
Язык : Русский

Описание :
Изучив этот видеокурс, каждый веб-разработчик полностью освоит на практике адаптивную верстку с использованием последних новшеств языка гипертекстовой разметки HTML5 и каскадных таблиц стилей CSS 3.

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

Верстка макета сайта-визитки

Урок 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. Заключение

Выпущено : Россия
Продолжительность : 25:51:27

Файл
Формат : HTML, MP4
Видео : AVC, 1024x768, ~651 Kbps
Аудио : AAC, 106 Kbps, 48.0 KHz

Автор (режиссер): Андрей Бернацкий
Жанр: HTML5, CSS3, web
Продолжительность: 25:51:27
Качество видео: PCRec
Видео: AVC/H.264, 1024x768, ~283 - 681 Kbps
Аудио: AAC, 2 ch, 106 Kbps

Описание:
Без преувеличения на сегодняшний день это самый полный и актуальный курс в Рунете. Вдумайтесь сами: только лишь основной раздел курса (без учета бонусов) состоит из 47 подробнейших видеоуроков, образующих собой пошаговую практическую систему.

После изучения этой системы вы освоите полностью адаптивную верстку с использованием последних новшеств этих двух языков гипертекстовой разметки и каскадных таблиц стилей.

В нашем новом курсе ВСЕ макеты верстаются сразу АДАПТИВНЫМИ и КРОССБРАУЗЕРНЫМИ.

Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».

Я не просто научу вас верстать простейшие веб-страницы, мы с вами очень подробно (вплоть до малейших деталей) проработаем верстку на примере трех различных по своей сложности наиболее популярных видов веб-сайтов в современном Интернете:

Сайта-визитки
блога и...
интернет-магазина

ПЕРВАЯ ЧАСТЬ
Верстка макета сайта-визитки

ВТОРАЯ ЧАСТЬ
Верстка макета блога

ТРЕТЬЯ ЧАСТЬ
Верстка макета интернет-магазина

БОНУС 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. Заключение

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

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

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

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Использование nav для создания основной навигации сайта – это нечто вроде данности, но обстоятельства таковы, что на вашем сайте будет больше областей, содержащих ссылки; вопрос в том, которые из них вам следует обернуть тэгом nav. Вот некоторые примеры использования, которые, я считаю, могут подойти:

Связанные посты.

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

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

XHTML

2010

16apr

Sample Post 1

Curabitur ut congue hac, diam turpis[…]

2010

16 apr

Sample Post 1

Curabitur ut congue hac, diam turpis[…]

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации ) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

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

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

Элемент section представляет общую область документа или приложения. Секция в данном случае – это тематическое группирование содержимого, обычно при помощи заголовка.

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.

Как обычно, я с нетерпением жду любых вопросов и комментариев. Пожалуйста, не бойтесь высказаться и начать обсуждение использования новых элементов, потому что это – лучший способ прояснить их пользу.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.