HTML Урок 1. Введение в HTML. Основы HTML.
advertisement
HTML Урок 1. Введение в HTML. Основы HTML. HTML (HyperText Markup Language) - язык разметки гипертекста. Отнести HTML к языкам программирования можно лишь с большой натяжкой, это все-таки язык РАЗМЕТКИ. Из названия становится понятным его предназначение - указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора. Что такое html элемент? Да все, что мы размещаем: текст, рисунки, анимации и т.д. С помощью HTML мы можем указать браузеру, где именно их разместить; какой текст сделать большим и жирным, а какой - маленьким курсивом; где начать новую строку, а где сделать переход на другую страницу. И многое другое. Теги составляют основу html. Между < и > находится имя тега и его параметры (если они есть). В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий . Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое. Бывают также теги одиночные, т.е. не требующие закрытия. Такие теги просто совершают определенное действие, например, перевод строки или вставку рисунка. Теги могут иметь параметры (или атрибуты), например, Здесь содержимое В данном случае тег имеет параметр bgcolor, значение которого равно "red". Переводя на человеческий язык - сделать фон документа красного цвета. По сути, HTML - это набор тегов и их параметров. Основные теги и структура документа. Структура html-документа состоит из трех пар тегов: Теги <html> </html> являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега <html>, а заканчиваться тегом </html>. Сам документ условно разделен на две части - заголовок документа (теги <head></head>) и тело документа (теги <body><body>). Заголовок документа - тег HEAD и его элементы Заголовок документа содержит служебную информацию и не влияет на внешний вид документа. Его задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ. Единственным обязательным элементом заголовка документа являются теги <title></title>. Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера. Например, если написать следующий код: 1 HTML Урок 1. Введение в HTML. В окне браузера он будет выглядеть так: Мета теги <Meta> Мета теги являются важными составляющими HTML страницы. Размещаются они внутри тега <HEAD> и необходимы для указания параметров HTML страницы которые не будут видны обычному пользователю, но многое расскажут о вашей страничке поисковым системам и интернет браузеру. Рассмотрим основные теги. <meta name="keywords" content="Ключевые слова, HTML и его элементы" > Мета теги имеют атрибут name. В зависимости от его значения браузер и поисковые системы по разному будут обрабатывать его содержание. Мета тег с именем keywords указывает основные ключевые слова, которые описывают нашу страницу. 2 HTML Урок 1. Введение в HTML. ПРИМЕЧАНИЕ: Ключевое слово — слово в тексте, способное в совокупности с другими ключевыми словами представлять текст. В вебе используется главным образом для поиска. Набор ключевых слов документа называют поисковым образом документа. Ключевые слова должны содержать запросы, по которым вы бы хотели, чтобы ваш документ нашли в поисковой системе. Метатег charset указывает браузеру кодировку нашего файла. Так как общепринятой для русскоязычных сайтов является utf-8 и именно ее мы используем для создания наших сайтов наш мета тег должен выглядеть следующим образом: <meta charset="utf-8"> Метатеги Author и Copyright Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом: <meta name="author" content="Джон Дое" > Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства <meta name="copyright" lang="ru" content="GoldStudio " > Метатег Description Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике. <meta name="description" content="Основы HTML от GoldStudio" > Мeтaтeг Robots Тег формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем. Значения тега могут быть следующими: Index (страница должна быть проиндексирована), Noindex (документ не индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow (гиперссылки не прослеживаются), All (включает значения index и follow, включен по умолчанию), None (включает значения noindex и nofollow). Пример 1. Разрешить индексирование страницы и использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="index,follow"> 3 HTML Урок 1. Введение в HTML. или равноценный аналог <meta name="robots" content="all" > Пример 2. Запретить индексирование страницы, разрешить использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="noindex,follow"> Пример 3. Разрешить индексирование страницы, запретить использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="index,nofollow"> Пример 4. Запретить индексирование страницы и использование размещённых на ней ссылок для последующей индексации. <meta name="robots" content="noindex,nofollow"> или равноценный аналог <meta name="robots" content="none"> Теги заголовков <H1>…<H6> Теги заголовка h1 - h6 используются при создании HTML-страниц, причем, каждый из тегов указывают на сравнительную важность контента, расположенного после каждого из заголовков. Тег h1 применяется для обозначения наиболее важных заголовков первого уровня, а применение тега h6, к примеру, указывает на заголовок шестого уровня, который является наименее значимым. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Каждая страница должна содержать уникальный тег заголовка h1 с указанием основной темы, освещаемой на ней (целевой поисковый запрос), а также теги подзаголовков (подтем) статей, описывающих данную тему. Теги абзаца <p></p> и перевода строки <br> Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента. Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. 4 HTML Урок 1. Введение в HTML. Пример использования: Строка 1<br> Строка 2<br> Строка 3<br> <p> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p> Задание 1. Необходимые программы для выполнения задания: notepad++ (Скачать по сслыке: http://notepad-plus-plus.org/download/v6.7.4.html ) 1. 2. 3. 4. 5. Создать папку HTML на рабочем столе если ее нет. Создать папку со своим именем в папке HTML. Создать файл index.html Открыть файл index.html с помощью notepad++. В меню кодировки выбрать «Преобразовать в UTF-8 без BOM» (Это основная кодировка для страниц на Русском языке). Ее мы будем использовать всегда для создания страниц. 6. Набрать в документе текст: 7. Сохранить документ. 8. Открыть документ index.html с помощью интернет браузера. 5 HTML Урок 1. Введение в HTML. 9. 10. 11. 12. Придумайте тему для сайта, который вы будете разрабатывать на занятиях. Открыть документ index.html в notepad++. Изменить содержание тегов <title> и <body> которое соответствует вашему сайту. Сохранить документ и посмотреть результат. ПРИМЕЧАНИЕ: Текст в теге <Title> должен содержать от 10-70 символов. Текст должен содержать наиболее важные ключевые слова, которые описывают тематику вашего сайта. ОБЯЗАТЕЛЬНО: Каждая страница сайта должна содержать уникальное описание. Придерживаясь наших рекомендаций, вы получите максимальное количество посетителей сайта. Задание 2. 1. Открыть файл index.php 2. Заполнить основные мета теги внутри тега <HEAD> <meta name="keywords" content="Ключевые слова, HTML и его элементы" > <meta charset="utf-8"> <meta name="description" content="Основы HTML от GoldStudio" > <meta name="author" content="Джон Дое" > <meta name="robots" content="index,follow"> Задание 3. 1. Откройте файл index.php и внутри тега <body> напишите шесть заголовков от h1 до h6 один абзац и один несколько раз используйте перевод строк. 6
