Заголовки

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

Каждый сайт, и каждая статья сайта начинается с заголовка.

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

Самый первый заголовок в новом документе, пишется в теге «title», который находится в контейнере «head». Название, прописанное в нём, отображается только во вкладке браузера.

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

Первый заголовок html документа - тайтл

Все заголовки в html заключаются в парный тег <h></h>. Всего таких пар в html — шесть: h1 – самый крупный заголовок, и h6 – самый мелкий. Остальные между ними в порядке убывания.

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

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

Синтаксис заголовков

Отступы слева выполняются нажатием клавиши «Tab».

Теперь можно вставить текст заголовка. Именно он будет отражаться на экране монитора, когда мы откроем страницу файла.

Синтаксис заголовков

Можно посмотреть, как же отразит наши письмена браузер. Для этого сохраняем в Notepad++ файл “index.html”, щёлкнув по третьей иконке слева на панели инструментов редактора, после чего иконка файла окрасится из красного в синий цвет. Изменения в файле сохранены.

Затем выбираем меню «Запуск», выбираем свой браузер и смотрим, что у нас получилось.

Результат применения тегов заголовков

И вот, наконец-то, можно полюбоваться на  первые записи сделанные нами собственноручно, и выведенные  браузером на экран монитора.

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

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

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

Профессор весь день приставал к молоденькой лаборантке, а вечером зажал ее в углу.
Будет ей наука!

Комментарии < < < В раздел > > > Абзацы

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

3 комментария на «Заголовки»

  1. stariс говорит:

    А какая у Вас CMS? Если WordPress, то установите плагин All In One SEO Pack, он очень полезен для продвижения. После установки и активации, в редакторе, после поля для текста, появятся поля плагина Title, Description, Keywords, Custom Canonical URL, Robots Meta NOINDEX, Robots Meta NOODP, Robots Meta NOFOLLOW и Disable on this page/post. У каждого поля есть описание под значком вопросительного знака.

    Что же касается Title, то что Вы напишете в этом поле, то и выведется во вкладке браузера.

  2. Марина говорит:

    Здравствуйте! Скажите как правильно выше указанный вами html «title» ввести в header.php и заменить первоначальный на свой?

  3. Джек говорит:

    Столкнувшись на собственных ошибках, понял что существует несколько видов , и все существующие различаются в зависимости от версии HTML. Вначале копировал, переписывал код с таким синтаксисом
    и. т. д.
    ничего не получалось… в лучшем случае весь код отображался на странице, а не искомая строка. Покумекав, стал выяснять почему так?
    Погуглив, пришел к… структуре HTML кода. Это уже интереснее )
    Вот что выяснил, есть строгое и переходное описание документа. То есть,
    вышеприведенный код это — строгий синтаксис HTML который требует жесткого соблюдения спецификации HTML и не прощает ошибок.
    Но хвала всевышнему! Есть еще и переходный синтаксис HTML который более «спокойно» относится к некоторым огрехам кода, поэтому использовать его предпочтительнее. Поправив код получил свою страничку какую и требовалось. Хотя примем для новичков, как сам.
    В дальнейшем по мере приобретения опыта, стоит применять лучше строгий (кроме отдельных случаев). Такой выбор методы, позволит избежать типичных ошибок и приучит к написанию синтаксически правильного кода.

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

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