Основы 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 (www.apache.org) 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 Элемент, маркированный тегом, имеет следующую структуру: <element attr1="value1" attr2="value2"...> внутреннее содержание </element> <a href="page2.html">Next page</a> Если тег не имеет внутреннего содержания, то он может иметь упрощенную структуру: <element attr1="value1" attr2="value2"... /> <img src="photo.jpg" alt="My photo"/> <hr/>

Слайд 12

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

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

Слайд 13

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

Структура HTML-документа cтрока со сведениями об используемой версии языка HTML; заголовок со служебной информацией — элемент head; тело документа с информацией для пользователя — элемент body. Пример: <!doctype html public ''-//W3C//DTD HTML Transitional 4.01//EN''> <html> <head> <title>My first web page</title> </head> <body> <h1>Welcome to my first web page!</h1> <p>This is a paragraph of text.</p> </body> </html>

Слайд 14

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

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

Слайд 15

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

Блочные и строчные элементы Блочные элементы содержат фрагменты текста, которые всегда отображаются в отдельных блоках: каждый блок начинается с новой строки. Примеры: <div>, <p>, <h1>, <pre>, <ul>, <tr> Строчные элементы могут располагаться друг за другом в пределах одной строки. Примеры: <img>, <a>, <b>, <i>, <span>, <em>, <dfn>, <code> Комментарии вставляются в HTML текст так же, как и обычные элементы: <!– И лучше выдумать не мог -->

Слайд 16

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

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

Слайд 17

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

Некоторые элементы HTML и их атрибуты <br/> - перевод строки <p>Даром преподаватели<br/>время со мною тратили!</p> <hr/> - горизонтальная полоса-разделитель <hr color=''red'' width=150 size=3/> <img src=''picture.jpg''/> - вывод рисунка <img src=''picture.jpg'' align=''center'' width=''30''/> <img src="server.jpg" alt="Сервер" width="250" height="150"/>

Слайд 18

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

Шрифты <basefont size="3"> ... Текст документа шрифтом 3 размера ... <font size="+1"> Слегка увеличиваем шрифт </font> ... Продолжаем шрифтом 3 размера ... <font face="Arial, Helvetica, Sans Serif" size="5"> Вставка текста увеличенным шрифтом Arial </font> <font face=”Symbol”>W</font>

Слайд 19

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

Выделение в тексте Текст с <i>курсивом</i> Порой в России встречаются <em>действительно талантливые</em> веб-мастера. Но только не друг с другом. Текст с <b>выделенным</b> словом Я <strong>сильный</strong>, но легкий. <u> Подчеркнутый текст </u> Лена + <strike>Вася</strike> Коля = Love Текст с <big>увеличенным</big> словом. Небоскребы, небоскребы, а я <small>маленький</small> такой. X<sup>2</sup>, X<sub>0</sub> x2 x0

Слайд 20

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

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

Слайд 21

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

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

Слайд 22

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

Дополнительные поля URL http://akoub.narod.ru/2007-2008/autumn/func5538.htm#task3 После получения страницы перейти к метке task3 http://127.0.0.1:8080/secret/money.txt В запросе указан нестандартный порт.

Слайд 23

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

Элемент <a> Атрибуты: href=“путь” – связь с объектом, на который идет ссылка target=“название” – указание того окна, где будет открываться объект: _parent _self _blank <a href=“index.htm” target=“_blank”>Link</a> <a href=“mailto:abc.mail.ru”>Пишите!</a> <a href="servers/server.html"> <img src="server.jpg" alt="Сервер"/> </a>

Слайд 24

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

«Якоря» Якорь – специальная метка в документе, невидимый объект, на который можно создать ссылку. Вставка якоря: <a name=“название”></a> Ссылка на якорь: <a href=“#название”>текст</a>

Слайд 25

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

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

Слайд 26

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

Нумерованные списки нумерованный список <ol> <li>Вымыть посуду</li> <li>Сделать уборку</li> <li>Сходить на лекцию</li> </ol> Атрибуты списка могут задавать тип и способ нумерации (не поддерживается в «строгом» XHTML) <ol start="3" type="a"> <li>Сделать домашнее задание</li> <li>Купить билеты на концерт</li> </ul>

Слайд 27

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

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

Слайд 28

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

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

Слайд 29

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

Пример простейшей таблицы <table border> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> </tr> </table>

Слайд 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

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

Слияние ячеек <table border> <tr> <th rowspan=2>HDD</th> <td>WD Caviar 30 Gb</td><td align="right">85$</td> </tr> <tr> <td>Quantum 40 Gb</td><td align="right">110$</td> </tr> </table>

Слайд 32

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

Слияние ячеек <table border> <tr> <th colspan=2>Video</th> </tr> <tr> <td>Matrox G400</td><td align="right">115$</td> </tr> <tr> <td>Voodoo III</td><td align="right">129.95$</td> </tr> </table>

Слайд 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 <h2 style="color: blue; text-align: center">Курс лекций.</h2> <p style="color: lime; text-align: justify; text-indent:1 sm; margin-left: 10 px">Курс лекций.</p>

Слайд 39

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

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

Слайд 40

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

Селекторы таблицы стилей Селектор типа тега p { color: red; text-align: right } Селектор типа класса p.blue { color: blue; text-align: right } .lime { color: lime; text-align: right } Применение правил таблицы стилей <p>Text1</p> - Абзац с красными буквами <p class=blue>Text2</p> Абзац с синими буквами <p class=lime>Text2</p> Абзац с зелеными буквами <h3 class=lime>Text4</h3> Заголовок с зелеными буквами

Слайд 41

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

Присоединение таблицы стилей Элемент link в элементе head <head> <link rel="stylesheet" type="text/css" href="my.css"> </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 в элементе <style> Формат команды @import url("имя файла") [типы носителей]; @import "имя файла" [типы носителей]; Типы носителей all - все типы (по умолчанию), braille - устройства, основанные на системе Брайля (для слепых людей), handheld - наладонные компьютеры и аналогичные им аппараты, print - печатающие устройства вроде принтера, screen - экран монитора, tv - Телевизор.

Слайд 44

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

Пример импортирования таблицы стилей <head> <style type="text/css"> @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 } </style> </head>

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

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