'

Структура курса

Понравилась презентация – покажи это...





Слайд 0

Структура курса


Слайд 1

Лекция 1: Введение в дисциплину Web-технологии и web-дизайн Цели и задачи курса История Интернет Протокол HTTP Web-стандарты Краткая история HTML Структура HTML-документа Разметка текста в HTML


Слайд 2

1. Цели и задачи курса Предметом дисциплины «Web-технологии и web-дизайн» являются технологии глобальной сети World Wide Web и основы эргономики интерфейса web-приложений. Задачи изучемые в рамках курса: Структура и принципы Веб (базовые понятия, архитектура, стандарты и протоколы); Технологии сети Веб (языки разметки и программирования веб-страниц, инструменты разработки и управления веб-контента и приложений для Веб, средства интеграции веб-контента и приложений в Веб); Основые эргономики и юзабилити web-интерфейса.


Слайд 3

2. История интернет 1966 начало разработки технологии по коммутации пакетов в сети ARPA; 1969 первые 4 работоспособные узла (50 Кбит/с); 1972 изобретение электронной почты; 1980 разработка стека протоколов TCP/IP; 1981 каждые 20 дней к сети добавляется новый хост; 1991 появление всемирной паутины WWW (CERN: URL, HTTP, HTML, CGI, формы); 1993 выход первого браузера Mosaic; 1995 появление Java-script; 1998 число пользователей 2 млн.


Слайд 4

3. Протокол HTTP Hyper Text Transfer Protocol – протокол прикладного уровня, предназначенный для передачи гипертекста. Програмное обеспечение для работы с протоколом HTTP: Серверы - Internet Information Services (IIS), Apache, lighttpd, nginx. Клиенты - Internet Explorer, Opera, Mozilla Firefox, Netscape Navigator и другие.


Слайд 5

Схема HTTP-сеанса Установление TCP-соединения. Запрос клиента. Ответ сервера. Разрыв TCP-соединения. Структура URL <схема>://<логин>:<пароль>@<хост>:<порт>/<URL-путь> http://vasya:password@microsoft.com:80/windows.html


Слайд 6

Формат HTTP-запроса Строка состояния: метод_запроса URL_ресурса версия протокола HTTP Поля заголовка Имя поля: значение Пустая строка Тело запроса Передаваемые данные


Слайд 7

Пример HTTP-запроса GET http://oak.oakland.edu/ HTTP/1.0 Connection: Keep-Alive User-Agent: Mozilla/4.04 [en] (Win95; I) Host: oak.oakland.edu Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */* Accept-Language: en Accept-Charset: iso-8859-l,*,utf-8


Слайд 8

Формат HTTP-ответа Строка состояния: Версия_протокола Код_ответа Пояснительное_сообщение Поля заголовка Имя поля: значение Пустая строка Тело ответа Передаваемые данные


Слайд 9

Пример HTTP-ответа HTTP/1.1 200 OK Server: Microsoft-IIS/5.1 Date: Mon, 20 OCT 2008 11:25:56 GMT Content-Type: text/html Last-Modified: Sat, 18 Oct 2008 15:05:44 GMTE Content-Length: 426  <html> <body> <form action='http://localhost/Scripts/test.pl'> <p>Operand1: <input type='text' name='A'></p> <p>Operand2: <input type='text' ame='B'></p> <p>Operation:…. </from> </body> </html>


Слайд 10

4. Web-стандарты World Wide Web Consortium, W3C – организация с 1994 года занимающаяся созданием стандартов для веб под руководством Тима Бернерса-Ли. http://www.w3c.org Валидатор: validator.w3c.org


Слайд 11

Преимущества использования Web-стандартов Доступность к сайту пользователей не стандартных устройств; Доступность к сайту поисковых машин; Простота конвертации и программном анализе; Удобность в сопровождение; Уменьшение объема программного кода; Поддержка большего числа браузеров.


Слайд 12

5. Краткая история HTML 1986 - Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, "Standard Generalized Markup Language (SGML); 1991 - Тим Бернерс-Ли разработал HTML – HyperText Markup Language (язык разметки гипертекста); 1993 - HTML версии 1.2 содержит только логическую разметку; 1995 - HTML 2.0; 1997 - HTML 3.0 + CSS; 1999 - HTML 4.01. 2001 - XHTML 1.1 2008 - начало работы на проектом стандарта HTML 5.0


Слайд 13

6. Структура HTML-документа HTML-документ должен описывать логическую структуру текста; В разметке используются теги с атрибутами: <откр.тег атрибут=“значение”>…</закр. тег> Все теги бывают блочные либо строчные; Для спец символов (> & ? ?) используют коды (&#160;) или сокращения (&nbsp;); Возможно использование комментариев: <!-- это комментарий, на одну или две строки -->


Слайд 14

Пример HTML-документа <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Пример HTML-документа</TITLE> <META http-equiv="Content-Type" content="text/html;charset=utf-8" /> </HEAD> <BODY alink="#FF0000" bgcolor="#FFFFFF" link="#0000FF" text= link="#FFFF00" vlink="#00FF00“background=“fon.png" > <P>Это самый простой HTML-документ.</P> </BODY> </HTML>


Слайд 15

7. Разметка текста в HTML Заголовки <H1>Заголовок 1-го уровня</H1> <H2>Заголовок 2-го уровня</H2> <H3>Заголовок 3-го уровня</H3> <H4>Заголовок 4-го уровня</H4> <H5>Заголовок 5-го уровня</H5> <H6>Заголовок 6-го уровня</H6>


Слайд 16

Абзацы (параграфы) <P>1Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.</P> <P>2Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.</P> <P>3Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал. 4Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал. 5Гоголь только под конец жизни о душе задумался, а смолоду у него вовсе совести не было. Однажды невесту в карты проиграл. И не отдал.</P>


Слайд 17

Предварительное форматирование текста Информационные технологии проектирования <PRE> Информационные технологии проектирования</PRE>


Слайд 18

Теги логического форматирования <BLOCKQUOTE>…</BLOCKQUOTE> <CITE>...</CITE> <ABBR>…</ABBR> и <ACRONYM>…</ACRONYM> <ADDRESS>…</ADDRESS> <CODE>…</CODE> и <DFN>…</DFN> и <VAR>…</VAR> <DEL>…</DEL> и <INS>…</INS> <STRONG>…</STRONG> и <EM> …</EM>


Слайд 19

Теги физического форматирования <B>…</B> <I>...</I> <TT>…</TT> <U>…</U> <STRIKE>…</STRIKE> <BIG>…</BIG> и <SMALL>…</SMALL> <SUP>…</SUP> и <SUB>…</SUB> <STRONG>…</STRONG> и <EM> …</EM>


Слайд 20

Дополнительные теги <br/> или <br> <hr> <font color="#00ff00" face="Arial" size="6" title="Заголовок"> Текст </font> <span>…</span> <div>…</div> http://htmlbook.ru


×

HTML:





Ссылка: