Создание Web - документов

Содержание

Слайд 2

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

Web-документ (или Web-страница) - это гипертекстовый документ, содержащий в себе ссылки на
различные информационные ресурсы: другие Web-документы, графические, звуковые и т.д., а также информационные ресурсы других сервисов.
Тег - (от английского tag) – элемент html, знак или команда языка разметки гипертекста, который представляет собой текст, заключаемый в скобки <>.
<тэг> - двойной тег не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).  Обратите внимание:  <тэг1><тэг2><тэг3> ...   Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д. 

Слайд 3



Этот двойной тег указывает программе просмотра страниц что это HTML документ. Заключает

Этот двойной тег указывает программе просмотра страниц что это HTML документ. Заключает
в себе все содержимое web-страницы.
- открывает документ.
- закрывает документ.

Слайд 4




Определяет место, где помещается различная информация не отображаемая в теле

Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь
документа. Здесь располагается тег названия документа и теги для поисковых машин.

Слайд 5





Тег названия документа

Тег названия документа

Слайд 6



Тег названия документа




Определяет видимую часть

Тег названия документа Определяет видимую часть документа. То, что отображается на web – страничке (тело документа).
документа. То, что
отображается на web – страничке (тело документа).

Слайд 7



Заголовок web-страницы


Тело web-страницы. На странице

Заголовок web-страницы Тело web-страницы. На странице отображается то, что находится между этим

отображается то, что находится между
этим двойным тегом.


Полная структура web-страницы

Слайд 8

HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для создания веб-страниц

HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста). HTML
во всемирной паутине.

Слайд 9

Тэги - это метки, которые используются для указания браузеру, как он должен

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

Слайд 10

Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере,

Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере,
из следующих тегов:
- Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ.  …
- Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.  …

Слайд 11

- Название, оглавление страницы, предназначен для поисковых машин, этот  тег всегда помещается</div></h3></h3><img 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/1056509/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1056509/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1056509/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1056509/slide-10.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1056509/slide-10.jpg" class="slides-image"><!----><div class="slides-content">внутри - <head><title>…
- В этот тег помещается информация, которая должна отображаться в окне браузера.  …

Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.
Атрибуты тега тела документа
- Цвет фона документа, используя значение цвета в виде RRGGBB.
- Цвет текста документа

Слайд 13

.....

- Определяет величину заголовка по их степени важности. 

.....

- Самый большой

..... - Определяет величину заголовка по их степени важности. ..... - Самый
заголовок. 
.....
- Самый маленький заголовок.
….. - Определяет текст жирным шрифтом.  …..- Определяет текст наклонным (курсив) шрифтом.  …..- Имитирует стиль печатной машинки.  ….. - Задаёт цвет текста, шестнадцатеричном коде. …..- Задаёт величину шрифта в пределах от “1” до “7”. 
…..- Увеличивает размер текст на условную 1-цу от заданного.  …..- Этот тег, браузер определяет как жирное начертание текста. 
…..- Этот тег, браузер определяет как наклонное (курсив) начертании текста. 

Атрибуты текст документа

Слайд 14

…..

- Определяет новый параграф текста с предварительным пропуском одной строки.  < P ALIGN=”…”> - Выравнивает

….. - Определяет новый параграф текста с предварительным пропуском одной строки. -
текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”.  Пример: текст

Текст по центру.

Слайд 15

          Вставляет изображение на страницу.
 Форматирует положение изображения в документе. Может

Вставляет изображение на страницу. Форматирует положение изображения в документе. Может иметь значения:
иметь значения: left, right, center; bottom, top, middle.
Устанавливает толщину рамки вокруг изображения
Устанавливает поля сверху и снизу
Устанавливает поля слева и справа.
- Добавляет горизонтальную линию.
 
 Указывает ширину линии в пикселах или процентах.
Линия без тени. 
 Определяет цвет линии.

Слайд 16

-
Вставка объекта в документ HTML. В

- Вставка объекта в документ HTML. В данном случае это мультимедийный файл
данном случае это мультимедийный файл *.avi, причем при загрузке страницы происходит автозапуск этого файла, размеры
которого на экране заданы атрибутами Width и Height.
Просмотр примера с видеофайлом avi
Если документ HTML большой, то внутри него делают переходы по метке (U01):

Введение


.........................................
Введение

Слайд 17

(только для Internet Explorer):

Интернет - это окно в мир!
Если

(только для Internet Explorer): Интернет - это окно в мир! Если текстовая
текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (то есть без атрибутов, и она будет бежать влево):
Добро пожаловать в Интернет!

Слайд 18

Если текстовая строка должна бежать то влево, то вправо, то в теге
Если текстовая строка должна бежать то влево, то вправо, то в теге
используется атрибут behavior="alternate". Пример:


Как прекрасно жить на свете!


Цвет символов бегущей строки задается тегом ,
а цвет фона строки тегом .

Слайд 19

Для воспроизведения звука (файл *.mid) после загрузки документа HTML
в браузер Internet Explorer

Для воспроизведения звука (файл *.mid) после загрузки документа HTML в браузер Internet
или Opera (т.е. в фоновом режиме), надо записать следующую команду:

Можно также использовать файл формата *.wav. Число воспроизведений музыки loop можно увеличить с 1 до n.

Слайд 20

 

  Тег создающий таблицу.
Задает строку в таблице. 
Задает отдельную ячейку в таблице.

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

Слайд 21

 

        Определяет толщину рамки.
 Определяет расстояние между ячейками
Устанавливает ширину таблицы. (ЗначениеОпределяет толщину рамки. Определяет расстояние между ячейками Устанавливает ширину таблицы. (Значение параметра
параметра может быть в пикселях или процентах)
Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)
Указывает количество столбцов, объединенных в одной ячейке.
 Указывает количество строк, объединенных в одной ячейке. 
 Задает ширину ячейки таблицы в пикселях или процентах.
Задает высоту ячейки таблицы в пикселях или процентах.

Слайд 22

- Задаёт переход на другие ресурсы.
-

- Задаёт переход на другие ресурсы. - Название страницы - Задаёт переход
Название страницы - Задаёт переход на другие страницы сайта.
- Название страницы - Задаёт переход на другую страницу сайта в новом окне.

Слайд 23

Указывает в каком окне открывать гиперссылку.  

Цвет текста гиперссылок
Атрибут LINK служит для

Указывает в каком окне открывать гиперссылку. Цвет текста гиперссылок Атрибут LINK служит
выделения гиперссылок, которые еще не посещались пользователем.
Атрибут VLINK - уже посещенные ссылки.
Атрибут ALINK - выделяет активную гиперссылку.
Имя файла: Создание-Web---документов.pptx
Количество просмотров: 19
Количество скачиваний: 0
- Предыдущая
Влияние отрицательной информации на здоровье человека
Следующая -
Распределение направлений естественной остаточной намагниченности горных пород

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

Алгоритмы. Шаблон
Презентация Черноволенко Алины 10 класс МОУ «СОШ № 5» ТОРЖОК 2011
адресация в сети
Перевод при помощи NeoDic
Интернет как один из источников информационного обеспечения фундаментальных и прикладных научных исследований
Платформы для создания кроссвордов
Представление информации, языки. Информационные объекты
Обобщение по аннотациям. Журналистика
Основы программирования на языке Python. Школа::Кода (занятие 2)
Аксиомы и определения доступа субъектов к объектам
Презентация на тему Виды носителей информации
Региональность сайта. Геозависимые и геонезависимые запросы
Компьютерная графика
Віртуальні аудиторії Сумісна робота. Навчальні приміщення
Визуализация рекламной деятельности на персональном компьютере на примере создания поздравительных материалов к юбилею техникума
Программирование линейных алгоритмов. Начала программирования
Неправильные микросервисы
Уроки по Spike Prime. Функции подсветки
Гибридные информационные системы в промышленности
WinAPI Графика – Знакомство с функциями Ellipse, Arc, Chord, Pie. Лабораторная работа №8
Методичка по созданию сайта
6-4-1-raznovidnosti-objektov-i-ih-klassifikacija
Система программирования PascalABC.NET. 15 лет развития
Установка Oracle Database
История развития вычислительной техники
Чат - боты в социальных сетях
Современный персональный компьютер
Новая технологическая платформа для метеообеспечения аэронавигации
LiveInternet
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть