1. HTML начало

Июль 25, 2022

Содержание

2. Основные понятия World Wide Web - это часть Internet, представляющая собой гигантский набор документов, хранящихся на
3. Основные понятия (продолжение) Web-браузер – программа поиска и просмотра информации в Web. Гиперссылки – подсвечиваемые фрагменты
4. Классификация сайтов 1. С точки зрения причастности сайтов к процессу зарабатывания денег: коммерческие и некоммерческие сайты.
5. Коммерческие сайты Визитка Cайт, содержащий основную и неизменяемую информацию о компании. Каталог (сайт-витрина) Сайт, преимущественную часть
6. Промо-сайт Интернет-решение для популяризации и позиционирования группы продуктов компании, нуждающихся в отдельном промоутировании (рекламе). Также промо-сайт
7. Этапы создания сайта Выбор компании для размещения на ее технике сайта . Проектирование Web-страниц сайта с
8. «Язык разметки гипертекста HTML»
9. Hyper Text Markup Language – язык гипертекстовой разметки. HTML - специальные инструкции браузеру, с помощью которых
10. Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или ресурсы с возможностями выполнения переходов.
11. Описательный язык разметки HTML имеет свои команды, которые называются тегами. Тег - элемент HTML, представляющий из
12. Двойные теги бывают: Пример: …. !Теги не чувствительны к регистру! = открывающиеся закрывающиеся
13. Тег - единица разметки, стартовый или конечный маркер элемента. Запись стартового тега в общем виде: ИНТЕРГРАД
14. ИНТЕРГРАД
15. Атрибут - параметр или свойство элемента. Запись стартового тега с атрибутом в общем виде: Все атрибуты
16. Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров (атрибутов). Название тэга вместе с
17. Как это будет в браузере…
18. Некоторые правила HTML-документа Внутри одного тэга может находиться произвольное количество тэгов. Интерпретация текста HTML документа производится
19. Они передают программе просмотра страницы основную информацию для идентификации и организации документа. Три самых важных управляющих
20. Эти тэги помещаются соответственно в начале и конце всего документа, чтобы обозначить текст как действительный документ
21. Эта пара тэгов указывает на начало и конец заголовка документа. …
22. Всё, что находится между этими тэгами, читается браузером как название документа. Пример: …
23. Всё, что находится между этими тэгами отображается на веб-странице. Пример: …
24. HTML - документ Структура гипертекстового документа Заголовок Первый абзац документа ……… Последний абзац документа заголовок
25. Текст заголовка окна Текст документа, тэги Общий вид страницы
26. Документ гипертекстовой разметки имеет расширение *.html Создание документа HTML
27. Создать текстовый документ (блокнот). 2. Записать в него структуру документа HTML. 3. Записать данные Вашей Web-страницы.
28. Название Web-страницы Приветствую тебя, посетитель моего сайта. Меня зовут Ваня. Мне 14 лет. Это моя первая
29. Задание: Создать Веб-страницу по образцу: Моя первая страница Приветствую тебя, посетитель моего сайта. Меня зовут Ваня.
30. Тэги физического форматирования текста P и DIV - тэги параграфа; CENTER - тэг горизонтального центрированного текста;
31. Пример: Это полужирный шрифт. А это курсив . Этот текст будет написан полужирным и курсивным шрифтом
32. А так он будет выглядеть…
33. Пример использования цветового оформления Шрифт размера 1 Шрифт размера 3 зеленого цвета Шрифт размера 7 розового
35. Полезные дополнения HTML
36. Каскадные таблицы стилей Cascading Style Sheets (каскадные таблицы стилей) – это язык, содержащий набор средств для
37. Создание страницы стилей в FrontPage
38. Пример таблицы стилей body { font-family: Verdana, Arial, Helvetica; background-color: rgb(0,0,0); color: rgb(255,255,255); } table {
39. CGI – Common Gateway Interface Для обмена данными между страницей и сервером используется специальный механизм, регламентируемый
40. Взаимодействие браузера, сервера и CGI-программы Компьютер клиента Web- браузер Компьютер сервера Web- сервер CGI-программа HTML-страницы Web-ресурсы
41. Вставка элементов в ФОРМУ (FrontPage)
42. Форма в рабочем поле браузера
43. Фрагмент HTML-кода (!) Ваше имя: E-mail: Ваши комментарии: Имя программы обработчика
44. Использование шаблона FrontPage для создания «Формы обратной связи»
45. Технология Server Side Include (SSI) Server Side Include – на стороне сервера. Эта технология позволяет Web-серверу
46. Скрипты в HTML-документах (пример) function calc() { var x=12; var y=5; var result=x*y; alert ("Result="*); }
48. Скачать презентацию

Слайд 2

Основные понятия
World Wide Web - это часть Internet, представляющая собой гигантский

набор документов, хранящихся на компьютерах по всему миру.
Web-страница - это отдельный документ Web, который способен содержать информацию различного вида - текст, рисунки, фотографии, фрагменты аудио- и видеозаписей.
Web-страницы хранятся на компьютерах, которые носят название Web-серверов.
HTTP - Hyper Text Transfer Protocol - протокол передачи гипертекста, используется для передачи гипертестовых документов между серевером и клиентом в среде WWW
URL (Uniform Resource Locator) – уникальный адрес Web-страниц. URL состоит из наименования используемого протокола, названия сервера и обозначения пути доступа к странице. Например:
http://www.masu.ru/books/photo.html

Слайд 3

Основные понятия (продолжение)
Web-браузер – программа поиска и просмотра информации в Web.
Гиперссылки

– подсвечиваемые фрагменты текста или графические изображения, расположенные на Web-страницах, позволяющие быстро переходить к другим страницам Web.
HTML – язык разметки гипертекста (Hypertext Markup Language)

Слайд 4

Классификация сайтов
1. С точки зрения причастности сайтов к процессу зарабатывания денег:

коммерческие и некоммерческие сайты.
2. По степени долговечности: сайты длительного и кратковременного пользования.

Слайд 5

Коммерческие сайты
Визитка Cайт, содержащий основную и неизменяемую информацию о компании.
Каталог

(сайт-витрина) Сайт, преимущественную часть контента (информационного наполнения), которого составляет информация о магазинах, товарах и/или услугах и ценах, предложения от многих агентств, компаний или частных лиц. Однако, торговля через Интернет не осуществляется. Целью таких сайтов является привлечение клиентов в офис (магазин) компании.
Электронный магазин Cайт, предназначенный для продажи товаров через сеть Интернет и автоматизации сопутствующих бизнес-процессов. Содержит каталог продукции с ценами и систему заказов, интегрированную в автоматизированную систему предприятия

Слайд 6

Промо-сайт Интернет-решение для популяризации и позиционирования группы продуктов компании, нуждающихся в

отдельном промоутировании (рекламе). Также промо-сайт может быть посвящен отдельной акции компании.
Информационный сайт Cайт, который содержит исчерпывающую информацию по некоторой предметной области. Сайты этого типа как правило содержат множество статей различных авторов, а также такие сервисы, как проведения опросов, голосования, рассылки и т.п.
Корпоративное представительство Сайт, предназначенный для максимально полной автоматизации деятельности компании. Может содержать электронный магазин, систему заказов, коммуникационные сервисы, электронный обмен документами, онлайн-переговоры и т.д.
Портал Большой web-ресурс, который предназначен для формирования некоего сообщества людей с определенными интересами. Портал может объединять множество различных сервисов (телеконференции, рассылки, опросы), предоставлять доступ к различным внутрикорпоративным приложениям, предоставлять клиентам возможность покупки товаров, а партнерам - обмена информацией.

Слайд 7

Этапы создания сайта
Выбор компании для размещения на ее технике сайта .
Проектирование

Web-страниц сайта с учетом возможностей, предложений и требований владельца сервера. Создание Web-страниц, размещение файлов на выбранном сервере.
Регистрация доменного имени виртуального сервера.
Тестирование и получение предварительных характеристик работы, оценка сайта.
Продвижение сайта в Internet, в том числе: регистрация в поисковых системах, каталогах, рейтингах; регистрация в службах баннерообмена.
Анализ работы сайта и его доработка.

Слайд 8

«Язык разметки гипертекста HTML»

Слайд 9

Hyper Text Markup Language – язык гипертекстовой разметки.
HTML - специальные инструкции

браузеру, с помощью которых создаются веб-сайты.

HTML

Слайд 10

Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или

ресурсы с возможностями выполнения переходов.

Гипертекст

Слайд 11

Описательный язык разметки HTML имеет свои команды, которые называются тегами.

Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>.

Одинарные

Двойные

ТЕГ

Пример:
….

Пример:

Тег

Слайд 12

Двойные теги бывают:
Пример: ….
!Теги не чувствительны к

регистру!
=

открывающиеся

закрывающиеся

Слайд 13

Тег
- единица разметки, стартовый или конечный маркер элемента.
Запись стартового тега

в общем виде:

<тег>

ИНТЕРГРАД

Запись конечного тега в общем виде:

Теги определяют границы действия элементов.

Общие идеи построения и интерпретации HTML документов

Слайд 14

ИНТЕРГРАД

Слайд 15

Атрибут
- параметр или свойство элемента.
Запись стартового тега с атрибутом в

общем виде:

<тег имяАтрибута="значение">

Все атрибуты записываются внутри стартового тега.

Запись атрибута в общем виде:

имяАтрибута="значение"

Атрибуты внутри стартового тега разделяются пробелами.

Слайд 16

Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров

(атрибутов). Название тэга вместе с его параметрами заключаются в скобки <>. В общем виде тэг выглядит следующим образом:
<тэг параметр1=значение1 параметр2=значение2 ...>Текст1
Например: Выравнивание текста

Слайд 17

Как это будет в браузере…

Слайд 18

Некоторые правила HTML-документа
Внутри одного тэга может находиться произвольное количество тэгов.
Интерпретация текста

HTML документа производится сверху вниз.
Все символы управления текстом в HTML документе (несколько пробелов подряд, перевод строки и т.п.) заменяются одиночным символом пробела.
Строчные и прописные символы в именах (идентификаторах) тэгов и их атрибутов, как правило, не различаются.

Слайд 19

Они передают программе просмотра страницы основную информацию для идентификации и

организации документа.

Три самых важных управляющих кода

….

…

Слайд 20

Эти тэги помещаются соответственно в начале и конце всего документа, чтобы

обозначить текст как действительный документ на языке разметки гипертекста.

….

Слайд 21

Эта пара тэгов указывает на начало и конец заголовка документа.
…

Слайд 22

Всё, что находится между этими тэгами, читается браузером как название документа.
Пример:
…

Слайд 23

Всё, что находится между этими тэгами отображается на веб-странице.
Пример:
…

Слайд 24

HTML - документ

Структура гипертекстового документа
Заголовок
Первый абзац документа

………
Последний абзац документа
заголовок

Слайд 25

<br> Текст заголовка окна<br>

Текст документа, тэги

Общий

вид страницы

Слайд 26

Документ гипертекстовой разметки имеет расширение *.html
Создание документа HTML

Слайд 27

Создать текстовый документ (блокнот).
2. Записать в него структуру документа HTML.
3. Записать

данные Вашей Web-страницы.
4. Сохранить документ с расширением *.html.
5. Открыть страницу браузера.

Алгоритм написания
документа:

Слайд 28

Название Web-страницы

Приветствую тебя, посетитель моего сайта.
Меня зовут Ваня.

Мне 14 лет. Это моя первая Web-страница.
Я размещу эту страницу в Интернете.

Пример кода
Веб-страницы

Слайд 29

Задание:
Создать Веб-страницу по образцу:

Моя первая страница

Приветствую тебя, посетитель моего сайта.
Меня

зовут Ваня. Мне 14 лет. Это моя первая Web-страница.
Я размещу эту страницу в Интернете.

Дописать 2-3 предложения в тэг

Слайд 30

Тэги физического форматирования текста
P и DIV - тэги параграфа;
CENTER - тэг

горизонтального центрированного текста;
BLOQUOTE - тэг блока с отступом;
H1 – H9 тэги разметки заголовков;
BR - непарный тэг для перевода строки ;
HR - непарный тэг для начертания горизонтальной линии.
Для форматирования символов текста используются: I (курсив), B (жирный), U (подчеркивание), S (зачеркнутый текст), SUB (нижний индекс), SUP (верхний индекс) и тэги управления шрифтами FONT (текущий шрифт), BASEFONT (шрифт по умолчанию).

Слайд 31

Пример:

Это полужирный шрифт.

А это курсив.

Этот текст будет написан полужирным и курсивным

шрифтом

Слайд 32

А так он будет выглядеть…

Слайд 33

Пример использования цветового оформления

Шрифт размера 1

Шрифт размера 3

зеленого цвета

Шрифт размера 7 розового цвета

Слайд 34

Слайд 35

Полезные дополнения HTML

Слайд 36

Каскадные таблицы стилей
Cascading Style Sheets (каскадные таблицы стилей) – это

язык, содержащий набор средств для описания внешнего вида отображения любых HTML -документов.

Слайд 37

Создание страницы стилей в FrontPage

Слайд 38

Пример таблицы стилей
body
{ font-family: Verdana, Arial, Helvetica;
background-color: rgb(0,0,0);
color: rgb(255,255,255);

}
table
{ table-border-color-light: rgb(255,255,102);
table-border-color-dark: rgb(0,0,0); }
h1, h2, h3, h4, h5, h6
{ font-family: Verdana, Arial, Helvetica;}
h1{ color: rgb(255,204,0);}
h2 { color: rgb(255,255,255); }
h3 { color: rgb(204,51,0); }
h4 { color: rgb(255,255,153); }
h5 { color: rgb(255,255,0); }
h6 { color: rgb(255,255,255); }

Слайд 39

CGI – Common Gateway Interface
Для обмена данными между страницей и сервером

используется специальный механизм, регламентируемый протоколом: CGI – Common Gateway Interface, унифицированный шлюзовый интерфейс

Слайд 40

Взаимодействие браузера, сервера и CGI-программы
Компьютер
клиента
Web-
браузер
Компьютер
сервера
Web-
сервер
CGI-программа
HTML-страницы
Web-ресурсы
Файловая система
сервера и БД
Запрос
Ответ

Слайд 41

Вставка элементов в ФОРМУ (FrontPage)

Слайд 42

Форма в рабочем поле браузера

Слайд 43

Фрагмент HTML-кода

(!) Ваше имя:

E-mail:

Ваши комментарии:

Имя программы обработчика

Слайд 44

Использование шаблона FrontPage для создания «Формы обратной связи»

Слайд 45

Технология Server Side Include (SSI)
Server Side Include – на стороне

сервера. Эта технология позволяет Web-серверу включать в текст HTML-страниц любой другой текст: содержимое текстовых файлов или, например, результат работы программ на сервере. Происходит это «включение» непосредственно перед передачей текста HTML-страницы браузеру пользователя.

Слайд 46

1. HTML начало

Содержание

Основные понятияWorld Wide Web - это часть Internet, представляющая собой гигантский

Основные понятия (продолжение)Web-браузер – программа поиска и просмотра информации в Web.Гиперссылки

Классификация сайтов1. С точки зрения причастности сайтов к процессу зарабатывания денег:

Коммерческие сайтыВизитка Cайт, содержащий основную и неизменяемую информацию о компании. Каталог

Промо-сайт Интернет-решение для популяризации и позиционирования группы продуктов компании, нуждающихся в

Этапы создания сайтаВыбор компании для размещения на ее технике сайта .Проектирование

«Язык разметки гипертекста HTML»

Hyper Text Markup Language – язык гипертекстовой разметки.HTML - специальные инструкции

Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или

Описательный язык разметки HTML имеет свои команды, которые называются тегами.

Двойные теги бывают:Пример: …. !Теги не чувствительны к

Тег- единица разметки, стартовый или конечный маркер элемента. Запись стартового тега

ИНТЕРГРАД

Атрибут- параметр или свойство элемента. Запись стартового тега с атрибутом в

Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров

Как это будет в браузере…

Некоторые правила HTML-документаВнутри одного тэга может находиться произвольное количество тэгов.Интерпретация текста

Они передают программе просмотра страницы основную информацию для идентификации и

Эти тэги помещаются соответственно в начале и конце всего документа, чтобы

Эта пара тэгов указывает на начало и конец заголовка документа. …

Всё, что находится между этими тэгами, читается браузером как название документа. Пример:…

Всё, что находится между этими тэгами отображается на веб-странице. Пример: …

HTML - документСтруктура гипертекстового документаЗаголовокПервый абзац документа………Последний абзац документазаголовок

<br> Текст заголовка окна<br> Текст документа, тэги Общий

Документ гипертекстовой разметки имеет расширение *.htmlСоздание документа HTML

Создать текстовый документ (блокнот).2. Записать в него структуру документа HTML.3. Записать

Название Web-страницы Приветствую тебя, посетитель моего сайта.Меня зовут Ваня.

Задание:Создать Веб-страницу по образцу: Моя первая страницаПриветствую тебя, посетитель моего сайта.Меня

Тэги физического форматирования текстаP и DIV - тэги параграфа;CENTER - тэг

Пример:Это полужирный шрифт.А это курсив.Этот текст будет написан полужирным и курсивным

А так он будет выглядеть…

Пример использования цветового оформленияШрифт размера 1Шрифт размера 3

Полезные дополнения HTML

Каскадные таблицы стилей Cascading Style Sheets (каскадные таблицы стилей) – это

Создание страницы стилей в FrontPage

Пример таблицы стилей body{ font-family: Verdana, Arial, Helvetica; background-color: rgb(0,0,0); color: rgb(255,255,255);

CGI – Common Gateway InterfaceДля обмена данными между страницей и сервером

Вставка элементов в ФОРМУ (FrontPage)

Форма в рабочем поле браузера

Фрагмент HTML-кода (!) Ваше имя:

Использование шаблона FrontPage для создания «Формы обратной связи»

Технология Server Side Include (SSI) Server Side Include – на стороне

Скрипты в HTML-документах (пример) <br>function calc()<br>{<br>var x=12;<br>var y=5;<br>var result=x*y;<br>alert ("Result="*);<br>}<br>Новая страница</div></h2><div class="slides-content">Здесь находится весь сайт

Похожие презентации

Основные понятия
World Wide Web - это часть Internet, представляющая собой гигантский

Основные понятия (продолжение)
Web-браузер – программа поиска и просмотра информации в Web.
Гиперссылки

Классификация сайтов
1. С точки зрения причастности сайтов к процессу зарабатывания денег:

Коммерческие сайты
Визитка Cайт, содержащий основную и неизменяемую информацию о компании.
Каталог

Этапы создания сайта
Выбор компании для размещения на ее технике сайта .
Проектирование

Hyper Text Markup Language – язык гипертекстовой разметки.
HTML - специальные инструкции

Двойные теги бывают:
Пример: ….
!Теги не чувствительны к

Тег
- единица разметки, стартовый или конечный маркер элемента.
Запись стартового тега

Атрибут
- параметр или свойство элемента.
Запись стартового тега с атрибутом в

Некоторые правила HTML-документа
Внутри одного тэга может находиться произвольное количество тэгов.
Интерпретация текста

Эта пара тэгов указывает на начало и конец заголовка документа.
…

Всё, что находится между этими тэгами, читается браузером как название документа.
Пример:
…

Всё, что находится между этими тэгами отображается на веб-странице.
Пример:
…

HTML - документ

Структура гипертекстового документа
Заголовок
Первый абзац документа

………
Последний абзац документа
заголовок

<br> Текст заголовка окна<br>

Текст документа, тэги

Общий

Документ гипертекстовой разметки имеет расширение *.html
Создание документа HTML

Создать текстовый документ (блокнот).
2. Записать в него структуру документа HTML.
3. Записать

Название Web-страницы

Приветствую тебя, посетитель моего сайта.
Меня зовут Ваня.

Задание:
Создать Веб-страницу по образцу:

Моя первая страница

Приветствую тебя, посетитель моего сайта.
Меня

Тэги физического форматирования текста
P и DIV - тэги параграфа;
CENTER - тэг

Пример:

Это полужирный шрифт.

А это курсив.

Этот текст будет написан полужирным и курсивным

Пример использования цветового оформления

Шрифт размера 1

Шрифт размера 3

Каскадные таблицы стилей
Cascading Style Sheets (каскадные таблицы стилей) – это

Пример таблицы стилей
body
{ font-family: Verdana, Arial, Helvetica;
background-color: rgb(0,0,0);
color: rgb(255,255,255);

CGI – Common Gateway Interface
Для обмена данными между страницей и сервером

Фрагмент HTML-кода

(!) Ваше имя:

Технология Server Side Include (SSI)
Server Side Include – на стороне

Скрипты в HTML-документах (пример)

Новая страница</div></h2><div class="slides-content">

Здесь находится весь сайт