Верстка web-страниц. Введение - презентация, доклад, проект скачать

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

Верстка web-страниц. Введение, слайд №10

Верстка web-страниц. Введение, слайд №11

Верстка web-страниц. Введение, слайд №12

Верстка web-страниц. Введение, слайд №13

Верстка web-страниц. Введение, слайд №14

Верстка web-страниц. Введение, слайд №15

Верстка web-страниц. Введение, слайд №16

Верстка web-страниц. Введение, слайд №17

Верстка web-страниц. Введение, слайд №18

Верстка web-страниц. Введение, слайд №19

Верстка web-страниц. Введение, слайд №20

Верстка web-страниц. Введение, слайд №21

Верстка web-страниц. Введение, слайд №22

Верстка web-страниц. Введение, слайд №23

Верстка web-страниц. Введение, слайд №24

Верстка web-страниц. Введение, слайд №25

Верстка web-страниц. Введение, слайд №26

Верстка web-страниц. Введение, слайд №27

Верстка web-страниц. Введение, слайд №28

Верстка web-страниц. Введение, слайд №29

Верстка web-страниц. Введение, слайд №30

Верстка web-страниц. Введение, слайд №31

Верстка web-страниц. Введение, слайд №32

Верстка web-страниц. Введение, слайд №33

Верстка web-страниц. Введение, слайд №34

Верстка web-страниц. Введение, слайд №35

Верстка web-страниц. Введение, слайд №36

Верстка web-страниц. Введение, слайд №37

Верстка web-страниц. Введение, слайд №38

Верстка web-страниц. Введение, слайд №39

Верстка web-страниц. Введение, слайд №40

Верстка web-страниц. Введение, слайд №41

Верстка web-страниц. Введение, слайд №42

Верстка web-страниц. Введение, слайд №43

Верстка web-страниц. Введение, слайд №44

Верстка web-страниц. Введение, слайд №45

Верстка web-страниц. Введение, слайд №46

Верстка web-страниц. Введение, слайд №47

Верстка web-страниц. Введение, слайд №48

Содержание ▲

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

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

Слайд 1

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

Верстка web-страниц

Слайд 2

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

Содержание Основные понятия Инструментарий История Сведения о HTML и CSS HTML документ и его структура

Слайд 3

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

Основные понятия Веб-страница - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Бывают двух типов: статические и динамические.

Слайд 4

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

Основные понятия Сервер - программное обеспечение, принимающее запросы от клиентов. Клиент – в нашем случае браузер.

Слайд 5

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

Основные понятия HTTP - (англ. HyperText Transfer Protocol — «протокол передачи гипертекста») — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов). Основой HTTP является технология «клиент-сервер».

Слайд 6

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

Основные понятия Сайт - (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — совокупность электронных документов (файлов) частного лица или организации в Сети.

Слайд 7

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

Структура сайта Логическая – информационное структурирование (что, где, в каком объеме будет размещено, каким образом будет выглядеть система навигации, доступ к каким объектам и каким образом будет организован и т.п.) Физическая – техническая реализация спроектированной информационной структуры: формирование файловой системы для сайта; определение стартовой страницы; подключаемые СУБД и БД; и т.п.

Слайд 8

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

Основные понятия URL - (англ. URL — Uniform Resource Locator) — единообразный локатор (определитель местонахождения) ресурса. Ранее назывался Universal Resource Locator — универсальный указатель ресурса. URL — это стандартизированный способ записи адреса ресурса в сети Интернет. Или просто ссылка 

Слайд 9

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

Основные понятия HTML - (HyperText Markup Language) — язык гипертекстовой разметки. Документ HTML представляет в своей основе текстовый документ, в котором имеются специальные символы – теги, определяющие структуру документа и позволяющие осуществлять связь между несколькими подобными документами. Именно из-за возможности размещать в документе ссылки на другие документы и с их помощью осуществлять переходы данный язык называется гипертекстовым.

Слайд 10

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

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

Слайд 11

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

Основные понятия Преимущества CSS: больше возможностей форматирования; применение одного свойства к произвольному количеству однотипных объектов; описание свойств с использованием стилей значительно уменьшает суммарный объем разрабатываемого ресурса; упрощается процесс обновления ресурса при внесении стилевых изменений.

Слайд 12

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

Инструментарий Для начальной разработки веб-страниц или даже небольшого сайта (набор страниц, связанных между собой ссылками и единым оформлением), нам понадобятся следующие программы: Текстовый редактор. Браузер(ы) для просмотра результатов. Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде (для CSS также). Графический редактор. Справочная литература. Это необходимый минимум

Слайд 13

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

История HTML SGML – предок HTML. В свое время был разработан для для совместного использования машинно-читаемого текста в больших правительственных программах (например, аэрокосмических). HTML – разработан в конце 1980-х годов. Создавался для обмена научной и технической информацией между университетами, давая возможность работать с ним без серьезной профессиональной подготовки.

Слайд 14

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

История HTML HTML 2.0 – одобрен как стандарт в 1995 От версии к версии, до текущего HTML 5 добавлялись дополнительные возможности представления информации на веб-странице. XHTML 1.0 – оформлен как стандарт в 2000 году. Смесь XML + HTML 4, сделанная ради стандартизации разработки веб-страниц. Идею признали несостоятельной, и почти приняв XHTML 2.0, разговоры о продолжении стандарта прекратились. Вместо этого силы были брошены на разработку HTML 5.

Слайд 15

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

Развитие HTML Основные причины развития HTML: Развитие мультимедиа-возможностей ПК Появление карманных компьютеров и смартфонов, планшетов Необходимость стандартизации Упрощение разработки За всем этим следит Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), который был создан в 1994 году.

Слайд 16

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

Стандарт сегодня Стандарт веб-разработки сегодня: HTML 4.1 (HTML 5 уже практикуется), CSS 2.1 (CSS 3.0)

Слайд 17

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

Теги HTML Главным элементом разметки является тег. Он не отображается непосредственно в браузере, но влияет на то, каким образом отображаются остальные элементы – текст, ссылки, изображения и другой контент. ...

Слайд 18

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

Теги HTML - парный тег (контейнер) - непарный тег Примеры: Заголовок страницы Внутри этого тега все символы выделены жирным - откуда и какую картинку необходимо взять браузеру для отображения на странице

Слайд 19

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

Теги HTML Парный тег (контейнер) Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — , а в закрывающем используется слэш — . Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.

Слайд 20

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

Теги HTML Если связать открывающий и закрывающий тег между собой скобкой, как показано на рис., то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой. Любое пересечение условных скобок говорит о том, что правильная последовательность тегов нарушена.

Слайд 21

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

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

Слайд 22

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

Теги HTML

Слайд 23

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

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

Слайд 24

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

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

Слайд 25

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

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

Слайд 26

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

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

Слайд 27

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

Теги HTML Неизвестные теги и атрибуты Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.

Слайд 28

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

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

Слайд 29

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

Структура документа - обозначение типа документа для браузера // в данном случае определение типа документа для HTML5 самое простое - начало документа - служебная часть документа Заголовок страницы - содержательная часть документа - конец документа

Слайд 30

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

Структура документа

Слайд 31

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

Структура документа Заголовок страницы

Слайд 32

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

Служебная информация Тег с заголовком страницы Теги - в основном используются для браузеров и поисковых систем Теги - подключение CSS Теги - подключение JS

Слайд 33

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

Работа с документом Создавать и редактировать файлы можно в любом текстовом редакторе (к примеру, NotePad++) Шаблон имени файла: *.html – ваш компьютер поймет, что этот файл нужно открывать в браузере В имени файла только латинские буквы, и цифры, подчеркивания(_) и дефисы (-). Русские буквы, пробелы и спец.символы (%$#) не рекомендуется использовать. Все файлы по сверстанному сайту размещайте в отдельной системе вложенных папок.

Слайд 34

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

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

Слайд 35

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

Редактирование

Слайд 36

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

Редактирование

Слайд 37

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

Комментарии

Слайд 38

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

Теги HTML Условно теги делятся на следующие типы: теги верхнего уровня; теги заголовка документа; блочные элементы; строчные элементы; универсальные элементы; списки; таблицы; фреймы.

Слайд 39

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

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

Слайд 40

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

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

Слайд 41

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

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

Слайд 42

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

Теги HTML Тег предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, таблицы, списки и др.

Слайд 43

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

Теги HTML Теги заголовка документа К этим тегам относятся элементы, которые располагаются в контейнере . Все эти теги напрямую не отображаются в окне браузера, за исключением тега , который определяет название веб-страницы. Используется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.

Слайд 44

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

Теги HTML Теги заголовка документа Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.

Слайд 45

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

Теги HTML ВАЖНО Работая с html-кодом, который придает особый вид контенту, разбивая его на логические блоки, думайте о структуре У веб-страницы должна быть логическая структура, которую и задают теги, используемые для разметки содержимого