Лекция № 6. Технологии создания сайтов. Язык HTML,
lekciya_6._tehnologii_sozdaniya_saytov.pptx
- Размер: 4.1 Мб
- Автор:
- Количество слайдов: 47
Описание презентации Лекция № 6. Технологии создания сайтов. Язык HTML, по слайдам
Лекция № 6. Технологии создания сайтов. Язык HTML, Java Script © Vizer Julia Jurievna
План лекции: 1. Сайты. Основные понятия. История. 2. Этапы Веб-разработки. Язык HTML. 3. Веб-программирование. 4. Облачные платформы для создания сайтов
Сайт — совокупность логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP.
Первый Веб-сайт Первый в мире сайт info. cern. ch появился 20 декабря 1990 года. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML
Страницы сайтов – это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения
Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы
Основные понятия сайтов Веб-сервер Хостинг
Основные понятия сайтов Виртуальный хостинг Зеркало
Классификация сайтов по технологии отображения Статические Динамические Сайты с использованием Flash-технологий
2. Основные этапы Веб-разработки Веб-разработка – процесс создания веб-сайта или веб-приложения
Основные этапы веб-разработки Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания, проектирование интерфейсов); Разработка креативной концепции сайта; Создание дизайн-концепции сайта (создается в графических редакторах – дизайн главной страницы, разделов сайте);
Основные этапы веб-разработки Создание макетов страниц Создание мультимедиа и FLASH-элементов; Вёрстка страниц и шаблонов;
Основные этапы веб-разработки Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS); Размещение материалов сайта; Тестирование и внесение корректировок;
Основные этапы веб-разработки Открытие проекта на публичной площадке; Обслуживание работающего сайта или его программной основы.
Язык HTML Непарные тэги Непарный тэг говорит о том, что в этом месте надо вставить какой-то элемент, например, рисунок или разделительную линию. Например, тэг
означает переход на новую строку в тексте (без абзацного отступа). Парные тэги Парный тэг состоит из двух частей – открывающего и закрывающего тэгов. Закрывающий тэг имеет то же самое имя, что и открывающий, но перед именем ставится знак / (слэш). Действие парного тэга распространяется на всё, что находится между ними. Например, парный тэг: . . .
Простейша я веб-сраниц а
Цвет в языке HTML С помощью шестнадцатеричног о кода По имени
Цвет в языке HTML По имени Green Black White Red Yellow Blue Шестнадцатеричный код • Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. • Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи).
Цвет в языке HTML Запись цвета Первая пара обозначает яркость красного (R — red), вторая и третья — яркости зеленого (G — green) и синего (B — blue) в этом цвете. Всего такая форма записи позволяет задать более 16 миллионов разных цветов (режим True Color — истинный цвет) Коды базовых цветов модели RGB #FFFFFF — белый #000000 — черный #FF 0000 — красный #00 FF 00 — зеленый #0000 FF — синий
Тэги для определения свойств текста Body Тэг позволяет задать общие свойства для всей страницы. Например, цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг . . .
Тэги для определения свойств текста Тэг Font имеет три основных параметра: COLOR — цвет текста FACE — начертание (название) шрифта SIZE — размер шрифта (принимает целые значения от 1 до 7) Например, тэг: . . . устанавливает для текста внутри области действия тэга шрифт Courier желтого цвета размера 2.
Тэги оформления текста . . . (от английского bold ), а также — это жирный текст . . . (от английского italic), а также — это курсив . . . (от английского strike out) — это зачеркнутый текст . . . (от английского underline) — это подчеркнутый текст
Тэги оформления абзацев парный тэг
(от английского paragraph — абзац), позволяющий ограничить абзац. У тэга
есть параметр ALIGN , который может принимать значения: LEFT — выровнять по левой границе RIGHT — выровнять по правой границе CENTER — выровнять по центру JUSTIFY — выровнять по ширине (левая и правая границы).
Тэги для гиперссылок • Ссылка устанавливается с помощью парного тэга (от английского anchor — якорь). Тэг имеет параметр HREF, который указывает адрес документа. Ссылкой является вся информация, расположенная между открывающим и закрывающим тэгами.
Тэги для списков Нумерованные списки. Каждый элемент такого списка имеет номер. Нумерация может быть числовой или буквенной. Список ограничен парным тэгом
- (от английского ordered list — упорядоченный список). Каждый элемент списка начинается с непарного тэга
- , после которого можно располагать текст, рисунки, таблицы и т. п. Список заканчивается закрывающим тэгом
- Вася
- Петя
- Коля
Тэги для рисунков • На больших сайтах может использоваться очень много рисунков. Чтобы легче было разбираться в файлах, все рисунки обычно размещаются в отдельном подкаталоге, который часто называют IMAGES. • Рисунок можно установить в качестве фона страницы. Для этого используется параметр BACKGROUND тэга BODY. Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница. •
Тэги для таблиц
Таблица из одной строки | из трех столбцов | без указания ширины таблицы и ячеек. |
Тэги для таблиц Таблица начинается тэгом
(от английского table data — данные таблицы) и заканчивается парным ему тэгом | . В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).