Что такое html?
advertisement
КУРС ВЕБ ДИЗАЙН И ПРОГРАММИРОВАНИЕ Создаем первый сайт HTML ЧТО ТАКОЕ HTML, ОСНОВЫ HTML HTML (HyperText Markup Language) - язык разметки гипертекста. HTML указывает браузеру, как разместить элементы на странице при ее отображении на экране монитора. html элемент-элементы, размещенные на сайте - текст, рисунки, анимации и т.д Основу HTML составляют тэги ТЭГИ И ИХ РАЗНОВИДНОСТИ <b>Что такое html?</b> - этот текст будет отображаться жирным; <i> Этот текст будет выделен курсивом</i> Тегами обозначаются <> (<br>,<i>,<b>) Между < и > находится имя тега и его параметры (если они есть). ПАРНЫЕ И ОДИНАРНЫЕ ТЭГИ Парные тэги Одинарные тэги <>…..</> Такие теги просто совершают определенное действие, например, Такая пара тегов называется контейнером. <br> перевод строки А все, что находится между ними содержимым контейнера. <img src=“”> вставка рисунка. Действия тегов распространяются только на их содержимое. ТЕГИ МОГУТ ИМЕТЬ ПАРАМЕТРЫ (АТРИБУТЫ) <body bgcolor=“red”> Содержимое </body> В данном случае тег <body> имеет параметр bgcolor, значение которого равно "red". Переводя на человеческий язык - сделать фон документа красного цвета. HTML - это набор тегов и их параметров. СТРУКТУРА HTML-ДОКУМЕНТА СОСТОИТ ИЗ ТРЕХ ПАР ТЕГОВ: HTML ТЭГИ Теги <html></html> являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега <html> , а заканчиваться тегом </html> . Сам документ условно разделен на две части - заголовок документа (теги )<head></head> и тело документа (теги )<body></body>. ЗАГОЛОВОК ДОКУМЕНТА - ТЕГ HEAD И ЕГО ЭЛЕМЕНТЫ Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ. Title Единственным обязательным элементом заголовка документа являются теги <title></title> . <title>Заголовок документа</title> Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера. ПРИМЕР ОТОБРАЖЕНИЯ КОДА В БРАУЗЕРЕ <Title></title> Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами. Не давайте своим документам безликие названия, типа "Первая страница", во-первых название документа должно характеризовать его содержимое, а во-вторых, содержимое тегов <title></title> играет не последнюю роль при оптимизации и раскрутке сайта. МЕТА ТЕГИ <META> Мета теги являются важными составляющими HTML страницы. Размещаются они внутри тега <HEAD> и необходимы для указания параметров HTML страницы которые не будут видны обычному пользователю, но многое расскажут о вашей страничке поисковым системам и интернет браузеру. Рассмотрим основные теги. <meta name="keywords" content="Ключевые слова, HTML и его элементы" > Мета теги имеют атрибут name. В зависимости от его значения браузер и поисковые системы по разному будут обрабатывать его содержание. Мета тег с именем keywords указывает основные ключевые слова, которые описывают нашу страницу. KEYWORDS Ключевое слово — слово в тексте, способное в совокупности с другими ключевыми словами представлять текст. В вебе используется главным образом для поиска. Набор ключевых слов документа называют поисковым образом документа. Ключевые слова должны содержать запросы, по которым вы бы хотели, чтобы ваш документ нашли в поисковой системе. МЕТАТЕГ DESCRIPTION Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике. <meta name="description" content="Основы HTML от GoldStudio" > МЕТАТЕГИ AUTHOR И COPYRIGHT Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какойлибо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом: <meta name="author" content="Джон Дое" > Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства <meta name="copyright" lang="ru" content="GoldStudio " > МЕТАТЕГ CHARSET Метатег charset указывает браузеру кодировку нашего файла. Так как общепринятой для русскоязычных сайтов является utf-8 и именно ее мы используем для создания наших сайтов наш мета тег должен выглядеть следующим образом: <meta charset="utf-8"> МEТAТEГ ROBOTS Тег формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем. Значения тега могут быть следующими: Index (страница должна быть проиндексирована), Noindex (документ не индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow (гиперссылки не прослеживаются), All (включает значения index и follow, включен по умолчанию), None (включает значения noindex и nofollow). МEТAТEГ ROBOTS Пример 1. Разрешить индексирование страницы и использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="index,follow"> или равноценный аналог <meta name="robots" content="all" > МEТAТEГ ROBOTS Пример 2. Запретить индексирование страницы, разрешить использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="noindex,follow"> МEТAТEГ ROBOTS Пример 3. Разрешить индексирование страницы, запретить использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="index,nofollow"> МEТAТEГ ROBOTS Пример 4. Запретить индексирование страницы и использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="noindex,nofollow"> или равноценный аналог <meta name="robots" content="none"> META ТЭГИ РЕШАЮТ РЯД ЗАДАЧ - указание кодировки страницы, например, для русского текста в кодировке Windows: - указание ключевых слов страницы (используется при оптимизации страниц): - указание краткого описания страницы: SCRIPT ТЕГИ Теги <script></script> используются для подключения внешних файлов скриптов. Это позволяет оптимизировать код страниц. Например, если вы используете функции java script для большинства своих страниц, то поместив эти функции на отдельную страницу - function.js, с помощью тега <script> можно указать путь к этой страницы. Это повышает читабельность кода и ускоряет загрузку страниц. ТЕЛО ДОКУМЕНТА - ТЕГ BODY alink - устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный при нажатии на нее. vlink - устанавливает цвет посещенной ссылки, т.е. той, по которой уже щелкали. ТЕЛО ДОКУМЕНТА - ТЕГ BODY background - указывает на изображение, которое будет использоваться в качестве фонового рисунка. Этот рисунок заполняет собой все видимое пространство окна. Если рисунок меньше окна браузера, то он повторяется, образуя мозаику из одинаковых картинок. На стыке этих картинок возникают видимые переходы. Поэтому к подбору фоновых рисунков следует подходить с большим вниманием. bgcolor - указывает фоновый цвет документа. ТЕЛО ДОКУМЕНТА - ТЕГ BODY leftmargin - определяет отступ от левого края окна браузера до контента страницы. rightmargin - определяет отступ от правого края окна браузера до контента страницы. topmargin - определяет отступ от верхнего края окна браузера до контента страницы. bottommargin - определяет отступ от нижнего края окна браузера до контента страницы. text - устанавливает цвет текста для всего документа.
