Трудности перевода языка HTML

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

Трудности перевода языка HTML

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

Решил я сделать на сайте кнопку «Карта сайта», которая сейчас у меня в сайдбаре стоит. То есть вставить изображение с надписью, щелкая по которому, мы переходим на страницу с «Картой сайта». Казалось бы, что может бы проще…Но с нулевыми навыками HTML-языка это становится непосильной задачей.

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

<div style=”border:1px solid #ccc;padding:3px;”>

<p>

<a target=”_blank” href=”http://sonmir.ru/karta-sajta” title=”Карта сайта”>

<img class=”alignnone” width=”120″ height=”45″ alt=”” src=”http://sonmir.ru/wp-content/uploads/2013/06/карта-сайта.jpg”>

</a>

</p>

</div>

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

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

Можно представить наш сайт живым человеком. Тогда все его тело будет структурой, написанной на HTML-языке, за цвет глаз, волос, одежду и украшения будет отвечать CSS-язык. То есть чтобы поменять допустим цвет волос, нам же не нужно перестраивать свои гены, достаточно всего лишь купить краску и перекрасить волосы.

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

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

Самоучитель HTML и CSS за авторством Е. В. Мальчук. В самоучителе порядка 400 страниц. Логически две части одна про HTML, вторая же посвящена CSS. Все объясняется на высоком уровне, с примерами и иллюстрациями.

Еще хочу порекомендовать два сайта, где можно подчерпнуть массу полезной информации. Первый из них htmlbook.ru. Здесь просто хранилище информации про языки для сайтостроения. Все четко и понятно.

Второй, но не менее интересный сайт, – tech-bussines.ru. Блог довольно молодой, но быстроразвивающийся. Мне нравится, что любой вопрос не останется без ответа. А самое главное – ответ 100% поможет. В общем, огромное спасибо Константину Хмелёву. У него на блоге много именно практических моментов применения языков HTML и CSS. Так что заходите к нему в гости, читайте статьи и задавайте вопросы.

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

На сим завершаю свою трескотню! А в комментариях жду от вас ответа на два вопроса:

1)      Как вы с HTML дружите?

2)      Были ли у вас курьезные и забавные случаи, связанные с HTML и CSS?

P.S. Не забывайте, если у вас есть какие-то вопросы по HTML и CSS, но не знаете, как с ним справится, то вам прямая дорога на блог Константина Хмелёва. Там полно толковых статей, где есть возможность найти интересующую информацию. А если нет, то смело пишите в комментариях. Нужно поддержать Константина в его начинаниях!

Также по тематике моего блога советую почитать статьи:

Вам понравилась статья? Тогда поделитесь с друзьями!
Ценные комментарии читателей
  1. Я тоже потихонечку начинаю “приручать” этого непонятного зверя HTML 🙂
    Ты прав, Игорь, не так страшен черт… Но все же мне, с моим абсолютно далеким от технических вопросов , мышлением – еще ой как далеко до точного понимания всех этих тонкостей. А разобраться хочется. Взяла сайт Константина в закладки. Буду, если что, обращаться. Спасибо за рекомендацию.

    • Sonmir:

      Мне в этом плане легче, так как склад ума технический, но с гуманитарным уклоном.
      Да, у Константина полезный блог!

  2. А для меня этот зверь страшен! Вот спросить еще хотела: насколько страшно наличие HTML и CSS ошибок на сайте (количество ошибок мы видим при анализе сайта). Самой лезь в код и что-либо исправлять – боюсь. Сайт вроде бы и так работает, но ошибки наверняка каким-нибудь боком вылазят

    • Sonmir:

      Как Вам сказать…в общем, если на сайте визуально их не видно. Значит, все ок. Но дело в том, что может быть код написан рационально и нерационально. Во втором случае он влияет на скорость загрузки страницы и некоторые другие аспекты.
      Разбираться в этом стоит, знание это пригодится!

  3. Ну вот – я этого зверя немножко знаю, как-то азы на курсах постигала, но азы…
    Смешных случаев было много – не закроешь тэг, а весь сайт набок слез… хотя и до слез доходило!

    • Sonmir:

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

  4. Ой, а я на эти наборы букв/цифр/знаков препинания раньше смотрела, как на иероглифы. Но пришлось познакомиться поближе, куда без этого. Особенно запомнилось, когда создавала страницу с подпиской на рассылку. Два дня в кодах ковырялась, методом тыка (ибо чтобы найти что-то на сайтах по html и css, надо же еще знать, как задать поиск). Но теперь зато не страшно 🙂

    • Sonmir:

      Было время, когда я тоже как иероглифы смотрел на них…
      Сейчас вроде свыкся с ними.
      В интернете много информации. Главное – знать, где искать. Вот у Константина отличный сайт. Там столько всего полезного нашел для своего блога!

  5. С HTML познакомилась в “Кулинарном Техникуме”, когда Светинька (Web-ресторан Дж.Оливера) объяснила, как должна выглядеть страница блога, с точки зрения роботов – заголовки, сниппеты и т.д.
    Сразу было отчаяние, что не разберусь, а потом нашла логику во всем этом.
    Еще, пользуюсь готовым шаблоном-шпаргалкой ” Html – за 30 минут” Светланы Канаевой. Там есть все, что нужно блогеру, при написании статей. А если что сложное – доверяю специалистам.

    • Sonmir:

      Интересно будет познакомится с этой шпаргалкой. Спасибо за рекомендацию!

  6. Да уж…все это каждому блоггеру знакомо, без этого никуда…

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

    • Sonmir:

      Анатолий тут важно просто разобраться. Регулярные занятие по 45 минут в день принесут плоды. Попробуйте так. И головные боли будут меньше беспокоить.

  8. Могу сказать, с HTML я пока на “ВЫ”. Но по мере развития сайта приходится либо самому осваивать, либо поручать кому-либо. Каждый выбирает исходя из своих финансовых возможностей.

    • Sonmir:

      Согласен! Но все же интересно и самому разобраться.

  9. Игорь, я с html не дружу, точнее – он со мной, наверно, суть в том, что когда редко пользуешься какими-то знаниями, то они утрачиваются, так и в этом случае.

    • Sonmir:

      Да, память нас часто подводит. Вот бы не забывать такую необходимую информацию.

  10. С HTML не дружу, это для меня темный лес.

  11. Иногда приходится лезть в код, делаю это дрожащими руками. Игорь, вы молодец что сами всё пытаетесь сделать. К фрилансерам обращаться иногда оказывается опасно. У меня подруга обратилась к одному такому “специалисту”, так он ей с сайтом напартачил, потом ещё шантажировать стал, у него все пароли на руках были.

    • Sonmir:

      У меня тоже у знакомой в коде наковыряли…Потом пришлось к другому человеку обращаться.

  12. Пытался я по- первости овладеть таким языком, но понял безысходность задуманного.

  13. Для меня язык HTML- темный лес и тихий ужас.

    • Sonmir:

      Нет там ничего ужасного. Если разобраться, все станет просто!

  14. Я тоже с HTML пока на “Вы” и шепотом…
    Руки дрожат, когда сталкиваюсь с подобными проблемами. Тем более был опыт, когда блог “улетел”.
    Игорь, спасибо за Ваши рекомендации! Обязательно воспользуюсь. Не страшно – когда огонек впереди.

    • Sonmir:

      Да, непритные моменты в жизни блоггера. Но это тоже опыт какой-то!

  15. Да, все это знакомо каждому блогеру, без этого просто никуда…

  16. Если привести далекую аналогию HTML это что-то вроде Ассемблера – языка низкого уровня. Интересно, а есть ли в ВЕБ программировании чти либо еще более элементарное?

    • Sonmir:

      Языки низкого уровня сложны в освоении. Аналогия и, правда, есть.

  17. С html дружу, с css тоже, но последний все еще продолжаю изучать. Могу порекомендовать превосходные бесплатные курсы Евгения Попова по html и css, после них я узнал много нового, хотя работаю с сайтами не один год.
    Мне кажется, что в нашем деле только два пути – либо не заморачиваться и платить специалистам, которые напишут нужный код на все случаи жизни, или постигать всё самому. Второе интереснее 🙂

    • Sonmir:

      Заметил, что дружите! У Вас приятное оформление на блоге, а начинка вообще!!!
      Согласен – учить самому и разбираться в этом – гораздо интереснее…

  18. Вот и я пытаюсь все и3учить сама! Я в процессе, но еще далека от совершенства. На блог к Констатину 3агляну, спасибо 3а рекомендации, Игорь!

    • Sonmir:

      Лучше самому все знать, чем кому-то платить деньги!

  19. Сколько я и с HTML и с CSS разбиралась, когда только в жж пришла! Вот уж точно новый непонятный зверь был )))) Но знания оказались очень полезны, и позже, когда сайт делала, очень пригодились. А в ЖЖ я к тому же сейчас сама дизайны делаю, используя CSS )))

    • Sonmir:

      Наверное, это очень интересно самому делать дизайны!

  20. Игорь, пришлось срочно покинуть сайт Хмелёва. WOT выдал, что у сайта плохая репутация – красная полоса…

  21. Когда-то пришлось познакомиться с Html, когда создавала свой первый сайт. Писала его вручную в блокноте. настолько это было тяжело, что теперь повторить подвиг и внести коррективы не подымается рука. А вот WordPress мне нравится как раз легкостью работы с ним.

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

    Сайт Константина оставила в закладках. Посмотрела по темам статей – нужное и полезное нам.

    • Sonmir:

      Надежда, Вы меня удивили. В блокноте написать сайт. Это заслуживает похвалы и уважения.

  22. Юлия:

    Нормально к коду отношусь, раньше страшно было, сейчас спокойно. привыкаешь к некоторым деталям. Обращалась к фрилансерам, отличная девушка попалась. кстати. нашла в поисковике.
    Не надо бояться, и пароль отдавать не обязательно, просто необходимо слить папку с нужными значениями.

    • Sonmir:

      Если грамотный человек попадается, то это хорошо, конечно!

  23. С HTML и CSS разбираться приходится, раз уж подался в блоггеры! Не скажу, что легко, не скажу, что все удается сразу. Но понемногу разбираемся… Игорь, спасибо за блог Хмелева, Посмотрел, понравилось.
    Со своей стороны могу порекомендовать блог под названием Seo-Маяк. Это блог Виталия Кириллова. Очень грамотно объясняет довольно сложные вопросы и по “технической части”, и по сео-оптимизации. Блог для начинающих (и не только). Очень отзывчив, помогает советом и частенько делом. Кажется, начал оказывать и платные услуги. Ссылку не даю,т.к. не знаю, как к этому отнесется Ваш Акисмет, или что там еще… Но если в поиске Яндекса набрать название блога – выдает сразу.

    • Sonmir:

      В интернете, правда, сейчас очень много информации. Сложно в ней…Столько всего. Я больше всего хочу научиться находить полезную информацию. Спасибо за совет. Обязательно воспользуюсь.

  24. Дополню. Для экспериментов с кодом, стилями нужно сделать блог на локальном сервере (напр., на Денвер). Установить Денвер, скачать и установить туда Вордпресс. И вперед! Угробить такой блог – он на вашем компьютере будет – не страшно.
    А перед любыми экспериментами на работающем блоге обязательно делать бэкап.
    (Это, Игорь, я для тех, кто боится). Не так страшен HTML, как его малюют…

    • Sonmir:

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