Html помощь: Помощь по сайту | htmlbook.ru

htmlka — Справочник по html

---

Все теги ставятся в блог copy-paste‘ом
(В режиме «HTML», а не «Визуальный редактор»)

---

Оформление текста
(рекомендую спец. страничку Tекст):

Перечёркнутый текст: ТЕКСТ
<s> ваш текст </s>
Подчёркнутый текст: ТЕКСТ
<u> ваш текст </u>
Полужирный текст: ТЕКСТ
<b> ваш текст </b>
Полужирный крупный: ТЕКСТ
<big> ваш текст </big>
Курсивный текст: ТЕКСТ
<i> ваш текст </i>
Маленький текст: текст
<small> ваш текст </small>
Неразрывный пробел:
&nbsp;
Центрирование:

текст (картинка) по центру

<center>ваш текст (картинка) </center>
Выравнивание текста по правому краю поста:
<div align=right> ваш текст </div>

Выравнивание текста по всей ширине поста:
<div align=justify> ваш текст </div>
Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>
Бегущая строка (рекомендую Бегущая строка):

бегущая, как олень, строка

<marquee> ваша бегущая строка</marquee>
Вместо текста можно вставить картинку:

Код этой картинки:
<marquee><img src=АДРЕС_КАРТИНКИ></marquee>

Сноска вверху: ТЕКСТ^сноска
^{ваша сноска}

Сноска внизу: ТЕКСТ_сноска
_{ваша сноска}

Линия:

---

ее код: <hr>
Ударение:
Cтавим после нужной буквы:
&#769;
«Закрепитель» (фиксирует текст так, как и расположите его в поле поста):

Я
  Пешу
       Лесинкой!!!

<pre>ваш текст</pre>

РАЗМЕР ШРИФТА:

Уменьшить текст: текст — 2
<font size=-2> уменьшенный текст </font>
Увеличить текст на 1 пункт: текст
<font size=+1> увеличить текст на 1 пункт </font>

Увеличить текст на 2 пункта: текст

<font size=+2> увеличить текст на 2 пункта </font>

Увеличить текст на 3 пункта: текст

<font size=+3> увеличить текст на 3 пункта </font>

Увеличить текст на 4 пункта: текст

<font size=+4> увеличить текст на 4 пункта </font>

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст
<font color=red> красный текст </font>
ЖЕЛТЫЙ: желтый текст
<font color=yellow> желтый текст </font>
ФИОЛЕТОВЫЙ: фиолетовый текст
<font color=purple> фиолетовый текст </font>

ЗЕЛЕНЫЙ: зеленый текст
<font color=lime> зеленый текст </font>
СИНИЙ: синий текст
<font color=navy> синий текст </font>
ФУКСИЯ: фуксия текст
<font color=fuchsia> фуксия текст </font>

Таблица «базовых» цветов (вводим «Имя» или «Код»):

Имя	Код	Имя	Код	Имя	Код	Имя	Код
aqua	#00FFFF	green	#008000	navy	#000080	silver	#C0C0C0
black	#000000	gray	#808080	olive	#808000	teal	#008080
blue	#0000FF	lime	#00FF00	purple	#800080	white	#FFFFFF
fuchsia	#FF00FF	maroon	#800000	red	#FF0000	yellow	#FFFF00

Другие ссылки: Таблица безопасных цветов

Оформление ссылок
(рекомендую спец. страницу Ссылки):

Как вставить ссылку на веб-страницу:
<a href=АДРЕС_САЙТА> ВАШ ТЕКСТ</a>
Как сделать, чтобы картинка была ссылкой на веб-страницу:
<a href=АДРЕС_САЙТА><img src=АДРЕС_КАРТИНКИ></a>
Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
<a href=АДРЕС_САЙТА target=_blank>ВАШ ТЕКСТ</a>

---

Спец. теги ЖЖ:

Элементарный жж-кат (с “Read more”):
<lj-cut> ТЕКСТ </lj-cut>
Друзья, для тегов ЖЖ я завел отдельную страницу:
htmlka.com/livejournal
На нее также можно зайти, кликнув на Livejournal вверху справа в сайдбаре.

Публикация картинок

Раздел о публикации картинок перемещен на страницу: htmlka.com/pictures

Она же в сайдбаре вверху сбоку в разделе Страницы: Изображения.

---

Окошечко для вставки кода, типа:
ВАШ КОД
получаем так:
<textarea rows=2 cols=60> ВАШ КОД </textarea>
где rows и cols определяют площадь окна

Такое красивое окошечко с кодом:

<textarea>ВАШ КОД</textarea>

Получаем таким образом:

<textarea style=border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;>КОДЫ </textarea>

Кнопка-ссылка на веб-страничку
Например, на эту:

<form action=https://htmlka. com target=_blank method=get><input type=submit value=htmlka></form>

Некоторые спецсимволы:

Спецсимвол	Вид в браузере
&lt;	<
&gt;	>
&amp;	&
&quot;	«
&reg;	®
&trade;	™
&copy;	©
&hearts;	♥
&times;	×
&asymp;	≈
&bull;	•
&deg;	° (градус)
много символов

Если вы видите это: ★, ☠, ☭ — есть смысл посмотреть «Прочие» спецсимволы HTML, пока редко включаемые в официальные таблицы спецсимволов.

---

Разное
• Советы по работе с html
• Хитрости в ЖЖ и не только

---

Кнопка на этот сайт:
код для вставки этой кнопки себе:
<a href=https://htmlka.com/ target=_blank><img src=https://htmlka.com/wp-content/uploads/2009/07/butto.png border=0 alt=htmlka.com title=htmlka.com /></a>

---

↑ В НАЧАЛО СТРАНИЦЫ ↑

Изображения — htmlka

Если знаете адрес картинки в сети (URL) вида http://…jpg вам просто надо вставить его в код:
<img src=АДРЕС_КАРТИНКИ>

Чтоб узнать URL картинки, нужно кликнуть на нее правой кнопкой мыши.
В Хроме:

В Internet Explorer — правой кнопкой мыши — Свойства — копируем Адрес (URL)
В Mozilla Firefox — правый клик — Копировать ссылку на изображение
В Opera — правый клик — Копировать адрес изображения

---

Теперь подробнее:

Код любой картинки в сети в самом простом варианте, без рюшечек:
<img src=http://site/…jpg>
Уникальный адрес (URL) типа http://…jpg выдает картинке фотохостинг (специальный сайт для картинок), куда ее необходимо закачать с вашего компьютера. По сути, любая картинка, которую вы видите в сети — вебстраничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его можно в свойствах картинки)
Среди «чайников» кочует миф, что можно показывать в блоге картинки прямо со своего компьютера. Это не так. Для этого ваш компьютер должен работать в режиме вебсервера.

---

Запомните: Если вы удаляете картинку с хостинга (например, «фотоальбома жж»), то она исчезнет и из записи в вашем блоге!

---

---

Как сделать, чтобы текст «обтекал» картинку?
Легко — картинка слева, текст справа:
добавьте в код картинки:
align=left hspace=20
Код картинки примет вид:
<img src=АДРЕС_КАРТИНКИ align=left hspace=20>
Помни:
align=left – картинка слева, текст справа
align=right — картинка справа, текст слева
hspace=20 — расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 — расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):
<img src=АДРЕС_КАРТИНКИ align=left hspace=20 vspace=15>

Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
<br><br><br> — три пустые строки.

Вставить две и более картинки горизонтально:
<nobr>Текст (картинки)</nobr> — все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

Регулируем расстояние меж картинками по-горизонтали:
С помощью «неразрывного пробела»:  &nbsp;
Расстояние, равное 8 пробелам будет выглядеть так:
&nbsp; &nbsp; &nbsp; &nbsp;
Вставляется меж кодов картинок, есс-но

Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: — введите в код картинки title=»гав-гав»

Чтоб быстро вставить картинку с другого сайта войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте её в код

Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

Оптимальный способ уменьшить размер фото на компьютере: Читать

Формируем код для массовой загрузки картинок с помощью вспомогательных сервисов.
С рамками, нумерацией фото и возможностью жж-ката:
ЗДЕСЬ
Для массовой загрузки с Flickr и fotki.yandex.ru:
ЗДЕСЬ
Как запостить галерею? Узнай ЗДЕСЬ
Как запостить слайдшоу? Узнай ЗДЕСЬ

---

Фотохостинги
не все, более-менее знакомые:

fotki.yandex.ru

gallery.ru

imagebam.com

imgur.com

imageshack.us

tinypic.com

foto.radikal.ru

photobucket.com

isok.ru

HTML-справка

Нужна помощь по HTML? Вы пришли в нужное место.

В следующей таблице левый столбец содержит тему HTML, а правый столбец содержит ссылки на источники справки по этой теме.

Для этого…	сделайте это…
Справка HTML с таблицами	Руководство по сканированию таблицы HTML Проверьте генератор таблиц HTML См. тег таблицы HTML Узнайте о свойстве table-layout CSS, позволяющем ускорить загрузку больших таблиц Посмотрите пример макета таблицы CSS
HTML-справка с изображениями	См. тег Ознакомьтесь со статьей руководства по веб-графике. И образец учебника по GIMP Если вам нужна помощь с картой изображений, ознакомьтесь со статьей о картах изображений .
Помощь с гиперссылками	Узнайте об элементе Чтобы изменить внешний вид гиперссылок, см. статью о гиперссылках CSS . Если вам нужно установить URL-адрес по умолчанию для гиперссылок, взгляните на базовый тег HTML .
Помощь с картами изображений	Убедитесь, что вы знакомы с элементом Подробнее о картах изображений Для более подробного понимания узнайте об элементах и
Справка по шрифтам	Прочтите статью кода HTML-шрифта В приведенной выше статье предлагается использовать CSS для шрифтов. В частности, узнайте о следующих свойствах CSS: font , font-family , font-size , font-style , font-weight CSS имеет другие свойства, которые могут помочь с форматированием текста и макетами. Например, line-height , letter-spacing , text-transform , text-align .
Помощь с встраиванием музыки/аудио/звука	Прочтите статью музыкального кода в формате HTML Обновление элемента
Помогите с цветом	Понимать шестнадцатеричные цветовые коды Посмотреть таблицу цветов CSS Читать о свойствах color и background-color
Помощь с нумерованными (упорядоченными) списками	Подробнее об элементе
Справка по ненумерованным (неупорядоченным) спискам	Узнать о элемент
Помощь со списками определений	Узнайте об элементе
Помощь с формами	Подробнее об элементе И связанные с формой элементы: <кнопка> <набор полей> <ввод> <кейген> <метка> <объект> <выход> <выбрать> <текстовое поле>
Справка по встроенным фреймам	Узнайте о теге