Создание сайтов на HTML 5 и СSS - презентация, доклад, проект скачать

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

Создание сайтов на HTML 5 и СSS, слайд №1

Создание сайтов на HTML 5 и СSS, слайд №2

Создание сайтов на HTML 5 и СSS, слайд №3

Создание сайтов на HTML 5 и СSS, слайд №4

Создание сайтов на HTML 5 и СSS, слайд №5

Создание сайтов на HTML 5 и СSS, слайд №6

Создание сайтов на HTML 5 и СSS, слайд №7

Создание сайтов на HTML 5 и СSS, слайд №8

Создание сайтов на HTML 5 и СSS, слайд №9

Создание сайтов на HTML 5 и СSS, слайд №10

Создание сайтов на HTML 5 и СSS, слайд №11

Создание сайтов на HTML 5 и СSS, слайд №12

Создание сайтов на HTML 5 и СSS, слайд №13

Создание сайтов на HTML 5 и СSS, слайд №14

Создание сайтов на HTML 5 и СSS, слайд №15

Создание сайтов на HTML 5 и СSS, слайд №16

Создание сайтов на HTML 5 и СSS, слайд №17

Создание сайтов на HTML 5 и СSS, слайд №18

Создание сайтов на HTML 5 и СSS, слайд №19

Создание сайтов на HTML 5 и СSS, слайд №20

Создание сайтов на HTML 5 и СSS, слайд №21

Создание сайтов на HTML 5 и СSS, слайд №22

Создание сайтов на HTML 5 и СSS, слайд №23

Создание сайтов на HTML 5 и СSS, слайд №24

Создание сайтов на HTML 5 и СSS, слайд №25

Создание сайтов на HTML 5 и СSS, слайд №26

Создание сайтов на HTML 5 и СSS, слайд №27

Создание сайтов на HTML 5 и СSS, слайд №28

Создание сайтов на HTML 5 и СSS, слайд №29

Создание сайтов на HTML 5 и СSS, слайд №30

Создание сайтов на HTML 5 и СSS, слайд №31

Создание сайтов на HTML 5 и СSS, слайд №32

Создание сайтов на HTML 5 и СSS, слайд №33

Создание сайтов на HTML 5 и СSS, слайд №34

Создание сайтов на HTML 5 и СSS, слайд №35

Создание сайтов на HTML 5 и СSS, слайд №36

Создание сайтов на HTML 5 и СSS, слайд №37

Создание сайтов на HTML 5 и СSS, слайд №38

Создание сайтов на HTML 5 и СSS, слайд №39

Создание сайтов на HTML 5 и СSS, слайд №40

Создание сайтов на HTML 5 и СSS, слайд №41

Создание сайтов на HTML 5 и СSS, слайд №42

Создание сайтов на HTML 5 и СSS, слайд №43

Создание сайтов на HTML 5 и СSS, слайд №44

Создание сайтов на HTML 5 и СSS, слайд №45

Создание сайтов на HTML 5 и СSS, слайд №46

Создание сайтов на HTML 5 и СSS, слайд №47

Создание сайтов на HTML 5 и СSS, слайд №48

Создание сайтов на HTML 5 и СSS, слайд №49

Создание сайтов на HTML 5 и СSS, слайд №50

Создание сайтов на HTML 5 и СSS, слайд №51

Создание сайтов на HTML 5 и СSS, слайд №52

Создание сайтов на HTML 5 и СSS, слайд №53

Создание сайтов на HTML 5 и СSS, слайд №54

Создание сайтов на HTML 5 и СSS, слайд №55

Создание сайтов на HTML 5 и СSS, слайд №56

Создание сайтов на HTML 5 и СSS, слайд №57

Создание сайтов на HTML 5 и СSS, слайд №58

Создание сайтов на HTML 5 и СSS, слайд №59

Создание сайтов на HTML 5 и СSS, слайд №60

Создание сайтов на HTML 5 и СSS, слайд №61

Создание сайтов на HTML 5 и СSS, слайд №62

Создание сайтов на HTML 5 и СSS, слайд №63

Создание сайтов на HTML 5 и СSS, слайд №64

Создание сайтов на HTML 5 и СSS, слайд №65

Создание сайтов на HTML 5 и СSS, слайд №66

Создание сайтов на HTML 5 и СSS, слайд №67

Создание сайтов на HTML 5 и СSS, слайд №68

Создание сайтов на HTML 5 и СSS, слайд №69

Создание сайтов на HTML 5 и СSS, слайд №70

Создание сайтов на HTML 5 и СSS, слайд №71

Создание сайтов на HTML 5 и СSS, слайд №72

Содержание ▲

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

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

Слайд 1

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

HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3 Модуль 1. Введение в HTML

Слайд 2

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

Слайд 3

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

Введение “Введение – это то, что все обычно пропускают”. Согласны? Добро пожаловать на наш курс Web-дизайн в Центре компьютерного обучения Специалист! Наш курс ( даст вам необходимый багаж знаний для занятия этой интересной и современной профессией. Эти знания вы можете в дальнейшем развивать и совершенствовать, и стать настоящим профессионалом в своей области. Для этого нужно лишь ваше желание.

Слайд 4

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

Основные понятия в веб-разработке

Слайд 5

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

Что такое HTML? HTML (HyperText Markup Language) — стандартный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Слайд 6

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

Версии HTML RFC 1866— HTML 2.0, одобренный как стандарт 22 сентября1995 года; HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года); HTML 3.2 — 14 января 1997 года; HTML 4.0 — 18 декабря 1997 года; HTML 4.01 — 24 декабря 1999 года; ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года; HTML5 — 28 октября 2014 года; HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года. HTML 5.2 был представлен 14 декабря 2017 года.

Слайд 7

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

Что такое CSS? CSS — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки (HTML).

Слайд 8

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

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

Слайд 9

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

IP адрес постоянные, закрепленные за определенным компьютером. динамические, которые присваиваются в тот момент, когда пользователь соединяется с интернетом. По IP адресу можно определить где находится сервер и сам сайт. Пример IP адреса: 192.168.1.2

Слайд 10

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

Доменные имена Доменное имя — это определенная буквенная последовательность, обозначающая имя сайта. Доменное имя должно начинаться и заканчиваться буквой латинского алфавита или цифрой. Например, у доменного имени yandex.ru есть две составных части, называемые уровнями и разделенные точками: ru — доменное имя 1 уровня yandex.ru — доменное имя 2 уровня mail.yandex.ru – доменное имя 3 уровня

Слайд 11

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

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

Слайд 12

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

Что такое веб-сервер? Веб-сервер — сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными.

Слайд 13

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

Что такое веб-сервер?

Слайд 14

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

Что такое веб-страница? Веб-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Типичная веб-страница представляет собой текстовый файл в формате HTML (*.html).

Слайд 15

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

Структура веб-страницы

Слайд 16

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

Что такое веб-сайт? Сайт, или веб-сайт, — одна или несколько логически связанных между собой веб-страниц.

Слайд 17

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

Виды сайтов Статические — содержимое подготавливается заранее и выдается пользователю в том виде, в котором хранится на сервере. Динамические — содержимое генерируется при помощи серверных языков программирования.

Слайд 18

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

Виды сайтов Коммерческие — сайты компаний, интернет магазины и т.д. Информационные — доносят до пользователя какую либо информацию. Веб сервисы (порталы) — поисковые системы, электронная почта, форумы, социальные сети.

Слайд 19

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

Виды сайтов Фиксированной ширины — задается фиксированная ширина. Все блоки сайта будут выглядеть так, как и было задумано и не будут изменять размеров зависимости от разрешения монитора или размера экрана браузера. «Резиновые» — ширина строго не задается, а изменяет размер в зависимости от размера экрана браузера или разрешения монитора. Адаптивные — адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана.

Слайд 20

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

Протоколы передачи данных HTTP (Hypertext Transfer Protocol ) HTTPS (Hypertext Transfer Protocol Secure) FTP (File Transfer Protocol)

Слайд 21

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

Схема HTTP-запроса страницы

Слайд 22

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

Редакторы Штатный Блокнот (Notepad) Notepad++ ( ) Sublime Text ( EmEditor ( Edit+ ( UltraEdit ( Adobe Dreamweaver (

Слайд 23

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

Теги и атрибуты

Слайд 24

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

HTML: тэги

Слайд 25

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

Парные и одиночные тэги

Слайд 26

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

Вложенные тэги

Слайд 27

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

Атрибуты тэгов

Слайд 28

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

Атрибуты тэгов Чтобы расширить возможности отдельных элементов применяются атрибуты. Есть два типа атрибутов: атрибут со значением и логический атрибут, у которого нет значения. Атрибуты пишутся внутри открывающего тега, несколько атрибутов перечисляются через пробел, порядок их значения не имеет. Полный список

Слайд 29

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

Атрибуты тэгов Атрибутов может быть несколько. Некоторые тэги не имеют смысла без атрибутов.

Слайд 30

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

Важные факты про HTML5 1. HTML5 - это не новый язык, а расширение уже существующего HTML4 с хорошей обратной совместимостью 2. HTML5 - не цельная вещь, а набор компонентов разной степени готовности 3. Некоторые компоненты HTML5 уже давно работают во многих браузерах, их можно использовать уже сейчас 4. HTML5 - с нами надолго

Слайд 31

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

Как начать верстать на HTML5? Вы уже это делаете!

Слайд 32

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

Упрощение синтаксиса Помимо добавления новых тэгов произошло изменение старых. В основном упрощение

Слайд 33

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

Новые тэги

Слайд 34

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

Новые тэги

Слайд 35

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

Наверное, самый интересный из новых семантических тэгов Это цельный, самостоятельный и самодостаточный кусок контента ля него возможна своя иерархия заголовков Например: пост в блог, новость, статья, пост на форуме, “кусок одного сайта в другом сайте”

Слайд 36

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

Указываем время для людей и машин Примеры:

Слайд 37

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

Новые тэги и старый IE Чтобы можно было использовать и стилизовать новые тэги в старых IE вставляем в

Слайд 38

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

Новые тэги и старый IE Либо подключаем в уже готовую библиотеку:

Слайд 39

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

Новые тэги и старый IE А также помимо скрипта нужно задать для новых тэгов display: block;

Слайд 40

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

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

Слайд 41

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

Что такое кодировка сайта Кодировка (англ. charset) – это таблица, в которой для каждого кода символа закрепляется своё графическое изображение. Если кодировка определена неправильно, для каждого кода символа будет использоваться неправильное графическое изображение.

Слайд 42

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

Распространенные кодировки ASCII - одна из самых старых компьютерных кодировок, в которой каждому символу соответствует строго определенное число. Например, символу "a" соответствует число 97, а символу "A" — число 65. ASCII — базовая кодировка текста для латиницы. KOI8 - кодовая страница, разработанная для кодирования букв кириллических алфавитов, дополнение к ASCII, содержит символы национальных алфавитов (KOI8-R – русская, KOI8-U – украинская и т.д.) Windows-1251 (CP1251) – кодировка, являющаяся стандартной 8-битной кодировкой для всех русских версий Microsoft Windows. UTF-8 - распространённый стандарт кодирования текста, позволяющий более компактно хранить и передавать символы Юникода, используя переменное количество байт (от 1 до 4).

Слайд 43

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

Базовая таблица ASCII

Слайд 44

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

Таблица ASCII

Слайд 45

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

Таблица KOI8-R (русская)

Слайд 46

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

Спецсимволы

Слайд 47

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

Типограф Типограф — это средство онлайн подготовки текста к веб-изданию. Он помогает избежать ручной замены огромного количества текста, расстановки кавычек, неразрывных пробелов, всевозможных символов, которых нет на клавиатуре.

Слайд 48

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

Больше специальных символов

Слайд 49

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

Страница сложнее, типы тэгов

Слайд 50

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

Типы элементов Базовые: 1. блочные 2. строчные Дополнительные: блочно-строчные Табличные и т.д.

Слайд 51

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

Блочные элементы Блочные элементы – прямоугольные области на странице Блочными по умолчанию являются:

Слайд 52

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

Особенности блочных 1. Принудительный перенос строки до и после 2. Воспринимают ширину, высоту, внутренние и внешние отступы 3. Занимают всё доступное по ширине пространство 4. По высоте подстраиваются под содержимое

Слайд 53

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

Особенности блочных

Слайд 54

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

Строчные элементы Строчные элементы - фрагменты текста Строчными по умолчанию являются:

Слайд 55

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

Особенности строчных 1. Нет переносов строки до и после - можно располагать в одной строке 2. Ширина и высота зависят только от содержания, задать размеры с помощью CSS нельзя 3. Воспринимают только горизонтальные отступы 4. Ведут себя как текст

Слайд 56

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

Особенности строчных

Слайд 57

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

Теги для HTML текста

Слайд 58

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

Теги заголовков (...) Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня Заголовок четвертого уровня Заголовок пятого уровня Заголовок шестого уровня

Слайд 59

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

Теги заголовков (...)

Слайд 60

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

Теги для форматирования текста Тег Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Тег Отображает шрифт курсивом, придавая тексту значимость. Тег Отображает шрифт курсивом. Тег Уменьшает размер шрифта на единицу по отношению к обычному тексту. Тег Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.

Слайд 61

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

Теги для форматирования текста Тег Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер. Тег Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Тег Выделяет текст в новой версии документа, подчёркивая его. Для тега доступны следующие атрибуты: cite, datetime. Тег Перечёркивает текст. Используется для выделения текста, удаленного из документа. Для тега доступны следующие атрибуты: cite, datetime.

Слайд 62

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

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

Слайд 63

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

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

Слайд 64

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

Теги для оформления цитат и определений Тег Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст. Для тега доступны ‎глобальные атрибуты. Тег Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально. Для тега доступен атрибут dir. Тег Выделяет цитаты внутри документа, выделяя его отступами и переносами строк. Для тега доступен атрибут cite.

Слайд 65

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

Теги для оформления цитат и определений Тег Используется для выделения коротких цитат. Браузерами заключается в кавычки. Для тега доступен атрибут cite. Тег Применяется для выделения цитат, названий произведений, сносок на другие документы. Для тега доступны ‎глобальные атрибуты. Тег Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS. Для тега доступен атрибут title.

Слайд 66

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

Абзацы, средства переноса текста Тег Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются». Для тега доступны ‎глобальные атрибуты. Тег Переносит текст на следующую строку, создавая разрыв строки. Для тега доступны ‎глобальные атрибуты. Тег Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии. Для тега доступны ‎глобальные атрибуты.