ݺߣ

ݺߣShare a Scribd company logo
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 (20)

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

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

Html 1
Html  1Html  1
Html 1
Захарова Олена
Html
HtmlHtml
Html
Natali Zhukova
Язык Html
Язык HtmlЯзык Html
Язык Html
Nick535
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
ВерсткаЛекция1
ВерсткаЛекция1ВерсткаЛекция1
ВерсткаЛекция1
itc73
ВерсткаЛекция1
ВерсткаЛекция1ВерсткаЛекция1
ВерсткаЛекция1
itc73
ВерсткаЛекция1
ВерсткаЛекция1ВерсткаЛекция1
ВерсткаЛекция1
itc73
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
Nexa50
Web конструирование на html
Web конструирование на htmlWeb конструирование на html
Web конструирование на html
ANefyodova
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
mmlllll
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
exxdisillusion69
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
Nimax

More from Marina_stn (15)

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

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>