Как быстро и эффективно научиться HTML и CSS
С развитием веб-технологий, в современном мире недостатка в информации нет. Любой желающий может найти книги, курсы, тренинги по интересующей теме. Информации много даже по очень экзотическим направлениям.
Казалось бы, теперь уж люди должны знать больше, иметь более высокий уровень интеллекта, вырабатывать новые навыки. Но к сожалению, это не совсем так. Как часто вам приходилось начать изучать что-то новое, а затем бросать это занятие не достигнув каких-либо существенных результатов?
Как часто люди начинают изучать новые иностранные языки, историю, программирование и другие дисциплины, так и не получив в итоге необходимый багаж знаний, умений и навыков?
При этом дефицита в информации нет. Даже наоборот. Так, с чем же связаны эти неудачи в изучении чего-то нового? Этим же вопросом задался и я, видя как много людей начинают изучать веб-разработку, верстку сайтов, а затем бросают дело на полпути. Либо продолжают учиться, но процесс обучения проходит очень медленно.
Но прежде всего, надо определиться, что именно он хочет и сколько готов за это заплатить.
Если ваша цель — создание сайта или блога, вам вовсе необязательно изучать программирование, просто прочтите мое пошаговое руководство по созданию блога и его монетизации.
Но если вы хотите стать веб-разработчиком — вам придется учиться и еще раз учиться.
Сейчас в сети достаточно материалов и по HTML, и по основам CSS. Однако, все же процент людей, успешно завершивших обучение и хорошо разбирающихся в этой теме не так много.
Вот я и решил написать статью о том, что мешает людям стать хорошими веб-специалистами, и как с этим бороться. Ниже вы найдете список вирусов, убивающих ваши мечты, и рецепт, с помощью которого вы достигнете поставленных целей.
Практика, практика и еще раз практика
По моему наблюдению, всех людей в общем можно разделить на два типа:
- Размышляющие
- Действующие
Это наблюдение очень важно в том плане, что люди часто изучают теорию, но на практике ничего не умеют. При постижении той же верстки сайтов, обучающиеся залпом смотрят все видеоуроки, но практиковаться не хотят.
Это порождает две проблемы:
- Люди не умеют применять полученные знания
- Полученные знания не остаются в памяти, потому как не привязаны к практической деятельности
Эти проблемы очень важны, потому что без умения внедрять полученные знания, все усердия на пути обучения становятся бесполезными. Особенно учитывая, что при создании сайтов перед веб-разработчиком часто встают нетривиальные, требующие творческого подхода задачи.
Решения у таких задач, конечно же есть, но их нужно найти самостоятельно. Ни один преподаватель не сможет вам обрисовать все сложности, с которыми вы можете столкнуться при создании сайта, и дать готовые решения.
Таким образом, практика играет наиважнейшую роль при становлении вас как веб-разработчика. Нужно будет сверстать не один десяток веб-страниц, прежде чем создать что-то стоящее.
Здесь возникает вопрос: каким образом лучше всего практиковаться? Ответ довольно прост: все задачи должны имитировать настоящую ситуацию. То есть вы должны решать задачи, с которыми сталкиваются в своей работе верстальщики.
Если вы изучаете, к примеру, веб-дизайн, вам нужно решать повседневные задачи веб-дизайнеров. Ну или хотя бы постараться это сделать.
Но как начинающему найти такие практические задачи?
Когда думаешь, как лучше практиковаться…Тут есть несколько вариантов.
Первое, это зайти на сайты фриланса, где работают программисты, и найти реальные заказы существующих проектов. Далее, выписать их для себя и начать искать решения.
Вам кончено за это платить не будут, но вы ведь только учитесь, правильно? Хотя есть и такие, которые имеют смелость на этапе обучения брать реальные заказы. Не завидую я некоторым работодателям)))
Минус такого метода заключается в том, что вы можете самостоятельно и не суметь решить поставленную задачу. В этом случае вам самому нужно просить помощи и совета у специалистов.
Второе, это работа над вашим собственным проектом. Задачи перед вами конечно в этом случае будут реальными, но в то же время непростыми. Опять же, зачастую многие проблемы будут сложно решаемыми для новичков.
Другая сложность состоит в том, что любой веб-проект требует немало усилий, за пределами программирования, наподобие создания контента, seo оптимизации сайта и прочего. То есть, это довольно сложно — развивать проект, и в то же время расти как веб-разработчик.
Третий, идеальный вариант — это решение готовых, адаптированных под уровень вашей подготовки задач. Задачи эти должны быть с готовыми решениями, конечно же. Чтобы в случае чего, вы могли найти ответ.
Этот вариант является идеальным для новичков, решивших изучить тему создания сайтов.
Но где найти такие готовые, продуманные задачи? Этим же вопросом задался и я. В итоге я пришел к выводу, что мне стоит создать базу задач и ответов под каждый аспект разработки сайта. Чтобы человек по шагам получал необходимое знание, и сразу же внедрял их, шлифуя свое мастерство.
В связи с этим я начну работу по разработке практических заданий для обучающихся HTML и CSS. Затем выложу ссылку на задания в этом посте. Также я укажу ее в своих видео на Ютюб канале и в профилях социальных сетей. Еще одним огромным плюсом данного решения является возможность живого общения со мной, и другими участниками сообщества.
А теперь, давайте рассмотрим, что еще нужно чтобы стать классным веб-специалистом.
Не распыляйтесь
В одной из прошлых статей я говорил про миф мультизадачности. К сожалению, многие люди уже страдают этим синдромом. Заключается он во взваливании на себя сразу нескольких задач.
В итоге внимание человека рассеивается, и он не может работать на полную мощь. Вспомните сами, сколько раз в течение часа вы смотрите на свой телефон, или заходите в соц. сети?
Мультизадачность сожмет вас в своих объятияхСколько раз вы посмотрели на свой гаджет, или проверили почту пока не дошли до этой части статьи? Если ни разу, можно пожать вам руку. Большинство же людей не умеют концентрироваться на чем-то более 5-10 минут.
Согласно исследованиям, после того как человек отвлечется от работы, ему в среднем требуется 25 минут, чтобы вернуть прежний уровень концентрации. Представляете как это непродуктивно, заниматься сразу несколькими делами?
Другая проблема заключается в том, что начав изучать верстку сайтов, многие сразу переходят к освоению веб-дизайна и других дисциплин. Такое распыление приводит к посредственным результатам во всех направлениях.
Конечно же, изучение чего-то на протяжении нескольких месяцев может вымотать, и уровень мотивации уже не будет как в начале. Намного соблазнительнее начать изучать что-то новое. Однако, с таким подходом далеко не уйдешь.
Тем более что HTML и CSS можно освоить за месяц на довольно неплохом уровне. При должном старании можно еще быстрее. Не попадайте в ловушку мультизадачности. Погрузитесь полностью в одну тему, затем переходите к другой.
Начинайте с основ
Ни для кого не секрет, что в сети есть довольно популярные базы знаний по HTML и CSS. Все бы хорошо, однако, изучение этих дисциплин по таким справочникам, где нет четкой структуризации информации сильно усложнит обучение.
Если вы слышали про закон Парето, то должны знать что 20% дел дает 80% результата. Таким же образом, существуют базисные вещи в верстке сайтов, которые вам нужно изучить. Именно на этом фундаменте будет расти ваше мастерство.
Остальные детали можно изучить потом. Многие нюансы вы узнаете уже во время практических занятий.
Повторение — мать учения
Память человека чем-то напоминает мышцы. Если человек занимается спортом и получает правильные нагрузки, его мышцы станут сильнее, выносливее и гибче. Таким же образом и память. Если ее тренировать, она станет намного сильнее.
При изучении темы сайтостроения очень важно постоянно повторять пройденный материал. Особенно если вы по какой-то причине перестали практиковаться. Не освежая память можно быстро потерять полученные знания.
Не бросайте дело на полудороге
Говорят что по прошлому человека можно более или менее спрогнозировать его будущее. В какой-то мере я с этим согласен. Зачастую люди не добиваются успеха, потому что имеют привычку бросать дела на полпути.
Это очень часто встречающийся недуг. И если человек имеет такую привычку, она может послужить ему плохую службу. Мой вам совет: если уж начали изучать HTML и CSS, то уж доведите дело до конца. Тем более вы теперь знаете, как это сделать наиболее быстро.
Я очень сильно удивился, когда прочитал об итогах исследований, в ходе которых людям нужно было выбраться из лабиринта постоянно выбирая одну из двух дверей. В конечном итоге каждая из них шла к выходу. Также они имели возможность сдаться в любой момент времени.
По итогам, более 90% людей сдались в тот момент, когда им оставалось буквально открыть еще одну дверь, которая вела к выходу. То есть, они сдались в тот момент, когда победа уже была на носу. Но их испугало неизвестность того, когда именно они найдут выход. Можно сказать, что им просто не хватило веры.
Информационный голод
Как-то я начал практиковать такой подход, как информационный голод. Суть ее заключается в том, чтобы не поглощать информацию, которая не имеет для меня практической ценности. Ну или по крайней мере постараться это сделать.
Сюда относятся новости, всякого рода передачи и прочее. Такой подход имеет несколько огромных достоинств.
Во-первых, это внимание. Наше внимание стоит очень дорого, чтобы тратить ее на незначимые для нас события и явления.
Во-вторых, со свежей головой намного проще осваивать полезную для себя информацию.
В третьих, у вас не будет повода вступать в ненужные разговоры, обсуждения и споры на бесполезные темы.
В-четвертых, ни для кого не секрет, что информация, предоставляемая СМИ не всегда является достоверной.
Шерлок советует: Не забивай голову ерундойЕсть много других причин не создавать из своего разума информационную свалку. Я лишь перечислил некоторые из них. Но даже их думаю достаточно, чтобы начать фильтровать входящую информацию. В общем, советую как-нибудь начать практиковать такой подход.
А на этом у меня все. Надеюсь, данный пост был для вас полезен. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- [popup_trigger tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
site4business.net
Как проще и быстрее выучить HTML и CSS
На самом деле при желании выучить и начать применять HTML и CSS можно за день-два. Стоит только грамотно подойти к процессу обучения и выбрать правильный источник информации.
В этой статье я хочу дать несколько советов тем кто решил пополнить свой багаж знаний и перейти грань визуального создания сайтов и заглянуть хоть немного под капат и узнать что и как работает.
Да WordPress нас балует и позволяет создавать простые проекты без знаний языков программирования.
Хотя языки HTML и CSS врядли можно назвать программными, это скорей всего языки гипер-текстовой разметки, но тем не менее они лежат в основе всего что мы видим в Интернете.
Я не буду Вас агитировать купить тот или иной супер-курс или тренинг. Нет я дам лишб несколько советов как лучше учить HTML и CSS и как добиться результатов.
Кроме этого я этой статьей открою новый раздел на Info-m в котором буду публиковать полезности по верстке, дизайну и другим фичам.
Итак поехали, с чего стоит начать?
1. Я думаю сначала стоит установить удобный и комфортный редактор для кода. Одним из лидеров на данный момент является VSC или Visual Studio Code от Microsoft
Я рекомендую качать редактор с оф. сайта и вот ссылка на скачивание.
Как установить нужный язык, я думаю найдете инструкции в сети их более чем достаточно. VSC гибко настраиваемы и расширяемый. Уже написаны тысячи расширений. Но я думаю Вам в начале будет и коробочной версии.
Тем кто захочет поизголяться о настроить редактор под себя вот видео, оно не мое, но мне лень снимать а Алексей (автор ролика) ну очень классно все объяснил и показал.
Начиная с этого поста я решил, что стоит публиковать чужие видео на своем сайте, тем более если это качественные ролики профессионалов.
Посмотреть другие редакторы кода можно вот на этой странице.
Поехали дальше!
Как изучать HTML и CSS, где брать информацию?
Просто тупо читая или наблюдая на экране Вы врядли что либо усвоите. Чтоб получить результат нужно выполнять задания и получать практику.
Ниже я приведу ряд источников и к каждому приложу краткое резюме.
1. HTML -академия
Крутой ресурс для кто начинает совсем с нуля.
Бесплатно регистрируетесь и в интерактивной, игровой форме проходите сначала входящий курс, потом сложнее и так далее. Курсы в основном там все бесплатные, есть интерактивная проверка заданий. Вобщем рекомендую для старта новичкам самое то.
Одно время думал завести себе там аккаунт для того чтоб вести своих подписчиков, но как обычно времени не хватает))
2. Видеокурсы.
Сначала я хотел выложить целый список бесплатных кусов, но к сожалению почти все они устарели а авторы не утруждают себя обновлением. Да, с переходом на HTML5 многое изменилось.
Поэтому я буду рекомендовать пока только один , который стоит пройти и получить первые навыки.
Курс Михаила Русакова, довольно содержательный и что хорошо он так же с домашними заданиями.
 | Бесплатный курс по HTML и CSS Больше 6-ти часов уроков + упражнения Получить курс |
Я даже планировал разместить все уроки этого курса на своем сайте с разбором ДЗ, если интересно пишите в комментариях.
Онлайн-тренинги!
Пожалуй один из самых подуктивных методов обучения. Отлично кода ты сначала смотришь видео, потом тебе дают задание и после еще и проверяют.
Я дам ссылки на два, один бесплатный и второй за символическую плату, но с классными наставниками.
Я не участвую в партнерках этих ресурсов просто рекомендую как хорошие источники знаний.
Тренинг от молодого программиста Артема Ивашкевича.
Довольно содержательный курс, начинаем изучение с самого нуля и до размещения HTML сайта на хостинге. Есть простые ДЗ, ответы , на которые вы размещаете в комментариях под уроками и Артем их проверяет.
Есть конечно задержки с проверкой, но ведь нужно понимать что проект бесплатный и Артем не может сидеть и «пасти» каждый комментарий.
Но тем не менее курс достаточно объемный, целых 55 видео, так что есть с чем поработать.
Второй тренинг , который я хочу порекомендовать это Веб-верстальщик Начало от wayup.in
Он платный, стоит, по моему 9 долларов. Но эти деньги вы платите за помощь наставника который проверяет Ваши ТЗ и ведет Вас.
Всего в курсе объемных 7 уроков, но уже к концу тренинга Вы сможете написать свой первы сайт на чистом HTML с CSS и даже поймете как работаю простые команды в JS.
Я даю ссылку, она не партнерская, Wayup до сих пор «жлобствует» и никак не подключит партнерскую программу.
Но курс действительно хороший и рабочий, поэтому я его смело рекомендую новичкам.
Вот пожалуй и все что хотел Вам сегодня рассказать.
В конце еще пара советов как лучше изучать и что делать дальше.
- Не расстраивайтесь если Вам с начала ничего не понятно, это бывает, пробуйте писать код и смотрите результат в браузере
- Не старайтесь все выучить и понять за 1 час. Теги HTML вы может и усвоите, но с CSS придется повозится.
- Больше практикуйтесь. Берите, создавайте чистый HTML документ и начинайте создавать структура первой страницы.
- Сделайте в своем браузере папку с закладками и складывайте туда полезные советы и подсказки, что найдете в сети
- Что не понятно, спрашивайте, буду рад подсказать.
Федор Ашифин.
Создание проектов под ключ любой сложности!Доводка сырых сайтов до кондиции
Разработка уникального дизайна под заказ
Верстка и натяжка на популярные ситемы: WordPress, MODX, OpenCart Обращайтесь, сделаем качественно и красиво! Skype: ashifin Viber/Mob: V+380503613708 Как заказать сайт?
info-m.pro
Курс HTML и CSS — верстка сайтов с нуля для начинающих
Начальный путь обучения будущих веб-мастеров должен начинаться с курса по изучению HTML и CSS, ведь это и есть ядро интернет сайта. Для открытия самой простой странички не нужен будет ни дизайн, ни сервер, ни язык программирования, достаточно создать грамотную HTML-разметку текста и написать сам текст. Всё остальное служит для улучшения эффективности сайта, то есть чтобы сайт нравился людям, то необходимо нарисовать красивый дизайн; чтобы сайт был многофункциональным и динамичным — необходимо установить сервер и написать на языке программирования PHP код; чтобы сайт начали находить в поисковиках Google, Yandex и т.д. — необходимо грамотно и структурировано составить текст. Поэтому мы начинаем изучать создание сайтов с верстки сайтов, а именно написанию HTML-разметки.Данный курс рассчитан как обязательный для всех. Уроки подойдут абсолютно всем, так как сложность будет расти по мере изучения основы html, а решать будем типовые задачи верстальщика на html примерах, и если до этого момента вы были чайником, то по окончанию курса вы без труда сможете ответить на вопрос «как сделать сайт html». Так же в этом курсе мы поверхностно изучим Photoshop — программа для работы с изображениями, это будет минимальный пакет джентльмена, необходимый для любого верстальщика. На последнем уроке мы сверстаем готовый HTML шаблон (готовый макет/дизайн сайта), а последним домашнем заданием будет самостоятельно выбрать из доступных шаблонов и сверстать полностью с нуля до конечного продукта!
Что такое HTML программирование? Создание сайтов в интернете начинается с дизайна. Дизайнер создаёт дизайн, который необходимо перевести в программный код: навигация, ссылки и кнопочки должны нажиматься, картинки должны быть независимыми с возможностью сохранять на компьютере, текст удобный и грамотно оформленный, его обязательно захотят выделить и сохранить для себя. Всем этим и занимается верстальщик, а именно пишет HTML разметку кода и CSS стили.
Курс HTML и CSS: с нуля для начинающих
school-php.com
Обучение CSS с НУЛЯ
«Введение в CSS» – первый урок учебника CSS. В этом уроке мы начнем обучение CSS и обсудим общие особенности использования каскадных таблиц стилей, такие, как подключение таблиц стилей, использование комментариев и т. д.
Одним из преимуществ таблиц стилей является то, что для их подключения и использования вам не понадобится каких-либо специфических знаний, а всю необходимую информацию вы сможете найти в рамках данного учебника.
Приоритет использования таблиц стилей .
Существует несколько способов задания таблиц стилей:
- внутри элемента HTML
- внутри элемента <head> страницы HTML
- во внешнем файле CSS
Если для некоторого элемента разметки HTML было определено более одного стиля, то ни будут последовательно каскадированны друг на друга по определенным правилам. Приоритет наложения стилей друг на друга представлен ниже:
- стили браузера по умолчанию
- внешние стили
- внутренние стили (стили, расположенные внутри элемента <head>)
- стили, присвоенные непосредственно HTML элементам
Благодаря этим правилам стили могут быть каскадированны друг на друга. Как видно из представленного списка стиль элемента имеет наивысший приоритет и если возникнет ситуация, что стиль элемента задает, к примеру, красный цвет элемента, а во внешней таблице прописано, что элемент должен быть черным, то элемент будет красным, т. к. стиль, присвоенный непосредственно внутри элемента имеет наивысший приоритет.
Подключение внешних таблиц стилей.
Использование внешних таблиц стилей является наиболее удобным способом организации разметки страниц. Для построения связи с внешней таблицей необходимо конструкцию вида <link rel=»stylesheet» type=»text/css» href=»style.css»>разместить внутри контейнера <head></head> , как это показано в примере:
<head>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
</head>
После этого создаем файл с названием style.css и прописываем внутри него необходимые css инструкции.
Комментарии CSS.
Для создания комментариев в CSS используется следующая конструкция:
для открытия комментариев служит символ «/*» и символ «*/» – для закрытия.
/* Первый комментарий. */
p
{
/* Второй комментарий. */
{
margin – left: 5pt; font – family: «verdana»;
/* Третий комментарий. */
font – style:italic;
}
Как вы и сами видите, комментарии могут быть расположены в любом месте CSS инструкции.
В данном уроке мы начали обучение CSS. Этот урок был водным и здесь мы разобрали основные особенности использования таблиц стилей. Язык CSS не сложен в усвоении и при должном желании вы с легкостью освоите его, изучив данный учебник.
В следующем уроке речь пойдет об основах CSS синтаксиса.
www.eltisbook.ru
Лучшие ресурсы для изучения html и css
Сайт дня (как попасть): Хочешь дешево купить iPhone?
Один из предыдущих постов на Shakin.ru назывался Как перестать работать на дядю.
Я решил продолжить эту актуальную тему. Я составил список лучших ресурсов для изучения html и css, чтобы помочь желающим в изучении этих вопросов. Помню, когда сам начинал вебмастером, мне очень не хватало подобной подборки качественных и полезных ресурсов.
Сначала немного определений:
Html (от английского «HyperText Markup Language» — язык разметки гипертекста) — это стандартный язык разметки веб-страниц.
Css (от английского «Cascading Style Sheets» — каскадные таблицы стилей) — это технология описания внешнего вида веб-страницы.
Без знания html и css вести свой сайт будет очень проблематично — даже счетчик статистики или тот же баннер поставить не получится. Не бегать же за помощью к специалистам или создавать тему за темой на форумах? Нужно просто взять и выучить.
По своему опыту могу сказать, что html и css можно выучить за 1 месяц. Конечно, я не говорю о профессиональных высотах — вы до них сами доберетесь при желании.
На мой взгляд, лучший способ выучить html, css, да и другие тематики, включая продвижение сайтов — это завести свой сайт и на нем практиковаться. Кстати, можете посмотреть первый созданный мною сайт по картам для игры Counter-Strike, созданием которых я тогда увлекался. Вот карты и их скрины, созданные стариком Глобатором в те времена, когда он еще не знал, что такое топ-10, тИЦ и PR, и беззаботно резвился на солнышке создавал трехмерные карты 🙂 . Я создал этот сайт за месяц, изучая html и css на практике.
Для того, чтобы выучить html и css, совсем необязательно быть техническим специалистом. К примеру, я вообще гуманитарий и по математике у меня в основном было «2» 🙂 . Так что выучить html и css под силу любому желающему. Перечисленные мною ресурсы подойдут также и для того, чтобы в любой момент вы могли с их помощью выяснить какой-либо интересующий вас момент по html и css.
Сайты для изучения html и css
Начну подборку полезных ресурсов для изучения html и css с сайта, по которому я сам занимался. Это Дикие уроки html, которые написала Валентина Ахметзянова ака Дикарка. Она настолько весело и интересно описала все необходимые моменты, что изучение html и css с помощью ее уроков превращается в увлекательное занятие. Кстати, можете почитать интервью Дикарки для блога Shakin.ru. Диких уроков вполне достаточно, чтобы выучить html и css на необходимом для работы вебмастером уровне.
Htmlbook.ru — один из самых полезных сайтов по html и css. Этот ресурс создан в 2002 году. Для новичков будет полезен раздел Шаг за шагом, в котором хорошо структурированы многое важные моменты.
🔥 Кстати! Я выпустил платный курс по продвижению англоязычных сайтов. Если интересует, можете подать заявку в ранний список через эту форму, чтобы первыми узнать о выходе курса и получить специальную скидку.Приглашаю вас подписаться на мои каналы в Telegram:
@shakinru — продвижение в рунете.
@burzhunet — англоязычное SEO.
Sdelaysite.com — блог Андрея Морковина, профессионального вебмастера, на котором вы можете найти много полезных материалов. Основная тема блога Андрея — верстка. В частности, рекомендую серию из 14 видеоуроков по верстке.
Dimox.name — отличный блог Димокса, на котором можно найти массу материалов по продвинутому использованию css, верстке, а также по другим темам.
Ruseller.com — css учебник и уроки по html и многим другим тематикам, полезным для вебмастера.
Html.manual.ru — хороший онлайн справочник по html. В левой колонке можно быстро перейти на интересующий вас пункт меню.
Спецификация по html — спецификация по html на русском.
Htmlcoder.visions.ru — полезные статьи по html. Причем это не просто скучные статьи, а действительно интересные материалы с профессиональными советами. На этом сайте также есть раздел со статьями по css.
Ru.html.net — онлайн учебник html и css с практическими советами и рекомендациями. Как и на предыдущем ресурсе, на этом сайте есть раздел с материалами по css.
Css.manual.ru — справочник-руководство по css. В статьях приводятся наглядные примеры с картинками.
Colorpilot.ru — как написано в названии этого сайта, это учебные странички. Которые, на мой взгляд, будут очень полезны новичкам.
Dimasweb.narod.ru — когда я зашел на этот сайт, то сразу вспомнил, что когда-то он мне очень помог разобраться в некоторых нюансах html и css. Там несколько необычная навигация, но к ней можно быстро привыкнуть.
Wcode.ru/html — краткие, но полезные уроки html. Ничего лишнего.
Xhtml.ru — секреты и советы по xhtml, а также по другим веб-технологиям.
Форумы и разделы форумов по html и css
Форумы — прекрасная возможность для новичков задавать вопросы и общаться со специалистами. Помню, когда я не мог вставить счетчик mail.ru на свой сайт или из-за лишней кавычки неделю не мог выяснить, почему мой сайт криво отображается — то я получал ответы на свой вопросы именно на форумах. Я благодарен тем добрым людям, которые мне тогда помогли, и продолжают помогать другим новичкам.
Forum.htmlbook.ru — форум, целиком посвященный html и css.
Html.by — полезный форум для вебмастера по html, css и многим другим тематикам.
Раздел веб-строительство на серче — можно найти ответы не только на вопросы по html, но и на смежные темы.
Англоязычные ресурсы по html и css
Если уровень знания английского позволяет вам читать и понимать английский, то это дает вам огромные возможности. Рунет — это капля в 2 с небольшим процента в океане мирового Интернета. Представляете, сколько там всего интересного? С помощью знания английского можно делать регулярные вылазки за пределы капли с целью самообразования и поиска полезных материалов 😉 .
Раздел html и css на nettuts.com — очень рекомендую вам посетить этот ресурс. В образовательном плане я считаю этот сайт самым полезным для вебмастера. Там масса подробных статей и видеоуроков по всем вопросам вебмастеринга.
W3schools.com/css — подробный справочник по css на английском. Также есть справочник по html.
Рубрика html и css уроков на webdesign.org — если вы хотите быть на волне технологии и быть в курсе всего самого нового в html и css, то этот сайт — для вас. Во как написал, даже самому понравилось 🙂 ! Уроки обновляются с завидной регулярностью.
Когда-то Глобатор добавлял туда свои уроки по Фотошопу, переведенные на английский. Мне нравилось делать экспорт своего контента в англоязычный интернет. Тогда я понял, как можно эффективно продвигаться в зарубежном интернете, если переводить свой уникальный контент на английский и распространять его в англоязычном интернете. Сейчас поищем. О, нашел! Вот мои уроки! Один даже заслужил Editor’s Peak в категории Photoshop Tutorials в августе 2006 года! Я узнал об этом только сейчас… *Слезы счастья покатились по его небритой щеке* 😉 …
Представляете, кем бы я был, если бы развивался дальше в теме Фотошопа? Я бы был настоящим монстром! Но я связался с SEO и прозябаю тут, набирая эти буквы скрюченными от мороза пальцами 🙂 . Да шучу, тут тоже тепло и неплохо кормят 🙂 .
Раздел html уроков на good-tutorials.com — очень, очень много полезных уроков по html с постоянными обновлениями. Также есть раздел css уроков.
Html раздел форума Digitalpoint — моего любимого англоязычного форума, на котором много действительно полезной информации. Естественно, как же без css раздела 🙂 !
Htmlcodetutorial.com/help — полезный англоязычный форум по html и css. На нем есть разделы по программированию, SEO и т.д.
Htmldog.com — оригинальный ресурс с уроками разного уровня сложности.
Желаю вам успешного освоения html и css!
Глобатор
Постовой (обмен постовыми): Твиттер, как источник трафика на блог. Советы и рекомендации
Crawling ..Ничего, пройдет и по нашей улице инкассатор
Десерт на сегодня — видеоролик и классных роботах, созданных по примеру животных:
Подпишитесь на рассылку блога с полезными материалами по SEO
Оцените, пожалуйста, статью, я старался 🙂 :
Загрузка…shakin.ru
Обучение работе HTML c нуля. Урок 1.
Данным циклом я хочу открыть серию уроков, посвященных HTML. Я принял такое решение, потому что мне хотелось бы попробовать обучить создавать пользователей сайты с нуля. Такая мысль была у меня в голове уже довольное долгое время. Лишь вставал вопрос, с чего начать, с HTMLили непосредственно приступить к установке движка и дальнейшей его настройки.
Но если начинать с изучения движка, то некоторая часть пользователей, которая не знает HTML, окажется обделена. Поэтому я решил начать с основ и сделать это так, чтобы даже любой новичок мог разобраться что да как.
Итак, что же такое HTML?
Сама аббревиатура расшифровывается как НурегТехt Markиp Laпguage (язык гипертекстовой разметки).
А если выражаться просто, то HTML – это специальный язык разметки, который объясняет браузеру, как отображать ту или иную веб-страничку. Т. е. каким шрифтом показывать текст, в каком порядке компоновать элементы, какие элементы отображать подчеркнутыми и т. д. И в зависимости от того, какой элемент будет встречаться браузеру, в соответствии с заложенными в сам браузер правилами, этот элемент так и будет отображаться. Однако, эти правила потом можно будет поменять, но об этом я уже буду говорить в своих следующих уроках, которые будут посвящены CSS.
Предлагаю для начала рассмотреть пример самой простой веб-странички, которая может быть. Сейчас вы не должны заострять свое внимание на том, что обозначают те или иные тэги. Всему свое время, для начала просто обратите внимание на то, где что находится в коде и как это всё соотносится с тем, что отображается в браузере. Рассмотрим пример документа HTML:
<html>
<head>
<title>Заголовок странички</title>
</head>
<body>
<h2> Один день из моей жизни</h2>
<h3>Подготовка к концерту</h3>
<p>Сегодня я проснулся рано, так как предстоял тяжелый день. Ведь сегодня я должен выступить на концерте перед сотней зрителей. А чтобы убедиться в том, что всё пройдёт хорошо, я должен повторить репетиционную программу</p>
<h3>Репетиция</h3>
<p>Всё прошло без сучка и задоринки. Из нашей команды никто не сбивался с ритма, и как оказалось все напрасно волновались.</p>
<h3>Концерт</h3>
<p>Все выступили отлично, хотя мне кажется был такой момент, когда наш барабанщик сбился с темпа. Но мы ловко выкрутились из ситуации.</p>
</body>
</html>Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad++) и сохранить файл под именем index.html где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.
Обратите внимание на то, что сами тэги при этом не отображаются, а отображается сам контент, который находится между ними. А отсюда вы можете сделать вывод, что тэги выступают в HTML в качестве оформительского элемента.
Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, — у HTML есть такая особенность.
И вот ещё такой совет, — когда пишите HTML-код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title и body вложены в тэг html. Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, — это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше — информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.
Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML-документе. Я говорю про эту часть:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Но даже если этой части и не будет, то большинство браузеров посмотрит на все это сквозь пальцы и всё равно отобразит вашу страничку. Однако такой фривольный стиль написания кода, при котором человек пропускает большое количество тэгов, является дурным тоном написания, поэтому желательно, чтобы все эти элементы были на вашей странице в любом случае. Иначе это может грозить проблемой совместимости с другими браузерами, что в результате сможет повлиять на внешний вид вашего сайта, и как следствие – посещаемости.
Кроме того, вы можете писать комментарии в HTML-документ, — это чисто служебная информация, которая предназначена исключительно для вас. Обычно это какие-то важные пометки, которые служат для вас напоминанием или просто чем-то, на что стоит обратить своё внимание. Комментарии не обрабатываются браузером и, а это значит что пользователь их не увидит. Пишутся они обычно вот так:
<!--Это комментарий -->
А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает .
Тэг html означает, что начинается вывод html кода.
head – раздел служебной информации. В числе прочего здесь находится title, который отвечает за текст в заголовке окна браузера. К этому разделу можно отнестись ещё как к информации, которую мы хотим рассказать браузеру о данной страничке.
body – начинается основная часть документа.
h2 – заголовок.
h3 – подзаголовок.
p – абзац.
На этом пожалуй всё! Если это был ваш первый HTML-документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS).
xn--d1accuej1b.xn--p1ai
Как изучить CSS и HTML
Здравствуйте ребята! Вот наконец-то я пишу свой первый пост на блоге, в котором хочу рассказать как я изучал языки программирования html и CSS. Сперва я хочу рассказать для чего я вообще решил изучать эти языки, и как они мне пригодились в итоге. Все началось с того, что я хотел узнать как правильно технически оптимизировать сайты. Я много изучал эту тему, читал статьи, спрашивал на форумах, на которых по большей степени умалчивали по данной теме. В результате плотного изучения данной темы, я пришел к выводу что большую роль процентов 50% в технической оптимизации сайта играет важную роль именно шаблон.
Почему шаблон? потому что именно шаблоны формируют весь исходный код страниц который индексируют поисковые роботы. Недавно я решил посмотреть и сравнить исходный код различных сайтов, что бы посмотреть на сколько они загажены вредными, и не нужными кодами. После просмотров несколько сайтов я ужаснулся от того на сколько там все было загажено, непонятные коды, скрипты, куча ссылок, и все это даже не скрывалось. Я представляю как сложно поисковому роботу индексировать такие страницы, а потом еще и ранжировать ужас просто. Дальше после изучения исходных кодов, и проведения исследование отношения поисковых систем к различным частям кода, я понял почему многие сайты плохо ранжируются и продвигаются.
Об этом я к статье еще буду писать статьи и возможно запишу видеокурс, но чуть позже. Если не хотите пропустить эти статьи подписывайтесь на обновления блога, так как это очень важная тема в технической оптимизации сайтов. Итак после проведения исследований я понял что мне срочно нужно изучить html и CSS что бы верстать свои шаблоны без мусора, или разбираться что и где нужно редактировать в существующих шаблонов.
Но это была не единственная причина начать изучать html и css. Еще до изучения технической оптимизации я хотел научиться создавать свои шаблоны, потому что в паблике брать не хотел так как шаблоны не подходили по тематикам, имели кучу ошибок, мусора, ссылок и.т.д Также я еще давно хотел понять структуру шаблонов, какие есть элементы и за что они отвечают. В общем накипело прижало и я все же решил! надо изучить эти языки.
Как я начал изучать CSS и HTML? — Когда я задал себе вопрос как же мне начать изучать данный язык, у меня было 2 варианта. Первый — начать читать статьи, блоги, книги по программированию, рыться на форумах, в общем так как лет 10 — 15 начинали нынешние гуру рунета по программированию. Второй вариант
— посмотреть готовые видеокурсы по программированию на языках CSS и HTML. Подумал я подумал и решил что лучше буду изучать вторым способом, это более актуально на сегодняшний день.
Сейчас уже нет смысла читать книги по программированию, когда в интернете ходит большое количество видеокурсов по этой теме, в которых не просто рассказывают а показывают сразу на практике. Согласитесь такой вид обучения лучше и легче. В общем! когда я решил посмотреть видеокурс по языкам CSS и HTML, я задал себе вопрос а какой курс смотреть? Дело в том что в интернете как я говорил очень много курсов по этой теме, но не все они качественные и понятные.
Многие просто записывают лижбы записать, и закончить урок. А другие наоборот рассказывают про каждый элементы и говорят почему они так делают. Смотрел я помню курс один по PHP где автор практически не чего не рассказывал а просто писал код и записывал на видео без объяснений. Как так можно обучать и чего то научиться я не знаю, по этому я тот курс так и не досмотрел. Но как я говорил есть и хорошие курсы где автора хорошо рассказывают и показывают что нужно делать. Первый видеокурс который мне попался это — «Создание успешного шаблона на Joomla 2.5» от Александра Куртеева.
Данный курс мне очень понравился, автор все хорошо и понятно преподнес в результате чего я сверстал первый свой шаблон для Joomla 2.5. Хоть курс был и хорошим, но мне этого было мало особенно в плане работы с CSS. Дальше мне попался видеокурс «WordPress мастер с нуля до премиум шаблона. В этом курсе автор с объяснениями полностью сверстал 3 шаблона на html, где использовал много элементов CSS, а также показал как верстать шаблоны под мобильные устройства.
После просмотра этих двух видеокурсов я сразу начал верстать шаблоны для своих сайтов, в том числе сверстал шаблон данного сайта. Потом я продолжил дальше изучать данную тему уже опираясь на отдельные элементы программирования которые мне нужно было внедрять на моих сайтах. Я начал смотреть на дизайны других сайтов, и понравившихся элементы которые мне нужны были, я просто разбирал их структуру и делал под себя. В итоге я все больше и больше стал набирать опыта и знаний других элементов CSS и HTML которые не использовал или не знал до этого.
Вот в принципе и все что хотел рассказать как я изучал CSS и HTML. Но помимо своего опыта я хочу дать рекомендации для тех кто решит изучать данный язык. Итак первое что я рекомендую вам сделать, это просмотреть видеокурсы о которых я написал выше, так как в них вы получите не только знания языка, но и научитесь создавать шаблоны и интегрировать их на CMS. Вторая рекомендация — посмотрите дополнительно видеокурсы от студии «WebForMySelf» «Практика резиновой верстки» и Практика адаптивной верстки (Под мобильные устройства).
И третья рекомендация! Когда вы будете изучать курсы, вы не просто смотрите их как фильм. Вы обязательно одновременно повторяйте за автором и сами пишите коды. А в добавок что бы изучение было эффективней, верстайте не то что делает автор, а верстайте свой шаблон по своему макету. Так полученные знания лучше осваивается в голове. Вот в принципе и все рекомендации которые я хотел вам дать для изучения CSS и HTML. Надеюсь данная мной информация вам будет полезной, и если вы решитесь изучать данные языки, то будете знать с чего начинать.
В принципе на сегодня все, скоро я выпущу статью в которой расскажу из-за каких ошибок в шаблонах ваши сайты плохо ранжируются в поисковых систем, это будет интересно не пропустите.
С Уважением Максим Довбня
kozachok.net