Когда-то давно я захотел сделать свой первый сайт IT-тематики. Из этой области я знал только совсем простые азы HTML и пожалуй все. Но желание и смелости у меня было хоть отбавляй, поэтому без особой боязни я зарегистрировал свое первое доменное имя.

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

Я, полный решимости, зарегистрировал свой первый домен и принялся достигать поставленные цели. В то время я знал, что большинство сайтов, которые есть в Интернет, работают на различных уже готовых системах управления материалом, то есть CMS. И первой моей задачей было - найти CMS.

При выборе CMS я обращал внимание только на одно - CMS должна быть не требовательной к ресурсам сервера, так как желание, наверное, каждого новичка в этой области, свести к минимуму все затраты. Ну, то что CMS должна быть блоговой это понятно.

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

При колоссальной производительности эта CMS может размещаться практически на любом хостинге, где есть MySQL и поддержка PHP. В данный момент я использую недорогой хостинг, не VPS, и размещаю на нем 16 сайтов. Суточное посещение всех сайтов равняется примерно 5000 уникальных посетителей в сутки. Я думаю, что это хороший показатель производительности Textpattern.

Основной проблемой, с которой я столкнулся после установки этой CMS, это абсолютное мое незнание основ CSS. Я по крупице выуживал информацию из русскоязычного сообщества, пока в итоге не наткнулся на сайт http://htmlbook.ru . До этой своей находки, я подумывал о покупке книге по CSS, но теперь я даже рад, что не успел этого сделать, так как это была бы очередная покупка нового пылесборника.

На сайте HTMLbook я нашел очень много хорошо структурированной информации. Для новичка - это просто клад. Я и сейчас нередко обращаюсь в к этому ресурсу, так как все запомнить нельзя, да и не нужно это. Главное знание человека - это знать где достать то, что тебе нужно!

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

P.S. Всегда дивлюсь, когда забредаю на какой-нибудь "блог начинающего манимейкера" или как сейчас модно "бомжа", который пытается заработать кучу денег, но толком не представляет как самостоятельно сделать уникальный дизайн для своего сайта и получается что есть куча бомжей похожих друг на друга. Можно конечно и заплатить за дизайн, но копейка рубль бережет, да и никто лучше не сделает, как Ты сам.

HTML - это сокращение от Hyper Text Markup Language (язык гипертекстовой разметки), на этом языке создаются сайты. Если вы никогда не программировали, изучение может показаться сложным, но, на самом деле, все что вам нужно, чтобы начать обучение - это простейший текстовый редактор и браузер. Вы узнаете, каким образом HTML влияет на текст, верстку различных сайтов и так далее. Знание HTML будет крайне полезным для любого пользователя интернета, и изучение основ займет меньше времени, чем вы думаете.

Шаги

Изучение основ HTML

Откройте файл HTML. Большинство текстовых редакторов (Блокнот или Word для Windows, TextEdit для Mac) могут быть использованы для создания файлов HTML. Создайте новый документ, и сохраните его (Файл > Сохранить как) в формате веб-страницы, или измените расширение файла на ".html" или ".htm" вместо ".doc," ".rtf," или другого расширения.

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

• Обратите внимание, что таким образом вы не создаете сайт в интернете. У других людей не будет доступа к этой странице, и вам не нужен интернет, чтобы смотреть свою локальную страницу. Браузер просто интерпретирует HTML-код, который ему дают, неважно, в интернете он, или у вас на диске.

1. Выучите теги разметки. Теги не отображаются на странице, в отличие от обычного текста. Вместо этого они указывают браузеру, каким образом надо отображать страницу и ее содержимое. "Открывающий тег" содержит инструкцию. Например, есть тег для полужирного текста. Также нужен "закрывающий тег", для разграничения области применения инструкции: в этом примере текст между открывающим и закрывающим тегами отобразится в полужирном начертании. Теги записываются внутри знаков неравенства, но закрывающий тег начинается с косой черты.

   • Открывающий тег записывается между знаками неравенства: < Открывающий тег >
   • В закрывающем теге перед дескриптором (названием) тега ставится косая черта: )
   • Читайте дальше, чтобы узнать об использовании тегов. Для этого шага достаточно запомнить формат записи, теги записываются между знаками неравенства: < > и
   • В некоторых самоучителях HTML, теги называют "элементами", а текст между открывающим и закрывающим тегами называют "содержимым элемента".

2. Наберите в редакторе тег . Каждый файл html должен начинаться с тега и заканчиваться тегом . Эти теги указывают браузеру, что все содержимое между тегами написано на языке HTML. Добавьте эти теги в файл:

   • Наберите вверху документа.
   • Нажмите enter несколько раз, чтобы создать несколько пустых строк, затем наберите
   • Все примеры из этой инструкции набираются между этими двумя тегами.

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

   • Между тегами и , напишите
   • Между тегами , напишите Как выучить HTML - wikiHow .
   • Сохраните изменения и откройте файл в браузере (или обновите страницу, если файл уже открыт). Текст должен отобразиться в названии страницы, над адресной строкой?

4. Создайте секцию . Все остальные теги и текст в этой примере записываются в секцию body, содержимое которой отображается на странице. После закрывающего тега , но до тега , добавьте теги и . До конца этой инструкции работайте с секцией body. Ваш файл должен выглядеть примерно так:

5. Добавьте текст, используя различные стили. Пришло время добавить настоящее содержимое страницы! Все, что вы напишете между тегами body, отобразится на странице после обновления в браузере. Не используйте символы < или > , поскольку браузер попытается интерпретировать содержимое как тег, вместо текста. Напишите Hello world! (или что захотите), затем попробуйте добавить эти теги к тексту, и посмотрите, что получится:

   • Hello world! выделяет текст "курсивом": Hello world!
   • Hello world! выделяет текст "полужирным": Hello world!
   • Hello world! зачеркивает текст: Hello world!
   • ^{Hello world!} отображает шрифт в виде верхнего индекса: Hello world!
   • _{Hello world!} отображает шрифт в виде нижнего индекса: Hello world!
   • Попробуйте разные теги вместе: Как будет выглядеть Hello world! ?

6. Разделите текст на параграфы. Если вы попробуете написать несколько строк текста в файле HTML, вы заметите, что разрывы строк не отображаются в браузере. Абзацы определяются следующими тегами:

   • Это отдельный абзац.

   • После этого предложения следует разрыв строки.
     тег до начала этого предложения.
     Это первый тег, не требующий закрывающего тега. Такие теги называются "пустыми".
   • Создайте заголовки, чтобы показать названия разделов:
     

     текст заголовка

     : Самый большой заголовок
     

     текст заголовка

     (заголовок второго уровня)
     

     текст заголовка

     (заголовок третьего уровня)
     

     текст заголовка

     (заголовок четвертого уровня)
     

     текст заголовка

     (самый маленький заголовок)

Научитесь создавать списки. Есть несколько способов создания списков на странице. Попробуйте нижеизложенные варианты, чтобы узнать, какой вам больше нравится. Обратите внимание, что список помещается между двумя тегами (например для маркированного списка), и элементы списка тоже выделяются специальными тегами, например .

• Маркированный список:
  
  • Первая строка
  • Вторая строка
  • И так далее
• Нумерованный список:
  
  1. Один
  2. Два
  3. Три
• Список определений:
  

  Кофе

  - горячий напиток

  Лимонад

  - холодный напиток

7. Сверстайте страницу, используя разрывы строк , горизонтальные линии, и картинки . Пришло время добавить что-то кроме текста. Попробуйте следующие теги, или перейдите по ссылкам, чтобы получить больше информации. Используйте онлайн-хостинг, для создания ссылки на картинку, которую вы хотите разместить:

   • Перевод строки:
     
   • Горизонтальная линия:

     ---

   • Вставить картинку :
8. • Создайте якорь тегом в месте страницы, на которое вы хотите сослаться. Придумайте точное и запоминающееся название:
   • Используйте тег , чтобы создать относительную ссылку или ссылку на внешний ресурс:
   • Чтобы сослаться на относительную ссылку другой страницы, добавьте знак # после основной ссылки и название якоря. Например, ссылается на раздел советов этой страницы.

   Продвинутый уровень HTML

   Выучите атрибуты. Атрибуты записываются внутри тега, указывая на дополнительную информацию. Формат атрибутов такой: название="значение" , где название определяет атрибут ("color", для атрибута цвета), а значение указывает на его значение (например "red", для красного цвета).

   • Атрибуты на самом деле уже применялись в предыдущем разделе основ HTML. Тег использует атрибут src , якоря относительных ссылок используют атрибут name , а ссылки используют атрибут href . Как вы уже заметили, все атрибуты записаны в формате ___="___" ?

   1. Поэкспериментируйте с таблицами HTML. Создание таблицы предполагает использование различных тегов. Вы можете поэкспериментировать, или прочитать инструкцию .

      • Создайте теги таблицы:
      • Содержимое каждой строки таблицы заключите в теги:
      • Заголовок столбца определяется тегом:
      • Ячейки в последующих строках:
      • Пример использования этих тегов:

        Столбец 1: Месяц	Столбец 2: Сэкономлено денег
        Январь	100 рублей

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

Представляете, кем бы я был, если бы развивался дальше в теме Фотошопа? Я бы был настоящим монстром! Но я связался с SEO и прозябаю тут, набирая эти буквы скрюченными от мороза пальцами 🙂 . Да шучу, тут тоже тепло и неплохо кормят 🙂 .

Сейчас трудно представить себе человека, работающего с Интернетом, и не знающего что такое html. Многие хотят выучить этот язык. Казалось бы, чего же проще - существует пугающе огромное число книг, посвященных этой теме. Неужели, язык html такой сложный, что ему посвящены огромные тома?

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

Для начала, я хотел бы привести примерный план этой статьи. Если кому-то что-то не интересно - может смело пропустить.

• Какие тэги нужно знать
• А как сделать красиво?

Что такое html и зачем он нужен

html - это не язык программирования, как многие думают. Это всего лишь, язык разметки. Его назначение - определять структуру документа. Если кто-то вам скажет, что html нужен, чтобы определять внешний вид странички - не верьте ему! Этот человек либо из прошлого, либо не совсем понимает предмет.

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

Поддержкой html, как и многих других технологий, связанных с web, занимается консорциум W3C . Если вы хотите узнать все из первых рук - пожалуйте на их сайт. Но должен вас предупредить: спецификации, выпускаемые W3C, носят рекомендательный характер, поэтому браузеры всегда по-разному воспринимают один и тот же html код. Это делает верстку гораздо сложнее, чем она есть на самом деле.

В настоящее время последняя спецификация html имеет номер 4.0. Есть так же, язык xhtml, который гораздо более требователен к разработчику, потому что содержит более жесткие стандарты. Так, тэги в html могут писаться в любом регистре, а в xhtml - только в нижнем. И так далее. Я придерживаюсь спецификации xhtml и буду ниже описывать ее.

Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему сруктуру вашего документа. Прошу заметить: структуру . За внешний вид сегодня отвечает другая технология — CSS, разговор о которой пойдет ниже. Для того, чтобы выучить html, по сути, нужно выучить набор тэгов и их аттрибутов и все! Можно приступать к созданию тестовых сайтов.

Какие тэги нужно знать?

Для того, чтобы начать работу, нужно выучить небольшой набор тэгов. Сейчас я приведу их перечисление, сгруппировав по определенным признакам. (Группировка является моим субъективным видением предмета и не претендует на абсолютную истинность)

• Основные: html, head, title, body;
• Структурные: div, span;
• Текстовые: p, ul, ol, li, h1-h6, br, pre;
• Таблицы: table, tr, td;
• Ссылки: a;
• Мультимедиа: img, object;
• Фреймы: frameset, frame, iframe;
• Формы: form, input, textarea, label, select, option;
• Факультативные: hr;
• Специальные: script, link, meta;

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

Кто-то может возмутиться и сказать, что знает другие тэги, которые работают. Да, действительно, я привел список не всех тэгов, поддерживаемых браузерами. Однако, эти тэги являются основными, и человек, который знает их может сказать, что он знает html. Я нарочно не включал в свой список тэги типа font, которые являются устаревшими. Эти тэги настолько плохи, что даже говорить о них нет смысла, потому что сейчас есть значительно более мощные средства, позволяющие управлять внешним видом страниц и их частей. Лично я считаю необходимым и достаточным знание вышеприведенных тэгов. Потому что остальные либо нужны очень редко, либо не нужны вовсе. А посему, я предлагаю начинать изучение html с изучения этих тэгов.

Как сделать красиво?

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

Сейчас практически ни один сайт не обходится без применения технологии CSS. Именно на CSS возложена миссия определения оформления документа. Фон страницы, отступы, выравнивания, шрифты, цвета и многое другое находится в компетенции CSS. Поэтому сейчас рекомендуется не использовать теги и атрибуты, определяющие оформление страниц и элементов, а использовать вместо них правила CSS. О том, как же применять CSS лучше почитать в книгах. Но я хочу сказать, что если вы встретили тэг или атрибут, определяющий внешний вид элемента, 10 раз подумайте, прежде, чем применять его! Лучше узнайте, какое правило CSS отвечает за отображение элемента в таком виде, в котором вы хотите его видеть. За очень редким исключением, такое правило находится всегда.

С чего лучше начать изучение верстки?

Верстать лучше всего начинать после того, как поймешь принципы работы веб. Лично я бы составил такой план обучения:

1. Изучение принципов работы web и структуры клиент-сервер
2. Изучение тэгов и их атрибутов, с практическими занятиями по их применению
3. Изучение правил CSS с практическими занятиями по их применению
4. Изучение табличной верстки
5. Верстка простого макета таблицами
6. Верстка сложного макета таблицами
7. Изучение директив DOCTYPE
8. Изучение блочной верстки (тэг div)
9. Верстка простого макета дивами
10. Верстка сложного макета дивами
11. Хитрости, приемы, хаки и прочие премудрости от гуру

В принципе, для начального уровня подготовки и знания основ html, достаточно пройти только первые 5 пунктов. (такой вариант будет идеальным для веб-программистов, которые не будут верстать сайты. Знание html им нужно только для того, чтобы выводить данные, полученные в результате выполнения скрипта.)

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

В этой статье я хочу подсказать вам, как наиболее быстро и эффективно изучить этот язык, чтобы уже через месяц-два вы отлично его знали. Думаете, невозможно? Я начал изучение html в конце марта. В конце мая я уже без проблем знал 90% нужных для работы тегов.

Как выучить язык бесплатно?

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

Из справочников я могу посоветовать вам – htmlbook . Это реально крутой сайт, на котором собраны все теги, показан результат их работы с подробным описанием. Но справочник это лишь дополнительный инструмент, наибольшего эффекта можно добиться при реальной практике.

Интерактивные курсы

И тут я говорю об интерактивных курсах. Это возможность писать код и сразу видеть, как он отображается. На курсах вам будут давать задания. Сначала простые, например, превратить текст в заголовок или сделать таблицу. Потом – сложнее. В конце концов вы обретете понимание того, что можно делать с помощью HTML. Если вы думаете, что за это нужно платить, то ошибаетесь.

– это замечательный сайт с курсами по html и css. Первые 16-18 курсов бесплатно! Если вы захотите продолжить обучение и получить доступ к платным, то придется платить 300 рублей в месяц или 1800 в год. Лично я отдал 300 рублей, прошел за месяц все платные курсы и получил от этого много пользы.

Важность записей

Еще один совет от меня – записывайте! Записывайте всю новую и важную для вас инормацию. Не записав вы рискуете так и не закрепить в памяти нужные знания. Лично у меня на полке лежит три общих тетради, практически полностью исписанных и время от времени я заглядываю в них, когда забываю то или иное свойство.

Параллельное изучение html и css

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

Самостоятельная практика

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

Уроки от команды webformyself

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

В конце концов, у вас должна быть цель, по которой вы изучаете эти веб-технологии. Обычно это делают для того, чтобы научиться самостоятельно верстать макеты сайтов. Если у вас тоже есть такая цель, то отличным вариантом для вас будет приобретение доступа к премиум-урокам на сайте webformyself.com . В итоге вы можете получить не только доступ к урокам по HTML и CSS, но и много других. Например, по JavaScript и WordPress.

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

За сколько можно выучить языки?

В среднем, HTML и CSS можно выучить очень быстро, при правильном подходе. Например, у меня на это ушло несколько месяцев. Если знать, где брать знания, то процесс изучения можно ускорить в несколько раз.

Хорошие сайты с полезными материалами я вам дал – дальше ваше дело. В принципе, вышеперечисленные ресурсы являются наилучшими в интернете. Например, курсы от Htmlacademy прошли более ста тысяч человек, а на обновления Webformyself подписаны больше 87 тысяч людей.