URL, HTTP. CSS Основы веб-программирования Лекция 3. - презентация

1 URL, HTTP. CSS Основы веб-программирования Лекция 3

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

3 Схемы (протоколы) URL Общепринятые схемы (протоколы) URL включают: ftp Протокол передачи файлов FTPFTP http Протокол передачи гипертекста HTTPгипертекстаHTTP https Специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)HTTPSSLTLS mailto Адрес электронной почтыэлектронной почты irc Протокол IRCIRC telnet Ссылка на интерактивную сессию TelnetTelnet wais База данных системы WAISWAIS file Имя локального файлафайла Экзотические схемы URL: cid Идентификатор содержимого для частей MIMEMIME mid Идентификатор сообщений для электронной почты mailserver Доступ к данным с почтовых серверовпочтовых серверов nfs Имя файла в сетевой файловой системе NFSNFS skype Протокол SkypeSkype smsto Открытие редактора SMS в некоторых мобильных телефонахSMSмобильных телефонах ed2k Файлообменная сеть eDonkey, построенная по принципу P2PФайлообменная сетьeDonkeyP2P market Android МаркетAndroid

4 Кодирование URL 1%80%D0%BE%D0%BA%D1%80%D0%B5%D0%B4%D0 %B8%D1%82

5 HTTP HTTP (сокр. от англ. HyperText Transfer Protocol) - «протокол передачи гипертекста» англ. гипертекста

6 Работа WWW-сервера веб-сервер mir.tversu.ru university.tversu.ru С:\ Program Files www Games mir-sitetveruniversity -> C:\www\tver\ university.tversu.ru -> C:\www\university mir.tversu.ru -> C:\www\mir-site\ серверклиент веб-браузер GET / HTTP/1.1 Host: mir.tversu.ru настройки сервера HTTP/ OK Length: …

7 CSS CSS (англ. Cascading Style Sheets каскадные таблицы стилей) формальный язык описания внешнего вида документа, написанного с использованием языка разметки.англ. формальный языкязыка разметки

8 Включение в HTML Внешний файл: Непосредственно в HTML-документе: body { color: red; } Непосредственно в элемент: Рассказ о том, как вредно красить батареи

9 CSS Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так: селектор, селектор { свойство: значение; } p { font-family: "Garamond", serif; } h2 { font-size: 110 %; color: red; background: white; }.note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; } #news p { color: blue; } p { font-family: "Garamond", serif; } h2 { font-size: 110 %; color: red; background: white; }.note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; } #news p { color: blue; }

10 Типы верстки На сегодняшний день существует два основных типа верстки веб-документов: - табличная верстка (посредством HTML-таблиц) - блочная верстка (посредством CSS)

11 CSS-верстка Преимущества: Несколько дизайнов страницы для разных устройств просмотра. Уменьшение времени загрузки страниц сайта Простота последующего изменения дизайна. Дополнительные возможности оформления. Оптимально с точки зрения поисковых систем. Недостатки: Различное отображение вёрстки в различных браузерах (особенно устаревших) Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS

12 Уровень 1 (CSS1) Рекомендация W3C принята 17 декабря 1996, откорректирована 11 января Среди возможностей, предоставляемых этой рекомендацией были: Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля - обычного, курсивного или полужирного. Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы. Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (т.е. межстрочные отступы) Выравнивание для текста, изображений, таблиц и других элементов. Свойства блоков, такие как высоту, ширину, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear. И другое…

13 Уровень 2 (CSS2) Рекомендация W3C принята 12 мая Построена на CSS1 с сохранением обратной совместимости. Добавление функциональности: Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК) Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта) Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати Расширенный механизм селекторов Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента И другое…

14 Уровень 2.1 (CSS2.1) Рабочая версия W3C от 6 ноября Построена на CSS2, содержит исправления ошибок

15 Уровень 3 (CSS3) Сильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных.

16 Самостоятельная работа Найти и изучить более подробную информацию по: 1) ASCII 2) Unicode 3) URI 4) URN 5) HTTP 6) CSS