Основы языка создания Web-страниц. Web-сайт web «паутина, сеть» site «место», буквально «место, сегмент, часть в сети» Web-сайт – совокупность электронных. - презентация

1 Основы языка создания Web-страниц

2 Web-сайт web «паутина, сеть» site «место», буквально «место, сегмент, часть в сети» Web-сайт – совокупность электронных документов частного лица или организации, объединённая под одним адресом (доменным именем, IP-адресом). Сайт иначе называют интернет-представительством человека или организации.

3 Web-страница – раздел сайта Журнал «Автомобили» Новые модели Новости соревнований по автоспорту Прайс-лист автосалона Web-сайт Web-страница

4 Отличия Web-страницы Интерактивность Интерактивность – возможность информационного обмена между пользователем и Интернет-ресурсом. Мультимедийность Мультимедийность - одновременное использование различных форм представления информации в едином объекте-контейнере. Наличие гиперссылок Наличие гиперссылок – специальных записей, позволяющих переходить к другим элементам в самом документе, к другим объектам, расположенный на локальном диске или в Интернете, либо к элементам этих объектов. Наличие динамических элементов Наличие динамических элементов – исполняемых модулей (скриптов, элементов управления ActiveX) – программных компонентов, загружаемых с удаленного сервера и выполняющихся на локальном компьютере.

5 Устройство сайта Web-сайт – совокупность web-страниц. разметки текста разметки текста Web-страница – это файл с текстом, размеченным на языке разметки текста.разметки текста браузером браузером Web-страница, будучи загруженными пользователем на его компьютер, обрабатывается браузером и выводится на монитор локального компьютера (либо другое средство отображения).браузером главной (титульной) страницы Начиная с главной (титульной) страницы и передвигаясь по гиперссылкам, пользователь получает необходимую ему информацию.

6 Язык разметки (HTML) специальные записи, вставляемые в текст для передачи информации о его выводе и строении, которые называются ТЭГИ. Разметка определяет 1.структуру текста (указание на заголовки, разделы, списки и т. д.) – логическая разметка; 2.форматирование текста (указывая, как он выглядит на экране: цвета, шрифты, выравнивание и т.д.) – визуальная разметка. Назад

7 Браузер (Web-обозреватель) программное обеспечение для просмотра web- сайтов, то есть для запроса веб-страниц, их обработки, вывода и перехода от одной страницы к другой. Популярные браузеры распространяются бесплатно: Internet Explorer Mozilla Firefox Opera Google Chrome Назад

8 Достоинства HTML-документов: Малый информационный объем; Для создания web-страницы используются простейшие текстовые редакторы, не форматирующие текст (Блокнот); Наличие института стандартов, что дает возможность работать с web-страницами на компьютерах с разными операционными системами и браузерами.

9 Основные этапы создания сайта 1. Постановка задачи: Получить полное представление о данной предметной области. Четко определить, для чего нужен этот сайт – поставить цель. 2. Проектирование структуры сайта: Определить, какие страницы будут входить в сайт, какова будет их тематика. Определить, как страницы будут связаны между собой. 3. Разработка сайта. 4. Тестирование сайта. 5. Публикация в интернете.

10 Проектирование сайта «Компьютер». Постановка задачи. Цель: Отобразить информацию о моем компьютере в наиболее полном виде. Список web-страниц: 1. Титульная страница «Компьютер» 2. «Программы» – описание программного обеспечения 3. «Информационные ресурсы» – описание полезных и интересных файлов 4. «Оборудование» – описание аппаратных устройств 5. «Словарь» – словарь компьютерных терминов 6. «Анкета» - анкета для посетителей сайта. Связь: ссылки с титульной страницы

11 Создать папку, в которой будут хранится все файлы, составляющие сайт. Каждая web-страница – отдельный файл с типом (расширением).htm или.html. Файл с титульной страницей обязательно называется index.html или index.htm Каждая web-страница состоит из двух логических частей: заголовок и содержание. Заголовок содержит имя web-страницы и справочную информацию (например, кодировка) Содержание – это все, что есть на странице: текст, таблицы, бегущие строки, графика, звуки и пр. Проектирование сайта «Компьютер». Разработка сайта.

12 Основные тэги HTML Структура Web-страницы НазначениеФормат Начало и конец страницы Описание страницы, в том числе ее имя Имя страницы Содержание страницы Открывающий тэг Закрывающий тэг Контейнер

13 Форматирование текста Основные тэги HTML НазначениеФорматАргументы Заголовок (уровни от 1 до 6) ? Абзац Выровненный абзац * center right left Перевод строки Горизонтальный разделитель Выравнивание по центру Адрес автора

14 Форматирование шрифта Основные тэги HTML НазначениеФорматАргументы Жирный Курсив Верхний индекс Нижний индекс Размер шрифта ? Цвет шрифта red blue … #FFFFFF Гарнитура шрифта * Arial Times New Roman Courier New …

15 Вставка изображений Основные тэги HTML НазначениеФорматАргументы Вставка изображения URL - место хранения файла на локальном компьютере или в интернете Выравнивание изображения * top bottom middle left right Вывод текста вместо изображения * поясняющий текст Фоновое изображение (добавление к тэгу BODY)

16 Оформление списков Основные тэги HTML НазначениеФорматАргументы Ненумерованный элемент Тип маркера * disk square Нумерованный элемент Тип нумерации * A a I i 1 Первый номер списка ? … Список определений термин определение

17 Определение цветовых параметров тега BODY (Тег BODY может быть на странице только один!) Основные тэги HTML НазначениеФорматАргументы Цвет фона red blue … #FFFFFF Цвет текста red blue … #FFFFFF Цвет ссылки red blue … #FFFFFF Цвет пройденной ссылки red blue … #FFFFFF Цвет активной ссылки red blue … #FFFFFF

18 Задачи из ЕГЭ-2010, 2011 Для кодирования цвета фона web-страницы используется атрибут bgcolor="#ХХХХХХ", где в кавычках задаются шестнадцатеричные значения интенсивности цветовых компонент в 24 -битной RGB-модели. Какой цвет будет у страницы, заданной тэгом ? К какому цвету будет близок цвет страницы, заданный тэгом ? 1) серый 2) белый 3) фиолетовый 4) черный

19 Вставка гиперссылок Основные тэги HTML НазначениеФорматАргументы Ссылка на другую страницу указатель ссылки Ссылка на закладку в другом документе указатель ссылки * Имя закладки Ссылка на закладку в том же документе указатель ссылки * Имя закладки Определение закладки * Имя закладки

20 Формы Основные тэги HTML НазначениеФорматАргументы Форма Текстовое поле ? Группа переключателей Группа флажков Раскрывающийся список Первый Второй Тестовая область ? Кнопка «Отправить» Кнопка «Очистить»