Язык разметки гипертекста HTML презентация

Август 9, 2021

Главная
Информатика
Язык разметки гипертекста HTML

Содержание

2. Чем привлекает пользователей Интернет?
3. WWW – World Wide Web. в переводе - всемирная паутина, одна из популярных служб Интернета WWW
4. Web-сайты и Web-страницы Публикации во всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает
5. Web-страница – основная информационная единица WWW, отдельный документ, хранящийся на отдельном сервере.
6. Web-сайт - совокупность тематически связанных Web-страниц.
7. Web-сайты и Web-страницы Сайт является интерактивным средством представления информации. Обычно сайт имеет титульную страницу (страницу с
8. Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка
9. Технология HTML: в текстовый документ вставляются управляющие символы - тэги. Основные достоинства HTML-документа: Малый информационный объем;
10. Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования
11. Создание Web-страницы: Открыть БЛОКНОТ; Набрать HTML-код страницы; Сохранить под именем *****.htm (титульная страница сайта называется index.htm);
12. Язык HTML не чувствителен к регистру !
13. Структура HTML документа: название окна информация страницы - указывает программе просмотра что это HTML документ; -
14. Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения, они влияют на
15. Структура Web-страницы Название Web-страницы На этой странице можно разместить любую интересную информацию в Интернете.
16. I. Цветовая схема Web – страницы: 1. Атрибут цвета фона
17. 2. Атрибут вставки фонового рисунка
18. 3. Атрибут цвета текста
19. II. Оформление заголовка: Существует 6 уровней заголовков: . . . . . . . . .
20. Тестовая страница Эта страница является тестовой Самый большой заголовок Заголовок 2 Заголовок 3 Заголовок 4 Заголовок
22. align = "Left " (по умолчанию) align = "Right " align = "Center " align =
23. Title 1 Title 2 Title 3 Title 4 Title 5 Title 6
24. IV. Тэг для выравнивания по центру: ТЕКСТ
25. Компьютер Компьютер
27. V. Разделительная линия Горизонтальная линия – тэг
28. Атрибуты тэга : SIZE = 5 – толщина линии WIDTH = Х % - длина линии
29. Атрибуты тэга :
30. Форматирование текста.
31. I. Абзацы: 1. - разрыв строки. - разделение текста на абзацы (вставляет пустую строку перед абзацем).
32. Компьютер имеет то преимущество перед мозгом, что им пользуются. (Габриэль Лауб)
33. Жизнь современного человека невозможно представить без компьютера. Даже если Вы не являетесь профессиональным копьютерщиком, без ПК
34. II. Тэг для изменения шрифта: … - изменяет размер, цвет и стиль текста.
35. Атрибуты тэга : 1) FACE = “…” гарнитура шрифта face="Comic Sans MS, Courier New”
36. Атрибуты тэга : 2) SIZE = … размера шрифта size = 4 размер шрифта 1-7. По-умолчанию
37. Атрибуты тэга : 3) COLOR = “…” цвет шрифта color = “blue”
38. Атрибуты тэга : 4) ALIGN = “…” выравнивание текста
39. Например: Это шрифт arial размером 3, цвет синий
40. Форматирование текста.
41. I. Специальные символы: &nbsp – пробел &laquo - кавычки &raquo &#10004 - ✔ & - амперсант
45. II. Изменение начертания шрифта: Текст - жирный Текст - курсив Текст - подчеркнутый
46. Например: Эта страница является тестовой
47. Компьютер
50. Вставка изображений.
51. &nbsp – пробел &laquo - ? &raquo & - ?
53. поддерживаются форматы файлов GIF, JPG, JPEG, PNG
54. Изображения Текст кода: Компьютер Все о компьютере На этом сайте вы сможете получить различную информацию о
55. Атрибут для текстового пояснения к изображению: ALT = «Поясняющий текст»
56. align="left" - выравнивание; Vspace="10" - задает расстояние между текстом и рисунком по вертикали; Hspace="30" - задает
57. - выравнивание; - задает расстояние между текстом и рисунком по вертикали; - задает расстояние между текстом
60. Связывание Web страниц.
61. Гиперссылки Для связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в
62. Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на
64. Гиперссылки указатель гиперссылки HREF=“URL” указатель гиперссылки Что такое компьютер История создания ЭВМ Функциональная схема ЭВМ Устройство
67. Гиперссылки В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае
68. Создание таблиц.
69. … контейнер для создания таблиц; Внутри содержится описание структуры таблицы и её содержания.
70. … определяет строку в таблице;
71. … определяет заголовок для столбца в таблице;
72. … определяет отдельную ячейку в таблице;
73. BORDER – атрибут для задания толщины разделительных линий; ALIGN – атрибут для выравнивания информации внутри ячейки
74. Таблицы Чтобы получить в браузере следующий вид Web-страницы, нужно внести в код соответствующие тэги
75. Компьютер Комплектующие наименование производитель характеристики цена
76. Винчестер Caviar Blue 640 Gb 4800 руб. Для добавления второй строки в таблицу нужно добавить следующую
77. Создание списков на Web-странице.
78. … контейнер для создания нумерованных списков тег элемента списка … контейнер для создания маркированного списка тег
80. Скачать презентацию

Слайд 2

Чем привлекает пользователей Интернет?

Слайд 3

WWW – World Wide Web.
в переводе - всемирная паутина, одна

из популярных служб Интернета
WWW – информационная система подобная большой энциклопедии, страницы которой разбросаны по компьютерам-серверам.

Слайд 4

Web-сайты и Web-страницы
Публикации во всемирной паутине реализуются в форме Web-сайтов.
Web-сайт

по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.

Слайд 5

Web-страница – основная информационная единица WWW, отдельный документ, хранящийся на отдельном

сервере.

Слайд 6

Web-сайт - совокупность тематически связанных Web-страниц.

Слайд 7

Web-сайты и Web-страницы
Сайт является интерактивным средством представления информации.
Обычно сайт имеет

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

Слайд 8

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

можно создать с помощью языка HTML

Слайд 9

Технология HTML: в текстовый документ вставляются управляющие символы - тэги.
Основные достоинства

HTML-документа:
Малый информационный объем;
Возможность просмотра на ПК, оснащенных различными операционными системами.

Слайд 10

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в

создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ.

Слайд 11

Создание Web-страницы:
Открыть БЛОКНОТ;
Набрать HTML-код страницы;
Сохранить под именем *****.htm (титульная страница сайта

называется index.htm);

Слайд 12

Язык HTML не чувствителен к регистру !

Слайд 13

Структура HTML документа:

<br> название окна<br>

информация страницы

- указывает программе просмотра что

это HTML документ;
- заголовок, содержит название документа и справочную информацию;
- название Web-страницы, отображается в строке заголовка браузера; <br><BODY> - располагается всё содержание страницы.<br><p>заголовок<br><p>тело<br></div></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 14</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/166372/slide-13.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Некоторые теги имеют атрибуты, которые являются именами свойств и могут" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/166372/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/166372/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/166372/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/166372/slide-13.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p> Некоторые теги имеют атрибуты, которые являются именами свойств и могут</div></h2><div class="slides-content">принимать определённые значения, они влияют на внешний вид Web-страницы.<br>имя атрибута = «значение»<br></div></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 15</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/166372/slide-14.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Структура Web-страницы Название Web-страницы На этой странице можно разместить любую интересную информацию в Интернете." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/166372/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/166372/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/166372/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/166372/slide-14.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Структура Web-страницы<br><p><HTML><br><HEAD><br><TITLE> <br>Название Web-страницы <br>

На этой странице можно разместить любую

интересную информацию в Интернете.

Слайд 16

I. Цветовая схема Web – страницы:
1. Атрибут цвета фона

«код цвета»>

Слайд 17

2. Атрибут вставки фонового рисунка

Слайд 18

3. Атрибут цвета текста

text=“blue”>

Слайд 19

II. Оформление заголовка:
Существует 6 уровней заголовков:
. . .

. .

. . .

Слайд 20

Тестовая страница

Эта страница является тестовой
Самый большой заголовок

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Самый маленький заголовок 6

Слайд 21

Слайд 22

align = "Left " (по умолчанию)
align = "Right "
align =

"Center "
align = "Justify"

III. Атрибуты для выравнивания текста – align:

Слайд 23

Title 1

= “right”> Title 2

Title 3

Title 4

Title 5

Title 6

Слайд 24

IV. Тэг для выравнивания по центру:
ТЕКСТ

Слайд 25

Компьютер

Компьютер

Слайд 26

Слайд 27

V. Разделительная линия
Горизонтальная линия – тэг

Слайд 28

Атрибуты тэга
:
SIZE = 5 – толщина линии
WIDTH = Х %

- длина линии
COLOR = “код цвета” – цвет линии

Слайд 29

Атрибуты тэга
:

Слайд 30

Форматирование текста.

Слайд 31

I. Абзацы:
1.
- разрыв строки.
- разделение текста на

абзацы (вставляет пустую строку перед абзацем). В нем можно использовать атрибут align.

Слайд 32

Компьютер имеет то преимущество перед мозгом,
что им пользуются. (Габриэль

Лауб)

Слайд 33

Жизнь современного человека невозможно представить без компьютера.

Даже если Вы

не являетесь профессиональным копьютерщиком, без ПК Вам наверняка не обойтись.

Компьютер есть в каждом доме и офисе. Во многих сферах, профессиях и даже в личной жизни, он является незаменимым атрибутом повседневной жизни. Поэтому каждый современный человек должен иметь представление о том, что такое компьютер. На этом сайте Вы можете найти информацию о том, как устроен компьютер.

Слайд 34

II. Тэг для изменения шрифта:
… - изменяет размер, цвет и

стиль текста.

Слайд 35

Атрибуты тэга :
1) FACE = “…” гарнитура шрифта
face="Comic Sans MS, Courier

New”

Слайд 36

Атрибуты тэга :
2) SIZE = … размера шрифта
size = 4
размер шрифта

1-7. По-умолчанию size = 3.
Размер изменяется на 20%:
4 размер больше 3 на 20%,
5 размер больше 4 на 20%

Слайд 37

Атрибуты тэга :
3) COLOR = “…” цвет шрифта
color = “blue”

Слайд 38

Атрибуты тэга :
4) ALIGN = “…” выравнивание текста

Слайд 39

Например:
Это шрифт arial размером 3,

цвет синий

Слайд 40

Форматирование текста.

Слайд 41

I. Специальные символы:
– пробел
« - кавычки
»
✔ - ✔
& -

амперсант

Слайд 42

Слайд 43

Слайд 44

Слайд 45

II. Изменение начертания шрифта:
Текст - жирный
Текст

- курсив
Текст - подчеркнутый

Слайд 46

Например:
Эта страницаявляется тестовой

Слайд 47

Компьютер

Слайд 48

Слайд 49

Слайд 50

Вставка изображений.

Слайд 51

– пробел
« - ?
»
& - ?

Слайд 52

Слайд 53

поддерживаются форматы файлов GIF, JPG, JPEG, PNG

Слайд 54

Изображения
Текст кода:

Компьютер

Все о компьютере

На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету.

Слайд 55

Атрибут для текстового пояснения к изображению:
ALT = «Поясняющий текст»
фотография">

Слайд 56

align="left" - выравнивание;
Vspace="10" - задает расстояние между текстом и рисунком

по вертикали;
Hspace="30" - задает расстояние между текстом и рисунком по горизонтали;
border="5“ > - рамка вокруг картинки;

Слайд 57

- выравнивание;
- задает

расстояние между текстом и рисунком по вертикали;

- задает расстояние между текстом и рисунком по горизонтали;

Слайд 58

Слайд 59

Слайд 60

Связывание Web страниц.

Слайд 61

Гиперссылки
Для связывания Web- страниц используют гиперссылки.
Термин «гипертекст» был введён в

обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.

Слайд 62

Гиперссылки
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по

сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации).

Слайд 63

Слайд 64

Гиперссылки
указатель гиперссылки < /A>
HREF=“URL”
указатель гиперссылки

> Что такое компьютер
История создания ЭВМ
Функциональная схема ЭВМ
Устройство компьютера

Слайд 65

Слайд 66

Слайд 67

Гиперссылки
В качестве указателя ссылки можно использовать не только текст, но и

изображение. В этом случае указатель ссылки задается с помощью тэга
Обычно на Web-страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга: