Всем привет!

Если в данном статье не найдете, то что искали, пишите в комментариях или через форму обратной связи — отвечу всем!

Очень часто приходится обращаться к поиску в Яндекс или Google, чтобы найти необходимые HTML, CSS или PHP коды, теги и всякие скрипты для правильной работы и оптимизации блога. Теперь решил написать для вас и для себя статью — шпаргалку, пусть будет она всегда под рукой. Создал даже отдельную рубрику, которая так и называется «HTML, CSS, PHP». Я думаю будет актуальной темой.

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

Справочник HTML

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

В комментариях задавайте вопросы, которые вас интересуют. Если не найдете подходящего вам тега, также сообщите, будем искать вместе :)

 

 

Справочник HTML

 

  • <HTML>...</HTML> — определяют HTML документ
  • <head>...</head> —  голова сайта — содержит коды, скрипты, информацию для браузеров
  • <title>...</title> — заголовок страницы, имя сайта и описание
  • <body>...</body> — тело страницы, содержит информацию, которую видно на сайте

Пример страницы:

<html>
<head>
<title>Имя сайта и описание</title>
</head>
<body>
<H1>Заголовок статьи</H1>
<P>Параграф статьи</P>
<P>Текст статьи</P>
</body>
</html>
  •  <a>...</a> — для создания ссылок
  • href — адрес ссылки (url)
  • target="_blank" — открытие страницы в новой вкладке

Пример:  <a href="http://blogorazvitie.ru/plaginy/kak-sozdat-kartu-sajta" target="_blank">текст- анкор</a>

  • <a href="адрес страницы" title="Текст при наведении">текст-анкор</a> — открывается в этом же окне
  •  <a href="адрес страницы" target="_blank" style="color:red; text-decoration:underline;"><span style="color:red;">текст-анкор</span></a> — открытие в новом окне, свой цвет ссылки и цвет подчеркивания

 

  • <b>...</b> — жирный текст
  • <title>...</title> — всплывающая подсказка
  • <br/> — для переноса строки, ставится перед текстом (закрытие не нужно)
  • <em>...</em> — обозначение текста курсивом
  • <i>...</i> — курсив текста
  • <font>...</font> — свойства шрифта. (атрибут size — размер шрифта, color — цвет шрифта)
  • <p style="margin-top:10px" — отступ сверху на 10 пикселей;
  • <p style="margin-left:50px" — отступ слева на 50 пикселей;
  • <p style="margin-bottom:20px" — отступ снизу на 20 пикселей;
  • <p style="margin-right:5px" — отступ справа на 5 пикселей;
  • <p style font-size:14px; — размер шрифта;

А можно все в одну строчку объединить только расставляя правильно все кавычки, тире и пробелы
<p style="margin-top:10px; margin-left:50px; margin-bottom:20px; margin-right:5px; font-size:14px; color:#fff">Ваш текст или ссылка</p>

Пример: <font size="5" color="red"></font>

    • <H1>...</H1> — создание заголовка, значения от 1 до 6
    • align — выравнивание, значения="left","center","right","justify" (пример: <H1 align="center">Заголовок</H1>)
    • <hr/> — горизонтальная линия с отступом по вертикали (атрибуты: size — толщина линии, color — цвет линии, widht — ширина линии). Пример: <hr align="center" size="4" width="700" />
  • <ol>...</ol> — нумерованный список
  • <ul>...</ol> — не нумерованный список
  • <s>...</s> — зачеркнутый текст
  • <dl>...</dl> — списки определений
  • <blockquote>...</blockquote> — текст с отступом, для цитат и определений
  • &nbsp; — неразрывный пробел

 

  • <marquee>...</marquee> — бегущая строка
  • <marquee><img src="адрес картинки"></marquee> — бегущая картинка :)
  • <sup>...</sup> — сноска текста сверху
  • <sub>...</sub> — сноска текста снизу
  • <font size="-2">текст</font> — размер текста можно изменять (если нет в редакторе специальной функции для изменения шрифта, то используйте коды)
  • <font color="red"> красный текст </font> — изменить цвет текста
  •  <font face="Monotype Corsiva">текст</font> — изменить стиль шрифта
  • <font face="Monotype Corsiva" size="+2" color="fuchsia">текст</font> — изменить стиль, цвет и размер шрифта

 

Таблицы HTML:

  • <table>...</table> — создание таблицы
  • border="1" — рамка таблицы = 1px
  • <tr>...</tr> — табличный ряд
  • <td>...</td> — ячейки таблицы

Например:

<table border="1">
<tr>
<td>Первая ячейка, первый ряд</td>
<td>Вторая ячейка, первый ряд</td>
<td>Третья ячейка, первый ряд</td>
</tr>
<tr>
<td>Первая ячейка, второй ряд</td>
<td>Вторая ячейка, второй ряд</td>
<td>Третья ячейка, второй ряд</td>
</tr>
</table>

 

Первая ячейка, первый ряд Вторая ячейка, первый ряд Третья ячейка, первый ряд
Первая ячейка, второй ряд Вторая ячейка, второй ряд Третья ячейка, второй ряд

Вот как то так получается! Размеры вы сможете уже сами выставить какие вам нужно.

Атрибуты, которые если нужно добавляйте:

  • cellspacing="10" — расстояние между ячейками
  • cellpadding="8" — объем ячейки
  • background-color: — цвет фона
  • color: — цвет текста

 


 

первая ячейка, первый ряд вторая ячейка, первый ряд
первая ячейка, второй ряд вторая ячейка, второй ряд

Код этой таблицы:

 

<table style="height: 98px;" border="2" width="750" cellspacing="8" cellpadding="15">
<tbody>
<tr>
<td style="background-color: #ff0000; color: #ffffff; text-align: center;">первая ячейка, первый ряд</td>
<td style="text-align: center; color: #ff0000;"><i><b>вторая ячейка, первый ряд</b></i></td>
</tr>
<tr>
<td>первая ячейка, второй ряд</td>
<td style="background-color: #ff0000; color: #ffffff;">вторая ячейка, второй ряд</td>
</tr>
</tbody>
</table>

Саму таблицу можете редактировать уже в визуальном редакторе, а код нужно ставить в HTML. Текст в ячейках также писать можете в самих ячейках.

Предлагаю еще один вариант создания таблицы с объединением ячеек.

 

№: Информация
1. Создание таблицы Объединение ячеек

Код таблицы, которая получилась:

 

<table border="1" cellspacing="0" cellpadding="10" align="center">
<tbody>
<tr>
<th style="background-color: #d2a136; color: red;">№:</th>
<th colspan="2">Информация</th>
</tr>
<tr>
<td>1.</td>
<td>Создание таблицы</td>
<td style="color: green;"><i><b>Объединение ячеек</b></i></td>
</tr>
</tbody>
</table>

Еще один вариант объединения ячеек:

 

Блог: www.blogorazvitie.ru
Контакты: Автор Денис Максимов
E-mail: blogorazvitie@mail.ru 
Colspan="" - объединение по горизонтали;
Rowspan="" - объединение по вертикали.

 

А вот такой код у меня получился:

<table border="5" cellspacing="1" cellpadding="20" align="center">
<tbody>
<tr>
<td><i><b>Блог:</b></i></td>
<td>www.blogorazvitie.ru</td>
</tr>
<tr>
<td rowspan="3"><i><b>Контакты:</b></i></td>
<td>Автор Денис Максимов</td>
</tr>
<tr>
<td>E-mail: blogorazvitie@mail.ru</td>
</tr>
</tbody>
</table>

 Скругление углов в различных блоках на блоге, где это возможно.

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

Как скруглить углы блока на сайте

 

Делается это очень легко. Нужно только найти где выводится определенный блок и вставить вот такие строчки кодов:

 

-moz-border-radius: 50px –определяет скругленные углы для браузеров Firefox
-webkit-border-radius: 50px –определяет скругленные углы для браузеров Chrome
-moz-border-radius-bottomleft: 3px   – скругление нижнего левого угла радиусом в 3 пикселя для браузеров Firefox
-moz-border-radius-bottomright: 3px   – скругление нижнего правого угла радиусом в 3 пикселя для браузеров Firefox
-webkit-border-bottom-left-radius: 3px   – скругление нижнего левого угла радиусом в 3 пикселя для браузеров Chrome
-webkit-border-bottom-right-radius: 3px   – скругление нижнего правого угла радиусом в 3 пикселя для браузеров Chrome

 

На этом у меня все! Со временем будет продолжение данной статьи, добавления и правки буду вносить в эту статью. Чтобы быть в курсе, предлагаю подписаться на обновления блога по RSS.

Да кстати, хочу сразу сказать.

Почему по RSS? Потому что, форма почтовой рассылки очень сильно влияет на загрузку и скорость блога. Я ставил на блог форму от сервиса SmartResponder, и после этого скорость загрузки блога падала.

Как сделать форму подписки по RSS от Feedburner, и установить себе на блог, смотреть здесь!

Вы можете в комментариях сообщить, нужна ли вообще данная рубрика, и стоит ли мне дальше писать статьи на данную тему!

Всем пока!

Учите язык HTML, CSS и PHP