ТЮНИНГ БЛОГА. Эпизод третий: Основы HTML и CSS.

Всем привет!

Очередной эпизод хочу посвятить некоторым основам HTML и CSS.  Я долго думала писать про это или нет. Все-таки это уже некоторые элементы программирования, и многим может показаться сложным. С другой стороны - а кому-то возможно удастся освоить кое-что.

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

HTML

Сказав выше, что HTML это программирование я на самом деле выразилась не точно. Это еще не программирование. Это язык верстки (HTML - HyperText Markup Language). Язык, который понимают браузеры и "рисуют" кнопочки и ссылочки, вместо служебных символов.

Вот например когда вы видете такое

на самом деле в HTML это прописано вот так:

<button>Click Me!</button>

Выглядит на первый взгляд страшно, но на самом деле все очень просто и логично. 

При помощи тега button я сказала браузеру нарисовать кнопочку. Тег - основной элемент языка HTML. Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования применяются теги, содержащие информацию о том, ЧТО отобразить и КАК отобразить.

Cинтаксис написания тегов следующий

<тег атрибут1="значение" атрибут2="значение"/> 

<тег атрибут1="значение" атрибут2="значение">текст или другой тег</тег>

Теги бывают двух типов — одиночные и парные. Одиночный тег используется самостоятельно. Парный может включать внутри себя другие теги или текст. Парный тег это своего рода контейнер, состоит из двух тегов - открывающего и закрывающего. Открывающий содержит в себе атрибуты. Закрывающий просто указывает что этот тег закрывается (косая черта (или слеш) / - признак закрывающего тега). Между открывающим и закрывающим тегом содержится то, ЧТО мы хотим отобразить: текст, другой тег (например картинка, ссылка и т.п.).

У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Допустимы не значит обязательны для КАЖДОГО тега, есть теги без всяких дополнительных атрибутов. Но есть теги, у которых некоторые атрибуты обязательны.

Я не буду сильно вдаваться в подробности и описывать все теги и атрибуты (это тогда получился бы полный курс HTML). Вот здесь можно найти подробный справочник по всем тегам. Тут я хочу в общих чертах постараться объяснить что же такое HTML. Чтобы когда в дальнейшем я буду рассказывать как сделать то-то и то-то изменяя код, у вас было бы представление что это вообще такое.

На примере вышеприведенной кнопочки разберем структуру тега. Данный тег - парный. Т.е. содержит открывающий и закрывающий тег.

button - тег

Click Me! - содержимое тега, в данном случае надпись на кнопке.

Надеюсь пока понятно. Разберем еще один тег - картинку.

Чтобы изобразить вот такую картинку

надо написать следующий код

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZse_gOg2VYkiC45pT3KaGDSbC5qXlsOL03R6izDkvggrJ-jy4hESzkaqwuEZE7DsWhR-FZQT2L1u8MvlukJjCxTDCeP4ScnEdljuwZAeyUzWs7JyDM3pNIIGRpfUoxM5-1v50EnRjBWI/s1600/Blogger-logo.jpg" height="60" width="200" />

Как видите, этот тег - одинарный. Разберем поподробнее:

img - тег

атрибуты:

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

     height - высота

     width - ширина

Атрибуты высоты и ширины не обязательные. Их роль - сказать браузеру какого размера отобразить картинку (если размер меньше оригинала, то отображаться картинка будет такого размера как указано в теге, но все равно загружаться и "жрать" трафик будет картинка оригинального размера). Если бы их не было, то картинка бы отобразилась в оригинальном размере, в случае моей картинки вот так

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

Идем дальше. Я хочу нарисовать кнопочку, на которой вместо текста будет картинка

в этом случае вместо текста Click Me! надо вставить тег картинки

<button> <src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZse_gOg2VYkiC45pT3KaGDSbC5qXlsOL03R6izDkvggrJ-jy4hESzkaqwuEZE7DsWhR-FZQT2L1u8MvlukJjCxTDCeP4ScnEdljuwZAeyUzWs7JyDM3pNIIGRpfUoxM5-1v50EnRjBWI/s1600/Blogger-logo.jpg" width="100" /> </button>

Для наглядности я выделила красным тег картинки, который находится внутри тега кнопочки.

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

НОЧНЫЕ СКРАПЕРЫ

надо написать такой вот код

<a href="http://scrap-fabrica.blogspot.com/"  target="_blank">НОЧНЫЕ СКРАПЕРЫ</a>

Разберем на составляющие. Тег парный. Между открывающим и закрывающими тегами содержится текст ссылки

a - тег
атрибуты:

href - URL (ссылка), обязательный параметр

target - указание как открывать ссылку (в данном случае "_blank" - в новой вкладке)

Картинка тоже может быть ссылкой (так этого не видно, но можно по ней тыцнуть чтобы увидеть что это ссылка :))

Для этого надо в тег ссылки вместо текста вставить тег картинки

<a href="http://scrap-fabrica.blogspot.com/" title="НОЧНЫЕ СКРАПЕРЫ" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZse_gOg2VYkiC45pT3KaGDSbC5qXlsOL03R6izDkvggrJ-jy4hESzkaqwuEZE7DsWhR-FZQT2L1u8MvlukJjCxTDCeP4ScnEdljuwZAeyUzWs7JyDM3pNIIGRpfUoxM5-1v50EnRjBWI/s1600/Blogger-logo.jpg" width="100" /> </a>

В данном примере я добавила к тегу ссылки еще один атрибут - title="НОЧНЫЕ СКРАПЕРЫ". С его помощью я установила всплывающий текст, который появляется при наведении курсора мышки на ссылку.

На этом пока с HTML заканчиваем. Переходим к ...

CSS

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

Опять-таки, я не буду сильно вдаваться в дебри и рассказывать про все аспекты стиля. В том же месте можно найти полную информацию.

Синтаксис:

имя стиля { свойство1: значение; свойство2: значение; }

В качестве имени может выступать имя тега, имя класса или идентификатор. Пройдемся по каждому в отдельности.

Имя тега

Например вот такая запись

a {color: red;}

сделает все ссылки в документе по умолчанию красного цвета. В качестве имени стиля выступает имя тега. Вот так бы выглядел наш блог в этом случае. Все ссылки красные.

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

Синтаксис (атрибута тега)

class="имя класса"

Допустим я хочу, чтобы ссылки ярлыков были другого цвета. ВСЕХ ярлыков. Тогда для них я устанавливаю класс "tags"

<a  class="tag" href="http://scrap-fabrica.blogspot.com/search/label/CREATE%20and%20SHARE">CREATE and SHARE</a>

<a class="tag" href="http://scrap-fabrica.blogspot.com/search/label/%D0%92%D0%90%D0%96%D0%9D%D0%9E%D0%95">ВАЖНОЕ</a>

Теперь мне надо прописать стиль для этого класса

.tag{color: blue;}

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

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

Усложняем задачу еще больше. Третий вариант - стиль для идентификатора. Это еще один необязательный атрибут тегов. С его помощью вы как бы присваиваете УНИКАЛЬНОЕ имя какому-то конкретно взятому элементу.

Синтаксис

id="идентификатор"

Допустим я хочу изменить цвет только одной ссылки, ярлык "ВАЖНОЕ" какого-то конкретного поста. В этом случае я назначаю идентификатор тегу ссылки этого ярлыка

<a id="tag1" class="tag" href="http://scrap-fabrica.blogspot.com/search/label/%D0%92%D0%90%D0%96%D0%9D%D0%9E%D0%95">ВАЖНОЕ</a> 

Теперь мне надо прописать стиль для этого идентификатора

#tag1{color:green;}

В случае стиля для идентификатора перед именем идентификатора надо поставить решетку (#). Чтобы обработчик знал что имеется в виду не тег, не класс, а именно идентификатор.

И вот результат - все ссылки в блоге красные, ссылки ярлыков - синие, ссылка одного ярлыка "ВАЖНОЕ" - зеленая (даже не смотря на то, что у этого тего стоит класс "tag", для которого цвет ссылки синий).

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

Синтаксис атрибута тега style

style="свойство1: значение; свойство2: значение;"

Чтобы "нарисовать" вот такую ссылку (светло-серенькую)

 НОЧНЫЕ СКРАПЕРЫ 

 надо написать следующий код

<a href="https://scrap-fabrica.blogspot.com/" style="color: #999999;" target="_blank">НОЧНЫЕ СКРАПЕРЫ</a>

Только не подумайте, что цвет текста это все, на что способен стиль :) При помощи стиля можно менять цвет, шрифт, фон, стиль написания и много-много-много другого.  

Ну вот например чтобы получить такое

НОЧНЫЕ СКРАПЕРЫ 

 надо написать такое (цвет-серый (color:#999999); фон-черный(background-color:black;); размер текста в 2 раза больше, чем по умолчанию(font-size:200%); жирный(font-weight:bold); без подчеркивания(text-decoration:none))

<a href="https://scrap-fabrica.blogspot.com/" style="background-color: black; color: #999999; font-size: 200%; font-weight: bold; text-decoration: none;" target="_blank">НОЧНЫЕ СКРАПЕРЫ</a>
 
Если есть желание потренироваться, вы можете попробовать создать какую-то разноцветную ссылку в посте своего блога. Сделать это можно в HTML-коде вашего поста (переключиться из вкладки Compose во вкладку HTML).

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

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