Каталог товаров
Клиенту
Тема сайта:
Контакты
Время работы
  • Пн-Пт: с 9 до 18
  • Сб.: с 10 до 17
  • Вс: с 11 до 16
E-mail
Мы в соцсетях
Перейти в контакты
0 0
Каталог
Главная
Закладки
0
Сравнить
0
Контакты

Урок 1. HTML5 и структура HTML для начинающих

Урок 1. HTML5 и структура HTML для начинающих
Каждый, даже самый непродвинутый пользователь, хоть раз сталкивался с таким понятием, как HTML. Что же это такое и для каких целей его использовать? Аббревиатуру HTML можно расшифровывать как Hypertext Markup Language. Проще говоря, это язык, используемый для разметки гипертекста. HTML сложно отнести к языкам программирования, это понятие скорее относится к области размещения элементов в браузере. При помощи HTML можно показать обозревателю, как должны располагаться элементы на странице сайта, когда пользователь откроет сайт. 

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

Если открыть код любой страницы HTML, то можно заметить, что состоит она из множества непонятных, на первый взгляд, символов. Эти символы являются основой HTML – это теги. Некоторые теги требуют обязательного закрытия, хотя современные браузеры иногда и игнорируют ошибку подобного рода, но пренебрегать правилами нельзя, это может нарушить структуру документа, некоторые же теги не требуют закрытия вовсе. Нужно быть внимательными.

HTML -документ состоит из следующих обязательных, основополагающих тегов, без которых невозможна страница в сети:

<!DOCTYPE html><head> 
Заголовок</head> <body>Тело</body></html>

Теги < !DOCTYPE html> </html> всегда открывают и закрывают документ, DOCTYPE объясняет непонятливому браузеру, как стоит разбирать этот документ, в старых версиях HTML доктайп имел разные значение, в современной пятой версии допустимо вышепредставленное написание, поэтому не будем углубляться в подробности и используем его. Между ними помещаются все остальные теги.

Сам документ делится на «голову» и «тело» документа. Для этого используются теги <body> </body> и <head> </head>. Не сложно догадаться, что тег <body> это тело документа со всеми элементами, которые отображаются на странице, а <head> это голова, в которой содержатся скрипты, метаданные и проч. Содержимое тега head физически мы не видим, но он имеет колоссальное значение для продвижения и функционирования страниц сайта.

Внутри тегов html помещают другие теги, не забывают про голову и тело документа, например,

<b>Содержимое 1</b><p>Содержимое 2</p><div>Содержимое 3</div>

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

Тег <title> </title>. Это обязательный тег, с его помощью размещается необходимый заголовок страницы сайта. Его оптимальная длина 60-70 символов, будьте внимательны. Это название будет отображаться в выдаче поисковика и на вкладке браузера и необходимо для SEO-продвижения. Его необходимо поместить между тегами <head> </head>

Еще одним важным одиночным мета-тегом, который необходимо писать в head проекта становится кодировка документа. Она необходима, чтобы не произошло путаницы с предполагаемой и фактической кодировкой, иначе отображение всего вашего важного контента может превратиться в набор невнятных символов. Самая распространенная кодировка для кириллицы - utf-8, использование других кодировок, на основе windows считается дурным тоном сейчас.

Для поисковой системы большое значение имеют еще два мета-тега, которые прописываются в голове документа, это Keywords (ключевые слова) и Description (краткое описание). В них пишется информация не для пользователей, а для поисковиков, чтобы рассказать о ключевых моментах статьи и ее кратком описании (Длина до 120 символов). Значение для поисковых сиситем этих тегов сейчас остается загадкой, раньше ключевики большое влияние оказывали на выдачу, сейчас ситуация спорная.

<head><title>Заголовок</title><meta charset="utf-8"><meta name="description" content="описание"><meta name="keywords" content="ключевые, слова, через, запятую"></head>

Почти все теги имеют парную структуру: <> и </>. Это контейнер. Все, что помещается между ними, например, «Заголовок» - содержимое контейнеров.

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

Теги могут обладать атрибутикой. Наподобие параметра bgcolor:

<body bgcolor="grey">Текст</body>

Таким образом тег <body> имеет атрибут bgcolor со значением «grey». Так можно сделать фон документа серым. Набор атрибутов у каждого тега различается, все зависит от функционала данного элемента. 

Все теги и атрибуты находятся в свободном доступе. Зайдя в поисковую систему, можно с легкостью найти все теги и параметры, а также их значения. По сути, документ HTML состоит и этих элементов, меняя которые можно построить структуру сайта. Например, на сайта http://htmlbook.ru вы найдете подробное описание всех элементов HTML страницы, тегов, атрибутов, примеров использования. Научиться применять 

Уроки по HTML

Похожие статьи
Урок 1. HTML5 и структура HTML для начинающих
Урок 1. HTML5 и структура HTML для начинающих
Блог, Уроки по HTML
30 октября
Урок 2. Основы CSS, подключение CSS-файлов
Урок 2. Основы CSS, подключение CSS-файлов
Блог, Уроки по HTML
30 октября
Урок 5. Верстка таблиц, теги table, tr, td
Урок 5. Верстка таблиц, теги table, tr, td
Блог, Уроки по HTML
30 октября
Урок 6. Верстка форм
Урок 6. Верстка форм
Блог, Уроки по HTML
30 октября
Урок 7. Основы CSS, уроки CSS
Урок 7. Основы CSS, уроки CSS
Блог, Уроки по HTML
30 октября