среда, 23 января 2013 г.

HTML в Blogspot.

Приветствую Вас у себя на блоге. Сегодня попрактикуемся в использовании HTML в своем блоге. В предыдущем посте я Вам рекомендовал два курса Е. Попова. Напрасно, если Вы еще не воспользовались моим предложением. Щелкайте по картинке.
Итак, мы пишем пост (статью) в редакторе своего блога (режим Создать). Редактор это программа, которая следит за Вашими действиями и вставляет нужные теги в нужные места.


Но вот, Вам захотелось вставить картинку слева, другую справа, а между ними текст. Редактор лепит картинки друг под другом, меняет их местами и при этом ворчит (как там у Высоцкого):
Мы таким делам, вовсе не обучены, кроме мордобития, никаких чудес.
Решить эту проблему можно и без HTML. Сделать коллаж в Фотошопе и вставить одной картинкой. Так я сделал в статье SEO, раскрутка блога (4 картинки с Лениным).
Можно в редакторе перейти в режим HTML и нарисовать таблицу (1 строка и 3столбца код слева).
Ставим курсор между тегами <td> и </td> первой ячейки, жмем кнопку Вставить изображение. Выпало несколько другое окно, но выбирайте в нем и ОК. У меня почему то вставилось над таблицей. Аккуратно выделяем вставленное от <div> ... до </div> включительно, вырезаем и вставляем между тегами <td> и </td> первой ячейки.
То же проделываем для третьей ячейки. У меня вставилось сразу куда нужно. Во второй ячейке печатаем текст (я еще напечатал в 1 и 3). Вообщем должно быть так (тег tbody добавил редактор):


В результате имеем то что хотели (а использовали 3 тега и несколько атрибутов)

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

В меню панели управления щелкаем по страницы. Выбираем Контакт -> изменить. В редакторе в режиме Создать  - чистый лист. Щелкаем по HTML, курсор в самое начало первой строки, жмем Enter. Курсор на свободной строке, жмем кнопку Вставить изображение. Готово.
Стало:

Так же безнаказанно можно пошалить с гаджетами. В левом верхнем уголке блога стоял такой текстовый таскливый гаджет.
Если ткнуть по иконке Ключ с отверткой, то попадем в окно редактирования этого гаджета. В меню почти нет инструментов, а мне хочется вставить картинку. Никто не мешает, рисуй теги.
Можно проще: делаете в редакторе сообщений (в нем больше инструментов) то что хотите, выделяете и вырезаете. Вертаетесь в окно редактирования гаджета, переходите в режим Изменить HTML, все что там есть удаляете и вставляете вырезанное.
Результат вверху в левом сайтбаре блога (щелкай по улитке). Вроде повеселей.

Если в меню панели управления блогом выберем Шаблон, то там тоже будет кнопочка Изменить HTML. Туда пока лучше не соваться. Про нее будет отдельная статья.
До встречи.

Комментариев нет:

Отправить комментарий

От Вас деловой комментарий - Вам подарок!