SlideShare a Scribd company logo
1 of 28
Лекция 1. Введение
в современный Web-дизайн.
Структура HTML-документа
Что требуется от современного Web-сайта?
1. Строго соблюдать все интернет-стандарты.
2. Тщательно продумать наполнение Web-страниц.
3. Позаботиться о доступности Web-страниц.
World Wide Web Consortium (Консорциум Всемирной
паутины) http://www.w3.org
Концепция Web 2.0
Принцип первый: разделение содержимого, представления
и поведения Web-страницы
Принцип второй: подгружаемое содержимое
Принцип третий: генерируемое содержимое
Принцип четвертый: семантическая разметка данных
Теги. Атрибуты тегов
Теги бывают двух типов - одиночные и парные
(контейнеры)
Атрибуты можно подразделить на обязательные, они
непременно должны присутствовать, и необязательные,
их добавление зависит от цели применения тега
Парные теги
Рис. 1.1. Вложение тегов, а - правильное, б - неверное
Структура HTML-документа
1) строка объявления типа документа;
2) декларативный заголовок;
3) тело документа.
Объявление типа документа
Допустимые DTD
Допустимые DTD
Правила XHTML
1) Все теги и их атрибуты должны быть набраны в нижнем
регистре (строчными символами).
2) Значения любых атрибутов необходимо заключать в
кавычки.
3) Требуется закрывать все теги, даже такие, которым не
сопоставлен закрывающий тег.
4) Должна соблюдаться правильная вложенность тегов.
5) Нельзя использовать сокращенные атрибуты тегов.
6) Вместо атрибута name следует указывать id.
7) Следует определять DTD (document type definition, описание
типа документа) с помощью элемента <!DOCTYPE>.
Тег HTML
Тег <html> является контейнером, который заключает в себе все
содержимое веб-страницы, включая теги <head> и <body>.
<html xmlns="http://www.w3.org/1999/xhtml">
Тег HEAD
Тег <head> предназначен для хранения других элементов, цель
которых - помочь браузеру в работе с данными. Также внутри
контейнера <head> находятся метатеги, которые используются для
хранения информации предназначенной для браузеров и поисковых
систем. Например, механизмы поисковых систем обращаются к
метатегам для получения описания сайта, ключевых слов и других
данных.
Содержимое тега <head> не отображается напрямую на веб-странице,
за исключением тега <title> устанавливающего заголовок окна веб-
страницы.
Внутри контейнера <head> допускается размещать следующие
элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>,
<style>, <title>.
Тег TITLE
Определяет заголовок документа. Элемент <title> не является частью
документа и не показывается напрямую на веб-странице. В
операционной системе Windows текст заголовка отображается в
левом верхнем углу окна браузера. Допускается использовать только
один тег <title> на документ и размещать его в контейнере <head>.
Тег TITLE
Тег META
<meta> определяет метатеги, которые используются для хранения
информации предназначенной для браузеров и поисковых систем.
Например, механизмы поисковых систем обращаются к метатегам
для получения описания сайта, ключевых слов и других данных.
Разрешается использовать более чем один метатег, все они
размещаются в контейнере <head>.
Группа NAME
1) Метатег Author и Copyright
Эти теги, как правило, не используются одновременно. Функция тегов —
идентификация автора или принадлежности документа. Тег Author содержит имя
автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо
организации, целесообразнее использовать тег Copyright. Выглядит данный тег
следующим образом:
Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут
«lang», позволяющий определить язык, использующийся при указании значения
свойства
Группа NAME
2) Метатег Description
Данный тег используется при создании краткого описания страницы,
используется поисковыми системами для индексации, а также при создании
аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают
в аннотации первую строку документа или отрывок, содержащий ключевые
слова. Отображается после ссылки при поиске страниц в поисковике.
Группа NAME
3) Метатег Document-state
Метатег Document-state также имеет значение при индексации страницы в
поисковых системах. Тег обладает двумя значениями — Static и Dynamic.
Значение «Static» отмечает, что системе нет необходимости индексировать
документ в дальнейшем, «Dynamic» позволяет регулярно индексировать
Интернет-страницу.
Группа NAME
4) Метатег Generator
Данный метатег в первую очередь использовался разработчиками программ для
редактирования веб-страниц с целью саморекламы — в качестве значения тега
разработчики таких программ, как правило, указывали название своего продукта
Группа NAME
5) Метатег Keywords
Данный метатег поисковые системы используют для того, чтобы определить
релевантность ссылки. При формировании данного тега необходимо
использовать только те слова, которые содержатся в самом документе.
Использование тех слов, которых нет на странице, не рекомендуется.
Рекомендованное количество слов в данном теге - не более десяти. Кроме того,
выявлено, что разбивка этого тега на несколько строк влияет на оценку ссылки
поисковыми машинами.
Группа NAME
6) Метатeг Resource-type
Тег Resource-type описывает свойство или состояние страницы. Если значения
тега отличается от «Document», то поисковые системы его не индексируют.
7) Метатeг Revisit
Тег позволяет управлять частотой индексации документа в поисковой системе.
Для переиндексации сайта раз в две недели используется тег следующего вида
Группа NAME
8) Мeтaтeг url
Тег прекращает индексацию страницы поисковой системой, и перенаправляет
робота поисковой машины по указанной ссылке. Тег применяется для отмены
индексации «зеркала» и генерируемых страниц.
9) Мeтaтeг Subject
Определяет тематику документа. Практически бесполезен из-за отсутствия
четкой и согласованной классификации тем в различных поисковых системах.
Группа NAME
10) Мeтaтeг Robots
Тег формирует информацию о гипертекстовых документах, которая поступает к
роботам поисковых систем. Значения тега могут быть следующими: Index
(страница должна быть проиндексирована), Noindex (документ не
индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow
(гиперссылки не прослеживаются), All (включает значения index и follow,
включен по умолчанию), None (включает значения noindex и nofollow).
Группа HTTP-EQUIV
1) Мeтaтeг Content-Language
Тег позволяет указать язык, на котором создан документ
2) Мeтaтeг Content-Script-Type
Определяет язык программирования сценариев. Если тег не прописан, следует
указать язык программирования в каждом теге <script>. Тег <script> обладает
более высоким приоритетом по сравнению с Content-Script-Type.
Группа HTTP-EQUIV
3) Мeтaтeг Content-Style-Type
Указания языка таблицы стилей, по умолчанию значение - «text/css»
4) Мeтaтeг Content-Type
Определяет тип документа и его кодировку
Группа HTTP-EQUIV
5) Мeтaтeг Expires
Метатеги Expires — управляет кэшированием. Если указанная в теге дата
прошла, то браузер должен сделать повторный сетевой запрос, а не использовать
копию из кэша. Если изначально указать прошедшую дату, то документ не будет
кэшироваться. Некоторые поисковые роботы могут отказаться индексировать
документ с устаревшей датой. Дата должна указываться в стандарте [RFC850].
6) Метатeг PICS-Label
PICS — (от англ. Platform-Independent Content rating Scheme Label) — указывает
уровень доступности сайта (в связи с возможными тематиками sex и violence),
однако используется и в других целях
Группа HTTP-EQUIV
7) Мeтaтeг Pragma
Контроль кэширования при страницах, получаемых путем работы заданного
скрипта.
8) Мeтaтeг Refresh
Задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме
того, может использоваться автоматическая загрузка другой страницы
Группа HTTP-EQUIV
9) Мeтaтeг Set-Cookie
Настройка cookie браузера
10) Мeтaтeг Window-target
Определение окна загружаемой страницы
11) Метатег Imagetoolbar
Отключает Панели управления изображениями. Обычно используют при выводе
баннеров, фона картинки, карты изображения и др., когда вывод данной панели
нежелателен

More Related Content

Viewers also liked

Cоздание эффективного сайта
Cоздание эффективного сайтаCоздание эффективного сайта
Cоздание эффективного сайтаDarya Karelina
 
Автоцентр Нагатино
Автоцентр НагатиноАвтоцентр Нагатино
Автоцентр Нагатиноkirillgubin
 
Professiya web d
Professiya web dProfessiya web d
Professiya web dir_556
 
Trends of Web-design
Trends  of Web-designTrends  of Web-design
Trends of Web-designIrina Shults
 
Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнерvaxden
 
Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.Александр Лысяк
 
Web дизайн
Web дизайнWeb дизайн
Web дизайнSimpapu
 
Эволюция веб-дизайна
Эволюция веб-дизайнаЭволюция веб-дизайна
Эволюция веб-дизайнаArtjoker
 
Инструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXИнструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXВячеслав Гладышев
 
Разработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыРазработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыArtem Laptev
 
Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Alexander Kolotov
 

Viewers also liked (15)

WEB
WEBWEB
WEB
 
6.4
6.46.4
6.4
 
Cоздание эффективного сайта
Cоздание эффективного сайтаCоздание эффективного сайта
Cоздание эффективного сайта
 
Автоцентр Нагатино
Автоцентр НагатиноАвтоцентр Нагатино
Автоцентр Нагатино
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
урок2
урок2урок2
урок2
 
Trends of Web-design
Trends  of Web-designTrends  of Web-design
Trends of Web-design
 
Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнер
 
Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.Создание сайтов: как всё устроено и первые шаги.
Создание сайтов: как всё устроено и первые шаги.
 
Web дизайн
Web дизайнWeb дизайн
Web дизайн
 
Эволюция веб-дизайна
Эволюция веб-дизайнаЭволюция веб-дизайна
Эволюция веб-дизайна
 
Веб - дизайн
Веб - дизайнВеб - дизайн
Веб - дизайн
 
Инструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIXИнструкция по вставке платежной формы в WIX
Инструкция по вставке платежной формы в WIX
 
Разработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. ВинницыРазработка и дизайн сайта для школы №25 г. Винницы
Разработка и дизайн сайта для школы №25 г. Винницы
 
Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение Кружок по робототехнике. Занятие #1. Введение
Кружок по робототехнике. Занятие #1. Введение
 

Similar to Lect1

Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTMLssuser3896e2
 
презентация по миру
презентация по мирупрезентация по миру
презентация по мируkuzeenka31
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdfmmmitioglo
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxexxdisillusion69
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 УрокNexa50
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программированиеRauan Ibraikhan
 
Руководство по оптимизации сайта для начинающих.
Руководство по оптимизации сайта для начинающих.Руководство по оптимизации сайта для начинающих.
Руководство по оптимизации сайта для начинающих.Violo Paganini
 
Аудит сайта Moviespictures.net
Аудит сайта Moviespictures.netАудит сайта Moviespictures.net
Аудит сайта Moviespictures.netkostetskiy
 
Trening modul2-conf1-tema5
Trening modul2-conf1-tema5Trening modul2-conf1-tema5
Trening modul2-conf1-tema5olgaoov
 
Татьяна Исаева "Подготовка данных для Яндекс.Новостей"
Татьяна Исаева "Подготовка данных для Яндекс.Новостей"Татьяна Исаева "Подготовка данных для Яндекс.Новостей"
Татьяна Исаева "Подготовка данных для Яндекс.Новостей"Yandex
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. РуководствоNimax
 
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Dmitriy Krukov
 
Php intro rus
Php intro rusPhp intro rus
Php intro rusaDDDitive
 

Similar to Lect1 (20)

Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
 
Seo
SeoSeo
Seo
 
Lection1
Lection1Lection1
Lection1
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программирование
 
Руководство по оптимизации сайта для начинающих.
Руководство по оптимизации сайта для начинающих.Руководство по оптимизации сайта для начинающих.
Руководство по оптимизации сайта для начинающих.
 
Аудит сайта Moviespictures.net
Аудит сайта Moviespictures.netАудит сайта Moviespictures.net
Аудит сайта Moviespictures.net
 
мова Html
мова Htmlмова Html
мова Html
 
Trening modul2-conf1-tema5
Trening modul2-conf1-tema5Trening modul2-conf1-tema5
Trening modul2-conf1-tema5
 
Татьяна Исаева "Подготовка данных для Яндекс.Новостей"
Татьяна Исаева "Подготовка данных для Яндекс.Новостей"Татьяна Исаева "Подготовка данных для Яндекс.Новостей"
Татьяна Исаева "Подготовка данных для Яндекс.Новостей"
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
 
Html лаб 2
Html лаб 2Html лаб 2
Html лаб 2
 
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
 
Php intro rus
Php intro rusPhp intro rus
Php intro rus
 

Lect1

  • 1. Лекция 1. Введение в современный Web-дизайн. Структура HTML-документа
  • 2. Что требуется от современного Web-сайта? 1. Строго соблюдать все интернет-стандарты. 2. Тщательно продумать наполнение Web-страниц. 3. Позаботиться о доступности Web-страниц. World Wide Web Consortium (Консорциум Всемирной паутины) http://www.w3.org
  • 3. Концепция Web 2.0 Принцип первый: разделение содержимого, представления и поведения Web-страницы Принцип второй: подгружаемое содержимое Принцип третий: генерируемое содержимое Принцип четвертый: семантическая разметка данных
  • 4. Теги. Атрибуты тегов Теги бывают двух типов - одиночные и парные (контейнеры) Атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега
  • 5. Парные теги Рис. 1.1. Вложение тегов, а - правильное, б - неверное
  • 6. Структура HTML-документа 1) строка объявления типа документа; 2) декларативный заголовок; 3) тело документа.
  • 10. Правила XHTML 1) Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами). 2) Значения любых атрибутов необходимо заключать в кавычки. 3) Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег. 4) Должна соблюдаться правильная вложенность тегов. 5) Нельзя использовать сокращенные атрибуты тегов. 6) Вместо атрибута name следует указывать id. 7) Следует определять DTD (document type definition, описание типа документа) с помощью элемента <!DOCTYPE>.
  • 11. Тег HTML Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. <html xmlns="http://www.w3.org/1999/xhtml">
  • 12. Тег HEAD Тег <head> предназначен для хранения других элементов, цель которых - помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб- страницы. Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
  • 13. Тег TITLE Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
  • 15. Тег META <meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>.
  • 16. Группа NAME 1) Метатег Author и Copyright Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом: Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства
  • 17. Группа NAME 2) Метатег Description Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике.
  • 18. Группа NAME 3) Метатег Document-state Метатег Document-state также имеет значение при индексации страницы в поисковых системах. Тег обладает двумя значениями — Static и Dynamic. Значение «Static» отмечает, что системе нет необходимости индексировать документ в дальнейшем, «Dynamic» позволяет регулярно индексировать Интернет-страницу.
  • 19. Группа NAME 4) Метатег Generator Данный метатег в первую очередь использовался разработчиками программ для редактирования веб-страниц с целью саморекламы — в качестве значения тега разработчики таких программ, как правило, указывали название своего продукта
  • 20. Группа NAME 5) Метатег Keywords Данный метатег поисковые системы используют для того, чтобы определить релевантность ссылки. При формировании данного тега необходимо использовать только те слова, которые содержатся в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Рекомендованное количество слов в данном теге - не более десяти. Кроме того, выявлено, что разбивка этого тега на несколько строк влияет на оценку ссылки поисковыми машинами.
  • 21. Группа NAME 6) Метатeг Resource-type Тег Resource-type описывает свойство или состояние страницы. Если значения тега отличается от «Document», то поисковые системы его не индексируют. 7) Метатeг Revisit Тег позволяет управлять частотой индексации документа в поисковой системе. Для переиндексации сайта раз в две недели используется тег следующего вида
  • 22. Группа NAME 8) Мeтaтeг url Тег прекращает индексацию страницы поисковой системой, и перенаправляет робота поисковой машины по указанной ссылке. Тег применяется для отмены индексации «зеркала» и генерируемых страниц. 9) Мeтaтeг Subject Определяет тематику документа. Практически бесполезен из-за отсутствия четкой и согласованной классификации тем в различных поисковых системах.
  • 23. Группа NAME 10) Мeтaтeг Robots Тег формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем. Значения тега могут быть следующими: Index (страница должна быть проиндексирована), Noindex (документ не индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow (гиперссылки не прослеживаются), All (включает значения index и follow, включен по умолчанию), None (включает значения noindex и nofollow).
  • 24. Группа HTTP-EQUIV 1) Мeтaтeг Content-Language Тег позволяет указать язык, на котором создан документ 2) Мeтaтeг Content-Script-Type Определяет язык программирования сценариев. Если тег не прописан, следует указать язык программирования в каждом теге <script>. Тег <script> обладает более высоким приоритетом по сравнению с Content-Script-Type.
  • 25. Группа HTTP-EQUIV 3) Мeтaтeг Content-Style-Type Указания языка таблицы стилей, по умолчанию значение - «text/css» 4) Мeтaтeг Content-Type Определяет тип документа и его кодировку
  • 26. Группа HTTP-EQUIV 5) Мeтaтeг Expires Метатеги Expires — управляет кэшированием. Если указанная в теге дата прошла, то браузер должен сделать повторный сетевой запрос, а не использовать копию из кэша. Если изначально указать прошедшую дату, то документ не будет кэшироваться. Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой. Дата должна указываться в стандарте [RFC850]. 6) Метатeг PICS-Label PICS — (от англ. Platform-Independent Content rating Scheme Label) — указывает уровень доступности сайта (в связи с возможными тематиками sex и violence), однако используется и в других целях
  • 27. Группа HTTP-EQUIV 7) Мeтaтeг Pragma Контроль кэширования при страницах, получаемых путем работы заданного скрипта. 8) Мeтaтeг Refresh Задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой страницы
  • 28. Группа HTTP-EQUIV 9) Мeтaтeг Set-Cookie Настройка cookie браузера 10) Мeтaтeг Window-target Определение окна загружаемой страницы 11) Метатег Imagetoolbar Отключает Панели управления изображениями. Обычно используют при выводе баннеров, фона картинки, карты изображения и др., когда вывод данной панели нежелателен