Скачать презентацию Лекция 6 Технологии создания сайтов Язык HTML
Лекция 6. Технологии создания сайтов.pptx
- Количество слайдов: 47
Лекция № 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 Тэг
Тэги для определения свойств текста Тэг 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 — данные таблицы) и заканчивается парным ему тэгом | . В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).