Специалист | HTML и CSS. Уровень 1-2 [Верстальщик Web] (2015) PCRec

Специалист | HTML и CSS. Уровень 1-2 (Верстальщик Web) (2015) PCRec

Автор (режиссер): Сергей Дмитриевич Алмазов
Жанр: Веб-дизайн, верстка

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

Планируете сделать веб-технологии своей профессией? Хотите создавать сайты? Работать верстальщиком, web-дизайнером, а может, интернет-маркетологом? У вас есть онлайн-проект, который Вы продвигаете сами? В любом случае, Вам не обойтись без знания HTML и CSS – языков разметки веб-страниц и их внешнего оформления.

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

Во время обучения Вы получите начальные навыки работы в HTML и CSS, а также научитесь применять интерактивные возможности последних версий – HTML5 и CSS3. Вы изучите основы языка разметки HTML, способы применения CSS и основы построения сайтов. Вы сможете сами создавать страницы, проектировать навигационное меню и другие элементы сайта. Научитесь грамотно размещать изображения и текстовые блоки на странице. Сможете самостоятельно работать со стилями в CSS, использовать фреймы и мета-информацию. А также получите практические советы, как выбрать хостинг и техподдержку сайта.

А еще во время обучения Вы узнаете, что важнее – дизайн или чёткая структура? И как спроектировать сайт таким образом, чтобы он успешно продвигался в дальнейшем?

Программа курса соответствует требованиям профессионального стандарта.

Курс рекомендован Российской Ассоциацией электронных коммуникаций «РАЭК». Его успешное прохождение поможет Вам систематизировать и закрепить имеющиеся знания. Это мощная база для дальнейшего изучения веб-технологий. Курс необходим всем, кто планирует овладеть престижной профессией интернет-маркетолога, веб-верстальщика, контент-менеджера, веб-мастера или веб-дизайнера.

Модуль 1. Введение и основные понятия
Как это работает? Что такое web-сервер, web-сайт, web-страница
Цели и задачи языка HTML
HTML-разметка. Элементы
Структура HTML-документа:
Использование комментариев
Базовые элементы разметки:
Атрибуты элементов
Специальные символы
Лабораторная работа по теме

Модуль 2. Анатомия страницы
Понимаем, как мы пишем: синтаксис HTML
Элементы форматирования текста
Понимаем, что мы пишем: семантика элементов
Валидация HTML-документа
Структурные элементы разметки
Лабораторные работы по теме

Модуль 3. Гиперссылки
Понятие гиперссылок в WWW
Внешние и внутренние гиперссылки
Типы адресов в WWW
Дополнительные атрибуты гиперссылок
Лабораторная работа по теме

Модуль 4. CSS. Каскадные таблицы стилей: основные свойства
Основные понятия CSS
Способы определения стилей
Каскадирование и наследование
Единицы измерения в CSS
Основные типы селекторов
Псевдоклассы и псевдоэлементы
Свойства шрифтов
Свойства текста
Свойства цвета и фона
Лабораторные работы по теме

Модуль 5. Использование изображений на странице
Типы изображений используемые в WWW
Вставка изображений на страницу
Атрибуты элемента img
Лабораторная работа по теме

Модуль 6. Структурирование информации при помощи списков
Неупорядоченный список
Упорядоченный список
Список определений
CSS свойства для списков
Лабораторная работа по теме

Модуль 7. Представление табличных данных при помощи таблицы
Основные элементы таблицы
CSS свойства элементов таблиц
Объединение ячеек таблицы
Дополнительные элементы таблицы
Лабораторная работа по теме

Модуль 8. Встраивание внешних данных при помощи фрейма
История фреймов
Встраиваемые фреймы
Фреймы и гиперссылки
Лабораторная работа по теме

Модуль 9. Передача пользовательских данных при помощи формы
Что такое веб-формы?
Элемент form и его атрибуты
Элементы формы: текстовые поля и кнопки
Элементы формы: элементы выбора
Дополнительные атрибуты элементов формы
Лабораторная работа по теме

Модуль 10. Использование CSS для макетирования
Оформление границ элемента
Внутренние отступы элемента
Наружные отступы элемента
Размеры элемента
Плавающие элементы
Видимость элемента
Лабораторные работы по теме

Модуль 11. Дополнительные возможности HTML и CSS
Практическая работа для закрепления изученных тем
Стили для различных типов носителей
Свойства курсора
Встраивание аудио- и видео-файлов
Лабораторные работы по теме

Модуль 12. Мета-информация на странице
Использование мета-информации
Элемент meta и его атрибуты
Поясняющая мета-информация
Мета-информация для роботов
Эмуляция заголовков ответа сервера

Модуль 13. Выбор хостинга и поддержка сайта
Понятие хостинга
Поиск хостера
Услуги хостера
Использование FTP-клиента
Доступ к ftp-серверу через проводник Windows

Модуль 14. Что дальше?
Обзор HTML5 API
Тонкая настройка сайта на стороне сервера
Динамические элементы на странице
Динамическое создание контента на сервере
Современные способы предоставления информации

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

Рассматриваются продвинутые технологии вёрстки веб-страниц и специальные эффекты, в том числе с использованием абсолютного и относительного позиционирования, переполнения и обрезки блоков, внедрённых объектов, изображений в CSS. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб-страниц.

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

Модуль 1. Веб-стандарты и их поддержка
Стандарты W3C. Документация.
DOCTYPE.
Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
Протокол HTTP.

Модуль 2. Элементы и атрибуты HTML5 и структура страницы
Секции, выноски, статьи, навигационные, «шапка», «подвал».
Элементы форм и их атрибуты.

Модуль 3. Эффективное использование инструментов разработки веб-страниц
Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.
Составление и анализ требований к вёрстке веб-страниц . Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц.
Практическая работа: построение структуры страницы с использованием вспомогательных программ.

Модуль 4. Селекторы в HTML5
Селекторы перешедшие из HTML4/xHTML.
Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
Ролловеры, спрайты.
Практическая работа: использование специфических селекторов при верстке страницы.

Модуль 5. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов
Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей
Семинар: Учет удобства использования сайтов

Модуль 6. Продвинутые технологии HTML и CSS
Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display.
Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др.

Модуль 7. Совместимость веб-страниц с различными браузерами
Условные комментарии.
Скрипты для поддержки селекторов и изменения поведения старых браузеров.
Программы эмуляторы старых версий IE.
Фильтры.
Практическая работа: использование кроссбраузерной верстки

Модуль 8. Использование свойств CSS2 и CSS3
Градиенты, анимация, трансформация (2D и 3D), переходы
Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
@font-face (веб-шрифты), текстовые эффекты,
Многоколоночная верстка,
Работа с фоном (+градиенты)
Закругление углов, модель Flex-блоков.
Определение технологий, поддерживаемых браузером.
Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

Модуль 9. Верстка макета
Принципы нарезки макета из psd-файла.
Выбор размеров и вариантов верстки.
Верстка.
Практическая работа: нарезка макета страницы
Практическая работа: верстка страницы по заданному макету.

Модуль 10. Типовые решения
CSS-фреймворки.
Динамический CSS (на примере LESS).
Шаблоны CMS
Решения на JavaScript.

Продолжительность: 32:55:59
Качество видео: PCRec

Видео: AVC/H.264, 1280x800, 1280x1024, ~58,7-148 kbps
Аудио: AAC, 2 ch, 122-128 kbps, VBR

Просмотр доступен только для зарегистрированных пользователей

Скриншоты:

[Специалист] | HTML и CSS. Уровень 3. Продвинутые методологии и инструменты верстки (2015) PCRec [H.264/720p]

Время раздачи: 24/7 (круглосуточно)

И все-таки доп. материалы к курсу появились у кого-нибудь?

Лучше этот курс смотреть после Борисова и рассматривать как практику.Ужасно растянут,ужасно.30% курса это просто печатание или разговоры ни о чем.Первый день можно было бы в часа 2 уложить.Смотреть строго после ознакомление теории.

usr1 писал(а):

Лучше этот курс смотреть после Борисова и рассматривать как практику.Ужасно растянут,ужасно.30% курса это просто печатание или разговоры ни о чем.Первый день можно было бы в часа 2 уложить.Смотреть строго после ознакомление теории.

Вечная сказка про белого бычка. Всем кто стонет на тему того что курсы Специалиста "затянуты, растянуты, просто печатание" и проч., стоит помнить, что это не видеокурсы как у той же Линды.Сом. Это запись проведенного курса, который проводился только для сидящих в аудиотории и подключенных в онлайне, в момент проведения занятий! И только! А сама видеозапись остается просто на память тем кто проходил курс, заплатив за него не маленькую денежку, чтобы они могли потом освежать память о том, что изучали. И спасибо этим людям, что они выкладывают такие записи на торрентах и мы можем нахаляву тоже смотреть их, потому что "Специалист" - пока еще лучшая русскоязычная контора по обучению в области IT-технологий! А при просмотре ничто не мешает просто проматывать те отрезки, где преподаватель возится с каждым учеником в аудитории.

Из 100% времени всего курса - реальной полезной информации процентов 20. Остальные 80% - это тупо перемотка.

Ну а если этого алмазова оценивать как преподавателя - то это обычное Цензура

. На втором курсе парень (видимо ходивший на SEO-курсы) попросил этого Цензура

поменять h1h2 на h2h3 потому что он там что-то где-то знает про SEO, что h1h2 это не совсем хорошо, и что h2h3 лучше. На что Цензура

алмазов ответил цитирую "У вас SEO головного мозга." То есть абсолютно открыто оскорбил и послал парня Цензура

. После таких приколов алмазову в идеале нужно зарядить в Цензура

, чтоб отдавал себе отчёт о том как можно общаться с людьми, а как общаться нельзя. О том можно ли этому жалкому Цензура

(которого видимо часто Цензура

в школе) преподавать или нет - об этом для меня вообще вопрос не стоит.

PS: у этого Цензура

ещё и амнезия в очень запущенной стадии. Он забывает постоянно что рассказывал всего час назад. Это было и на первом курсе и на втором. На первом курсе дважды или трижды рассказывал про RGBA. На втором курсе рассказал, что в SCSS есть переменные. И показал как они работают. Все в аудитории их уже опробовали. Проходит буквально 1 час - опять рассказывает про то, что ОКАЗЫВАЕТСЯ в scss есть переменные приговаривая "да, да!". Просто жесть, он уникален в своём Цензура

.

!	Примечание от SanKar52:
	Даже если вас "переполнили эмоции", то всё равно нужно помнть о ПРАВИЛА ПОЛЬЗОВАНИЯ ФОРУМ-ТРЕКЕРОМ [Июнь 2014] 2.1. Оскорбление в любой форме, ... Участники должны соблюдать уважительную форму общения. Устное предупреждение

Народ, у меня скоро голова взорвёцца!
Стиснув зубы начал смотреть второй уровень и залип!
Пишу код 1 в 1 как у Алмазова, а выходит не то.
Может кто глянет ради интереса?

Просмотр доступен только для зарегистрированных пользователей

Долбаные кубики не встают в линию - хоть ты тресни. У меня истерика уже :смех:

Kenzo80 писал(а):

Долбаные кубики не встают в линию - хоть ты тресни. У меня истерика уже :смех:

Ты в сбросе стилей CSS забыл добавить еще вот это

font-size: 0;

Наверняка у Алмазова это было, а ты просто пропустил.

То есть там должно быть так:

*{
margin: 0;
padding: 0;
border: 0;
font-size: 0;
}

И сразу все будет окей.
Свойство font-size по умолчанию имеет же в браузерах ненулевое значение. Вот оно и корежило тебе верстку.
Отличный пример того, как важно всегда сбрасывать в CSS в самом начале файле все значения в ноль.) Только тогда можно на сто процентов быть уверенным в том, что браузер будет отображать именно то что хочешь от него ты.

derini писал(а):

Kenzo80 писал(а):

Долбаные кубики не встают в линию - хоть ты тресни. У меня истерика уже :смех:

Ты в сбросе стилей CSS забыл добавить еще вот это

font-size: 0;

Наверняка у Алмазова это было, а ты просто пропустил.

То есть там должно быть так:

*{
margin: 0;
padding: 0;
border: 0;
font-size: 0;
}

И сразу все будет окей.
Свойство font-size по умолчанию имеет же в браузерах ненулевое значение. Вот оно и корежило тебе верстку.
Отличный пример того, как важно всегда сбрасывать в CSS в самом начале файле все значения в ноль.) Только тогда можно на сто процентов быть уверенным в том, что браузер будет отображать именно то что хочешь от него ты.

Да, спасибо)
Сам уже допёр, когда построчно стал проверять и был сильно удивлён. Не думал что так бывает) Чуть не спятил. :смех:

Только начинающим изучать HTML/CSS не советую изучать веб-технологии по курсам Специалиста.
1. Хорошую базовую теорию вы можете узнать из книг серии Орейли.
2. В Специалисте преподают уже устаревшие техники (про Борисова молчу, тот вообще мамонт).
3. В Специалисте преподают чисто теорию, не учат как это применить потом на ПРАКТИКЕ (т.е. пройдя этот курс вам еще потом придется помучиться, как теперь с этими знаниями жить ))) ).
ЗЫ: Посмотрел сперва Борисова, думал у Алмазова получше, вывод - потеря времени.
От себя советую либо HTMLAcademy, либо Loftschool, но за денежку и сразу применять знания на практике.

Ozimnadius писал(а):

Только начинающим изучать HTML/CSS не советую изучать веб-технологии по курсам Специалиста.
1. Хорошую базовую теорию вы можете узнать из книг серии Орейли.
2. В Специалисте преподают уже устаревшие техники (про Борисова молчу, тот вообще мамонт).
3. В Специалисте преподают чисто теорию, не учат как это применить потом на ПРАКТИКЕ (т.е. пройдя этот курс вам еще потом придется помучиться, как теперь с этими знаниями жить ))) ).
ЗЫ: Посмотрел сперва Борисова, думал у Алмазова получше, вывод - потеря времени.
От себя советую либо HTMLAcademy, либо Loftschool, но за денежку и сразу применять знания на практике.

Согласен насчет книг издательства Орейли, в остальном - готов с вами поспорить.

Дело в том, что особо кроме специалиста альтернатив нету... Указанные вами учебные заведения - на любителя. Я, например, сразу начал работать со специалистом (с 2007 года), и уже как-то только его и придерживаюсь... Не знаю, может быть это просто уже привычка, выработанная годами. Всё может быть. Но я бы не говорил так категорично насчет самого центра специалист, они тоже неплохо делают свою работу. В частности, я лично был на лекциях Борисова и в свое время он сильно мне помог разобраться в РНР программировании, за что ему большая благодарность! Да, я брал несколько индивидуальных занятий и проходил курсы по РНР очно, но оно того стоило! Это было начало 2010 года. Сейчас же просто поддерживаю те знания, которые получил тогда у Игоря Борисова.

В общем, сколько людей - столько и мнений. Не будем разводить холивар насчет этого вопроса. Удачи вам!

derini писал(а):

usr1 писал(а):

Лучше этот курс смотреть после Борисова и рассматривать как практику.Ужасно растянут,ужасно.30% курса это просто печатание или разговоры ни о чем.Первый день можно было бы в часа 2 уложить.Смотреть строго после ознакомление теории.

Вечная сказка про белого бычка. Всем кто стонет на тему того что курсы Специалиста "затянуты, растянуты, просто печатание" и проч., стоит помнить, что это не видеокурсы как у той же Линды.Сом. Это запись проведенного курса, который проводился только для сидящих в аудиотории и подключенных в онлайне, в момент проведения занятий! И только! А сама видеозапись остается просто на память тем кто проходил курс, заплатив за него не маленькую денежку, чтобы они могли потом освежать память о том, что изучали. И спасибо этим людям, что они выкладывают такие записи на торрентах и мы можем нахаляву тоже смотреть их, потому что "Специалист" - пока еще лучшая русскоязычная контора по обучению в области IT-технологий! А при просмотре ничто не мешает просто проматывать те отрезки, где преподаватель возится с каждым учеником в аудитории.

Хороший комментарий.

Шняга полная! Этот "так называемый" препод видимо диссертацию пишет, а в промежутках лекцию читает.... И за это г....о еще люди бабосы платят..... Если и дальше так пойдет, то к "Специалисту" прийдется добавить приставку "Г..."

Товарищи!!!! Рабочей тетради ни у кого нету???

О дааа)) В HTML/CSS и не такое бывает, кто изучает сразу готовьтесь к паре костылям, тот же font-size 0 пишется у родительского блока для того, что бы убрать пробелы, которые по дефолту есть у всех инлайн (строчных) элементов, т.е если вы создадите 2 кубика 100x100, зальете их цветов, и сделаете их inline-block, то вы увидите что между ними образуется щель (пробел) а всё из за табуляции/пробелов в коде HTML, в вашем редакторе, т.е браузер как я понял считает это за отступ, который можно убрать вот так (один из вариантов это fz0, либо у элементов задать margin-right:-4px или letter-spacing, в общем выбирайте удобный для вас вариант) главное помните что если вы делаете меню из ul>li*5 допустим то между этими 5 элементами li будут пробелы в 4px (зависит от шрифта) поэтому при верстке макетов нужно отступы у элементов указывать допустим не 20px а 16px, либо обнуляйте размер шрифта (fz:0) но тогда придется явно указать размер каждому элементу в блоке у которого вы указали fz:0, что тоже не всегда удобно, но это работает. И это лишь один костыль, а таких есть ещё парочка, тот же clearfix, когда вы задаете float:left, то родительский блок схлопывается и перестает считать высоту, для этого приходится добавлять псевдоэлемент-распорку с сбросом обтекания (clear:both;) так что у кого что не получается - гуглите, на многое есть решение.

От себя советую (т.к я уже умею верстать макеты) сначала изучить текстовую теорию, 30 часов курса смотреть такое себе, я помню ещё на htmlbook учил, но тогда html5 даже небыло) так что советую HTMLAcademy, наверно это щас лучший вариант, просто вам нужно выучить все нужные теги и свойства HTML/CSS и всё, а потом смотрите на ютубе "верстка сайта" вот я точно могу посоветовать этот канал девушки с милым голосом
https://www.youtube.com/user/sovietunionpictures/videos
Начинать советую с "Вёрстка простого макета" хотя на канале даже есть изучение основ HTML/CSS
Вот результат просмотра курсов Оксаны:

Просмотр доступен только для зарегистрированных пользователей

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

Народ,подскажите пожалуйста как она выделяет код и одновременно пишет в нескольких похожих местах? Что нажать,какая комбинация клавиш? И ,ведь, ни один **** на курсе даже не спросит.