Презентация Верстка web-страниц. Введение онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Верстка web-страниц. Введение абсолютно бесплатно. Урок-презентация на эту тему содержит всего 48 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:48 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:337.19 kB
- Просмотров:63
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№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
Главным элементом разметки является тег.
Он не отображается непосредственно в браузере, но влияет на то, каким образом отображаются остальные элементы – текст, ссылки, изображения и другой контент.
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>
№18 слайд
Содержание слайда: Теги HTML
<тег></тег> - парный тег (контейнер)
<тег /> - непарный тег
Примеры:
<title>Заголовок страницы</title>
<strong>Внутри этого тега все символы выделены жирным</strong>
<img src=“image.jpg” /> - откуда и какую картинку необходимо взять браузеру для отображения на странице
№19 слайд
Содержание слайда: Теги HTML
Парный тег (контейнер)
Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.
№20 слайд
Содержание слайда: Теги HTML
Если связать открывающий и закрывающий тег между собой скобкой, как показано на рис., то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой. Любое пересечение условных скобок говорит о том, что правильная последовательность тегов нарушена.
№21 слайд
Содержание слайда: Теги HTML
Теги:
Обрамляются <>.
В теге могут находиться атрибуты (дополнительные параметры для элементов). Атрибуты могут быть практически у любого тега.
Содержимое тега пишется между открывающим и закрывающим тегами. Если тег непарный, то содержимое пишется в атрибуте.
Теги могут следовать линейно, а могут располагаться вложенно (на подобие вложенных скобок).
№22 слайд
Содержание слайда: Теги HTML
№23 слайд
Содержание слайда: Теги HTML
Для тегов любого типа действуют определенные правила их использования.
Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
№24 слайд
Содержание слайда: Теги HTML
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример').
Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы.
№25 слайд
Содержание слайда: Теги HTML
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — <BR>, <Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта.
№26 слайд
Содержание слайда: Теги HTML
Переносы строк
Внутри тега между его атрибутами допустимо ставить перенос строк. Однако, при этом следует учитывать «читабельность» и визуальное восприятие кода – лучше, когда код воспринимается в той логической структуре, в которой он создавался.
№27 слайд
Содержание слайда: Теги HTML
Неизвестные теги и атрибуты
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было.
Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.
№28 слайд
Содержание слайда: Теги HTML
Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.
№29 слайд
Содержание слайда: Структура документа
<!DOCTYPE HTML> - обозначение типа документа для браузера // в данном случае определение типа документа для HTML5 самое простое
<html> - начало документа
<head> - служебная часть документа
<title>Заголовок страницы</title>
</head>
<body> - содержательная часть документа
</body>
</html> - конец документа
№30 слайд
Содержание слайда: Структура документа
№31 слайд
Содержание слайда: Структура документа
<!DOCTYPE HTML>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>
№32 слайд
Содержание слайда: Служебная информация
Тег <title> с заголовком страницы
Теги <meta /> - в основном используются для браузеров и поисковых систем
Теги <link /> - подключение CSS
Теги <script> - подключение JS
№33 слайд
Содержание слайда: Работа с документом
Создавать и редактировать файлы можно в любом текстовом редакторе (к примеру, NotePad++)
Шаблон имени файла: *.html – ваш компьютер поймет, что этот файл нужно открывать в браузере
В имени файла только латинские буквы, и цифры, подчеркивания(_) и дефисы (-).
Русские буквы, пробелы и спец.символы (%$#) не рекомендуется использовать.
Все файлы по сверстанному сайту размещайте в отдельной системе вложенных папок.
№34 слайд
Содержание слайда: Создание документа
№35 слайд
Содержание слайда: Редактирование
№36 слайд
Содержание слайда: Редактирование
№37 слайд
Содержание слайда: Комментарии
№38 слайд
Содержание слайда: Теги HTML
Условно теги делятся на следующие типы:
теги верхнего уровня;
теги заголовка документа;
блочные элементы;
строчные элементы;
универсальные элементы;
списки;
таблицы;
фреймы.
№39 слайд
Содержание слайда: Теги HTML
Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и<ul> относятся к категории списков, но также являются и блочными элементами.
№40 слайд
Содержание слайда: Теги HTML
Теги верхнего уровня
Эти теги предназначены для формирования структуры веб-страницы и определяют разделы заголовка и тела документа.
<html>
Тег <html> является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.
№41 слайд
Содержание слайда: Теги HTML
<head>
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.
Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
№42 слайд
Содержание слайда: Теги HTML
<body>
Тег <body> предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, таблицы, списки и др.
№43 слайд
Содержание слайда: Теги HTML
Теги заголовка документа
К этим тегам относятся элементы, которые располагаются в контейнере <head>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>, который определяет название веб-страницы.
<title>
Используется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.
№44 слайд
Содержание слайда: Теги HTML
Теги заголовка документа
<meta>
Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <meta> всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.
№45 слайд
Содержание слайда: Теги HTML
ВАЖНО
Работая с html-кодом, который придает особый вид контенту, разбивая его на логические блоки, думайте о структуре
У веб-страницы должна быть логическая структура, которую и задают теги, используемые для разметки содержимого
№46 слайд
Содержание слайда: Правила хорошего тона
№47 слайд
Содержание слайда: Полезные ссылки
№48 слайд
Содержание слайда: Спасибо за внимание
Скачать все slide презентации Верстка web-страниц. Введение одним архивом:
