Основы Web-технологий

Содержание

Слайд 2

Основы Web-технологий 1. Служба World Wide Web (WWW)

Основы Web-технологий

1. Служба World Wide Web (WWW)

Слайд 3

Услуги сети Интернет Служба прямого общения (IRC Internet Relay Chat) Интернет-телефония

Услуги сети Интернет

Служба прямого общения (IRC Internet Relay Chat)
Интернет-телефония
Служба удаленного доступа

(Telnet)
Электронная почта
Служба телеконференций (Usenet, news)
Служба передачи файлов (FTP)
Служба World Wide Web
Электронные СМИ
Интернет-магазины
Электронные платежи
Навигация
Слайд 4

Служба WWW WWW - это распределенная информационная система с гиперсвязями, существующая

Служба WWW

WWW - это распределенная информационная система с гиперсвязями, существующая на

технической базе всемирной компьютерной сети Internet
Элементы WWW — гипертекстовые документы
Минимальный элемент — Web-страница в виде HTML-документа
Web-сайт
Web-сервер
Браузер
Протоколы http, https
Слайд 5

Web-сервер Web-сервер – компьютер, на котором установлено программное обеспечение, «прослушивающее» порты

Web-сервер

Web-сервер – компьютер, на котором установлено
программное обеспечение, «прослушивающее» порты протокола TCP/IP.
Примеры:
IIS

от Microsoft (Internet Information Services, входит в состав Windows),
Apache (www.apache.org)
Web-клиент – компьютер, посылающий запрос к Web-серверу и получающий от него ответ.
Типичный пример программ такого рода – Web-браузеры
Слайд 6

Браузеры Текстовые браузеры (Lynx) Графические браузеры Первый графический браузер — Mosaic

Браузеры

Текстовые браузеры (Lynx)
Графические браузеры
Первый графический браузер — Mosaic
Современные браузеры: Internet Explorer,

Safari, Opera, Mozilla Firefox, Google Chrome (Chromium)
Слайд 7

Языки разметки SGML — Standard Generalized Markup Language (ISO-стандарт 1986, IBM)

Языки разметки

SGML — Standard Generalized Markup Language (ISO-стандарт 1986, IBM)
HTML —

HyperText Markup Language (1991, CERN)
XML — eXtensible Markup Language (1996, W3C)
HXTML (2000, W3C)
MathML (1999, W3C)
GML — Geography Markup Language (2000, Open Geospatial Consortium)
Слайд 8

Основы Web-технологий 2. Основы язка HTML

Основы Web-технологий

2. Основы язка HTML

Слайд 9

Стандарты языка HTML Создание языка: 1991, CERN, Тим Бернерс-Ли Разработка стандартов

Стандарты языка HTML

Создание языка: 1991, CERN, Тим Бернерс-Ли
Разработка стандартов (рекомендаций): Консорциум

W3C (World Wide Web Consortium)
HTML 2.0 1995
HTML 3.2 1997, январь
HTML 4.0 1997, декабрь
HTML 4.01 1999
HTML 5 в разработке
Слайд 10

Особенности языка HTML определяет содержание и структуру страницы; элементы языка образуют

Особенности языка HTML

определяет содержание и структуру страницы;
элементы языка образуют структуру

дерева (вложенные элементы);
узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», обозначаемые «тегами» и имеющие «атрибуты»;
пробелы либо игнорируются, либо заменяются одним пробелом.



My first page


Hello, World!




Слайд 11

Структура элемента языка HTML Элемент, маркированный тегом, имеет следующую структуру: внутреннее

Структура элемента языка HTML

Элемент, маркированный тегом, имеет следующую структуру:

внутреннее содержание
Next page
Если тег не имеет внутреннего содержания, то он может иметь упрощенную структуру:

My photo

Слайд 12

Особенности отображения HTML-документа браузером теги не отображаются на экране; теги интерпретируются,

Особенности отображения HTML-документа браузером

теги не отображаются на экране;
теги интерпретируются, а результат

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

Структура HTML-документа cтрока со сведениями об используемой версии языка HTML; заголовок

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

cтрока со сведениями об используемой версии языка HTML;
заголовок со служебной

информацией — элемент head;
тело документа с информацией для пользователя — элемент body.
Пример:



My first web page


Welcome to my first web page!


This is a paragraph of text.




Слайд 14

Элементы заголовка HTML-документа Это моя страница Отображается в заголовке страницы в

Элементы заголовка HTML-документа

Это моя страница

Отображается в заголовке страницы в браузере.


content="Эта страница содержит полезные сведения"/>

Описывает содержимое страницы.


Указание на автора.


Указание на программу, которая сгенерировала этот текст.


Описывает формат и кодировку страницы.

content="text/html; charset=windows-1251/">

Определяет основной язык, на котором написана страница.

Слайд 15

Блочные и строчные элементы Блочные элементы содержат фрагменты текста, которые всегда

Блочные и строчные элементы

Блочные элементы содержат фрагменты текста, которые всегда отображаются

в отдельных блоках: каждый блок начинается с новой строки.
Примеры:
,

,

, 
,

Слайд 24

«Якоря» Якорь – специальная метка в документе, невидимый объект, на который

«Якоря»

Якорь – специальная метка в документе, невидимый объект, на который можно

создать ссылку.
Вставка якоря:

Ссылка на якорь:
текст
Слайд 25

Списки Список (нумерованный или ненумерованный) – блочный элемент, содержащий внутри себя

Списки

Список (нумерованный или ненумерованный) – блочный элемент, содержащий внутри себя блочные

элементы – члены списка
маркированный список

  • Первая строка списка

  • Вторая строка списка

  • Третья строка списка


Атрибуты списка могут задавать вид маркеров (не поддерживается в «строгом» XHTML), например

  • Первая строка списка


Первая строка списка
Вторая строка списка
Третья строка списка

Первая строка списка

Слайд 26

Нумерованные списки нумерованный список Вымыть посуду Сделать уборку Сходить на лекцию

Нумерованные списки

нумерованный список


  1. Вымыть посуду

  2. Сделать уборку

  3. Сходить на лекцию


Атрибуты списка

могут задавать тип и способ нумерации (не поддерживается в «строгом» XHTML)

  1. Сделать домашнее задание

  2. Купить билеты на концерт


    3. Вымыть посуду
    Сделать уборку
    Сходить на лекцию

    Сделать домашнее задание
    Купить билеты на концерт

Слайд 27

Таблицы Элемент Используется для создания таблиц в HTML-документах. Таблица состоит из

Таблицы

Элемент


Используется для создания таблиц в HTML-документах. Таблица состоит из строк.
Каждая из строк состоит из одной либо нескольких ячеек (заголовки или ячейки с данными). Таблица может содержать параграфы, списки, заголовки, формы, рисунки и отформатированный текст.
Атpибуты: align, border, cellpadding, cellspacing, width.
Элемент

Строка в таблице.
Атpибуты: align, valign.
Элемент
Слайд 29

Пример простейшей таблицы A1 B1 C1 A2 B2 C2

Пример простейшей таблицы


Используется для определения ячеек заголовка таблицы.
Атpибуты: align, colspan, rowspan, height, nowrap, valign, width.
Слайд 28

Таблицы Элемент Ячейка таблицы. Атpибуты: align, colspan, rowspan, height, nowrap, valign,

Таблицы

Элемент


Ячейка таблицы.
Атpибуты: align, colspan, rowspan, height, nowrap, valign, width
.
Элемент

Заголовок всей таблицы.
Атрибуты: align
 Таблица расходов
       
A1 B1 C1
A2B2 C2

Слайд 30

Атрибуты тегов tr, th, td align - горизонтальное выравнивание содержимого ячейки.

Атрибуты тегов tr, th, td

align - горизонтальное выравнивание содержимого ячейки. Возможные

значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра align элемента tr. Если он не задан, то для td выполняется выравнивание по левому краю, а для th — по центру.
valign - вертикальное выравнивание содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (valign="middle"), если значение этого параметра не было задано ранее в элементе tr.
width - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
height - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
colspan - определяет количество столбцов, которые объединяет данная ячейка.
rowspan - определяет количество рядов, которые объединяет данная ячейка.
nowrap - блокирует автоматический перенос слов в пределах текущей ячейки.
bgcolor - определяет цвет фона ячейки.
background - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка.
Слайд 31

Слияние ячеек HDD WD Caviar 30 Gb 85$ Quantum 40 Gb 110$

Слияние ячеек

       
      
HDDWD Caviar 30 Gb85$
Quantum 40 Gb110$

Слайд 32

Слияние ячеек Video Matrox G400 115$ Voodoo III 129.95$

Слияние ячеек

         
      
Video
Matrox G400115$
Voodoo III129.95$

Слайд 33

Основы Web-технологий 3. Каскадные таблицы стилей

Основы Web-технологий

3. Каскадные таблицы стилей

Слайд 34

Базовые понятия стиль элементы HTML и их атрибуты таблицы стилей: style

Базовые понятия

стиль
элементы HTML и их атрибуты
таблицы стилей: style sheets
таблица стилей: правила

таблицы стилей
правило таблицы стилей:
селектор {пары атрибут-значение}
p {color:blue; text-indent:30pt}
body {font-family:sans-serif;font-size:15pt}
таблица стилей по умолчанию
область действия таблицы стилей: отдельный элемент, документ, группа документов
CSS (Cascading Style Sheets)
Слайд 35

Свойства, описываемые CSS Свойства шрифта Свойства текста Свойства фона Свойства обрамления Свойства позиционирования Слои

Свойства, описываемые CSS

Свойства шрифта
Свойства текста
Свойства фона
Свойства обрамления
Свойства позиционирования
Слои

Слайд 36

Примеры атрибутов и их значений font-family: "lucida console" "courier new" sans-serif;

Примеры атрибутов и их значений

font-family: "lucida console" "courier new" sans-serif; font-size: small; font-size:

larger; font-size: 10px; font-size: 80%; font-weight: bold; font-weight: 400; font-style: italic; font: sans-serif bold x-large;
text-align: center; text-align: right; text-transform: uppercase; text-indent: 2cm; text-decoration: underline; text-decoration: blink;
Слайд 37

Единицы измерения Относительные em — размер шрифта, соответствует атрибуту font-size, ex

Единицы измерения

Относительные
em — размер шрифта, соответствует атрибуту font-size,
ex - размер

буквы ''x'' данного шрифта
px - размер, использующий пиксели, относительно устройства вывода
% - размер, использующий процентные значения, относительно основного размера
Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов.
Абсолютные
in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам.
cm - размер, в сантиметрах
mm - размер, в миллиметрах
pt - размер, в точках, 1 точка равна 1/72 дюйма.
pc - размер, в пиках, 1 пика равна 12 точкам.
Слайд 38

Таблица стилей, встроенная в элемент Атрибут style Курс лекций. Курс лекций.

Таблица стилей, встроенная в элемент

Атрибут style

Курс лекций.


style="color: lime; text-align: justify; text-indent:1 sm; margin-left: 10 px">Курс лекций.


Слайд 39

Таблица стилей, внедренная в документ Элемент style в элементе head h2

Таблица стилей, внедренная в документ

Элемент style в элементе head


Слайд 40

Селекторы таблицы стилей Селектор типа тега p { color: red; text-align:

Селекторы таблицы стилей

Селектор типа тега
p { color: red; text-align: right }
Селектор

типа класса
p.blue { color: blue; text-align: right }
.lime { color: lime; text-align: right }
Применение правил таблицы стилей

Text1

- Абзац с красными буквами

Text2

Абзац с синими буквами

Text2

Абзац с зелеными буквами

Text4

Заголовок с зелеными буквами
Слайд 41

Присоединение таблицы стилей Элемент link в элементе head

Присоединение таблицы стилей

Элемент link в элементе head



Слайд 42

Пример css-файла (my.css) h2 { color: blue; text-align: center } p

Пример css-файла (my.css)

h2 { color: blue; text-align: center }
p

{ color: red; text-align: right }
p.blue { color: blue; text-align: right }
.lime { color: lime; text-align: right }
Слайд 43

Импортирование таблицы стилей Команда @import в элементе Формат команды @import url("имя

Импортирование таблицы стилей

Команда @import в элементе