Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 9 лет назад пользователемАлександра Ноговицына
1 Web- конструирование 2012
2 Основные вопросы Основы функционирования Web HTML-конструирование ИПКиП 2012
3 Объединение сетей в Интернет ИПКиП 2012
4 Основные сервисы Интернет электронная почта ( ) телеконференции, или группы новостей (Usenet) сервис FTP сервис Telnet World Wide Web (WWW, W3) – сервис DNS ИПКиП 2012
5 Основные понятия World Wide Web Гипертекст – размеченный текст, содержащий в себе ссылки на внешние ресурсы. Web-страница представляет собой документ, получаемый пользователем в результате прочтения HTML-файла специальной программой - Web- обозревателем. Web-страницы, объединенные в общую структуру, образуют Web-узел (Web-сайт). Кроме собственно Web-страниц, Web-узел содержит папки и файлы, обеспечивающие его функционирование в сети Internet. ИПКиП 2012
6 Основные понятия World Wide Web Web-cepвep - это подключенный к Internet компьютер, поддерживающий протокол HTTP (HyperText Transfer Protocol). Он используется для доставки данных в Internet и позволяет пользователям клиентских программ загружать и воспроизводить текст, рисунки, звук, видео и другие данные. Протокол FTP (File Transfer Protocol) также является распространенным способом загрузки файлов на удаленный сервер. ИПКиП 2012
7 Технология «Клиент - сервер» Клиент - объект (компьютер или программа), запрашивающий некоторые услуги. Сервер - объект (компьютер или программа), предоставляющий некоторые услуги. ИПКиП 2012
8 Механизм работы : 1. Браузер открывает соединение с сервером 2. Браузер отправляет серверу запрос на получение страницы 3. Сервер формирует ответ (HTML-код или, например, картинку) браузеру и закрывает соединение 4. Браузер обрабатывает HTML-код и отображает страницу ИПКиП 2012
9 URL (Uniform Resource Locator) – адрес ресурса :// : / ? # Сетевой протокол ://имя пользователя : хост : порт / URL - путь ? запрос протокол :// хост / путь ИПКиП 2012
10 Схемы (протоколы) URL ftp Протокол передачи файлов FTP http Протокол передачи гипертекста HTTP mailto Адрес электронной почты news Новости Usenet irc Протокол IRC telnet Ссылка на интерактивную сессию Telnet wais База данных системы WAIS file Имя локального файла data Непосредственные данные (Data: URL) ИПКиП 2012
11 file://vms.myhost.edu/disk$user/my/notes/note123. txt maps.google.com Услуга размещения веб-сайта на веб-сервере называется хостингом. ИПКиП 2012
12 Классификация сайтов по используемым технологиям Статические сайты и веб-страницы Динамические сайты и веб-страницы Флэш-сайты ИПКиП 2012
13 Классификация сайтов по принадлежности Личные (персональные) сайты Сайты коммерческих организаций Сайты некоммерческих организаций ИПКиП 2012
14 Классификация сайтов по величине, уровню решаемых задач Простые сайты, содержащие немного информации и состоящие из нескольких страничек Тематические, узконаправленные сайты Многофункциональные сайты (порталы) ИПКиП 2012
15 Структура сайта ИПКиП 2012
16 Аксиомы веб-дизайна Нельзя Можно, только так папка Сайт (или сайт)папка site папка Греция (или греция)папка greece культура японии.htmjapan-culture.htm Колизей в Риме.jpgkolizey-roma.jpg vitraz.sobor.jpgvitraz-sobor.jpg 4f105.gifarka.gif Новая страница 1Искусство Японии Вставить картинку на веб-страницу и там изменять ее ширину и/или высоту. Картинку для сайта готовить заранее в Photoshop, затем сжать ее информационный объем в Photoshop (меню File, Save for Web), и только после этого вставлять на веб-страницу. ИПКиП 2012
17 Язык разметки HTML Зарождение HTML следует отнести к далекому 1986 году ИПКиП 2012
18 История развития html Вскоре (1995 год) появился первый коммерческий браузер Netscape Navigator, который привел к самому быстрому в истории челове- чества развитию корпорации Netscape Communications. Дабы привлечь еще и еще клиентов, которых было и так хоть отбавляй, корпорации начала вводить в HTML все новые и новые усовершенст- вования, которые не были отражены в стандартах W3C и поддерживались только Netscape Navigator. Вводимые все снова и снова тэги были ориентированы на улучшение внешнего вида документов и полностью нарушали изна- чальные принципы языка. ИПКиП 2012
19 История развития html В 1996 году Microsoft перестал быть пассивным наблюдателем на рынке браузеров, в результате чего появился сначала Microsoft Internet Explorer 2.0, который, нужно сказать, не имел большой популярности. Позднее была создана 3-я версия этого браузера, что поделило рынок браузеров пополам между Navigator Communications и Microsoft. Microsoft взял под свою опеку W3C. В сжатые сроки был создан стандарт HTML версии 3.2, который был полностью ориентирован на Microsoft Internet Explorer. ИПКиП 2012
20 Просмотр кода страницы Internet Explorer: – Вызвать контекстное меню в окне документа и выбрать Просмотр HTML-кода – Выбрать команду меню Вид/Просмотр HTML- кода FireFox: – Выбрать команду меню Вид/Исходный текст страницы – Нажать Opera – Выбрать команду меню Вид/Исходный текст – Нажать ИПКиП 2012
21 HTML-страница HTML-страница представляет собой простой текстовый файл, в котором наряду с текстом присутствуют специальные управляющие команды Эти команды называются «тегами» и заключаются в скобки из символов Например, ИПКиП 2012
22 HTML-файл Текст HTML-страницы располагается в файле с расширением.html Например, index.html Имя файла должно быть написано строчными (маленькими) латинскими символами без пробелов и может содержать цифры и символ «_» Например, ivan_ivanov_7. html ИПКиП 2012
23 Структура HTML-страницы Начало документа. Служебная информация. ( Название страницы, ее автор, ключевые слова, и т.д. ) Тело документа. ( Все, что видно на страничке - текс, рисунки, и т.д. ) Конец документа. ИПКиП 2012
24 Структура HTML-страницы ЗАГОЛОВОК ДОКУМЕНТА ПЕРВЫЙ ТЕКСТ НА СТРАНИЧКЕ ИПКиП 2012
25 Мета теги Мета тег может информировать браузер о кодировке Web-страницы: Мета тэги используются поисковыми системами для индексирования содержания, ключевых слов и автора Web-страницы: ИПКиП 2012
26 Параметры Задание цвета фона страницы или Картинка в роли фона ИПКиП 2012
27 Цвета ИПКиП 2012
28 Первая страничка ЗАГОЛОВОК ДОКУМЕНТА ПЕРВЫЙ ТЕКСТ НА СТРАНИЧКЕ ИПКиП 2012
29 Работа с текстом Размеры Заголовок, n - число от 1 до 6 Пример Пример Пример Пример Пример Пример Пример ИПКиП 2012
30 Работа с текстом Гарнитура Пример Пример Пример Пример Пример Красный Тег текст - цитата ИПКиП 2012
31 Работа с текстом Начертание текста Жирный текст Курсив Подчеркнутый Перечеркнутый Верхний индекс Нижний индекс Моноширинный шрифт ИПКиП 2012
32 Работа с текстом Абзац Новый абзац Параметры тега CENTER - LEFT - RIGHT - JUSTIFY По левому краю По центру По правому краю Выравнивание по ширине ИПКиП 2012
33 Блок текста Текст. Текст. Текст. Текст. Текст. Текст. Текст. Свойство align задает тип выравниваения текста. Возможны четыре значения: Тег - разрыв строки leftпо левому краю rightпо правому краю centerпо центру justifyпо ширине ИПКиП 2012
34 Горизонтальные линии Тег Атрибуты Size = толщина в пикс. Width = в % или пикс. Color = цвет Выравнивание Align - слева - по центру - справа - без объема ИПКиП 2012
35 Бегущая строка тег текст параметры Width – ширина поля бегущей строки % или пикс. Height – высота поля в пикс. Direction – (left,right) – направление движения Bgcolor – цвет поля бегущей строки эта страничка содержит полезную информацию ! ИПКиП 2012
36 Нумерованные списки 1 строка списка 2 строка списка Параметры тега :, где * I - большие римские цифры i - маленькие римские цифры A - большие латинские буквы a - маленькие латинские буквы 1 - обычные цифры ИПКиП 2012
37 Нумерованные списки 1 строка списка 2 строка списка Параметры тега :, где * I - большие римские цифры i - маленькие римские цифры A - большие латинские буквы a - маленькие латинские буквы 1 - обычные цифры ИПКиП 2012
38 Нумерованные списки яблоко груша помидор огурец 1. яблоко 2. груша 3. помидор 4. огурец ИПКиП 2012
39 Нумерованные списки III. 3 IV. 4 V. 5 VI.6 VII.7 ИПКиП 2012
40 Маркированные списки 1 строка списка 2 строка списка Параметры тега :, где * disk circle square ИПКиП 2012
41 Маркированные списки Диск – по умолчанию! Груша Яблоко Помидор Груша Яблоко Помидор ИПКиП 2012
42 Списки определений Термин Его определение Следующее его определение Термин Определение термина Следующее его определение ИПКиП 2012
43 Листинг программы: PRIMER Контрольная работа 1 Вариант 1 ИПКиП 2012
44 Задание ИПКиП 2012
45 Листинг программы: PRIMER Контрольная работа 1 Вариант 1 Информация сведения о предметах, событиях, явлениях, процессах окружающего мира. Виды информации визуальная звуковая о запахах вкусовая тактильная
46 Вставка рисунка тег c параметрами SRC ="имя файла - рисунка« Графические форматы: GIF, JPG, PNG. BORDER= число пикс." (По умолчанию – 0) ИПКиП 2012
47 Вставка рисунка WIDTH="Ширина изображения в пикселях" HEIGHT="Высота изображения в пикселях" ALT=текст надписи, вместо рисунка, если его не находят Title=текст подсказки – всплывает при наведении на изображение ИПКиП 2012
48 Вставка рисунка ALIGN=" * " определяет положение рисунка по отношению к соседним элементам, где *: LEFT - по левому краю. RIGHT - по правому краю. TOP - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. MIDDLE - выравнивает базовую линию текущей текстовой строки с центром изображения. VSPACE =ширина в пикс. – ширирна пустого поля сверху и снизу изображения HSPACE =ширина в пикс. – ширирна пустого поля справа и слева изображения ИПКиП 2012
49 Вставка звука Форматы звука - wav. midi, mp3 Если нужно повторять звук бесконечное количество раз то LOOP="-1" Данный тег необходимо поместить в служебной информации - между тегами. ИПКиП 2012
50 Звук и видео на HTML странице Форматы: MPG, AVI, QuickTime. Тег атрибут Src=URL – адрес файла Width,height – размеры панели управления проигрывателем. autostart: true- сразу после загрузки, false - вкл пользователем. ИПКиП 2012
51 Звук и видео на HTML странице Где START="Условие запуска видео" - может принимать следующие значения: START="FILEOPEN" - автоматический старт START="MOUSEOVER" - при щелчке мыши ИПКиП 2012
52 Гиперссылки Тег … - для ссылки на другую HTML-страницу Свойство href указывает URL ресурса, на который будет осуществлен переход, при нажатии на гиперссылку. Анекдоты Устройство компьютера - для ссылки на документ из папки, где исходная страница ИПКиП 2012
53 Гиперссылки Ссылка - рисунок: Ссылка на звуковой или видеофайл – Послушай песенку Задание цвета ссылок в теге : Link – не активированные ссылки Vlink - посещенные Alink – активная ссылка ИПКиП 2012
54 Гиперссылки Внутренние ссылки используются для быстрого перемещения внутри документа. Для таких перемещений, во-первых, нужно создать внутри html-документа «именованные якоря». Они помечаются следующим фрагментом кода:. Чтобы совершить переход в произвольном месте страницы, нужно добавить следующую ссылку: ссылка. Знак решетка, сообщит браузеру, что переход совершается внутри страницы. ИПКиП 2012
56 Формы ИПКиП 2012
57 Создание форм Тег контейнер параметр Action=* – адрес для отправки формы. Для создания элементов управления служит тег параметр type=*, где * - это Text – создание текстового поля Checkbox – создание переключателей - флажков Radio – создание кнопок выбора Submit – создание формы для отправки данных их формы Reset – создание кнопки для очистки полей Наберите здесь сообщение ИПКиП 2012
61 Таблицы Тег …. Атрибуты: WIDTH= число – ширина таблицы BORDER= число – ширина рамки вокруг Alighn – выравнивание таблицы относительно боковых границ окна Bgcolor – цвет фона под таблицей Название таблицы Top –над таблицей Bottom – под таблицей ИПКиП 2012
62 Элементы таблицы Заголовок ячейки-столбца Строка таблицы Align (left,right,center) – способ горизонтального выравнивания всех ячеек строки Valign (top,bottom,middle) – способ вертикального выравнивания всех ячеек строки Bgcolor – цвет фона ячеек строки Столбец таблицы -аналогия Widht – ширина ячейки Colspan – объединение ячеек нескольких столбцов Rowspan – объединение ячеек нескольких строк ИПКиП 2012
63 Элементы таблицы Можно задать расстояние между ячейками и отступ от границ ячейки внутри нее: тегами ИПКиП 2012
64 Таблицы ИПКиП 2012
65 Таблицы ИПКиП 2012
66 ИПКиП 2012
67 Таблицы ИПКиП 2012
68 Таблицы ИПКиП 2012
69 Таблицы Прижата справа на странице! ИПКиП 2012
70 Таблицы ИПКиП 2012
71 Таблицы ИПКиП 2012
72 Таблицы ИПКиП 2012
73 Фреймы (рамка, кадр) Тег Cols - количество фреймов-столбцов Rows - количество фреймов – строк Border - ширинa рамки между ними Bordercolor - цвет рамки Для описания каждого фрейма используют тег с атрибутом SRC=имя файла Scrolling : yes –всегда, no – никогда,auto – по необходимости). ИПКиП 2012
74 Плавающий фрейм Тег с атрибутом src=URL-адрес HTML-документа widht, height - ширина и высота плавающего фрейма, aline – выравнивание относительно окна браузера, marginwith-размеры свободных полей слева и справа от фрейма, marginheight - размеры свободных полей сверху и снизу от фрейма frameborder – вывод рамки фрейма name – имя фрейма scrolling – вывод полос прокрутки. ИПКиП 2012
75 Гиперссылки с учетом фреймов при создании фреймов задать им имена с помощью name= «имя фрейма» при вставке гиперссылки указать, в каком фрейме необходимо открыть страничку с помощью атрибута target= «имя фрейма» ….. ИПКиП 2012
77 эта страничка содержит полезную информацию ! Слуховая Визуальная 80% о запахах тактильная вкусовая
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.