Основы Web-технологий - презентация, доклад, проект скачать

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

Содержание ▲

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

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

Слайд 1

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

Информатика. Спецглавы Направление: Инфокоммуникационные технологии и системы связи 2012 год

Слайд 2

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

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

Слайд 3

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

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

Слайд 4

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

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

Слайд 5

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

Web-сервер Web-сервер – компьютер, на котором установлено программное обеспечение, «прослушивающее» порты протокола TCP/IP. Примеры: IIS от Microsoft (Internet Information Services, входит в состав Windows), Apache ( Web-клиент – компьютер, посылающий запрос к Web-серверу и получающий от него ответ. Типичный пример программ такого рода – Web-браузеры

Слайд 6

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

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

Слайд 7

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

Языки разметки 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

Слайд 9

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

Стандарты языка 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 определяет содержание и структуру страницы; элементы языка образуют структуру дерева (вложенные элементы); узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», обозначаемые «тегами» и имеющие «атрибуты»; пробелы либо игнорируются, либо заменяются одним пробелом.

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

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

Структура HTML-документа cтрока со сведениями об используемой версии языка HTML; заголовок со служебной информацией — элемент head; тело документа с информацией для пользователя — элемент body. Пример: My first web page Welcome to my first web page! This is a paragraph of text.

Слайд 14

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

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

Слайд 15

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

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

Слайд 16

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

Блочные элементы и их атрибуты - абзац (параграф) .. - заголовки - длинная цитата - предварительно отформатированный текст - текстовый блок Атрибут: align — выравнивание (left, right, center, justify) Примеры: Заголовок в центре Абзац справа Ай, Моська, знать, она сильна, коль лает на слона! Текст с выравниванием по ширине

Слайд 17

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

Некоторые элементы HTML и их атрибуты - перевод строки Даром преподавателивремя со мною тратили! - горизонтальная полоса-разделитель - вывод рисунка

Слайд 18

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

Шрифты ... Текст документа шрифтом 3 размера ... Слегка увеличиваем шрифт ... Продолжаем шрифтом 3 размера ... Вставка текста увеличенным шрифтом Arial W

Слайд 19

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

Выделение в тексте Текст с курсивом Порой в России встречаются действительно талантливые веб-мастера. Но только не друг с другом. Текст с выделенным словом Я сильный, но легкий. Подчеркнутый текст Лена + Вася Коля = Love Текст с увеличенным словом. Небоскребы, небоскребы, а я маленький такой. X2, X0 x2 x0

Слайд 20

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

Атрибуты элемента BODY background - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате gif или jpg. bgcolor - определяет цвет фона документа. text - определяет цвет текста в документе. link - определяет цвет гиперссылок в документе. alink - определяет цвет подсветки гиперссылок в момент нажатия. vlink - определяет цвет гиперссылок на документы, которые вы уже просмотрели.

Слайд 21

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

Создание гипертекста Гиперссылка — элемент URL-адрес ресурса URL – Uniform Resource Locator http – используемый протокол; en.wikipedia.org – хост – адрес или имя запрашиваемого сервера; 80 – явно не указанный номер порта (но можно указать после имени хоста); /wiki/Http_error_codes – адрес страницы на сервере

Слайд 22

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

Дополнительные поля URL После получения страницы перейти к метке task3 В запросе указан нестандартный порт.

Слайд 23

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

Элемент Атрибуты: href=“путь” – связь с объектом, на который идет ссылка target=“название” – указание того окна, где будет открываться объект: _parent _self _blank Link Пишите!

Слайд 24

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

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

Слайд 25

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

Списки Список (нумерованный или ненумерованный) – блочный элемент, содержащий внутри себя блочные элементы – члены списка маркированный список Первая строка списка Вторая строка списка Третья строка списка Атрибуты списка могут задавать вид маркеров (не поддерживается в «строгом» XHTML), например Первая строка списка

Слайд 26

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

Нумерованные списки нумерованный список Вымыть посуду Сделать уборку Сходить на лекцию Атрибуты списка могут задавать тип и способ нумерации (не поддерживается в «строгом» XHTML) Сделать домашнее задание Купить билеты на концерт

Слайд 27

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

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

Слайд 28

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

Таблицы Элемент Ячейка таблицы. Атpибуты: align, colspan, rowspan, height, nowrap, valign, width . Элемент Строка в таблице. Атpибуты: align, valign. Элемент Заголовок всей таблицы. Атрибуты: align Таблица расходов

Слайд 29

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

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

Слайд 30

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

Атрибуты тегов 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 Gb85$ Quantum 40 Gb110$

Слайд 32

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

Слияние ячеек Video Matrox G400115$ Voodoo III129.95$

Слайд 33

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

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

Слайд 34

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

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

Слайд 35

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

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

Слайд 36

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

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

Слайд 38

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

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

Слайд 39

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

Таблица стилей, внедренная в документ Элемент style в элементе head 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 }

Слайд 40

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

Селекторы таблицы стилей Селектор типа тега 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

Слайд 42

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

Пример 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 "имя файла" [типы носителей]; Типы носителей all - все типы (по умолчанию), braille - устройства, основанные на системе Брайля (для слепых людей), handheld - наладонные компьютеры и аналогичные им аппараты, print - печатающие устройства вроде принтера, screen - экран монитора, tv - Телевизор.

Слайд 44

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

Пример импортирования таблицы стилей @import URL("my.css") screen; @import URL("myprint.css") print; h2 { color: gray; text-align: right } p.blue { color: blue; text-align: right } .yellow { color: yellow }

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

Похожие презентации