HTML и CSS — зачем их нужно знать и почему познания в PHP и MySQL нужны, но в гораздо меньшем объеме. Почему CSS так важен Что такое этот CSS

Здравствуйте, уважаемые читатели блога сайт. Сегодня я хотел бы поговорить о том, зачем вам может понадобиться при вашей работе с сайтом знание языка HTML (читайте про то, что это такое ), основы работы с таблицами каскадных стилей CSS (вступительную статью по теме вы найдете ), а так же понимание хотя бы основ и принципов , построения программ на языке PHP и логики работы с базами данных MySQL.

позволяет делать сайты, не владея все упомянутыми выше премудростями, но при этом у вас по ходу работы, наверняка, будут возникать вопросы и проблемы, которые вы не сможете решить средствами даже самой навороченной CMS (Joomla, WordPress, Друпал и т.д.).

Зачем может понадобиться при работе над сайтом знание языков (разметки, стилей, серверного программирования)

Либо вы не найдете такого пункта в админке CMS среди множества других настроек (логика авторов движков при размещении некоторых пунктов настройки остается непонятной и, возможно, здесь играет определенную роль сила привычки самого автора), либо разработчики вообще не включат такой пункт в админку системы управления контента. Невозможно реализовать настройки для всего через админку — туда, обычно, выводят только самые необходимые и часто используемые настройки.

Зачастую бывает проще решить проблему не штатными, предусмотренными в админке движка средствами, а напрямую, правя что-то в базе данных или же корректируя содержимое определенных файлов движка через доступ к ним по ФТП.

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

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

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

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

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

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

В каком редакторе лучше править или вносить изменения в код

Ничего сложного в этом нет, ведь по сути это даже не язык программирования, а гипертекстовая разметка, нечто похожее на синтаксис в русском языке. Что хотелось бы сразу посоветовать, опираясь на собственный опыт? Пробуйте писать теги самостоятельно в блокноте, типа Notepad++ (читайте мой ), а не в программах, типа Дримвьювер. Почему?

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

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

Хотя, это мое личное мнение (ИМХО) и вам решать, что удобнее. Например, Евгений Попов , по курсам которого я изучал все это дело, судя по всему, приверженец Дримвьевера. Важно в принципе одно – чтобы вы правили код в том редакторе, который способен сохранять все внесенные изменения и который может, при желании, вернуть все как было (взад).

В этом случае, как бы вы не напортачили, все будет поправимо. И, конечно же, очень удобна подсветка синтаксиса языка, на котором вы пишете или редактируете код. Notepad++ — это безусловно мой выбор! О его возможностях я рассказал в приведенной чуть выше статье.

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

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

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

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

Какие инструменты вы сможете использовать

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

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

В ближайших постах я собираюсь подробно рассказать, как использовать эти программы для эффективного решения возникающих проблем с сайтом. Да, чуть не забыл про незаменимую программу, позволяющую получить доступ по FTP – FileZilla ( уже имеется статья на эту тему). Ну и про мы, конечно же, тоже поговорим.

Ну вот, цели намечены, задачи поставлены, осталось только их выполнять. За сим разрешите откланяться.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно


Красивые русские шрифты для сайта и компьютера в онлайн сервисе Google Font - где скачать и как установить Адаптивный (отзывчивый) дизайн - оптимизация сайта для его просмотра на мобильных устройствах
Gif, Png или Jpg - форматы растровой графики для веба, их плюсы и минусы при использовании на сайте

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

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

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

Разделение представления сайта от его содержимого.

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

Увеличение скорости загрузки сайта.

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

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

Совместимость CSS с современными браузерами.

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

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

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

Что такое этот CSS

CSS можно назвать формальным языком описания визуального вида документа. Полностю CSS звучит как Cascading Style Sheets , что русскому человеку понятнее Каскадные таблицы стилей, то есть КТС. КТС ясное дело никто не использует, а принято использовать CSS. Язык CSS появился в 17 декабря 1996 года.

Зачем нужны стили CSS в отдельном файле

Чтобы прописать стили в html, нужно внутри .. прописать ваши правила в теге

внутри которого пишутся правила. Он сам прописывается тоже в

— Если вы решили указать стиль прямо внутри содержимого , то следует использовать параметр style=»…»

Правильные правила для CSS и как комментировать в CSS

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

Написание выглядит так селектор { свойство: значение; }, если нужно применить несколько селекторов, пишем их через запятую , если несколько правил через точку с запятой . В конце всегда точка с запятой.

Чтобы закоменнтировать какой-либо текст в CSS нужно взять текст в такие вот кавычки /* текст */ и все 🙂

Как обещал, наглядные примеры CSS :

p {
font-family: Verdana;
background: white;
color: red;
}

Селектор здесь p, то есть для любого абзаца с тегами будут применяться данные правила. Чтобы вы не писали сверху, абзац будет белый с красным текстом шрифта Verdana. Даже если общий фон желтый, а шрифт другой.

У меня есть этот html:

Parting is such sweet sorrow! - Bill Rattleandrollspeer

И этот css (добавлен в конец сайта Site.css):

Fancify { font-size: 1.5em; font-weight: 800; font-family: Consolas, "Segoe UI", Calibri, sans-serif; font-style: italic; }

Итак, я бы ожидал, что цитата ("Parting - такая сладкая скорбь!") будет выделена курсивом и другого шрифта, чем имя цитаты (Bill Rattleandrollspeer), поскольку его тег span имеет класс "fancify", прилагается к нему. Класс следует обязательно увидеть, поскольку файл, в котором он появляется, ссылается на файл макета, который использует файл Site.css.

Какую ошибку новобранец я делаю сейчас?

UPDATE

Я подумал, может быть, проблема в том, что я добавил новый класс в Site.css после этого раздела в этом файле:

/******************** * Mobile Styles * ********************/ @media only screen and (max-width: 850px) {

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

ОБНОВЛЕНИЕ 2

Вот как сходит HTML:

И вот мое правило css в Site.css:

P span label .fancify { font-size: 1.5em; font-weight: 800; font-family: Consolas, "Segoe UI", Calibri, sans-serif; font-style: italic; display: inline; }

Но это не распознается. Я считаю это казнью css/html протокола и должен быть рассмотрен каким-то мировым телом. Опять же, я мог бы совершить какую-то глупую ошибку.

  • Tutorial

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.

1. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:
  • не закрыт тег;
  • не рекомендованные символы в ссылках;
  • используется не рекомендованный тег;
  • не указан обязательный атрибут;
  • и другое.

2. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM) . Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

3. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

4. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

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

5. Много селекторов

Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.

/* не рекомендуется, большая вложенность */ .page .item .title a {} /* можно сократить */ .page .item a {}
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента.item.

6. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

Ошибка в коде

Ошибка в коде

7. Неправильное названия классов

Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс.green.

Текст сообщения


Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс.green и заменять его на.blue.

Текст сообщения

Текст сообщения

8. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

P { /* не правильно */ letter-spacing: 1.5px; /* правильно */ letter-spacing: .005em; }

9. Использование классов вместо id

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

#modal a { color: blue; } /* цвет ниже не получится переопределить, т.к. #modal имеет больший вес, чем у классов */ .modal-header a { color: #333; } /* в этом случае придётся добавить #modal */ #modal .modal-header a { color: #333; }
Также не рекомендуется использовать!important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню

Меню должно быть оформлено как список.

Главная Новости О компании

  • Главная
  • Новости
  • О компании

11. Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

12. Теги

На странице должен быть только один заголовок в теге

. В основном, в этом теге находится название страницы.

13. Транскрипция

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

/* неправильно */ .tovar {} .stranica {} .zapros {} /* правильно */ .product {} .page {} .query {}

14. Clearfix

Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.

Класс.clearfix надо указывать в родительском теге, а не ставить рядом.

15. HTML - язык программирования

Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.
Loading...Loading...