HTML теги.Что должен знать начинающий блоггер.

Большинство людей, которые решают создать свой блог, не задумываются о том, что могут столкнуться с такой проблемой как редактирование своих статей именно с помощью тегов HTML.

В наше время практически все движки сопровождаются визуальным помошником оформления статей и имеют нужные кнопки для форматирования текста. Жирный, курсив, зачеркнутый шрифты, различные формы списков, цитаты, выравнивания текста на странице, цвет, добавление ссылок и так далее. Все хорошо когда все это есть на панельках Вашего редактора. Но как быть, если что-то пошло не так и Вам необходимо редактировать все  в ручную, роясь в непонятном для Вас HTML коде, а если еще и затрагивать каскадные таблицы стилей(CSS), то для новичка это полный аврал!

В этой статье я не буду выкладывать полный или даже краткий курс об основах HTML и CSS. Мы поговорим о самых распостраненных моментах редактирования.

Итак, начнем.

Понятие тег (<>):

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

Пример: <em>курсив</em>

<em> – открывающий тег курсива

</em> – закрывающий тег курсива

Исходя из примера выше,весь текст (в данном случае слово “курсив”), который будет распологатся между открывающим и закрывающим тегами “em”, будет отображатся курсивом.

Поговорим о наиболее часто встречаемых тегах для редактирования текста:

• <strong>текст</strong>
• <em>текст</em>
• <strike>перечеркнутый</strike> – можно редактировать с помощью тегов <strike>

!особый случай здесь уже идет работа со стилями и тегами HTML, html версия будет сделующей: <span style=”text-decoration: line-through;”> текст </span>

• <u>текст</u> – подчеркнутый текст. Его можно редактировать и тегами  ”<u></u>” так и как в предыдущем случае с зачеркнутым текстом: <span style=”text-decoration: underline;”></span> – только меняя значение line-through(с анг. перечеркнуть) на underline(с анг. подчеркнуть). Заметка: В HTML отображается именно версия с тегами “<span style=”text-decoration: underline;”></span>“, а теги “<u></u>” служат больше для легкости установки подчеркивания.
• Список. Список редактируется следующим набором тегов:

1. <ul></ul> – теги объявления списка
2. <li></li> – теги объявления строки списка

Теги списка должны распологатся как дерево в следующей последовательности:

<ul>

<li>Текст</li>

<li>Текст</li>

</ul>

Между тегами  <li></li> можно так же вставить теги ссылок:  <a href=”">Text</a>

• Тег  <blockquote>текст</blockquote> – служит для того, что бы выделять какие-либо цитаты.

Пример:

Быть или не быть, вот в чем вопрос!

У.Шекспир

Внешний вид этого блока, зависит от того, как он описан в вашем CSS файле.

Ссылки:

• Обычная ссылка <a href=”http://вашсайт.ру”>текст ссылки</a>
• E-mail ссылка <a href=”mailto:имя_ящика@email.com”>текст ссылки</a>

Поговорим о таких, немаловажных тегах как заголовки:(их отображение полностью зависит от того какие стили Вы прописали для них в CSS файле)

• <h1>Важный заголовок</h1>
• <h2>Менее важный заголовок</h2>
• <h3>Еще менее важный заголовок</h3>
• <h4>Простой заголовок</h4>

Картинки:

• Просто тег изображения — <img src=”путь к картинки”> просто вписываете путь к картинке, которую хотите показать.
• Изображение с размерами — <img src=”путь к картинки” width=”100″ height=”100″>
• Выравнивание изображения влево — <img src=”путь к картинки” align=left> (выравнивание ‘left’ и ‘right’ соответственно влево или вправо)
• Тег +alt значение— <img src=”путь к картинки” alt=”краткое описание картинки”> (этот тег сообщит посетителю информацию о картинке, если картинка не загрузилась в его браузере.
• Изображение как ссылка — <a href=”путь ссылки”><img src=”путь к картинки”></a> (где путь ссылки это путь к страничке на которую должен перейти пользователь нажав на картинку).
• Изображение в рамке — <img border=”1″ src=”путь к картинки”> (чем больше цифра в border “” тем жирнее рамка вокруг изображения)
• Пространство вокруг картинки <img src=”путь к картинки” hspace=10 vspace=10> (hspace это горизонтальное пространство и vspace Это вертикальное пространство. Цифрами указывается количество пикселей пространства вокруг изображения. Эти параметры также зависят от вашего CSS файла.

Как Вы заметили все теги img без зкарывающего тега. Это правильно. Но есть одно НО: для валидной верстки в конце тега <img> ОБЯЗАТЕЛЬНО нужно ставить закрывающий слеш “/” что бы вышло: <img …  /> – это правильно!

Немогу пропустить  одно простое решение, для новичков. Если Вы не можете вставить 2 картинки встроку, то самый простой  способ это создать табличку, разбить ее на две ячейки. Присвоить таблинце border=0 и ячейкам valign=”top”.

Вот простое решение:

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

Валидная верстка XHTML Strict 1.0

Удачи в Ваших начинаниях!

Вы ведете свой бизнес? Отличный способ упорядочить Ваш бизнесь это поддержка 1с! Много положительных черт имеет эта поддержка. Вы забудете о многих проблемах!

Вы хотите отдохнуть душой и телом? То индивидуалки к Вамшим услугам! Спешите на vipdosug.info.

Открыт новый ресурс. Там вы можете узнать много интересного про 100 великих людей, событий, видов деятельности и многое другое!