Для всех учителей из 37 347 образовательных учреждений по всей стране

Скидка до 75% на все 778 курсов

Выбрать курс
Получите деньги за публикацию своих
разработок в библиотеке «Инфоурок»
Добавить авторскую разработку
и получить бесплатное свидетельство о размещении материала на сайте infourok.ru
Инфоурок Другое ПрезентацииПрезентация на тему "Язык HTML"

Презентация на тему "Язык HTML"

библиотека
материалов
Текстовые и гипертекстовые способы хранения и представления информации

Описание презентации по отдельным слайдам:

1 слайд Текстовые и гипертекстовые способы хранения и представления информации
Описание слайда:

Текстовые и гипертекстовые способы хранения и представления информации

2 слайд ASCII-коды
Описание слайда:

ASCII-коды

3 слайд Кодовая таблица Unicode Стандарт кодирования символов, включающий в себя знак
Описание слайда:

Кодовая таблица Unicode Стандарт кодирования символов, включающий в себя знаки почти всех письменных языков мира. Стандарт был предложен в 1991 году некоммерческой организацией «Консорциум Юникода».

4 слайд Гиперссылка – «активная» ссылка на другой документ. Гипертекст – текст, содер
Описание слайда:

Гиперссылка – «активная» ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Основные определения

5 слайд Web-страница Это документ или информационный ресурс Всемирной паутины, доступ
Описание слайда:

Web-страница Это документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. статические – существуют на сервере в виде готовых файлов (*.htm, *.html). динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из БД, *.shtml, *.asp, *.pl, *.php). позволяют выбирать информацию из БД по заранее неизвестным запросам. дополнительная нагрузка на сервер; загружаются медленнее.

6 слайд Браузер Это прикладное ПО для просмотра страниц, содержания веб-документов, к
Описание слайда:

Браузер Это прикладное ПО для просмотра страниц, содержания веб-документов, компьютерных файлов и их каталогов, управления веб-приложениями, а также для решения других задач.

7 слайд Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML б
Описание слайда:

Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML был разработан британским учёным Тимом Бернерсом-Ли в конце 80-х годов 20 века в рамках создания проекта распределенной гипертекстовой системы WWW.

8 слайд Тэг Это команда языка HTML, которую выполняет браузер: непарные тэги парные т
Описание слайда:

Тэг Это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) <TABLE> ... </TABLE> Открывающий Закрывающий Область действия тэга: описание таблицы <IMG SRC = "vasya.jpg"> Вставить рисунок

9 слайд Это какой-то указатель коде HTML, отличительный знак, который придает элемент
Описание слайда:

Это какой-то указатель коде HTML, отличительный знак, который придает элементу какое-то свойство, что выделяет его из других. Атрибут <a title="Ссылка, ведущая на Яндекс" href="http://yandex.ru">Поиск</a> Атрибут (всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной)

10 слайд Структура HTML страницы   Невидимая часть страницы (Заголовок, Мета-тэги, Под
Описание слайда:

Структура HTML страницы <html> <head> Невидимая часть страницы (Заголовок, Мета-тэги, Подключение стилей, Java-script ) </head> <body> Видимая часть страницы, в которой расположены непосредственно элементы Web- страницы: абзацы, таблицы рисунки. </body> </html>

11 слайд Является контейнером, который заключает в себе все содержимое Web-страницы, в
Описание слайда:

Является контейнером, который заключает в себе все содержимое Web-страницы, включая тэги <head> и <body>. Документ начинается тэгом <html> и заканчивается </html>. Тэг <html>

12 слайд Предназначен для хранения элементов, цель которых — помочь браузеру в работе
Описание слайда:

Предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными. Содержимое тэга <head> не отображается напрямую на веб-странице, за исключением тэга <title>. Тэг < head >

13 слайд Определяет заголовок документа. Элемент  не является частью документа и не по
Описание слайда:

Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на Wеб-странице. Допускается использовать только один тэг <title> на документ и размещать его в контейнере <head>. Тэг <title>

14 слайд Предназначен для хранения содержания веб-страницы (контента), отображаемого в
Описание слайда:

Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. Тэг <body>

15 слайд Простейшая Web-страница
Описание слайда:

Простейшая Web-страница

16 слайд Заголовки: H1 … H6
Описание слайда:

Заголовки: H1 … H6

17 слайд Заголовки: H1 … H6 Выравнивание: История left, center, right
Описание слайда:

Заголовки: H1 … H6 Выравнивание: <H1 ALIGN=center>История</H1> left, center, right

18 слайд Выделение текста  - выделяет отрывок текста курсивом, не придавая ему дополни
Описание слайда:

Выделение текста <i> - выделяет отрывок текста курсивом, не придавая ему дополнительный акцент. <b> - задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. <u> - выделяет отрывок текста подчёркиванием, без дополнительного акцента. <em> - выделяет важные фрагменты текста, отображая их курсивом.

19 слайд Абзацы  - перенос текста на новую строку.
Описание слайда:

Абзацы <br> - перенос текста на новую строку.

20 слайд Абзацы  - абзац с отступами.
Описание слайда:

Абзацы <p> - абзац с отступами.

21 слайд Выравнивание  left – по левой границе right – по правой границе center – по ц
Описание слайда:

Выравнивание <P ALIGN="center"></p> left – по левой границе right – по правой границе center – по центру justify – по ширине

22 слайд Маркированные списки  - создает маркированный список.  - элемент маркированно
Описание слайда:

Маркированные списки <ul> - создает маркированный список. <li> - элемент маркированного или нумерованного списка.

23 слайд Маркированные списки Изменение маркера: disc –  circle – ○ square – ■  ...
Описание слайда:

Маркированные списки Изменение маркера: disc –  circle – ○ square – ■ <UL TYPE="disc"> ... </UL>

24 слайд Нумерованные списки  - упорядоченный нумерованный список. Нумерация может быт
Описание слайда:

Нумерованные списки <ol> - упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.

25 слайд Нумерованные списки Изменение нумерации:  ...  1, i, I, a, A
Описание слайда:

Нумерованные списки Изменение нумерации: <OL TYPE=i START=3> ... </OL> 1, i, I, a, A

26 слайд Многоуровневые списки
Описание слайда:

Многоуровневые списки

27 слайд Рисунки в документе  - встраивает изображения в HTML-документ с помощью атриб
Описание слайда:

Рисунки в документе <img> - встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения. <IMG SRC="flag.jpg"> image (изображение) bottom, left, middle, right, top <IMG SRC="flag.jpg" ALIGN="left"> source (источник)

28 слайд Рисунки в документе Из другой папки: С другого сервера:
Описание слайда:

Рисунки в документе Из другой папки: С другого сервера: <IMG SRC="images/flag.jpg"> <IMG SRC="../../images/night.jpg"> <IMG SRC="http://example.com/img/night.jpg">

29 слайд Ссылки  - создаёт гипертекстовые ссылки.  - представляет собой гиперссылку с
Описание слайда:

Ссылки <a> - создаёт гипертекстовые ссылки. <area> - представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>. <a href="http://site.ru">указатель ссылки</a> <a href="webupblog.ru/link-to-page"><img src="http://webupblog.ru/image1.jpg" /></a> Ссылка-изображение

30 слайд - тег-контейнер для разделов HTML-документа. Используется для группировки бл
Описание слайда:

<div> - тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями. <hr> - горизонтальная линия для тематического разделения параграфов. <s> - отображает текст, не являющийся актуальным, перечеркнутым. <span> - контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Часто используемые теги

31 слайд - расставляет акценты в тексте, выделяя полужирным.  - задает подстрочное на
Описание слайда:

<strong> - расставляет акценты в тексте, выделяя полужирным. <sub> - задает подстрочное написание символов, например, индекса элемента в химических формулах. <sup> - задает надстрочное написание символов. Часто используемые теги

32 слайд Содержание и оформление содержание (контент) оформление main.css mini.css pri
Описание слайда:

Содержание и оформление содержание (контент) оформление main.css mini.css print.css Физическая разметка (*.css) Логическая разметка (*.html)

33 слайд Что такое HTML? HTML – код не должен содержать оформления! оформление частей
Описание слайда:

Что такое HTML? HTML – код не должен содержать оформления! оформление частей документа (заголовков, параграфов) описывается в отдельном файле. CSS = Cascading Style Sheets – каскадные таблицы стилей (стилевые файлы: *.css). HTML + CSS + Javascript Содержание Оформление Анимация

34 слайд Свойства элементов страницы color – цвет символов background – цвет фона my.c
Описание слайда:

Свойства элементов страницы color – цвет символов background – цвет фона my.css body { color: white; background: #FF6600; } Значение Название тэга

35 слайд Подключение стилевого файла  Пример CSS     ...
Описание слайда:

Подключение стилевого файла <html> <title>Пример CSS</title> <head> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> ... </body> </html>

36 слайд Шрифты p { font-family: Arial, sans-serif; font-size: 20px; font-style: itali
Описание слайда:

Шрифты p { font-family: Arial, sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } Для всех абзацев Семейство шрифтов normal – обычный bold - жирный normal – обычный italic - курсив размер в пикселях serif – с засечками sans-serif – без засечек monospace – моноширинный

37 слайд qq.html Классы (стили оформления) Для абзацев класса spec p.spec { font-style
Описание слайда:

qq.html Классы (стили оформления) Для абзацев класса spec p.spec { font-style: italic; background: green; } <p class="spec"> L’Etat c’est moi. </p> .spec { font-style: italic; background: green; } Для всех элементов класса spec <h1 class="spec"> Россия молодая </h1>

38 слайд Размеры и выравнивание Lorem ipsum dolor sit amet, consectetur adipiscing eli
Описание слайда:

Размеры и выравнивание Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 100px 80% 20px p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } Фон Ширина Высота выравнивание: left, center, right, justify Абзацный отступ

39 слайд Рамка и поля Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabit
Описание слайда:

Рамка и поля Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 40px 20px p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } Цвет Отступы внутри Отступы снаружи Рамка Со всех сторон Толщина сверху, справа, снизу, слева solid – сплошная dashed - штриховая dotted – точечная 5px

40 слайд Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь; прозрачн
Описание слайда:

Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь; прозрачные области; анимация; только с палитрой (2…256 цветов); рисунки с четкими границами, мелкие рисунки. JPEG (Joint Photographer Expert Group) сжатие с потерями; нет анимации и прозрачности; рисунки с размытыми границами, фото. PNG (Portable Network Graphic) сжатие без потерь; с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность; нет анимации; плохо сжимает мелкие рисунки.

41 слайд Фон страницы (через CSS) body { background: url(back.jpg); } &#039;images/back.jpg
Описание слайда:

Фон страницы (через CSS) body { background: url(back.jpg); } 'images/back.jpg' '../images/back.jpg‘ 'http://www.vasya.ru/images/back.jpg'

42 слайд Выравнивание и отступы (CSS)  img.left { float: left; margin: 5px 10px; } mar
Описание слайда:

Выравнивание и отступы (CSS) <img src="net.jpg" class="left"> img.left { float: left; margin: 5px 10px; } margin: 5px 10px 5px 0; Отступа слева нет! HSPACE ALIGN VSPACE

43 слайд Таблицы  - тег для создания таблицы.  - определяет тело таблицы.  - создает я
Описание слайда:

Таблицы <table> - тег для создания таблицы. <tbody> - определяет тело таблицы. <td> - создает ячейку таблицы. <tfoot> - определяет нижний колонтитул таблицы. <th> - создает заголовок ячейки таблицы. <thead> - определяет заголовок (шапку) таблицы. <caption> - определяет название таблицы. <tr> - создает строку таблицы.

44 слайд Размеры (через CSS) строки: ячейки: table.spec { width: 60%; height: 300px; }
Описание слайда:

Размеры (через CSS) строки: ячейки: table.spec { width: 60%; height: 300px; } <table class="spec"> ... </table> table.spec tr { height: 50px; } table.spec td.qq { width: 25%; height: 50px; }

45 слайд Выравнивание (через CSS)   По центру, по верхней границе По правой 	 границе,
Описание слайда:

Выравнивание (через CSS) <table class="ex" border="1"> <tr class="centop"> <td>По центру, по верхней границе</td> <td class="rmid">По правой границе, по середине</td> </tr> </table> table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } left, center, right top, middle, bottom

46 слайд Фон и цвет текста (CSS)   Привет!     Таблица из двух строк и двух столбцов
Описание слайда:

Фон и цвет текста (CSS) <table border="1" class="qq"> <tr class="spec"> <td>Привет!</td> <td class="r"></td> </tr> <tr> <td class="pic"> Таблица из двух строк</td> <td>и двух столбцов</td> </tr> </table> table.qq td { background: green; } table.qq tr.spec td { background: blue; color: white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background: url("web.jpg"); } Цвет фона Рисунок

47 слайд Отступы (CSS) border-spacing border-spacing padding padding    1   2    table
Описание слайда:

Отступы (CSS) border-spacing border-spacing padding padding <table id="qq"> <tr> <td> 1 </td> <td> 2 </td> </tr> </table> table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; }

48 слайд Таблицы  - определяет количество столбцов, которое ячейка данных должна охват
Описание слайда:

Таблицы <td colspan="number"> - определяет количество столбцов, которое ячейка данных должна охватывать. <td rowspan="number"> - определяет количество строк, которое ячейка данных должна охватывать.

49 слайд Таблицы
Описание слайда:

Таблицы

50 слайд Таблицы
Описание слайда:

Таблицы

51 слайд Блоки (DIV) – любое содержимое Блок 1  Блок 2  Блок 3 Блок 1  Блок 2  Блок 3
Описание слайда:

Блоки (DIV) – любое содержимое <div style="background: #CCA69E;">Блок 1</div> <div style="background: #FF9282;"> Блок 2</div> <div style="background: #8ED9B6;"> Блок 3</div> <div style="background: #CCA69E; width: 200px;">Блок 1</div> <div style="background: #FF9282; width: 150px;"> Блок 2</div> <div style="background: #8ED9B6; width: 100px;"> Блок 3</div>

52 слайд Блоки (DIV) – любое содержимое Блок 1  Блок 2  Блок 3
Описание слайда:

Блоки (DIV) – любое содержимое <div style="background: #CCA69E; float: left; width: 200px;">Блок 1</div> <div style="background: #FF9282; float: left; width: 150px;"> Блок 2</div> <div style="background: #8ED9B6; float: left; width: 100px;"> Блок 3</div>

53 слайд Спасибо за внимание!
Описание слайда:

Спасибо за внимание!

Курс профессиональной переподготовки
Педагог-библиотекарь
Курс повышения квалификации
Курс профессиональной переподготовки
Специалист в области охраны труда
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Проверен экспертом
Общая информация

Вам будут интересны эти курсы:

Курс повышения квалификации «Экономика и право: налоги и налогообложение»
Курс повышения квалификации «История и философия науки в условиях реализации ФГОС ВО»
Курс повышения квалификации «Основы построения коммуникаций в организации»
Курс повышения квалификации «Организация практики студентов в соответствии с требованиями ФГОС технических направлений подготовки»
Курс повышения квалификации «Организация практики студентов в соответствии с требованиями ФГОС юридических направлений подготовки»
Курс профессиональной переподготовки «Разработка эффективной стратегии развития современного ВУЗа»
Курс повышения квалификации «Актуальные вопросы банковской деятельности»
Курс профессиональной переподготовки «Риск-менеджмент организации: организация эффективной работы системы управления рисками»
Курс профессиональной переподготовки «Гостиничный менеджмент: организация управления текущей деятельностью»
Курс профессиональной переподготовки «Организация и управление службой рекламы и PR»
Курс профессиональной переподготовки «Стратегическое управление деятельностью по дистанционному информационно-справочному обслуживанию»

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.