SlideShare a Scribd company logo
1 of 14
Web-страницы и
Web-сайты.
Структура Web-
страницы
 Web-страницы создаются с
использованием языка разметки
гипертекстовых документов HTML
(Hyper Text Markup Language).
 В обычный текстовый документ
вставляются управляющие символы –
HTML-теги, которые определяют вид
страницы в Web-браузере.
 Web-сайт – набор страниц,
посвященных определенной тематике и
связанных между собой с помощью
гиперссылок.
 Web-страница сохраняется в виде
файла с разрешением .htm или .html
 Пример: index.htm
Структура Web-страницы
 HTML-теги заключаются в угловые
скобки и могут быть одиночными или
парными.
 Парные теги (контейнер) содержат
открывающий и закрывающий теги.
Закрывающий тег содержит прямой
слеш (/) перед обозначением.
 Теги могут записываться как
прописными, так и строчными буквами.
 HTML – код страницы помещается в
контейнер <HTML> </HTML>
 Без этих тегов браузер не сможет
определить формат документа и
правильно его интерпретировать.
Структура Web-страницы
Web-страница разделяется на 2 логические
части:
 Заголовок;
 Содержание.
Структура Web-страницы
Заголовок страницы
 Заголовок страницы помещается в
контейнер <HEAD></HEAD> и содержит
название страницы и справочную
информацию о странице (тип кодировки,
версия языка HTML и т.д.).
 Название страницы помещается в
контейнер <TITLE></TITLE>. При
просмотре оно отображается в верхней
части браузера.
Содержание страницы
 Отображаемое содержание страницы
помещается в контейнер
<BODY></BODY>
 Тег <BODY></BODY> может иметь
атрибуты. Например:
 bgcolor =“black” – задает цвет фона
страницы;
 text =“white” – задает цвет текста
Форматирование текста на Web-странице
 Абзацы. Разделение текста на абзацы
происходит с помощью контейнера
<p></p> . Для каждого абзаца можно
задать тип выравнивания и параметры
форматирования шрифта.
 Заголовки. Размер шрифтов заголовков
задается парами тегов от <H1></H1>
(самый крупный) до <H6></H6> (самый
мелкий).
 Шрифт. Параметры форматирования
шрифта задаются с помощью тега FONT и
его атрибутов:
 SIZE – определяет размер шрифта;
 FACE – определяет гарнитуру шрифта;
 COLOR – определяет цвет шрифта.
 Пример: <FONT FACE=“Arial” SIZE = 4
COLOR =“RED”>Пример текста</FONT>
Форматирование текста на Web-странице
 Выравнивание текста. Задается с
помощью атрибута ALIGN.
 Выравнивание по левому краю: ALIGN =
“left”
 Выравнивание по правому краю: ALIGN =
“right”
 Выравнивание по центру: ALIGN = “center”
 Пример: <H1 ALIGN = “center”>текст</H1>
Форматирование текста на Web-странице
 Тег <b></b> . Создает жирный текст.
 Тег <i></i> . Создает наклонный текст
(курсив).
 Тег <br> . Используется для перехода на
новую строку.
Форматирование текста на Web-странице
Пример Web-страницы
 <html>
 <head> <title> Моя первая веб - страница </title>
 </head>
 <body bgcolor = green text = gold>
 <font color = red>
 <H1 align = center text = "red">Web -
страница</H1>
 </font>
 <p>Создана с помощью программы <i>Блокнот
</i> <br> и языка HTML. </p>
 <p><b>Спасибо за внимание! </b></p>
 </body>
 </html>
Web страницы и web-сайты.структура web-страницы

More Related Content

What's hot

Продвижение отраслевого сайта
Продвижение отраслевого сайтаПродвижение отраслевого сайта
Продвижение отраслевого сайтаimba_ru
 
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документVasya Petrov
 
вебинар «внутрениие факторы ранжирования»
вебинар «внутрениие факторы ранжирования»вебинар «внутрениие факторы ранжирования»
вебинар «внутрениие факторы ранжирования»Evgeny Kostin
 
Seo при разработке сайта
Seo при разработке сайтаSeo при разработке сайта
Seo при разработке сайтаСергей Зорин
 
Использование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахИспользование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахNetpeak
 
Поисковая оптимизация сайта: с чего начать
Поисковая оптимизация сайта:  с чего начатьПоисковая оптимизация сайта:  с чего начать
Поисковая оптимизация сайта: с чего начатьDarya Karelina
 
Trening modul2-webinar13
Trening modul2-webinar13Trening modul2-webinar13
Trening modul2-webinar13olgaoov
 
основы нтмл
основы нтмлосновы нтмл
основы нтмлolgaoov
 
Работа с текстом в HTML
Работа с текстом в HTMLРабота с текстом в HTML
Работа с текстом в HTMLVasya Petrov
 
форматирование текста в Html
форматирование текста в Htmlформатирование текста в Html
форматирование текста в HtmlMaxim Colesnicov
 
Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...
Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...
Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...SEO-Интеллект
 
Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.EMPOpro
 
Интернет маркетинг (День 2), лекция в НИУ ВШЭ. Пермь
Интернет маркетинг (День 2), лекция в НИУ ВШЭ. ПермьИнтернет маркетинг (День 2), лекция в НИУ ВШЭ. Пермь
Интернет маркетинг (День 2), лекция в НИУ ВШЭ. ПермьAlex Zagoumenov
 

What's hot (20)

Продвижение отраслевого сайта
Продвижение отраслевого сайтаПродвижение отраслевого сайта
Продвижение отраслевого сайта
 
Основы HTML
Основы HTMLОсновы HTML
Основы HTML
 
Внедрение CSS в HTML документ
Внедрение CSS в HTML документВнедрение CSS в HTML документ
Внедрение CSS в HTML документ
 
вебинар «внутрениие факторы ранжирования»
вебинар «внутрениие факторы ранжирования»вебинар «внутрениие факторы ранжирования»
вебинар «внутрениие факторы ранжирования»
 
Seo при разработке сайта
Seo при разработке сайтаSeo при разработке сайта
Seo при разработке сайта
 
Как правильно прописывать метатеги и заголовки. Вебинар WebPromoExperts #271
Как правильно прописывать метатеги и заголовки. Вебинар WebPromoExperts #271 Как правильно прописывать метатеги и заголовки. Вебинар WebPromoExperts #271
Как правильно прописывать метатеги и заголовки. Вебинар WebPromoExperts #271
 
Использование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницахИспользование тегов и мета-тегов на веб-страницах
Использование тегов и мета-тегов на веб-страницах
 
Как составить ТЗ для копирайтера. Вебинар WebPromoExperts #261
Как составить ТЗ для копирайтера. Вебинар WebPromoExperts #261Как составить ТЗ для копирайтера. Вебинар WebPromoExperts #261
Как составить ТЗ для копирайтера. Вебинар WebPromoExperts #261
 
dfvbfgbghbhg
dfvbfgbghbhgdfvbfgbghbhg
dfvbfgbghbhg
 
Html (основы)
Html (основы)Html (основы)
Html (основы)
 
Поисковая оптимизация сайта: с чего начать
Поисковая оптимизация сайта:  с чего начатьПоисковая оптимизация сайта:  с чего начать
Поисковая оптимизация сайта: с чего начать
 
Trening modul2-webinar13
Trening modul2-webinar13Trening modul2-webinar13
Trening modul2-webinar13
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
 
Работа с текстом в HTML
Работа с текстом в HTMLРабота с текстом в HTML
Работа с текстом в HTML
 
форматирование текста в Html
форматирование текста в Htmlформатирование текста в Html
форматирование текста в Html
 
языка Html
языка Htmlязыка Html
языка Html
 
Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...
Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...
Практический курс SEO для Bewebby: внутренняя оптимизация, оптимизация страни...
 
Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.Расширенная техническая оптимизация сайта. Модуль 22.
Расширенная техническая оптимизация сайта. Модуль 22.
 
Интернет маркетинг (День 2), лекция в НИУ ВШЭ. Пермь
Интернет маркетинг (День 2), лекция в НИУ ВШЭ. ПермьИнтернет маркетинг (День 2), лекция в НИУ ВШЭ. Пермь
Интернет маркетинг (День 2), лекция в НИУ ВШЭ. Пермь
 
6.4
6.46.4
6.4
 

Similar to Web страницы и web-сайты.структура web-страницы

Язык Html
Язык HtmlЯзык Html
Язык HtmlNick535
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрейVlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрейVlado Sudin
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 УрокNexa50
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на htmlANefyodova
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Htmlmmlllll
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxexxdisillusion69
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. РуководствоNimax
 

Similar to Web страницы и web-сайты.структура web-страницы (20)

Html
HtmlHtml
Html
 
Html 1
Html  1Html  1
Html 1
 
Html
HtmlHtml
Html
 
Язык Html
Язык HtmlЯзык Html
Язык Html
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
 
55
5555
55
 
лекц14
лекц14лекц14
лекц14
 
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
 
Html (основы)
Html (основы)Html (основы)
Html (основы)
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
 
HTML
HTMLHTML
HTML
 
мова Html
мова Htmlмова Html
мова Html
 
Lection1
Lection1Lection1
Lection1
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
 

More from Marina_stn

Технология Web 2
Технология Web 2Технология Web 2
Технология Web 2Marina_stn
 
рекомендации по решению задач. линзы.
рекомендации по решению задач. линзы.рекомендации по решению задач. линзы.
рекомендации по решению задач. линзы.Marina_stn
 
построение изображений в зеркале
построение изображений в зеркалепостроение изображений в зеркале
построение изображений в зеркалеMarina_stn
 
Построение изображений в зеркале
Построение изображений в зеркалеПостроение изображений в зеркале
Построение изображений в зеркалеMarina_stn
 
Давление жидкости, газов. закон Паскаля.
Давление жидкости, газов. закон Паскаля.Давление жидкости, газов. закон Паскаля.
Давление жидкости, газов. закон Паскаля.Marina_stn
 
Учимся решать задачи
Учимся решать задачиУчимся решать задачи
Учимся решать задачиMarina_stn
 
Для тех, кто хочет знать больше!!!
Для тех, кто хочет знать больше!!!Для тех, кто хочет знать больше!!!
Для тех, кто хочет знать больше!!!Marina_stn
 
Мир котором мы живем
Мир котором мы живемМир котором мы живем
Мир котором мы живемMarina_stn
 
Учимся решать задачи
Учимся решать задачиУчимся решать задачи
Учимся решать задачиMarina_stn
 
сила міра взаємодії тіл
сила   міра взаємодії тілсила   міра взаємодії тіл
сила міра взаємодії тілMarina_stn
 
конспект уроку
конспект урокуконспект уроку
конспект урокуMarina_stn
 

More from Marina_stn (15)

Osnovy webdis
Osnovy webdisOsnovy webdis
Osnovy webdis
 
Технология Web 2
Технология Web 2Технология Web 2
Технология Web 2
 
515451545
515451545515451545
515451545
 
стекло
стеклостекло
стекло
 
пляжи
пляжипляжи
пляжи
 
рекомендации по решению задач. линзы.
рекомендации по решению задач. линзы.рекомендации по решению задач. линзы.
рекомендации по решению задач. линзы.
 
построение изображений в зеркале
построение изображений в зеркалепостроение изображений в зеркале
построение изображений в зеркале
 
Построение изображений в зеркале
Построение изображений в зеркалеПостроение изображений в зеркале
Построение изображений в зеркале
 
Давление жидкости, газов. закон Паскаля.
Давление жидкости, газов. закон Паскаля.Давление жидкости, газов. закон Паскаля.
Давление жидкости, газов. закон Паскаля.
 
Учимся решать задачи
Учимся решать задачиУчимся решать задачи
Учимся решать задачи
 
Для тех, кто хочет знать больше!!!
Для тех, кто хочет знать больше!!!Для тех, кто хочет знать больше!!!
Для тех, кто хочет знать больше!!!
 
Мир котором мы живем
Мир котором мы живемМир котором мы живем
Мир котором мы живем
 
Учимся решать задачи
Учимся решать задачиУчимся решать задачи
Учимся решать задачи
 
сила міра взаємодії тіл
сила   міра взаємодії тілсила   міра взаємодії тіл
сила міра взаємодії тіл
 
конспект уроку
конспект урокуконспект уроку
конспект уроку
 

Web страницы и web-сайты.структура web-страницы

  • 2.  Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language).  В обычный текстовый документ вставляются управляющие символы – HTML-теги, которые определяют вид страницы в Web-браузере.  Web-сайт – набор страниц, посвященных определенной тематике и связанных между собой с помощью гиперссылок.
  • 3.  Web-страница сохраняется в виде файла с разрешением .htm или .html  Пример: index.htm
  • 4. Структура Web-страницы  HTML-теги заключаются в угловые скобки и могут быть одиночными или парными.  Парные теги (контейнер) содержат открывающий и закрывающий теги. Закрывающий тег содержит прямой слеш (/) перед обозначением.  Теги могут записываться как прописными, так и строчными буквами.
  • 5.  HTML – код страницы помещается в контейнер <HTML> </HTML>  Без этих тегов браузер не сможет определить формат документа и правильно его интерпретировать. Структура Web-страницы
  • 6. Web-страница разделяется на 2 логические части:  Заголовок;  Содержание. Структура Web-страницы
  • 7. Заголовок страницы  Заголовок страницы помещается в контейнер <HEAD></HEAD> и содержит название страницы и справочную информацию о странице (тип кодировки, версия языка HTML и т.д.).  Название страницы помещается в контейнер <TITLE></TITLE>. При просмотре оно отображается в верхней части браузера.
  • 8. Содержание страницы  Отображаемое содержание страницы помещается в контейнер <BODY></BODY>  Тег <BODY></BODY> может иметь атрибуты. Например:  bgcolor =“black” – задает цвет фона страницы;  text =“white” – задает цвет текста
  • 9. Форматирование текста на Web-странице  Абзацы. Разделение текста на абзацы происходит с помощью контейнера <p></p> . Для каждого абзаца можно задать тип выравнивания и параметры форматирования шрифта.  Заголовки. Размер шрифтов заголовков задается парами тегов от <H1></H1> (самый крупный) до <H6></H6> (самый мелкий).
  • 10.  Шрифт. Параметры форматирования шрифта задаются с помощью тега FONT и его атрибутов:  SIZE – определяет размер шрифта;  FACE – определяет гарнитуру шрифта;  COLOR – определяет цвет шрифта.  Пример: <FONT FACE=“Arial” SIZE = 4 COLOR =“RED”>Пример текста</FONT> Форматирование текста на Web-странице
  • 11.  Выравнивание текста. Задается с помощью атрибута ALIGN.  Выравнивание по левому краю: ALIGN = “left”  Выравнивание по правому краю: ALIGN = “right”  Выравнивание по центру: ALIGN = “center”  Пример: <H1 ALIGN = “center”>текст</H1> Форматирование текста на Web-странице
  • 12.  Тег <b></b> . Создает жирный текст.  Тег <i></i> . Создает наклонный текст (курсив).  Тег <br> . Используется для перехода на новую строку. Форматирование текста на Web-странице
  • 13. Пример Web-страницы  <html>  <head> <title> Моя первая веб - страница </title>  </head>  <body bgcolor = green text = gold>  <font color = red>  <H1 align = center text = "red">Web - страница</H1>  </font>  <p>Создана с помощью программы <i>Блокнот </i> <br> и языка HTML. </p>  <p><b>Спасибо за внимание! </b></p>  </body>  </html>