Web- конструирование 2012

Основные вопросы Основы функционирования Web HTML-конструирование ИПКиП 2012

Объединение сетей в Интернет ИПКиП 2012

Основные сервисы Интернет электронная почта ( ) телеконференции, или группы новостей (Usenet) сервис FTP сервис Telnet World Wide Web (WWW, W3) – сервис DNS ИПКиП 2012

Основные понятия World Wide Web Гипертекст – размеченный текст, содержащий в себе ссылки на внешние ресурсы. Web-страница представляет собой документ, получаемый пользователем в результате прочтения HTML-файла специальной программой - Web- обозревателем. Web-страницы, объединенные в общую структуру, образуют Web-узел (Web-сайт). Кроме собственно Web-страниц, Web-узел содержит папки и файлы, обеспечивающие его функционирование в сети Internet. ИПКиП 2012

Основные понятия World Wide Web Web-cepвep - это подключенный к Internet компьютер, поддерживающий протокол HTTP (HyperText Transfer Protocol). Он используется для доставки данных в Internet и позволяет пользователям клиентских программ загружать и воспроизводить текст, рисунки, звук, видео и другие данные. Протокол FTP (File Transfer Protocol) также является распространенным способом загрузки файлов на удаленный сервер. ИПКиП 2012

Технология «Клиент - сервер» Клиент - объект (компьютер или программа), запрашивающий некоторые услуги. Сервер - объект (компьютер или программа), предоставляющий некоторые услуги. ИПКиП 2012

Механизм работы : 1. Браузер открывает соединение с сервером 2. Браузер отправляет серверу запрос на получение страницы 3. Сервер формирует ответ (HTML-код или, например, картинку) браузеру и закрывает соединение 4. Браузер обрабатывает HTML-код и отображает страницу ИПКиП 2012

URL (Uniform Resource Locator) – адрес ресурса :// : / ? # Сетевой протокол ://имя пользователя : хост : порт / URL - путь ? запрос протокол :// хост / путь ИПКиП 2012

Схемы (протоколы) URL ftp Протокол передачи файлов FTP http Протокол передачи гипертекста HTTP mailto Адрес электронной почты news Новости Usenet irc Протокол IRC telnet Ссылка на интерактивную сессию Telnet wais База данных системы WAIS file Имя локального файла data Непосредственные данные (Data: URL) ИПКиП 2012

file://vms.myhost.edu/disk$user/my/notes/note123. txt maps.google.com Услуга размещения веб-сайта на веб-сервере называется хостингом. ИПКиП 2012

Классификация сайтов по используемым технологиям Статические сайты и веб-страницы Динамические сайты и веб-страницы Флэш-сайты ИПКиП 2012

Классификация сайтов по принадлежности Личные (персональные) сайты Сайты коммерческих организаций Сайты некоммерческих организаций ИПКиП 2012

Классификация сайтов по величине, уровню решаемых задач Простые сайты, содержащие немного информации и состоящие из нескольких страничек Тематические, узконаправленные сайты Многофункциональные сайты (порталы) ИПКиП 2012

Структура сайта ИПКиП 2012

Аксиомы веб-дизайна Нельзя Можно, только так папка Сайт (или сайт)папка site папка Греция (или греция)папка greece культура японии.htmjapan-culture.htm Колизей в Риме.jpgkolizey-roma.jpg vitraz.sobor.jpgvitraz-sobor.jpg 4f105.gifarka.gif Новая страница 1Искусство Японии Вставить картинку на веб-страницу и там изменять ее ширину и/или высоту. Картинку для сайта готовить заранее в Photoshop, затем сжать ее информационный объем в Photoshop (меню File, Save for Web), и только после этого вставлять на веб-страницу. ИПКиП 2012

Язык разметки HTML Зарождение HTML следует отнести к далекому 1986 году ИПКиП 2012

История развития html Вскоре (1995 год) появился первый коммерческий браузер Netscape Navigator, который привел к самому быстрому в истории челове- чества развитию корпорации Netscape Communications. Дабы привлечь еще и еще клиентов, которых было и так хоть отбавляй, корпорации начала вводить в HTML все новые и новые усовершенст- вования, которые не были отражены в стандартах W3C и поддерживались только Netscape Navigator. Вводимые все снова и снова тэги были ориентированы на улучшение внешнего вида документов и полностью нарушали изна- чальные принципы языка. ИПКиП 2012

История развития html В 1996 году Microsoft перестал быть пассивным наблюдателем на рынке браузеров, в результате чего появился сначала Microsoft Internet Explorer 2.0, который, нужно сказать, не имел большой популярности. Позднее была создана 3-я версия этого браузера, что поделило рынок браузеров пополам между Navigator Communications и Microsoft. Microsoft взял под свою опеку W3C. В сжатые сроки был создан стандарт HTML версии 3.2, который был полностью ориентирован на Microsoft Internet Explorer. ИПКиП 2012

Просмотр кода страницы Internet Explorer: – Вызвать контекстное меню в окне документа и выбрать Просмотр HTML-кода – Выбрать команду меню Вид/Просмотр HTML- кода FireFox: – Выбрать команду меню Вид/Исходный текст страницы – Нажать Opera – Выбрать команду меню Вид/Исходный текст – Нажать ИПКиП 2012

HTML-страница HTML-страница представляет собой простой текстовый файл, в котором наряду с текстом присутствуют специальные управляющие команды Эти команды называются «тегами» и заключаются в скобки из символов Например, ИПКиП 2012

HTML-файл Текст HTML-страницы располагается в файле с расширением.html Например, index.html Имя файла должно быть написано строчными (маленькими) латинскими символами без пробелов и может содержать цифры и символ «_» Например, ivan_ivanov_7. html ИПКиП 2012

Структура HTML-страницы Начало документа. Служебная информация. ( Название страницы, ее автор, ключевые слова, и т.д. ) Тело документа. ( Все, что видно на страничке - текс, рисунки, и т.д. ) Конец документа. ИПКиП 2012

Структура HTML-страницы ЗАГОЛОВОК ДОКУМЕНТА ПЕРВЫЙ ТЕКСТ НА СТРАНИЧКЕ ИПКиП 2012

Мета теги Мета тег может информировать браузер о кодировке Web-страницы: Мета тэги используются поисковыми системами для индексирования содержания, ключевых слов и автора Web-страницы: ИПКиП 2012

Параметры Задание цвета фона страницы или Картинка в роли фона ИПКиП 2012

Цвета ИПКиП 2012

Первая страничка ЗАГОЛОВОК ДОКУМЕНТА ПЕРВЫЙ ТЕКСТ НА СТРАНИЧКЕ ИПКиП 2012

Работа с текстом Размеры Заголовок, n - число от 1 до 6 Пример Пример Пример Пример Пример Пример Пример ИПКиП 2012

Работа с текстом Гарнитура Пример Пример Пример Пример Пример Красный Тег текст - цитата ИПКиП 2012

Работа с текстом Начертание текста Жирный текст Курсив Подчеркнутый Перечеркнутый Верхний индекс Нижний индекс Моноширинный шрифт ИПКиП 2012

Работа с текстом Абзац Новый абзац Параметры тега CENTER - LEFT - RIGHT - JUSTIFY По левому краю По центру По правому краю Выравнивание по ширине ИПКиП 2012

Блок текста Текст. Текст. Текст. Текст. Текст. Текст. Текст. Свойство align задает тип выравниваения текста. Возможны четыре значения: Тег - разрыв строки leftпо левому краю rightпо правому краю centerпо центру justifyпо ширине ИПКиП 2012

Горизонтальные линии Тег Атрибуты Size = толщина в пикс. Width = в % или пикс. Color = цвет Выравнивание Align - слева - по центру - справа - без объема ИПКиП 2012

Бегущая строка тег текст параметры Width – ширина поля бегущей строки % или пикс. Height – высота поля в пикс. Direction – (left,right) – направление движения Bgcolor – цвет поля бегущей строки эта страничка содержит полезную информацию ! ИПКиП 2012

Нумерованные списки 1 строка списка 2 строка списка Параметры тега :, где * I - большие римские цифры i - маленькие римские цифры A - большие латинские буквы a - маленькие латинские буквы 1 - обычные цифры ИПКиП 2012

Нумерованные списки 1 строка списка 2 строка списка Параметры тега :, где * I - большие римские цифры i - маленькие римские цифры A - большие латинские буквы a - маленькие латинские буквы 1 - обычные цифры ИПКиП 2012

Нумерованные списки яблоко груша помидор огурец 1. яблоко 2. груша 3. помидор 4. огурец ИПКиП 2012

Нумерованные списки III. 3 IV. 4 V. 5 VI.6 VII.7 ИПКиП 2012

Маркированные списки 1 строка списка 2 строка списка Параметры тега :, где * disk circle square ИПКиП 2012

Маркированные списки Диск – по умолчанию! Груша Яблоко Помидор Груша Яблоко Помидор ИПКиП 2012

Списки определений Термин Его определение Следующее его определение Термин Определение термина Следующее его определение ИПКиП 2012

Листинг программы: PRIMER Контрольная работа 1 Вариант 1 ИПКиП 2012

Задание ИПКиП 2012

Листинг программы: PRIMER Контрольная работа 1 Вариант 1 Информация сведения о предметах, событиях, явлениях, процессах окружающего мира. Виды информации визуальная звуковая о запахах вкусовая тактильная

Вставка рисунка тег c параметрами SRC ="имя файла - рисунка« Графические форматы: GIF, JPG, PNG. BORDER= число пикс." (По умолчанию – 0) ИПКиП 2012

Вставка рисунка WIDTH="Ширина изображения в пикселях" HEIGHT="Высота изображения в пикселях" ALT=текст надписи, вместо рисунка, если его не находят Title=текст подсказки – всплывает при наведении на изображение ИПКиП 2012

Вставка рисунка ALIGN=" * " определяет положение рисунка по отношению к соседним элементам, где *: LEFT - по левому краю. RIGHT - по правому краю. TOP - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. MIDDLE - выравнивает базовую линию текущей текстовой строки с центром изображения. VSPACE =ширина в пикс. – ширирна пустого поля сверху и снизу изображения HSPACE =ширина в пикс. – ширирна пустого поля справа и слева изображения ИПКиП 2012

Вставка звука Форматы звука - wav. midi, mp3 Если нужно повторять звук бесконечное количество раз то LOOP="-1" Данный тег необходимо поместить в служебной информации - между тегами. ИПКиП 2012

Звук и видео на HTML странице Форматы: MPG, AVI, QuickTime. Тег атрибут Src=URL – адрес файла Width,height – размеры панели управления проигрывателем. autostart: true- сразу после загрузки, false - вкл пользователем. ИПКиП 2012

Звук и видео на HTML странице Где START="Условие запуска видео" - может принимать следующие значения: START="FILEOPEN" - автоматический старт START="MOUSEOVER" - при щелчке мыши ИПКиП 2012

Гиперссылки Тег … - для ссылки на другую HTML-страницу Свойство href указывает URL ресурса, на который будет осуществлен переход, при нажатии на гиперссылку. Анекдоты Устройство компьютера - для ссылки на документ из папки, где исходная страница ИПКиП 2012

Гиперссылки Ссылка - рисунок: Ссылка на звуковой или видеофайл – Послушай песенку Задание цвета ссылок в теге : Link – не активированные ссылки Vlink - посещенные Alink – активная ссылка ИПКиП 2012

Гиперссылки Внутренние ссылки используются для быстрого перемещения внутри документа. Для таких перемещений, во-первых, нужно создать внутри html-документа «именованные якоря». Они помечаются следующим фрагментом кода:. Чтобы совершить переход в произвольном месте страницы, нужно добавить следующую ссылку: ссылка. Знак решетка, сообщит браузеру, что переход совершается внутри страницы. ИПКиП 2012

Формы ИПКиП 2012

Создание форм Тег контейнер параметр Action=* – адрес для отправки формы. Для создания элементов управления служит тег параметр type=*, где * - это Text – создание текстового поля Checkbox – создание переключателей - флажков Radio – создание кнопок выбора Submit – создание формы для отправки данных их формы Reset – создание кнопки для очистки полей Наберите здесь сообщение ИПКиП 2012

Таблицы Тег …. Атрибуты: WIDTH= число – ширина таблицы BORDER= число – ширина рамки вокруг Alighn – выравнивание таблицы относительно боковых границ окна Bgcolor – цвет фона под таблицей Название таблицы Top –над таблицей Bottom – под таблицей ИПКиП 2012

Элементы таблицы Заголовок ячейки-столбца Строка таблицы Align (left,right,center) – способ горизонтального выравнивания всех ячеек строки Valign (top,bottom,middle) – способ вертикального выравнивания всех ячеек строки Bgcolor – цвет фона ячеек строки Столбец таблицы -аналогия Widht – ширина ячейки Colspan – объединение ячеек нескольких столбцов Rowspan – объединение ячеек нескольких строк ИПКиП 2012

Элементы таблицы Можно задать расстояние между ячейками и отступ от границ ячейки внутри нее: тегами ИПКиП 2012

Таблицы ИПКиП 2012

Таблицы ИПКиП 2012

ИПКиП 2012

Таблицы ИПКиП 2012

Таблицы ИПКиП 2012

Таблицы Прижата справа на странице! ИПКиП 2012

Таблицы ИПКиП 2012

Таблицы ИПКиП 2012

Таблицы ИПКиП 2012

Фреймы (рамка, кадр) Тег Cols - количество фреймов-столбцов Rows - количество фреймов – строк Border - ширинa рамки между ними Bordercolor - цвет рамки Для описания каждого фрейма используют тег с атрибутом SRC=имя файла Scrolling : yes –всегда, no – никогда,auto – по необходимости). ИПКиП 2012

Плавающий фрейм Тег с атрибутом src=URL-адрес HTML-документа widht, height - ширина и высота плавающего фрейма, aline – выравнивание относительно окна браузера, marginwith-размеры свободных полей слева и справа от фрейма, marginheight - размеры свободных полей сверху и снизу от фрейма frameborder – вывод рамки фрейма name – имя фрейма scrolling – вывод полос прокрутки. ИПКиП 2012

Гиперссылки с учетом фреймов при создании фреймов задать им имена с помощью name= «имя фрейма» при вставке гиперссылки указать, в каком фрейме необходимо открыть страничку с помощью атрибута target= «имя фрейма» ….. ИПКиП 2012

эта страничка содержит полезную информацию ! Слуховая Визуальная 80% о запахах тактильная вкусовая