Теги html и их назначение при создании web документа

HTML-EducationВ каждом браузере имеется возможность просмотра исходного кода веб-страницы, для этого необходимо, находясь на странице, щёлкнуть правой кнопкой мыши. При загрузке страницы, браузер использует именно этот код для правильного отображения элементов на мониторе. Этот код написан на языке разметки гипертекста HTML и для правильного отображения картинок, текста и прочего используются теги.
Теги в HTML — это команда, которая помещается в угловые скобки. Она даёт указание браузеру на выполнение той или иной команды. Именно совокупность этих тегов делает сайты красивыми. Профессионал, создающий веб-страницы, не имеет права на ошибку, так как даже самая малейшая ошибка может испортить всё оформление сайта html.

Краткая характеристика тегов.

Верстальщик знает язык HTML как музыкант нотную грамоту. Однако все теги HTML можно условно поделить на 8 категорий:

Теги верхнего уровня. Данные теги языка разметки гипертекста формируют всё “тело” будущей веб-страницы. К тегам верхнего уровня относятся такие команды, как: <html>, <head>, <body>. И без них дальнейшее отображение материала на сайте невозможно.
Теги заголовка документа. Эти теги располагаются в контейнере <head>. Данные теги не видны глазу пользователя, однако они играют очень важную роль в создании веб-сайта. Например, метатеги <meta> используются верстальщиками для продвижения сайта в поисковиках, так как они содержат ключевые слова, по которым поисковики находят тот или иной сайт. Или же тег <title>, который отображает содержание веб-страницы.
Блочные теги. Данные элементы всегда пишутся с новой строки и занимают весь её объём, так как зачастую они выводят текстовые заголовки различной величины. <h1>, <h2>, <h3>, <h4> — какая же между ними разница? Каждый последующий заголовок будет меньше и иметь меньше прав (например, <h4> будет на 4 уровня меньше, чем <h1>. К блочным тегам также относится <blockquote> и блочный контейнер <div>, который чаще всего используется верстальщиками из-за богатого ассортимента функций.
Каждый тег представляет из себя команду. И браузер её исполняет шаг за шагом, выводя элементы в соответствии с данной ему инструкцией.
Строчные элементы. Эти элементы видоизменяют текст, их очень много: <a>, <b>, <big>, <br>, <em>, <img>, <small>, <span>, <strong>, <sub>, <sup>. Зачастую, они являются частями других элементов, таких как абзац, к примеру.
Универсальные теги. Они, в зависимости от контекста, могут быть либо встроенными либо блочными элементами. К универсальным тегам относятся элементы <del>, <ins>.
Теги для списков. Данные элементы формируют различные списки. Например:
<ol> — Упорядоченный список;
<ul> — Неупорядоченный список;;
<li> — Элемент списка;
<dl> — Список определений;
<dt> — Элемент списка определений;
<dd> — Описание элемента в списке определений;
Табличные теги <table>, <td>, <th>, <tr> используются для создания таблиц, изменения её параметров. Табличные элементы позволяют легко задавать необходимое количество строк и столбцов.
Теги для фреймов. Они улучшают навигацию по сайту, разделяя веб-страницу на несколько документов: <frame>, <frameset>, <iframe>.
Скорее всего, файлы будут обрабатываться PHP, поэтому команды языка PHP будут указывать, с какого момента начинается и заканчивается обработка.

Совсем недавно вышел HTML5 и уже полным ходом разрабатывается HTML6, поэтому, по словам разработчиков, термин “тег” устарел, поэтому они плавно вводят новое понятие — элемент. С HTML5 все теги исчезают, а вместо них появляются элементы. Сделано это было для улучшения восприятия пользователем некоторых атрибутов к элементам. Грань между HMTL и CSS начинает стираться, а разработчики добавляют всё более новые функции в HTML для дизайна.
У верстальщиков зачастую возникает потребность в создании собственных конфигураций тегов. Для этого используется стороннее программное обеспечение, которое поможет увеличить посещаемость сайта и улучшит дизайн.
Это базовые навыки вёрстки веб-сайта, однако при кратком знакомстве с семантикой и синтетикой HTML, вы запросто сможете научиться создавать простые веб-страницы.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика