Серия сообщений "теги":
теги
Часть 1 - РАБОТА С ТЕКСТОМ. html коды для текста
Часть 2 - HTML шпаргалка по линиям
Часть 3 - Очень удобный тег. Пишем текст там, где хотим
Часть 4 - Самые необходимые ТЕГИ для оформления записей
Часть 5 - ОСНОВНЫЕ ТЕГИ
Часть 6 - Полезные теги HTML и редакторы онлайн
Часть 7 - Продолжение знакомства с HTML
Часть 8 - Огромная HTML-шпаргалка из блога Натальи
Часть 9 - Простейшая таблица для записей и картинок
Часть 10 - Таблица HTML цветов и названия
Часть 11 - HTML_всё под рукой

Комментарии (0)

РАБОТА С ТЕКСТОМ. html коды для текста

Четверг, 15 Декабря 2016 г. 15:00 + в цитатник
Это цитата сообщения Шадрина_Галина [Прочитать целиком + В свой цитатник или сообщество!]

РАБОТА С ТЕКСТОМ. html коды для текста

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

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 10 - Все о бегущем тексте. Примеры и коды.
Часть 11 - Все о ссылках, оформление и коды.
Часть 12 - РАБОТА С ТЕКСТОМ. html коды для текста
Часть 13 - Он-лайн графические редакторы
Часть 14 - Бродилка по РУБРИКАМ моего дневника.
...
Часть 23 - Простейший генератор оригинальных рамочек
Часть 24 - Бродилка по урокам по ЛиРу
Часть 25 - html коды для текста

Комментарии (0)

HTML шпаргалка по линиям

Четверг, 15 Декабря 2016 г. 15:02 + в цитатник
Это цитата сообщения Шадрина_Галина [Прочитать целиком + В свой цитатник или сообщество!]

HTML шпаргалка по линиям

Линии можно применять, например, для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы.

Вот она, самая простая линия, для ее вставки просто поставьте в строчку Тег hr (Horisontal Rule)

ее код: <hr>

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 13 - Он-лайн графические редакторы
Часть 14 - Бродилка по РУБРИКАМ моего дневника.
Часть 15 - HTML шпаргалка по линиям
Часть 16 - Заморские сайты к НОВОМУ ГОДУ
Часть 17 - 100 самых полезных сайтов Интернета
...
Часть 23 - Простейший генератор оригинальных рамочек
Часть 24 - Бродилка по урокам по ЛиРу
Часть 25 - html коды для текста

Метки: теги шпаргалка линии

Комментарии (0)

Очень удобный тег. Пишем текст там, где хотим

Вторник, 27 Декабря 2016 г. 12:06 + в цитатник
Это цитата сообщения Lyudmila_Lyu [Прочитать целиком + В свой цитатник или сообщество!]

Очень удобный тег. Пишем текст там, где хотим

От Лены М.

С помощью этого полезного тега "pre", друзья, можно писать текст, располагая его ровно там, где захотите.
То есть написали на этом месте - тут и будет, написали на другом - там и будет ))
Без этого тега сделать это гораздо сложнее (приходится, например, применять символы-пробелы).

Итак, вот формула: <pre>Ваш текст</pre>

                          
                 люблю!
          тебя
    так  
Я
    так
          тебя
                 обожаю

На Майле и так очень мало работающих тегов. Этот работает.

Метки: дневник оформление теги

Комментарии (0)

Самые необходимые ТЕГИ для оформления записей

Воскресенье, 15 Января 2017 г. 12:55 + в цитатник
Это цитата сообщения Ваша_ТАНЯ_идущая_по_Судьбе [Прочитать целиком + В свой цитатник или сообщество!]

самые необходимые ТЕГИ для оформления записей

3164

24.05.2012

***
ТЕГИ ПАЛИТРЫ цветов (для замены цвета текста)

окошко для КОДА - изменить размер картинки -
сделать текст
БОЛЬШЕ -

сделать ТЕКСТ
меньше -
№ страниц блога -
текст в 2 столбца -

картинка СЛЕВА от текста -
картинка СПРАВА от текста -
КАРТИНКИ по бокам текста -

ТЕКСТ по бокам картинки -
текст и картинка по центру -
текст обтекает картинку справа -

КАРТИНКА-БАНЕР кликабельная - КАРТИНКА-БАНЕР с всплывающим текстом -
3-и картинки в ряд -

кнопка с текстом - кнопка с картинкой -
кнопка с текстом
и картинкой -

кнопка на фоне -
КНОПКА НАВИГАТОР-накопитель - 4 КНОПКИ в ряд -

убрать часть записи под CUT - для МАЙЛа поставить перед частью записи,которую надо убрать под КАТ - для ЛИру ВАШ ТЕКСТ

................................
***

Метки: оформление дневника теги

Комментарии (0)

ОСНОВНЫЕ ТЕГИ

Среда, 15 Февраля 2017 г. 19:13 + в цитатник
Это цитата сообщения вязание_шитьё_рукоделие [Прочитать целиком + В свой цитатник или сообщество!]

ОСНОВНЫЕ ТЕГИ

Как написать у себя в дневнике запись?
Как выставить фотографии?
Как поставить разрыв в тексте?
Как написать, создать запись?
Как поставить ссылку в записи?

Эта информация в виде фото мастер-класса для всех, кто начинает пользоваться соц. сетью LIVEINTERNET

1.

смотреть дальше

Метки: основные теги оформление дневника

Комментарии (0)

Полезные теги HTML и редакторы онлайн

Суббота, 06 Мая 2017 г. 14:28 + в цитатник
Это цитата сообщения Surge_Blavat [Прочитать целиком + В свой цитатник или сообщество!]

Полезные теги HTML и редакторы онлайн

Эта запись представляет собой рабочий материал для работы с записями, постами

в блог, изучение языка разметки гипертекста, изучение создания вебстраниц.

Некоторые полезные теги HTML

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

некоторые из предложеных формул для более опытных пользователей.

НО... Я КАК И ПРЕЖДЕ СЧИТАЮ, ЧТО УЧИТЬСЯ ЯЗЫКУ РАЗМЕТКИ

ПРОСТО НЕОБХОДИМО МЕТОДОМ ПРОБ, ОШИБОК И "ТЫКА"

<p align="center"></p>Выравнивание по центру

<p align="justify"></p>Выравнивание текста по ширине

<center><h3></h3></center>Заголовки

<blockquote></blockquote> задают отступы или для оформления цитаты

<img src="filename.jpg" width="90" height="100" border="0" alt="Image Loading..."> вставка картинки

Гиперссылка <a href=""></a>

Гиперссылка <a href="" target="_blank"></a>

Вставка звукового или видео файла, или флеша <embed src="*.avi" width="" height="" autostart=true>

Вставка фонового звука <bgsound src="" loop=1>

<BaseFont Size="3"> базовый шрифт

<address></address> отображают текст в формате адреса

Цитата или сноска <cite></cite>

<nobr>

Текст, заключенный между тэгами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке
без переноса на другую. Длинная строка не уместится на экране, и для ее просмотра придется использовать
горизонтальную полосу прокрутки.

Параграф §

Пробел  

Далее несколько сайтов с редакторами HTML online

Выбирайте удобный для вас сервис и пользуйтесь!

©SBlavat™

Метки: теги

Комментарии (0)

Продолжение знакомства с HTML

Суббота, 06 Мая 2017 г. 14:48 + в цитатник
Это цитата сообщения Surge_Blavat [Прочитать целиком + В свой цитатник или сообщество!]

Продолжение знакомства с HTML

ИЗУЧАЕМ И ИСПОЛЬЗУЕМ
БЛОГГЕРСКИЙ ЯЗЫК HTML Основной текст

Совсем недавно я выставил пост со ссылками на шпаргалки по HTML. В дневнике есть немало постов с формулами и кодами HTML.

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

Формула кнопки "выпадающего" меню

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

©Surge Blavat®

Метки: теги помощь

Комментарии (0)

Огромная HTML-шпаргалка из блога Натальи

Суббота, 06 Мая 2017 г. 15:17 + в цитатник
Это цитата сообщения Елена-рыбка [Прочитать целиком + В свой цитатник или сообщество!]

Огромная HTML-шпаргалка из блога Натальи

Взяла из блога Натальи: http://blogs.mail.ru/mail/garkina-natali/

Огромная HTML-Шпаргалочка

Спасибо

Пример

Код

<img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1"title="ВАШ ТЕКСТ">

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

Картинка кликабельна и появляется Окошко-Подсказка

Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского.
HSPACE - Horizontal Space - горизонтальный отступ и
VSPACE - Vertical Space - вертикальный отступ.
Эти значения можете изменять .

<p align="justify"> <img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1"hspace="15" vspace="15" align="left">ВАШ ТЕКСТ</p>

Картинка с отступами и выравниванием по левому краю
Атрибут align="left" - значит с лева
Атрибут align="justify" - значит выравнивать

<p align="justify"> <img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1" hspace="15" vspace="15" align="right">ВАШ ТЕКСТ</p>

Картинка с отступами и выравниванием по правому краю
Атрибут align="right" - значит с права
Атрибут align="justify" - значит выравнивать

Жаль, что мы не рисуем прямо глазами. Как много пропадает на длинном пути от глаз через руку к кисти.
/Г. Лессинг/
Произведение, которое читают, имеет настоящее. Произведение, которое перечитывают, имеет будущее.
/А. Дюма-сын/

<p align="justify"><img src="АДРЕС КАРТИНКИ С РАДИКАЛА СТРОКА №1" align="left">ВАШ ТЕКСТ</p>

Картинка без отступов , с выравниванием по левому краю
Если поменять атрибут align="left" на align="right" - то получите Картинку без отступов , с выравниванием по правому краю .

Обратите внимание , что ваш текст должен быть поделен на две части Первая часть пишется -- перед кодом , Вторая -- после .

Первая часть текста <img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1" align="middle" border="0"> Вторая часть текста

Картинка в середине Текста
Атрибут align="middle" - значит середина

Стихи писать я не умею,
Но мысли изложить могу…
Я просто от тебя балдею
И не во сне, а наяву.

<table align=center border=0>
<tr>
<td><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></td>
<td>ТЕКСТ</td>
<td><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></td>
</tr>
</table>

Текст между двух картинок

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

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

<table align=center border=0>
<tr>
<td>ТЕКСТ</td>
<td><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></td>
<td>ТЕКСТ</td>
</tr>
</table>

Картинка между текстом

Рамка растягивается на всю ширину записи .

<fieldset><legend><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1"></legend>ВАША КАРТИНКА</fieldset>

Рамка с разрывом Картинки

Добро ПожаловатьРада Вас приветствовать у себя в Блоге

<fieldset><legend>Запись в разрыве</legend>Основная запись</fieldset>

Рамка с разрывом Текста

Таблица в 2 ряда и 2 столбца

	СМАЙЛИК
	СМАЙЛИК

TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги.
TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.
TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

<table border="1">
<tr>
<td>Ряд 1 Ячейка1</td> <td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>Ряд 1 Ячейка1</td> и <td>Ряд1 Ячейка2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно логично

Атрибут BORDER - задает толщину рамки таблицы в пикселах.

Объединяем верхнии ячейки

ШПАРГАЛОЧКИ

Используя эту Формулу можно строить и другие таблицы
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2	Ряд 2 Ячейка 3

<table border="1">
<tr>
<td colspan="2">Ряд 1 Ячейки 1+2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

COLSPAN – определяет количество столбцов , на которые простирается данная ячейка. По умолчанию имеет значение 1.

Объединяем ячейки слева

Ячейка 1, Ряд 1+2	Ряд1 Ячейка2
	Ряд 2 Ячейка 2

Ячейка 1 Ряд 1+2+3+4	Ряд1 Ячейка2
	Ряд 2 Ячейка 2
	Ряд 3 Ячейка 2
	Ряд 4 Ячейка 2

<table border="1">
<tr>
<td rowspan="2">Ячейка 1, Ряд 1+2</td>
<td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 2</td>
</tr>
</table>

ROWSPAN – определяет количество рядов , на которые простирается данная ячейка. По умолчанию имеет значение 1.

Добавляем атрибут cellpadding и выравниваем таблицу по центру

Ряд 1 Ячейка1	Ряд1 Ячейка2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.

<table border="4" align="center" cellpadding="10">
<tr>
<td>Ряд 1 Ячейка1</td><td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек.
Возможные значения: left , center , right . Значение по умолчанию – left .

Добавляем атрибут cellspacing и так же таблица по центру

Ряд 1 Ячейка1	Ряд1 Ячейка2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.

<table border="1" align="center" cellspacing="10">
<tr>
<td>Ряд 1 Ячейка1</td><td>Ряд1 Ячейка2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td> <td>Ряд 2 Ячейка 2</td>
</tr>
</table>

Если необходимо , можно задать ширину и высоту таблицы
Так же таблица расположена по центру

Ряд 1 Ячейка1	Ряд1 Ячейка2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

<table border="1" align="center" width="400" height="100">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

Так же можно изменить цвет таблицы - Фон

Ряд 1 Ячейка 1	Ряд 1 Ячейка 2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

Ряд 1 Ячейка 1	Ряд 1 Ячейка 2
Ряд 2 Ячейка 1	Ряд 2 Ячейка 2

Если картинка большая , то будет отображаться та её часть , которая влезет . Как вы могли уже заметить у меня фон таблицы просто белый .

<table background="АДРЕС ФОНА СТРОКА С РАДИКАЛА №1" border=2 align="center" >
<tr>
<td>Ряд 1 Ячейка 1</td>
<td>Ряд 1 Ячейка 2</td>
</tr>
<tr>
<td>Ряд 2 Ячейка 1</td>
<td>Ряд 2 Ячейка 2</td>
</tr>
</table>

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Нумерованный список

Строка
Строка
Строка

Цвет определяете сами

<OL>НАЗВАНИЕ СПИСКА
<LI>Строка
<LI>Строка
<LI>Строка
</OL>

Нумерованный список определяется - метками <OL></OL>. Элементы списка отмечаются метками <LI>. В нумерованном списке элементы нумерует сам браузер.

Заметим, метка <LI> непарная - т.е. метки </LI> не существует.

Ненумерованный список

Ненумерованный список определяется метками <UL></UL>

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 1<BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 2<BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 3<BR>

<IMG SRC="http://img90.imageshack.us/img90/6603/33609040px4.gif">Строка 4<BR>
</UL>

Вот пример ещё ненумерованного списка

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 1<BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 2<BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 3<BR>

<IMG SRC="http://www.liveinternet.ru/images/brandnewsmilies/heart.gif">Строка 4<BR>
</UL>

Вот пример ещё ненумерованного списка

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 1<BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 2<BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 3<BR>

<IMG SRC="http://img.mail.ru/r/blogs/ico_friends.png">Строка 4<BR>
</UL>

Вот пример ещё ненумерованного списка

<UL>
<B>НАЗВАНИЕ СПИСКА</B><BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 1<BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 2<BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 3<BR>

<IMG SRC="http://img15.imageshack.us/img15/7746/star0000.gif">Строка 4<BR>
</UL>

Пример простого ненумерованного списка

Строка 1
Строка 2
Строка 3

<UL>Название Списка
<LI>Строка 1
<LI>Строка 2
<LI>Строка 3
</UL>

Ненумерованный список определяется метками <UL></UL>

Делаем сами Кнопочку

<form action="АДРЕС ССЫЛКИ" target="_blank" method="get"><button type="submit"><img src="АДРЕС КАРТИНКИ СТРОКА С РАДИКАЛА №1" align=absMiddle> ВАШ ТЕКСТ</button></form>

Елена-рыбка

Серия сообщений "HTML начинающим и не только":
Часть 1 - Html для начинающих ( часть 2-ая)
Часть 2 - Всё о HTML...начинающим и не только...
...
Часть 12 - Учебник по Html для чайников
Часть 13 - Как поменять код флеш-картинки(на Ли.ру) на html-код для других сайтов.Урок.
Часть 14 - Огромная HTML-шпаргалка из блога Натальи
Часть 15 - Классная шпаргалка HTML!!!! Спасибо Ларисе!
Часть 16 - ТОП 10 HTML ошибок новичков
...
Часть 29 - Коды HTML для оформления постов, блогов
Часть 30 - Моя личнличная шпаргалка для оформления- файл
Часть 31 - Всё под рукой/Всё, что нужно начинающему блогеру(обновленный материал)

Метки: HTML-шпаргалка

Комментарии (0)

Простейшая таблица для записей и картинок

Суббота, 06 Мая 2017 г. 15:36 + в цитатник
Это цитата сообщения Surge_Blavat [Прочитать целиком + В свой цитатник или сообщество!]

Простейшая таблица для записей и картинок

Таким образом я выставил свои кнопки

Метки: таблицы

Комментарии (0)

Таблица HTML цветов и названия

Понедельник, 09 Октября 2017 г. 15:22 + в цитатник
Это цитата сообщения LoRaLaRa [Прочитать целиком + В свой цитатник или сообщество!]

Таблица HTML цветов и названия

HTML ЦВЕТА

Здесь представлены специальные ключевые слова, которые можно применять для обозначения того или иного цвета на интернет сайтах, и при разработке на языках программирования для Web, таких как HTML, CSS, JavaScript, Flash, и др.

Имена цветов в HTML не чувствительны к регистру, и могут записываться в любой форме

3464305_ (700x450, 172Kb)