Изучаем HTML и CSS с помощью видео уроков

Продолжаем обучение вёрстке и дизайну. Сегодня, как я и писал ранее, мы рассмотрим книгу видео уроков по html, css и прочим сопутствующим технологиям. Итак, приступим.

Книга Евгения Попова "Все Технические Моменты Онлайн Бизнеса в Видеоформате"

Если вы пройдёте по вышеобозначенному линку, то получите довольно обширное описание курса с отзывами и всяческой статистикой. Однако я решил описать данный курс по-своему. Тут не будет материалов из курса (авторские права всё таки), а будет только перечень основных знаний, которые вы сможете почерпнуть из курса. Также будет высказано моё личное мнение относительно "полезности" того или иного курса.

Весь видео курс состоит из семнадцати отдельных курсов. Далее они перечислены.

1. Создание сайта
2. Курс по HTML
3. Курс по CSS
4. Macromedia DreamWeaver
5. Adobe Photoshop
6. Установка сервера
7. Электронные книги
8. Camtasia Studio
9. Flash Collection
10. Mind Manager
11. Установка форумов
12. Установка CMS
13. ShagIt
14. Navigation Collection
15. Graphic Collection
16. Всплывающие окна
17. Бонусный курс

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

Итак. Для начала нужно пройти Курс по HTML. Давайте сразу договоримся, в списке уроков я не буду указывать первый урок, который всегда называется Вступление и большой смысловой нагрузки не несёт. Автор обычно знакомит читателя слушателя с определённой технологией и указывает на её преимущества и возможности. В конце пункта указаны изученные в уроке тэги. Также в уроках изучаются и свойства тэгов.

1. Основы и каркас страницы. – Тут даётся понятие тэгов и их атрибутов, а также описана структура страницы и мета тэги. Тэги: html, head, title, body, meta (кодировка, keywords, description).
2. Работа с текстом. – Разбивка на абзацы, выравнивание, выделение заголовков. Тэги: p, h1.
3. Создание списков. – Виды списков и их атрибуты. Тэги: ul, ol, li.
4. Форматирование текста. – Шрифт, размер и цвет текста. Выделение текста жирным и курсивом. Тэги: font, strong, em.
5. Дальнейшее форматирование текста и вставка изображений. – Здесь рассматривается логическое выделение и вставка картинок. Также рассмотрена вставка линий. Тэги: div, img, hr.
6. Работа с гиперссылками. – Рассмотрена работа со ссылками. Конструкция ссылки, виды ссылок. Работа с якорями (линк для перехода внутри страницы). Теги: a.
7. Таблицы. – Работа с таблицами: создание, объединение ячеек и столбцов. Тэги: table, tr, td.
8. Фреймы. – Работа с фреймами. Тэги: frameset, frame, noframes.
9. Внешние объекты и JavaScript в html странице. – Вставка внешних объектов и javascript в html код. Вынос скриптов в отдельный файл.
10. Работа с формами. – Понятие форм. В данном уроке рассмотрено составление формы на примере формы отправки заказа на e-mail. Автор уделил особое внимание данному вопросу, поэтому элементы форм рассмотрены до мельчайших подробностей. Также вместе с автором читателю предстоит написать скрипт на php для отправки e-mail с помощью формы. Тэги: form.
11. Анализ сайта. – Данный урок полностью посвящён умению прочитать html код уже существующей страницы. Для примера использована главная страница сайта rupay.com. На данный момент сайта по этому адресу вы не увидите, поэтому просто смотрим ролик и внимаем.

В качестве вывода: данный курс будет очень полезен человеку, не знакомому с языком гипертекстовой разметки. Информация изложена максимально доступно и наглядно. В качестве бонуса могу добавить небольшой справочник тэгов HTML [] от Вадима Ласто. Упор при создании этого справочника/учебника делался на краткость и компактность. И хотя в нём рассматривается уже устаревшая 3.2 спецификация HTML, думаю, он будет вам полезен. А также выкладываю небольшой самоучитель по HTML[] от Влада Мержевича. Кроме уроков там есть вопросы и задания, которые нужно пройти для закрепления знаний.

Далее нам предстоит пройти вместе с автором Курс по CSS. Это очень интересная для меня технология, поэтому я лично довольно много внимания уделил именно ей. Изученные свойства здесь я решил не указывать.

1. Знакомство с CSS. – Здесь вы научимся создавать таблицы и присоединять их к html файлам. Также дано понятие классов и основы применения стилей.
2. Усложняем конструкции CSS. – Применение стилей сразу к нескольким тегам, применение стилей к вложенным тегам, понятие псевдоклассов.
3. Оформление текста. – Учимся изменять параметры, влияющие на отображение текста. Шрифт, выделение, жирность и прочее.
4. Работа с фоном. – Свойства фона: повторение, позиционирование в любой точке экрана, фон с помощью цвета, фон с помощью изображения.
5. Работа с текстом. – Выравнивание, выделение, украшение и трансформация текста.
6. Работа с рамками. – Виды и свойства рамок.
7. Отступы, поля, обтекание элементов. – Свойства отступов, полей, обтекание элементов.
8. Списки с помощью CSS. – Свойства списков. Изменение отображения.
9. Позиционирование. – Учимся размещать объекты в любом месте экрана с помощью CSS.
10. Альтернатива и автоматизация. – Альтернативные методы вставки стилей в html код. Автоматизация CSS с помощью программ.

В качестве вывода: курс подробен и лёгок для понимания, как и прошлый. Наглядность - главный козырь Попова. Для более детального изучения синтаксиса CSS могу посоветовать вам этот линк. Там следует выбрать раздел CSS по шагам и внимать написанному. Для изучения всех свойств с примерами можете использовать данный линк. Там же можно узнать какими браузерами поддерживается конкретное свойство. Или можете скачать эту книжку [] для того, чтобы не быть привязанным к Интернету. Изложенная информация идентична.

На сегодня пожалуй хватит. На днях читайте о продолжении обучения. Будет рассмотрен курс о программе Macromedia Dreamweaver. А также будет представлен мой первый экзамен. Имеется в виду, применение на практике навыков, полученных в первых трёх курсах. Кстати этот пост тоже написан в Macromedia Dreamweaver ;) До новых встреч!

--------------------

Хочу обратить внимание на блог Alternative Internet Project. Там можно найти статьи на темы: PHP-скрипты, софт, программы, SEO.

Павел, автор блога "Продвинем вместе свои сайты" объявил Мини-Конкурс: Баннер-креатив.

Также хочу сообщить, что СЕОшник раздаёт постовые.

И напоследок, хотелось бы представить вам Блог о верстке, творчестве и фрилансе Ильи Житенёва.

Хотите обменяться постовыми? Пишите в мыло или аську.