Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
DOCTYPE html PUBLIC
Мы с Вами уже познакомились с общей структурой страницы html. Однако, тег <html> - не самая первая строчка большинства страниц в сети. Сегодня мы с вами познакомимся с элементом <!DOCTYPE>, который нужно указывать в начале каждого html-документа, в первой строчке кода. Присутствие элемента DOCTYPE html PUBLIC также является обязательным условием для валидности html-кода (кода, соответствующего стандартам).
Значение тега DOCTYPE
Фактически, несмотря на треугольные скобки, элемент <!DOCTYPE> тегом не является! Это инструкция для браузера, которая передает ему версию html-кода, на которой написана наша веб-страница. Проще говоря, элемент <!DOCTYPE> указывает тип нашей веб-страницы для браузера. Браузер, в свою очередь, принимает данное значение и благодаря этому отображает содержание страницы правильно.
Из первого видеоурока, мы знаем, что есть разные версии HTML, да и более того есть XHTML - более расширенный язык разметки гипертекстовых документов. И вот для того что бы браузер понимал какая у нас версия, мы и будем указывать DOCTYPE вверху нашей страницы.
Правильные варианты DOCTYPE html
Вариантов написания DOCTYPE html существует не так мало. Чтобы во всем этом не запутаться, давайте разберемся, для чего предназначен каждый из них.
HTML 5
Стандарт HTML 5 является самым последним на данный момент. Его легко запомнить и легко написать. Вы можете без проблем использовать данный стандарт для своих страниц. Единственное, с чем не стоит торопиться, так это с использованием новых тегов, которые пришли вместе с данным стандартом. Причина простая: старые версии браузеров не поддерживают новые теги, а пользователей сидящих на этих самых версиях браузера — пока еще много. Если Вы сейчас что-то не понимаете или не будете понимать — не волнуйтесь. Все это мы с вами постепенно разберем. Сейчас, не забивайте этим голову. Просто я пишу некоторую справочную информацию для Вас в целях дальнейшего возвращения к ней. Согласитесь, лучше, когда информация разбита по четким разделам. В видеоуроке, я намеренно не усложняю процесс изучения, избегая данной информации 🙂
<!DOCTYPE html>
HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)
Стандарт HTML 4.01 является более древним стандартом, нежели HTML 5. Однако, он до сих пор используется и понимается браузерами.
Версия HTML 4.01 Strict содержит все элементы и атрибуты своей версии, но не включает презентационных и устаревших элементов. Использование фреймов она также не допускает.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Версия HTML 4.01 Transitional содержит все элементы и атрибуты своей версии, ВКЛЮЧАЯ презентационные и устаревшие элементы. Использование фреймов она также не допускает.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Версия HTML 4.01 Frameset аналогична версии Transitional, но при этом позволяет использование фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict (строгий), Transitional (переходный), Frameset (с фреймами)
Стандарт XHTML — является расширенной разметкой гипертекста. Разметка версии XHTML 1.0 должна быть записана в виде хорошо сформированных XML. Уточнения Strict, Transitional и Frameset работают аналогично версии HTML 4.01 (описанной чуть выше).
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
Данная версия аналогична версии XHTML 1.0 Strict, однако разрешает добавление программных модулей.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Тег Header и тег Head
Тег head, как раздел, предназначен для указания заголовка страницы и другой технической информации. Так же прошу не путать элемент head с элементом header. Тег header появился в версии HTML5.
Сейчас я вам про него расскажу подробнее.
Все мы знаем, что у страницы есть HEADER – это означает шапка сайта. Здесь может быть и форма поиска и логотип и так далее. Есть FOOTER (футер), в котором обычно располагается копирайт сайта. И есть колонтитулы. Может быть только левый, только правый, могут быть оба сразу. В них менюшки всякие и так далее. И тег <header>, появившийся в версии HTML5, отвечает за верхнюю часть. Поэтому не путайте его с тегом <head>.
Итак, давайте зайдем в нашу страничку HTML и пропишем там этот элемент .
Напоминаю, открываем файл index.html который находится в папке Site на рабочем столе которую мы создавали.
И строчкой выше элемента HTML, вводим элемент DOCTYPE.
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
Сейчас мы ввели данные версии 4.01.
Если вы будете кодировать в версии 5, то там, все проще.
Пример ввода для HTML 5:
<!DOCTYPE HTML>
Но, так как мы кодируем в версии 4.01, то вернемся обратно.
Тег или метатег title
Теперь давайте перейдем к разделу HEAD, к голове нашего сайта. О том, что такое теги и атрибуты, мы поговорили в прошлом видеоуроке, а теперь давайте разберем тег <title>. Иногда его называют и метатегом. Но об этом мы еще поговорим чуть ниже. А сейчас давайте еще раз познакомимся с этим тегом. Как я уже говорил ранее, тег <title> - заголовок нашего документа. То есть, по заголовку, пользователь, зашедший на ваш сайт, получит информацию о том, что это за сайт, как называется эта страница и поймет, где он находится. Данный тег очень полезен, так как когда пользователи ищут ваш сайт, то поисковики используют при выводе заголовка страницы именно тег <title>.
Пример:
ТОП 10
- Название сайта (тег title)
- Название сайта (тег title)
- Название сайта (тег title)
- ...
Название сайта берется из тега <title>, который находится в теге Head, и помещается в результаты поиска вместе с проиндексированной страницей. Если Вы сворачиваете страницу, или добавляете страничку в избранное, то там отображается именно содержание тега <title>. Надеюсь, я вас убедил в его надобности 🙂
Напомню еще раз, тег <title> помещен в раздел HEAD. И указывается он следующим образом:
<title> Название Вашей страницы </title>
Мета теги или метаданные это...
Что такое метаданные?
Метаданные — это данные о данных, то есть информация о контенте на странице.
Тег meta
А сейчас давайте рассмотрим тег — мета, пишется он так: <meta>.
Тег мета хранит информацию, предназначенную для браузеров и для поисковых систем. Данный тег не имеет закрывающего тега, то есть не надо вводить </meta>.
Итак, познакомимся с первым элементом мета тега — charset.
Данный элемент это кодировка вашего сайта.
Давайте пропишем нашу кодировку.
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
Charset – как я уже говорил, обозначает кодировку. Значение сharset стоит utf-8.
Для русского языка пойдет как utf-8 так и windows-1251.
То есть, всегда вводим либо windows-1251 либо utf-8.
http-equiv="Content-Type"
Данная строка обозначает тип кодировки документа, то есть, то, что мы сейчас будем прописывать в кодировку документа, задана она с помощью
content="text/html;
потом уже идет наша кодировка
charset=utf-8"
Также, еще можно указать язык веб-страницы. Этого делать, честно говоря, не обязательно, но можно попробовать.
Вводится он так:
<meta http-equiv="Content-Language" content="ru">
Так с кодировкой мы разобрались, переходим к следующему пункту.
Мета тег keywords
Следующий пункт у нас keywords – ключевые слова.
Keywords и description, ключевые слова и описание, используют атрибут name. Далее прописывается атрибут content, и сюда прописываются ключевые слова. Например: мой, любимый, сайт, собачка.
<meta name="keywords" content="мой, любимый, сайт, собачка">
И все остальные ключевые слова, которыми можно описать Ваш сайт.
Мета тег description
Далее по списку идет description. Здесь та же схема, и в атрибут content записывается краткое содержание сайта.
Давайте проверим нашу страничку в браузерах, которые мы скачали из дополнительных материалов первого видеоурока по HTML. Жмем кнопку «Сохранить». И запускаем наш файл.
И... видим, что у нас, казалось бы, ничего и не изменилось, но так оно на самом деле и должно быть, так как раздел Head не показывается пользователю.
Если мы посмотрим исходный код, то увидим, что все у нас прописалось.
<!DOCTYPE HTML Public “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <meta http-equiv="Content-Language" content="ru"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" content="мой, любимый, сайт, собачка"> <meta name="description" content="Сайт про любимые собачки"> <title>Главная страница </title> </head> <body> <p align="center"> Добро пожаловать на мой сайт </p> <p><h2><font></font></h2></p> <br> <h1> Рад вас видеть. </h1> </body> </html>
Советы по заполнению мета тегов
Мета теги и тег title в частности, играют существенную роль во внешней жизни сайта, так как они помогают поисковым системам более точно понять о чем молвят страницы вашего сайта. В благодарность за это, поисковые системы будут публиковать страницы Вашего сайта по данным запросам, а пользователи — находить их. Неправильное заполнение метаданных может существенно навредить сайту в продвижении. Избежать этого, Вам помогут наши советы по заполнению мета тегов:
- Содержание мета-тега title не должно превышать 60 символов, так как большинство поисковиков ставят именно такое ограничение.
- Содержание meta-тега description не рекомендуем делать более 160 символов.
- Ключевые слова (мета-тег keywords) заполнять в принципе не обязательно. Но если Вы решите их заполнить, не нужно писать туда тысячи слов. Это Вам может только навредить. 3-5 ключевых фраз вполне достаточно.
Генератор мета тегов
Специально для Вашего удобства, я сделал небольшой генератор мета-тегов. Введите нужные данные, нажмите кнопку «генерировать» и Вы получите html-код ваших мета-данных в поле «Ваши метаданные». Однако, прежде, чем использовать онлайн-генератор meta-тегов, я Вам настоятельно рекомендую изучить информацию по метатегам, написанную выше (в данном уроке).
Мета теги, элемент DOCTYPE, тег Header, тег Head, а также генератор мета тегов — это все, что я хотел Вам рассказать в данном уроке. Встретимся в следующем видеоуроке про параграфы и заголовки! 😉
DOCTYPE html Public — обязательная инструкция для браузера. Мета теги - теги, содержащие данные о веб-странице.
Info-line.net
Вот мой код такой же как на видео:
помогите найти в чем сделал ошибку
текст «Добро пожаловать на мой сайт» показывает слева
Главная страница=)
Добро пожаловать на мой сайт
Рад вас видеть.
Не могу проверить ваш код, так как не вижу его 🙂
Чтобы вставить код в комментариях воспользуйтесь тегами
(html)и(/html), заменив круглые скобки на квадратные, то есть на[и]Попробуйте решить неполадки в тегах
meta, заменив это:на это:
Возможно именно в этом кроется проблема, однако точно сказать не могу. Если проблема не решится — напишите об этом в комментариях, будем думать как ее решить.
Спасибо:)помогло:)
а у меня получается квадратики заместо букв
вот мой код
Проблема в кодировке. Воспользуйтесь пожалуйста кнопкой «Код» для вставки кода.
в браузере надо менять кодировку на кирилиш, и тогда без квадратиков.
Верно. В любом случае, в будущем ваш сайт будет располагаться на хостинге, а не у вас на компьютере. По этому вопросу у нас есть видеокурс по размещению сайта в интернете и там рассмотрена проблема с кодировкой. Пока же, вы можете поставить любую кодировку, с которой вам удобно работать в браузере.
у меня почемуто красным высвитился код
C
DOCTYPEвсе нормально. С тегомpпроблема, о которой я рассказываю в следующих видеоуроках: он у вас отобразился красным, так как включает в себя родительские тегиh2. Нам известно, что дочь появляется на свет от матери, а не наоборот) Мы сделали это наоборот)когда будет новый видео урок ?
Мои извинения за задержку. Скоро уроки начнут появляться в прежнем режиме.