Основы HTML для начинающих | Работа в интернете на дому без вложений
Главная » Основы сайтостроения » Основы HTML для начинающих

Основы HTML для начинающих

Основой всего интернета является html (язык гипертекстовой разметки). Нет html – нет интернета. Хотя это и звучит устрашающе, но это правда.

Развивая проекты нужно помнить о том, что без знаний основ html вам будет сложно добиться успеха в сайтостроении.

Основы HTML для начинающих

Самый необходимый минимум о HTML для начинающих сайтостроителей

Мое утверждение касается далеко не всех. Если ваш проект для друзей и вы находите отдушину в писательстве можете не читать этот урок. Постойте! У вас серьезный проект? Вы хотите высоких позиций в поисковых системах? А ну быстро вернулись в аудиторию. Возьмите ручки и записывайте… Будет интересно и полезно.

HTML это

Как я уже говорил выше html это язык гипертекстовой разметки. Браузеры переводят html код в удобочитаемый вид для человека. Так сказать интерпретируют или декодируют.

Документы языка html состоят из тегов. Тег это небольшой код, куда помещается информация. Существуют теги, которые не нужно закрывать (реже) и есть теги, которые нужно закрывать (чаще).

Пример с тегами: <h1>Заголовок 1</h1>, <b>жирный текст</b>, <a href=”http://www.site.ru”>Ссылка на сайт</a>.

HTML теги

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

Рассмотрим теги, которые используются для контента.

<h1>Заголовок 1 уровня</h1> Здесь заключается основной заголовок статьи. При ранжировании сайта поисковик учитывает этот тег и передает ему самый большой вес. Не используйте этот тег больше одного раза, иначе попадете под фильтр поисковых систем.

<h2>Заголовок 2 уровня</h2> Второй по значению после заголовка статьи. Допустим, ваша статья называется Mercedes Benz, а подзаголовок эксплуатация в городских условиях. Значит Mercedes Benz заключаем в тег h1, а эксплуатация в городских условиях в тег h2. Простая иерархия. Не используйте этот тег больше 2-3 раз, иначе схлопочете фильтр. Если статья большая и требует большего количества заголовка 2 уровня, то это приемлемо.

H3…H6 Заголовки с 3-го по 6 уровень. Выполняют ту же самую функцию, но с понижающим значением. Не забывайте соблюдать иерархию заголовков. Статья должна начинаться с тега h1 и плавно спускаться до h6. Теги нижних уровней можно использовать чаще.

<b>жирный текст</b> или <strong>жирный текст<strong> Этот тег выделяет текст жирным. Слова, заключенные в тег strong ранжируются в поисковых системах выше, чем простой текст. Только не нужно использовать этот тег в каждом предложении. Текст пестрящий жирным будет воспринят как спамный.

<i>курсивный текст</i> используется реже чем тег b, но имеет свои преимущества. Текст выделенный курсивом читается легче и не отвлекает внимание от текста. Иногда курсивом помечают цитаты. Поисковые системы обращают внимание на курсив и придают ему значение. Не злоупотребляйте. Соблюдайте меру в применении тега i.

<u>подчеркнутый текст</u> Тег u подчеркивает текст. Часто этот тег путают с ссылкой. Используется редко и в специфичных ситуациях. Учитывает поисковик этот тег или нет я не знаю.

<p>перенос абзаца</p> Используется для переноса абзаца. Если заключить в этот тег текст он будет начинаться с нового абзаца. Ходят слухи, что поисковые системы обращают внимание на тег p, который структурирует информацию для удобства читателей. Миф это или правда не знаю. Но даже если миф используйте для блага своих посетителей. Текст должен читаться легко. Представьте эту статью в одном абзаце?! Да вы сразу же покинете мою страницу.

<br>перенос строки</br> Отличие тега br от p в том, что он не добавляет пустой отступ перед строкой. Текст начинается с новой строки, но отступа между верхней и нижней строчкой нет.

<li>Элемент списка<li> Тег li определяет элемент списка.

<ul>маркированный список</ul>

<ol>нумерованный список</ol>

Приведу пример.

<ul>
<li>маркированный список ul</li>
</ul>

<ol>
<li>нумерованный список ul</li>
</ol>

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

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

Встретимся на следующих уроках. Пока.

ЧИТАЙТЕ ТАКЖЕ ИНТЕРЕСНОЕ ПО ЭТОЙ ТЕМЕ:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *