Презентация на тему: Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий

Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий
1/24
Средняя оценка: 4.3/5 (всего оценок: 5)
Код скопирован в буфер обмена
Скачать (980 Кб)
1

Первый слайд презентации

Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Цололо С.А., к.т.н., доцент кафедры компьютерной инженерии Донецк, 2013

Изображение слайда
2

Слайд 2

1 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Клиент-серверная технология

Изображение слайда
3

Слайд 3

2 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Предпосылки появления HTML Основная идея разработки WWW состояла в том, чтобы при помощи гипертекстовой системы объединить все множество ресурсов агенства CERN в единую информационную систему. При разработке различных компонентов технологии ( HTTP, HTML, URL и других) предполагалось, что квалификация авторов информационных ресурсов и их оснащенность средствами вычислительной техники будут минимальными. Это обеспечит новой технологии наиболее быстрое и широкое распространение.

Изображение слайда
4

Слайд 4

3 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Предпосылки появления HTML Разработчики HTML решали следующие задачи : Предоставить создателям гипертекстовых документов предельно простое средство для организации информации в файлы. Сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления о качественных и удобных интерфейсах. Реализовать возможность автоматического разбора создаваемых документов с помощью компьютерного программного обеспечения Задачи были решены за счет выбора теговой модели описания документа, которая применяется в системах подготовки документов для печати.

Изображение слайда
5

Слайд 5

4 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML HTML. Принципы теговой модели В HTML используется теговая модель описания документа как совокупности элементов, каждый из которых окружен тегами. По своему значению и принципам использования теги близки к понятию скобок " begin / end " в языках программирования, Теги определяют область действия правил интерпретации текстовых элементов документа. Элементы документа, размеченного при помощи HTML, также принято называть контейнерами. Общая схема построения элемента текста в формате HTML может быть записана в следующем виде: <имя атрибуты > содержание элемента </имя>

Изображение слайда
6

Слайд 6

5 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML HTML. Принципы теговой модели Элемент, маркированный тегом, имеет следующую структуру: <element attr1="value1" attr2="value2"... > внутреннее содержание </element> Если тег не имеет внутреннего содержания, то он может иметь упрощенную структуру: <element attr1=" value1 " attr2=" value2 "... / > <img src=" photo.jpg " alt=" My photo " /> <hr/>

Изображение слайда
7

Слайд 7

6 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML HTML. Примеры

Изображение слайда
8

Слайд 8

7 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Эволюция языка HTML HTML 1.0 (0.9) - был направлен на представление языка как такового, где описание носило рекомендательный характер. HTML 2.0 - представлял новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения компоновки изображений и текста. HTML 3.2 - упорядочивает все нововведения. Позволяет реализовать использование таблиц, выполнение Java, обтекание графики текстом и другие визуальные улучшения. HTML 4.01 - включает дополнительные средства работы с мультимедиа, таблицы стилей, упрощенные средства печати изображений и документов. Для управления сценариями можно использовать языки программирования (JavaScript).

Изображение слайда
9

Слайд 9

8 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Эволюция языка HTML. XHTML (2000 год ) HTML + XML (eXtended Markup Language) = XHTML Является вариативной нотацией базовых правил HTML : Более строгий и хорошо структурированный язык. Лучшая «переносимость» между различными браузерами. Гарантированная совместимость с будущими версиями браузеров. Допускает вставки на других языках разметки XML, SVG, MathML, и другие.

Изображение слайда
10

Слайд 10

9 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Эволюция языка HTML. XHTML (2000 год ) Все элементы должны быть закрыты. Все обязательные атрибуты должны присутствовать. В теле документа текст не может быть вложен непосредственно. «Блочные» элементы не могут быть вложены в «строчные». Атрибуты должны заключаться в кавычки. Вложенность элементов должна быть правильной. Спецсимволы должны быть представлены мнемоническими ссылками. Теги и атрибуты записываются только строчными буквами. Неправильно: Правильно: 1. 2. 3. 4. 5. 6. 7. 8. <hr> < hr /> ( или < hr > </ hr >) <img src="photo.jpg"> < img src ="photo.jpg“ alt=" Фото "/> <b><i>some text</b></i> <b><i>some text</i></b> <body>Hello, World!</body> <body><p>Hello, World!</p></body> <img src=photo.jpg> <img src="photo.jpg“ alt=" Фото "/> <a><div>... </div></a> & &amp; <A HREF="page2"> <a href="page2"> <p>Абзац содержит <b>вложенные <i>строчные</i> теги</b></p>

Изображение слайда
11

Слайд 11

10 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Структура HTML -документа Любой гипертекстовый HTML- документ состоит из следующих обязательных частей : Версия HTML-документа ( DOCTYPE ); Обозначение языка документа ( HTML ); Заголовок документа ( HEAD ); Тела документа ( BODY ).

Изображение слайда
12

Слайд 12

11 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Структура HTML -документа. Пример <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> My first page </title> </head> <body> <p> Hello, World! </p> </body> </html> html title body p My first page Hello, World! head

Изображение слайда
13

Слайд 13

12 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Разделы HTML -документа. DOCTYPE Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу DOCTYPE Описание HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML- документе применяются фреймы. HTML 5 <!DOCTYPE html> Для всех документов.

Изображение слайда
14

Слайд 14

13 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Разделы HTML -документа. Корневой раздел Раздел <html></html> Данный элемент является корневым – между его начальным и конечным тегам должна находиться вся веб-страница. На данный момент этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которые редко пользуются. Основное назначение этого элемента – вложение элементов head, body, frameset и других, определяющих общую структуру веб-страницы. Конечным тегом </html> заканчиваются все документы.

Изображение слайда
15

Слайд 15

14 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Разделы HTML -документа. Заголовок Раздел <head></head> Область заголовка веб-страницы, ее первая часть, служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir, должен включать элемент title и допускает вложение элементов base, meta, link, object, script, style.

Изображение слайда
16

Слайд 16

15 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Разделы HTML -документа. Тело Раздел <body></body> Данный элемент заключает в себе гипертекст, который определяет собственно содержание веб-страницы. Внутри элемента body можно использовать все элементы, предназначенные для дизайна веб-страницы. Внутри начального тега элемента body можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.

Изображение слайда
17

Слайд 17

16 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа.

Изображение слайда
18

Слайд 18

17 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа. Название <title></title> Элемент для размещения заголовка веб-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска. Поэтому эта строка должна, не будучи слишком длинной, до-статочно точно отражать суть документа.

Изображение слайда
19

Слайд 19

18 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа. Описание стиля <style></style> Описание стиля элементов веб-страницы. Необходимо отметить, что для каждого элемента существует стилевое оформление по умолчанию Поэтому употребление элемента style не обязательно, но желательно.

Изображение слайда
20

Слайд 20

19 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа. Внешние ссылки <link> Элемент описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов link.

Изображение слайда
21

Слайд 21

20 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа. Мета - теги < meta > Этот элемент содержит служебную информацию, которая не отражается при просмотре веб-страницы. Внутри него нет текста, который бы отображался на странице. Каждый элемент meta содержит два основных атрибута : name или http-equiv (категория параметра); c ontent (содержание параметра). Атрибут name используется для получения дополнительной информации о веб-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется для создания дополнительных полей при выполнении запроса.

Изображение слайда
22

Слайд 22

2 1 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа. Мета - теги Примеры использования мета - тегов Адрес электронной почты автора: <meta name=" Reply-to " content=" Имя@Адрес "> Имя автора веб-страницы: <meta n а m е=" Author " content=" Имя автора " > Набор ключевых слов для поиска: <meta name=" Keywords " content=" c лов o1, слово2, словоЗ … " > Краткое описание содержания веб-страницы: <meta name=" Description " content=" Содержание страницы " >

Изображение слайда
23

Слайд 23

22 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Элементы заголовка HTML -документа. Мета - теги Мета-теги также используются для указания кодировки HTML- страницы.

Изображение слайда
24

Последний слайд презентации: Курс «Интернет-технологии» Лекция 4 Основы HTML. Структура документа Донецкий

23 ДонНТУ, 2013 Курс «Интернет-технологии» Лекция 4 – Основы HTML Редакторы HTML. PsPad и NotePad++ PsPad (http://www.pspad.com) Notepad++ (http://notepad-plus-plus.org/)

Изображение слайда