Язык разметки гипертекстов HTML - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Язык разметки гипертекстов HTML, слайд №1

Язык разметки гипертекстов HTML, слайд №2

Язык разметки гипертекстов HTML, слайд №3

Язык разметки гипертекстов HTML, слайд №4

Язык разметки гипертекстов HTML, слайд №5

Язык разметки гипертекстов HTML, слайд №6

Язык разметки гипертекстов HTML, слайд №7

Язык разметки гипертекстов HTML, слайд №8

Язык разметки гипертекстов HTML, слайд №9

Язык разметки гипертекстов HTML, слайд №10

Язык разметки гипертекстов HTML, слайд №11

Язык разметки гипертекстов HTML, слайд №12

Язык разметки гипертекстов HTML, слайд №13

Язык разметки гипертекстов HTML, слайд №14

Язык разметки гипертекстов HTML, слайд №15

Язык разметки гипертекстов HTML, слайд №16

Язык разметки гипертекстов HTML, слайд №17

Язык разметки гипертекстов HTML, слайд №18

Язык разметки гипертекстов HTML, слайд №19

Язык разметки гипертекстов HTML, слайд №20

Язык разметки гипертекстов HTML, слайд №21

Язык разметки гипертекстов HTML, слайд №22

Язык разметки гипертекстов HTML, слайд №23

Язык разметки гипертекстов HTML, слайд №24

Язык разметки гипертекстов HTML, слайд №25

Язык разметки гипертекстов HTML, слайд №26

Язык разметки гипертекстов HTML, слайд №27

Язык разметки гипертекстов HTML, слайд №28

Язык разметки гипертекстов HTML, слайд №29

Язык разметки гипертекстов HTML, слайд №30

Язык разметки гипертекстов HTML, слайд №31

Язык разметки гипертекстов HTML, слайд №32

Язык разметки гипертекстов HTML, слайд №33

Язык разметки гипертекстов HTML, слайд №34

Язык разметки гипертекстов HTML, слайд №35

Язык разметки гипертекстов HTML, слайд №36

Язык разметки гипертекстов HTML, слайд №37

Язык разметки гипертекстов HTML, слайд №38

Язык разметки гипертекстов HTML, слайд №39

Язык разметки гипертекстов HTML, слайд №40

Язык разметки гипертекстов HTML, слайд №41

Язык разметки гипертекстов HTML, слайд №42

Язык разметки гипертекстов HTML, слайд №43

Язык разметки гипертекстов HTML, слайд №44

Язык разметки гипертекстов HTML, слайд №45

Язык разметки гипертекстов HTML, слайд №46

Язык разметки гипертекстов HTML, слайд №47

Язык разметки гипертекстов HTML, слайд №48

Язык разметки гипертекстов HTML, слайд №49

Язык разметки гипертекстов HTML, слайд №50

Язык разметки гипертекстов HTML, слайд №51

Язык разметки гипертекстов HTML, слайд №52

Язык разметки гипертекстов HTML, слайд №53

Язык разметки гипертекстов HTML, слайд №54

Язык разметки гипертекстов HTML, слайд №55

Язык разметки гипертекстов HTML, слайд №56

Язык разметки гипертекстов HTML, слайд №57

Язык разметки гипертекстов HTML, слайд №58

Язык разметки гипертекстов HTML, слайд №59

Язык разметки гипертекстов HTML, слайд №60

Язык разметки гипертекстов HTML, слайд №61

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Язык разметки гипертекстов HTML. Доклад-сообщение содержит 61 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Тема : Язык разметки гипертекстов HTML Вопрос 1. Назначение и структура языка HTML

Слайд 2

Описание слайда:

HTML – Hiper Text Markup Language -это язык описания структуры страниц HTML – Hiper Text Markup Language -это язык описания структуры страниц «тэг» от англ. tag – метка, ярлык, этикетка, бирка Общая схема построения строки html – документа : ТЕКСТ

Слайд 3

Описание слайда:

Правила: Правила: Пробелы в тексте игнорируются. Тэги форматирования могут быть написаны строчными и/или прописными буквами. Тэги следует писать парами.

Слайд 4

Описание слайда:

Любой html - документ имеет следующую структуру: Любой html - документ имеет следующую структуру: ….. …..

Слайд 5

Описание слайда:

Листинг 1 Листинг 1 СТИХИ Ночь. Улица. Фонарь. Аптека. Бессмысленный и тусклый свет. ПРИМЕР

Слайд 6

Описание слайда:

Вопрос 2. Тэги форматирования текста в html - документах - перенос на другую строку, не имеет теговой пары Пример

Слайд 7

Описание слайда:

Тэговая пара , Этот текст следует вывести шрифтом Arial КРУПНЫЙ ТЕКСТ МЕЛКИЙ ТЕКСТ

Слайд 8

Описание слайда:

Красный шрифт Красный шрифт Зеленый шрифт Синий шрифт Серый шрифт

Слайд 9

Описание слайда:

КРУПНЫЙ ЗЕЛЕНЫЙ ШРИФТ ГАРНИТУРЫ ARIAL

Слайд 10

Описание слайда:

Тэг начала абзаца , ТЕКСТ, ВЫРАВНЕННЫЙ ПО ЛЕВОМУ ПОЛЮ ТЕКСТ, ВЫРАВНЕННЫЙ ПО ЦЕНТРУ ТЕКСТ, ВЫРАВНЕННЫЙ ПО ПРАВОМУ ПОЛЮ

Слайд 11

Описание слайда:

, - делает текст жирным; , - делает текст жирным; , - делает текст наклонным; , - делает текст подчеркнутым; , - делает текст зачеркнутым.

Слайд 12

Описание слайда:

Тэги для заголовков Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6

Слайд 13

Описание слайда:

Тэги , Тэги , - увеличивают размер символов, заключенных между ними, на единицу. Тэги И - уменьшают размер символов на единицу.

Слайд 14

Описание слайда:

Тэги формирования списков , - тэги для формирования нумерованных списков; , - тэги для формирования маркированных списков Каждый элемент списка обрамляется тэговой парой , ПРИМЕР

Слайд 15

Описание слайда:

Тэги и , -надстрочный индекс. , - подстрочный индекс. ПРИМЕР

Слайд 16

Описание слайда:

ПРИМЕР

Слайд 17

Описание слайда:

Формирование списка определений - начало/конец списка - определяемый термин - определение термина пример

Слайд 18

Описание слайда:

Вопрос 3. Формирование горизонтальных линий ПРИМЕР

Слайд 19

Описание слайда:

Вопрос 4. Создание таблиц - НАЧАЛО И КОНЕЦ ТАБЛИЦЫ - НАЧАЛО И КОНЕЦ СТРОКИ - НАЧАЛО И КОНЕЦ СТОЛБЦА

Слайд 20

Описание слайда:

Слайд 21

Описание слайда:

Слайд 22

Описание слайда:

Параметры тега

Слайд 23

Описание слайда:

Параметры тэга

Слайд 24

Описание слайда:

Слайд 25

Описание слайда:

Вопрос 5. Использование графики в HTML - документах

Слайд 26

Описание слайда:

GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков Свойства – прозрачность и анимация JPEG (JOINT PHOTOGRAPHIC EXPERT GROUP) – объединенная группа экспертов по изображениям, семейство форматов, основано на математических алгоритмах сильного сжатия изображения

Слайд 27

Описание слайда:

- использование графики в качестве фона - файл расположен в сети -файл расположен в текущем каталоге

Слайд 28

Описание слайда:

Параметр DGPROPERTIES=“FIXED”- фиксирует фон в момент прокрутки - вставка графического изображения в документ

Слайд 29

Описание слайда:

Параметры тэга IMG

Слайд 30

Описание слайда:

Слайд 31

Описание слайда:

Вопрос 6. Создание гиперссылок Гиперссылка состоит из двух частей: псевдокнопки и адресной части (URL) Любой текст Параметры тэга TARGET – указывает область загрузки ресурса. TARGET =BLANK – загружает документ в новое окно пример

Слайд 32

Описание слайда:

Вопрос 7. Создание фреймов Пример фреймов

Слайд 33

Описание слайда:

Параметры фреймов

Слайд 34

Описание слайда:

Параметры тэга

Слайд 35

Описание слайда:

Слайд 36

Описание слайда:

Слайд 37

Описание слайда:

Плавающие фреймы Тэги

Слайд 38

Описание слайда:

Вопрос 8. Использование форм при создании html – документов

Слайд 39

Описание слайда:

Параметры тэга

Слайд 40

Описание слайда:

Слайд 41

Описание слайда:

Слайд 42

Описание слайда:

Кнопки с зависимой фиксацией TYPE=RADIO - для выбора пользователем одного значения из нескольких возможных Например: NAME – указывает наименование поля (кнопки) VALUE – содержит значение поля

Слайд 43

Описание слайда:

Кнопка с независимой фиксацией При создании форм часто требуется получить ответ пользователя на вопрос типа «Да/Нет». Для создания таких кнопок используется значение CHECKBOX параметра TYPE. Например: Молилась ли ты на ночь, Дездемона?

Слайд 44

Описание слайда:

Кнопка «Выполнить» Создается при помощи тэга с параметром TYPE= SUBMIT Значение параметра VALUE задает текст, который появится на кнопке. Действие определяется параметром ACTION тэга FORM

Слайд 45

Описание слайда:

Кнопка «Восстановить значение по умолчанию» Создается при помощи тэга с параметром TYPE= RESET

Слайд 46

Описание слайда:

Использование списков в форме Тэг поддерживает три необязательных атрибута: MULTIPLE - позволяет выбрать более чем одно наименование; NAME - определяет наименование объекта; SIZE - определяет число видимых пользователю пунктов списка -для определения списка пунктов

Слайд 47

Описание слайда:

Пример Первый Второй Третий Четвертый

Слайд 48

Описание слайда:

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

Слайд 49

Описание слайда:

Вопрос 9. Назначение CSS Вопрос 9. Назначение CSS Каскадные таблицы стилей Cascading Style Sheets (CSS) разработаны консорциумом World Wide Web Consortium (W3C).

Слайд 50

Описание слайда:

Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий: Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий: необходимо определиться с номенклатурой страниц, т.е. все страницы проектируемого Web – узла разбить на типы (домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.);

Слайд 51

Описание слайда:

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

Слайд 52

Описание слайда:

Способы применения CSS Способы применения CSS Создание и использование файлов таблиц стилей; Встраивание таблиц стилей в документы HTML; Встраивание стилей в тэги HTML.

Слайд 53

Описание слайда:

Способ 1. Файл таблицы стилей (*.css) Способ 1. Файл таблицы стилей (*.css) H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% } H2 { font-size: 20; font-weigt: bold; color: black; font-family: Courier } P.italic { font-style: italic } P.red { color: red }

Слайд 54

Описание слайда:

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

Слайд 55

Описание слайда:

Как пользоваться стилями из файла таблицы стилей? Как пользоваться стилями из файла таблицы стилей? Если в файле определены параметры для тэгов языка HTML, предназначенных для оформления текста (например, для операторов или , как в нашем примере), необходимо просто указать эти операторы без изменений. Пример: Заголовок первого уровня

Слайд 56

Описание слайда:

При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для тэга : P.italic { font-style: italic } P.red { color: red }

Слайд 57

Описание слайда:

Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга (или другого оператора форматирования текста). Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга (или другого оператора форматирования текста). Пример: Наклонный текст Текст красного цвета

Слайд 58

Описание слайда:

Способ 2. Встраивание таблиц стилей в документы HTML Способ 2. Встраивание таблиц стилей в документы HTML Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, который задан в общих таблицах стилей, можно встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей

Слайд 59

Описание слайда:

Пример: Пример: … Встроенная таблица стилей ….

Слайд 60

Описание слайда:

Способ 3. Встраивание стилей в операторы HTML Способ 3. Встраивание стилей в операторы HTML Данный способ предполагает встраивание стилей непосредственно в тэги языка HTML и применение стилей для оформления отдельных фрагментов документа HTML.