Азы HTML
htmlprovodnik


Перед тем как начать изложение материала хочу сделать существенное замечание.

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого - каждый год выходит новая версия HTML. С другой стороны - вэб-браузеры, с помощью которых пользователи просматривают html-страницы, также имеют свои различия в части интерпретации и поддержки отдельных тэгов. Это обусловлено тем, что разработкой браузеров занимаются различные компании. Что из этого следует? Попросту говоря, один и тот же html-код разные браузеры будут отображать по-разному, а некоторые тэги отдельные браузеры вообще "не понимают".

На страницах своего сайта я буду рассматривать дескрипторы, поддерживаемые Microsoft Internet Explorer 5.0 (IE 5.0). Это следует учитывать, когда будете разбирать приводимые примеры.

Вообще-то, язык HTML не является языком программирования. Это язык разметки гипертекста (HyperText Markup Language), т.е. называть его «языком HTML» не верно. Если говорить проще, то HTML это набор тегов (управляющих слов), которые позволяют представить обычный текст в форматированном виде.

А теперь хочу познакомить Вас с основными тегами, при помощи которых редактируется текст.

 
Что такое HTML теги?
Я не претендую на роль эксперта в этой области, но говоря профессиональным языком, тег – это своеобразный код, который используется при написании текстов страниц сайта; и указывает браузерам, каким образом визуально отобразить на странице значение данного кода.
Теги обычно парные. То есть есть тег, который сигнализирует об открытии определенного значения текста, а в конце его завершает тег, который закрывает его действие. Такие теги обычно заключаются в две угловые скобки: (<>) Закрывающая скобка обычно используется вместе со слешем (/) – это и есть сигнал к завершению данного тега! Обычно эти теги выглядят так: <></>
Представляю Вашему вниманию наиболее часто используемые теги и их значение, которые Вы легко и просто сможете применить, как в блоге, так и при редактировании сайта.
 
Основные теги форматирования текста:
  • <b>Выделяет текст жирным</b>
  • <strong>Так же жирный, сейчас этот тег используется наиболее часто</strong>
  • <u>подчеркивание</u>
  • <i>курсив</i>
  • <em>еще одно выделение курсивом</em>
  • <strike>зачеркивание</strike>
  • <center>Этот тег центрует Ваш текст на странице</center>
  • <p>Этот тег указывает на новую строку</p>
  • <blockquotes>«цитата»</blockquotes> (Этот тег обычно выглядит, как параграф с цитатой. Его вид зависит от заданных параметров шаблона Вашего блога.)

 
Теги ссылок:
  • Основная ссылка <a href=”url”>заголовок ссылки</a> (где‘url’ – это страница, на которую Вы ссылаетесь, а ‘заголовок ссылки’ – это описание страницы, на которую Вы ссылаетесь).

  • Ссылка эл.почты <a href=”mailto:Ваш e-mail”></a> (где ‘Ваш e-mail’ это ссылка на адрес Вашей электронной почты).
 
Теги заголовков:
  • <h1>Самый крупный и важный заголовок</h1>
  • <h2>Чуть менее важный заголовок</h2>
  • <h3>Еще менее важный заголовок</h3>
  • <h6>Самый маленький заголовок</h6>
 
Теги параметров текста:
  • Размер текста – <font size=”x”>редактируемый текст</font> – измените значение ‘x’ на нужный размер шрифта, где 1 – самый маленький, а 7 – самый большой.
  • Цвета – <font color=”#FF0000”>К примеру, красный!</font> (Где #FF0000 – это код для красного цвета. Коды цветов выложу в следующем посте).
  • Вид текста – <font face=”Arial”>Привет!</font> (где Arial – это один из видов текста).
 
Теги картинок:

Тег самой картинки – <img src=”url”> (где url – это ссылка на само изображение)
Тег картинки с указанием ее размеров <img src=”url” width=”200″ height=”150″> (где width – ширина, height – высота).
Расположение картинки- <img src=”url” align=left> (где ‘left’ – расположение слева. Так же можно указать расположение справа – ‘right’ и по центру – ‘center’)
Тег-описание (alt) - <img src=”url” alt=”краткое описание картинки”> (этот тег предоставляет описание картинки. Это описание помогает пользователям, которые отключили загрузку картинок на страничке, примерно понять, что на ней изображено).
Тег изображения в виде ссылки – <a href=”link url”><img src=”url”></a> (где ‘link url’ это ссылка на страничку, на которую ссылается Ваша картинка, а ‘url’ это ссылка на саму картинку).
Тег картинки с рамкой – <img border=”1″ src=”url”> (чем больше число в значении border “” , тем толще будет рамочка)
Тег свободного пространства вокруг картинки <img src=”url” hspace=10 vspace=10> (hspace – это пространство вокруг картинки по горизонтали, vspace  – по вертикали. Указываемое число соответствует размеру пикселей.)


 
Ненумерованный список:
    <ul>
  • <li>первый пункт</li>
  • <li>второй пункт</li>
  • <li>третий пункт</li>
  • </ul>
 
Нумерованный список:
    <ol>
  1. <li>первый пункт</li>
  2. <li>второй пункт</li>
  3. <li>третий пункт</li>
  4. </ol>
Это основные теги, которые пригодятся вам для редактирования текста!
Несколько лет назад я очень подробно изучал язык HTML. Этот опыт помог мне, как в редактировании шаблонов своих блогов, так и в создании сайтов своими руками!
Мои подписчики мне часто задают вопрос, как я внёсл в свой шаблон то или иное изменение. Отвечаю Вам – знание HTML просто необходимо в таких вещах! Зная теги и основы HTML, Вы самостоятельно и без особого труда сможете отредактировать любой шаблон и HTML страницу на свой вкус!

?

Log in

No account? Create an account