Что должен знать блогер о HTML и CSS

В предыдущих статьях мы уже касались темы HTML-кодов при рассмотрении мета-тегов "description" и "keywords", а также при внедрении мета-тега верификации Яндекса в HTML-код сайта.
Очевидно вы уже поняли, что без знания азов HTML блогеру не обойтись. Обойтись, конечно, можно, но только в том случае, если полностью устраивает предоставляемый Blogger'ом или любой другой CMS дизайн сайта и не ставятся задачи продвижения и монетизации. В противном случае минимальная HTML-грамотность и ориентирование в CSS необходимы.

Тема HTML-CSS - не мой конек. Но кое в чем я успела разобраться и попробую "на пальцах" показать минимальный набор блогера. Цель статьи не в создании очередного пособия по HTML и CSS, коих предостаточно в Интернете, а в проведении ненавязчивого экскурса.

Язык HTML

Итак, HTML - это аббревиатура от англ. Hyper Text Markup Language. В переводе - язык гирертекстовой разметки. Уточню еще раз: HTML - язык разметки, на котором пишутся страницы сайтов, но не язык программирования. К языкам программирования относятся PHP, Java, Java Script, Python, Ruby и еще с пару десятков других.

Цель HTML - сообщать веб-браузерам (Google Chrome, Internet Explorer, Firefox и т.д.), каким образом отображать документы на экране.

В статье "Выбираем платформу CMS" указывалось на то, что при использовании CMS готовых страниц сайта не существует. Они формируются в момент запроса пользователя специальной программой (в нашем случае Blogger), установленной на хостинге (в нашем случае Blogspot). При вызове страницы в браузере CMS (Blogger) автоматически совмещает выбранный шаблон дизайна с информацией (тексты, изображения, таблицы и т.д.), помещаемой автором. При использовании готовых шаблонов возможности автора по редактированию сайта ограничены. Знание же HTML и CSS позволяет изменять внешний вид любой CMS.

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

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

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

CSS

Со времени своего появления язык HTML претерпел множество изменений. Он постоянно усложнялся, дополняясь все новыми и новыми возможностями по оформлению документов. В результате он стал громоздким и нечитабельным. Назрела необходимость в новых технологиях для верстки. Были разработаны CSS (Cascading Style Sheets) - каскадные таблицы стилей.

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

Использование CSS значительно упрощает разработку и редактирование внешнего вида сайта. CSS позволяет в считанные секунды поменять внешний вид сайта независимо от его объема. Для этого нет необходимости вносить изменения в каждую страницу. Это достигается путем изменения одного файла. Каждая страница сайта при этом должна иметь ссылку на таблицу стилей посредством тега <link>. Тег <link> должен быть помещен в HTML-код сайта между тегами  <head> и </head>. В этом случае все правила таблицы стилей будут распространяться на весь веб-документ. Чтобы не быть голословной:

<head>

 .....

 <link rel="stylesheet" type="text/css" href="style.css">

 </head>

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

Тем, кому будет интересно более детально ознакомиться с возможностями CSS, советую обратиться к статье справочной службы Blogger'a Что можно делать с помощью CSS?

О том, каким образом встроить персонализированный фрагмент кода  CSS в шаблон  Blogger'a подробно написано в статье Редактирование кода CSS в дизайнере шаблонов.

В следующей статье "HTML-код страницы, HTML-теги" продолжим ознакомление с языком HTML.  

Related Posts : Как продвигать сайт