Для начала хочу сказать - изучать HTML CSS стоит только потому, что это основа интернета. Это первая ступенька на пути будущего веб разработчика. Да и вообще желательно знать, хотя бы основы и элементарные вещи простым людям, проводящим в интернете более одного часа в день.
Будет серия публикаций с самого начала, самым простым языком, для самых так сказать «нулёвых» людей, желающих подучиться. Попытаюсь рассказать с чего лучше начинать и почему именно так, а не иначе. Понятное дело у каждого свой путь, я пишу про свой. Все мысли изложенные ниже основаны на моём личном, практическом опыте и не являются истинной последней инстанции.
Подготовка к обучению занимает не более 15 минут. Для этого с самого начала вам понадобятся три базовых пункта:
1. Справочники
Необходимы справочники по HTML и CSS, либо шпаргалки. Перед началом желательно бы прочитать их хоть разок, чтоб иметь понятие в принципе, о чем идет речь и с чем это всё едят. Не поленитесь, прочитайте. В самом деле они очень лёгкие. Если вам кажется, что там море всего и никогда не запомнить – это ложное впечатление, не пугайтесь. Реально используется в основном с десяток HTML тэгов и с десяток CSS свойств, остальное достаточно редко.
Я держал под рукой справочник по HTML от Manual.ru и по CSS от Webber. За эти справочники авторам отдельный респект! Возможно именно благодаря им я не бросил эту затею и продолжил изучать направление.
Файлы со справочниками во вложении к этой статье, качайте. Пользуйтесь также онлайн версиями, если позволяет интернет, они более свежие чем мои.
Почему именно эти справочники? Сложно сказать, как-то так сложилось исторически. Возможно, они мне показались простыми, доступными и легкими для понимания.
Справочник по CSS сделан в формате .chm. Активно пользуйтесь поиском, очень полезно.
![]() |
| Справочники |
2. Текстовый редактор
Редактор вам нужен для написания кода. Никаких «дримвьюверов»! Новичкам, особенно новичкам(!), я сейчас рекомендую редактор – «Notepad++». Сам я начинал и работал года три исключительно в «FAR» с плагином подсветки кода «colorer».
Запомните - код должен писаться «ручками», никаких визуальных редакторов. Всегда всех, и меня в своё время, подмываело открыть крутой ХТМЛ редактор и по быстрому накидать мышкой кучу всяких приколов. Все это кажется забавно, легко и очень быстро до тех пор пока не сделаете где-то ошибку или что-то будет кривовато и надо будет подправить.
Как показывает практика, львиная доля времени уходит не на рутинное написание кода, а на поиск и отладку проблемы. Помучившись некоторое время человек бросает затею с мыслью – «всё фигня, это не моё». Именно по этому вы должны, особенно вначале, писать каждую букву своими руками и знать для чего вы её написали и где. Да, по началу вам может показаться писанина каким-то долгим и тугим процессом, но зато это будет осмысленно!
В процессе написания обращайтесь к справочнику. Смотрите какие свойства есть и за что они отвечают, не забывайте про синтаксис. В случае чего вы за секунды найдете нужное место в коде и внесёте необходимые правки т.к. вы знаете каждую строчку. Если будет ошибка набора или синтаксиса, место вам подскажет редактор подсветкой. Со временем скорость набора повысится, изучите клавиатуру, напишете макросы и производительность качественно вырастет. Лучше как говориться «день потерять, за то потом за пять минут долететь»! :)
![]() |
| Notepad++ |
3. Браузер
Он вам нужен для просмотра вашей писанины. Пользуйтесь Firefox с плагинами Firebug и Validator, для начала этого достаточно. Firefox самый предсказуемый и простой браузер с точки зрения написания HTML CSS кода. Плагин Firebug поможет вам визуально посмотреть на страницу, проверив нужный элемент и примененные к нему стили. Плагин Validator укажет на ошибку синтаксиса, подскажет как правильно. Плагины ставятся очень просто.
![]() |
| Firefox & Firebug |
Прикрепленный файл: html.manual.ru.rar(456.0 Кб)
Прикрепленный файл: webber-css.rar(164.3 Кб)



Комментарии (6):
какой смысл пальцем землю ковырять, если есть для этого лопата? чтобы лучше научиться копать?
Лично я видал много "копателей лопатой", скорость выполнения проекта(не путать со скоростью навалить кода), которых в разы ниже. :)
А вообще это дело сугубо личное, я даю рекомендации на основе своего практического опыта.
Сложнее теперь другое - понять, что и куда применять, чтобы код был не перегруженным и простым... не усложненным. Пробовала дримвьювер от Макромедиа, но код все равно набирала вручную, лишь иногда пользуясь автоматическим дописываем тегов (не в режиме дизайна, а в режиме кода). Упрощает. Но согласна с Грегом, что начинать в Notepad++ - правильно. И полезно.
Грег, вы хорошо пишете... Спасибо. Жду продолжение для начинающих!)
Приятно, что людям полезно и интересно.
Подкидывайте темы, может че-то нацарапаю на досуге ))
"Анализ предложенного макета и его разрезание"
Это тема НЕ технического плана. Как вырезать - есть куча уроков фотошоп. Скорее хотелось бы узнать о том, как опытный верстальщик оценивает макет и на что ориентируется при выборе методик верстки. Например: о градиенте (когда лучше картинкой на фон, а когда CSS), тени (используются ли CSS варианты или по старинке опять картинка)... потому что за свой недолгий опыт верстки я поняла, что каждый верстальщик это решает по-своему. Подозреваю, что в этом в первую очередь и проявляется его мастерство... Так же понимаю, что каждый макет уникален... но общие принципы-правила всё же есть, наверное?
"Фреймворки"
Материал в общем-то есть, если поискать, но вопрос в другом. Что выбрать новичку? Что стоит изучить, а на что не стоит тратить время? Или они не нужны и проще использовать свой код и свои наработки макетов?
HTML5
Вижу, что Вы верстаете с разными DOCTYPE и !DOCTYPE html там тоже присутствует. Все говорят, что будущее за HTML5... Так почему бы сразу на него не перейти? Чем он хорош и чем плох, что мешает верстать только по новым стандартам?
Простите, если темы сочтете слишком "новичковыми", но сколько не читаю - на эти вопросы у меня правда нет ответа.
Написать комментарий
Вы можете также оставлять комментарии, авторизовавшись в одной из социальных сетей: