Как делать красивые заголовки в html?

Kak vstavit' ssylku v tekst

Продолжаю серию постов об основах html для копирайтеров. Помнится, когда-то мы с вами говорили о том, как вставить в текст ссылку.

Сегодня будем разбираться, как делаются красивые заголовки в html. Хотя, если честно, тут и разбираться-то особо нечего.

Оговорюсь сразу о том, что все приемы, которые я опишу, можно выполнить и при помощи другого языка программирования – CSS. Но это – отдельный разговор. Сейчас мы знакомимся только с html-тегами. Они самые простые, а овладеть ими сможет сразу же каждый, кто вообще никогда не имел дела с программированием.

Итак, у нас есть заголовок:

Привет, мир!

Как из этого набора букв стандартным шрифтом сделать красивый заголовок в html?

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

Итак, пишем:

<h1>Привет, мир!</h1>

Посмотрите, в браузере получится вот такая красотень:

Привет, мир!

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

<h1>Привет, мир!</h1>

<h2>Привет, мир!</h2>

<h3>Привет, мир!</h3>

<h4>Привет, мир!</h4>

<h5>Привет, мир!</h5>

А в итоге в браузере получим:

Привет, мир!

Привет, мир!

Привет, мир!

Привет, мир!
Привет, мир!

Ну как, красиво? Смею вас заверить, это еще не все!

Допустим, мы сделать не просто заголовок в html, а еще и задать ему определенный шрифт. Для этого используется вот такой тег:

<font color=”X” face=”Y”></font>

где вместо Х нужно подставить название цвета (или его условное обозначение из 6 цифр, см. ниже), а вместо Y – название шрифта.

Допустим, вот так:

<font color=”red” face=”arial”><h2>Привет, мир!</h2></font>

Получается вообще красотишша:

Привет, мир!

Стоит помнить, что для того, чтобы шрифт заголовка отображался, нужно, чтобы он был на компьютере у посетителя сайта. Если у кого-то вообще нет ариала, то он увидит ваш заголовок все равно в таймс ньюз романе. Так что если меняете шрифт, то меняйте его на стандартный, такой, который есть на всех компах. А если вам надо написать что-то прямо такое витиеватое, то вставьте лучше на сайт в виде картинки. Согласен, плохо для SEO… зато хорошо для людей.

А вот, пожалуйста, вам номера цветов в html:

krasivye zagolovki v html

Например, можно написать: <font color=”466455” face=”arial”><h2>Привет, мир!</h2></font>. Посмотрите, какой цвет заголовка у вас получится в итоге.

Ну вот мы и научились делать красивые заголовки в html. Несложно, правда?

С Вами был, как всегда, Артем Кабанов. С уважением к Вам и Вашему делу! Успехов и до новых встреч!

Понравилась статья? Поделись с друзьями:
Комментариев: 15
  1. Константин Александрович

    В очередной раз заглянул на этот полезный сайт и прочел данную статью. И как всегда время потрачено не зря. Никогда не знал и не понимал как делаются эти заголовки в html. Артем, спасибо большое за полезную информацию. Надо отметить, я далек от программирования, а тут все понял. Сейчас попробую сделать какую-нибудь красоту:)

  2. Amilkina

    Хочу сказать спасибо авторам! Уже давно слежу за интересными и полезными статьями сайта! Благодаря Вам я уже многому научилась! Самое приятное, что статьи написаны понятным языком, поэтому лично у меня все получается с первого раза!

    С нетерпением жду следующих уроков, а пока закреплю результат по созданию заголовков ;)

  3. Артем Мартиросян

    Я уже Ваш сайт добавил на Экспресс-панель. Довольно интересная статья. Никогда не занимался программированием. Теперь наверно попытаюсь что-нибудь сделать. Хотя бы начну с заголовка.

  4. Людмила

    И я добавила ваш сайт на экспресс-панель. Очень много полезной информации, даже не ожидала. Спасибо.

    1. Артем Кабанов (автор)

      Людмила, очень рад. Такие отзывы от читателей для копирайтера всегда даже приятнее, чем деньги от заказчиков :-)

  5. jenims.ru

    Дата написания статьи 2013 год, а вы до сих пор используете устаревшие теги font? Начните использовать css.

    1. Артем Кабанов (автор)

      jenims, замечание справедливое, но только если подходить к вопросу академично. Нас сейчас интересует самый быстрый и простой способ для людей, которые не ориентируются в тонкостях языков программирования. А CSS я давно пользуюсь ;-)

  6. Владимир

    Здравствуйте, Артём! Очень интересный сайт Вы создали. Язык изложения материала прост и понятен. Много интересных открытий для себя сделал на Вашем сайте. Мне понравилась у Вас карта сайта. Поделитесь, на каком плагине эта красота работает. Спасибо!

    1. Артем Кабанов (автор)

      Владимир, спасибо на добром слове! Плагин — Dagon Design Sitemap Generator.

  7. ilianna.ru

    Кстати заголовки реально можэно сделать необычными и красивыми. Для этого берем полупрозрачное изображение и накладываем на верхние половинки букв. Выходит что у нас верхние буквы светлее нижние темнее, классный эффект. Все это делается само собой с помощью абсолютного позиционирования. :P

    1. Артем Кабанов (автор)

      Много есть разных фишек. Вот только многие из них имеют не только достоинства, но и недостатки.

  8. Александр

    Удивительное дело: попробовал изменить заголовок сайта на юкозе, и у меня ничего не получилось... Странно.

    1. Артем Кабанов (автор)

      К сожалению, я не работал с Юкозом, поэтому не могу ответить вам что-то вразумительное. Но если вы говорите о внешнем виде заголовка — да, в CMS с этим часто возникают проблемы, html-теги не работают.

      1. Александр

        Ничего, что-нибудь придумаем! Спасибо за быстрый ответ. С Рождеством Христовым!

        1. Артем Кабанов (автор)

          C Рождеством! С праздником!

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: