Лекция № 6. Технологии создания сайтов. Язык HTML,

Описание презентации Лекция № 6. Технологии создания сайтов. Язык HTML, по слайдам

Лекция № 6. Технологии создания сайтов. Язык HTML, Java Script  © Vizer JuliaЛекция № 6. Технологии создания сайтов. Язык HTML, Java Script © Vizer Julia Jurievna

План лекции: 1. Сайты. Основные понятия. История. 2. Этапы Веб-разработки. Язык HTML. 3. Веб-программирование.План лекции: 1. Сайты. Основные понятия. История. 2. Этапы Веб-разработки. Язык HTML. 3. Веб-программирование. 4. Облачные платформы для создания сайтов

Сайт  - совокупность логически связанных между собой веб-страниц;  также место расположения контентаСайт — совокупность логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP.

Первый Веб-сайт Первый в мире сайт info. cern. ch появился 20 декабря 1990 года.Первый Веб-сайт Первый в мире сайт info. cern. ch появился 20 декабря 1990 года. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML

Страницы сайтов  – это набор текстовых файлов,  размеченных на языке HTML. Страницы сайтов – это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения

Язык HTML  позволяет форматировать текст,  различать в нём функциональные элементы,  создаватьЯзык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы

Основные понятия сайтов Веб-сервер Хостинг Основные понятия сайтов Веб-сервер Хостинг

Основные понятия сайтов Виртуальный хостинг Зеркало Основные понятия сайтов Виртуальный хостинг Зеркало

Классификация сайтов по технологии отображения Статические Динамические Сайты с использованием Flash-технологий 3 F 480Классификация сайтов по технологии отображения Статические Динамические Сайты с использованием Flash-технологий

2. Основные этапы Веб-разработки Веб-разработка  – процесс создания веб-сайта или веб-приложения 2. Основные этапы Веб-разработки Веб-разработка – процесс создания веб-сайта или веб-приложения

Основные этапы веб-разработки Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания,Основные этапы веб-разработки Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания, проектирование интерфейсов); Разработка креативной концепции сайта; Создание дизайн-концепции сайта (создается в графических редакторах – дизайн главной страницы, разделов сайте);

Основные этапы веб-разработки Создание макетов страниц Создание мультимедиа и FLASH-элементов; Вёрстка страниц и шаблонов;Основные этапы веб-разработки Создание макетов страниц Создание мультимедиа и FLASH-элементов; Вёрстка страниц и шаблонов;

Основные этапы веб-разработки Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);Основные этапы веб-разработки Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS); Размещение материалов сайта; Тестирование и внесение корректировок;

Основные этапы веб-разработки Открытие проекта на публичной площадке; Обслуживание работающего сайта или его программнойОсновные этапы веб-разработки Открытие проекта на публичной площадке; Обслуживание работающего сайта или его программной основы.

Язык HTML Непарные тэги Непарный тэг говорит о том, что в этом месте надоЯзык HTML Непарные тэги Непарный тэг говорит о том, что в этом месте надо вставить какой-то элемент, например, рисунок или разделительную линию. Например, тэг
означает переход на новую строку в тексте (без абзацного отступа). Парные тэги Парный тэг состоит из двух частей – открывающего и закрывающего тэгов. Закрывающий тэг имеет то же самое имя, что и открывающий, но перед именем ставится знак / (слэш). Действие парного тэга распространяется на всё, что находится между ними. Например, парный тэг: . . .

Простейша я веб-сраниц а Простейша я веб-сраниц а

Цвет в языке HTML С помощью шестнадцатеричног о кода По имени  Цвет в языке HTML С помощью шестнадцатеричног о кода По имени

Цвет в языке HTML По имени Green Black White Red Yellow Blue Шестнадцатеричный кодЦвет в языке HTML По имени Green Black White Red Yellow Blue Шестнадцатеричный код • Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. • Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи).

Цвет в языке HTML Запись цвета Первая пара обозначает яркость красного (R — red),Цвет в языке HTML Запись цвета Первая пара обозначает яркость красного (R — red), вторая и третья — яркости зеленого (G — green) и синего (B — blue) в этом цвете. Всего такая форма записи позволяет задать более 16 миллионов разных цветов (режим True Color — истинный цвет) Коды базовых цветов модели RGB #FFFFFF — белый #000000 — черный #FF 0000 — красный #00 FF 00 — зеленый #0000 FF — синий

Тэги для определения свойств текста Body Тэг BODY позволяет задать общие свойства для всейТэги для определения свойств текста Body Тэг позволяет задать общие свойства для всей страницы. Например, цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг . . .

Тэги для определения свойств текста Тэг Font имеет три основных параметра: COLOR — цветТэги для определения свойств текста Тэг Font имеет три основных параметра: COLOR — цвет текста FACE — начертание (название) шрифта SIZE — размер шрифта (принимает целые значения от 1 до 7) Например, тэг: . . . устанавливает для текста внутри области действия тэга шрифт Courier желтого цвета размера 2.

Тэги оформления текста B. . . /B (от английского bold ), а также STRONGТэги оформления текста . . . (от английского bold ), а также — это жирный текст . . . (от английского italic), а также — это курсив . . . (от английского strike out) — это зачеркнутый текст . . . (от английского underline) — это подчеркнутый текст

Тэги оформления абзацев парный тэг P (от английского paragraph — абзац), позволяющий ограничить абзац.Тэги оформления абзацев парный тэг

(от английского paragraph — абзац), позволяющий ограничить абзац. У тэга

есть параметр ALIGN , который может принимать значения: LEFT — выровнять по левой границе RIGHT — выровнять по правой границе CENTER — выровнять по центру JUSTIFY — выровнять по ширине (левая и правая границы).

Тэги для списков Нумерованные списки.  Каждый элемент такого списка имеет номер.  НумерацияТэги для списков Нумерованные списки. Каждый элемент такого списка имеет номер. Нумерация может быть числовой или буквенной. Список ограничен парным тэгом

    (от английского ordered list — упорядоченный список). Каждый элемент списка начинается с непарного тэга
  1. , после которого можно располагать текст, рисунки, таблицы и т. п. Список заканчивается закрывающим тэгом
.
  1. Вася
  2. Петя
  3. Коля

Тэги для рисунков • На больших сайтах может использоваться очень много рисунков.  ЧтобыТэги для рисунков • На больших сайтах может использоваться очень много рисунков. Чтобы легче было разбираться в файлах, все рисунки обычно размещаются в отдельном подкаталоге, который часто называют IMAGES. • Рисунок можно установить в качестве фона страницы. Для этого используется параметр BACKGROUND тэга BODY. Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница. •

Тэги для таблиц BODY TABLE BORDER=1 TR TDТаблица из одной строки/TD TDиз трех столбцов/TDТэги для таблиц

Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек.

Тэги для таблиц Таблица начинается тэгом TABLE (от английского table — таблица) и заканчиваетсяТэги для таблиц Таблица начинается тэгом

(от английского table — таблица) и заканчивается парным ему тэгом
. Параметр BORDER тэга обозначает ширину рамки таблицы. Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тэгом (от английского table row – строка таблицы) и заканчивается парным ему тэгом . Ячейки в строке описываются слева направо. Каждая ячейка начинается тэгом . В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).

3. Веб-программирование – раздел программирования,  ориентированный на разработку веб-приложений (программ, обеспечивающих функционирование динамических3. Веб-программирование – раздел программирования, ориентированный на разработку веб-приложений (программ, обеспечивающих функционирование динамических сайтов Всемирной паутины).

Веб-программирова ние Языки веб-программи рования Клиентские Серверные  Веб-программирова ние Языки веб-программи рования Клиентские Серверные

Серверные языки программирования.  Расширения файлов HTML PHP ASPX Perl SSI XML DHTML XHTMLСерверные языки программирования. Расширения файлов HTML PHP ASPX Perl SSI XML DHTML XHTML

Скриптовые языки программирования PHP (Hypertext Preprocessor) – скриптовый язык общего назначения, интенсивно применяемый дляСкриптовые языки программирования PHP (Hypertext Preprocessor) – скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов

Perl – высокоуровневый интерпретируемый динамический язык программирования общего назначения, созданный Ларри Уоллом, лингвистом поPerl – высокоуровневый интерпретируемый динамический язык программирования общего назначения, созданный Ларри Уоллом, лингвистом по образованию. Название языка представляет собой аббревиатуру, которая расшифровывается как Practical Extraction and Report Language — «практический язык для извлечения данных и составления отчётов» . Символом языка Perl является верблюд.

Python – высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемостиPython – высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода. Python поддерживает несколько парадигм программирования, в том числе структурное, объектно-ориентированное, функциональное, императивное и аспектно-ориентированное. Код в Python организовывается в функции и классы, которые могут объединяться в модули (они в свою очередь могут быть объединены в пакеты).

Языки программирования. NET Языки программирования . NET (Языки с поддержкой CLI или CLI-языки) –Языки программирования. NET Языки программирования . NET (Языки с поддержкой CLI или CLI-языки) – компьютерные языки программирования, используемые для создания библиотек и программ, удовлетворяющих требованиям Common Language Infrastructure

Облачные платформы для создания сайтов • Wix. com – международная облачная платформа для созданияОблачные платформы для создания сайтов • Wix. com – международная облачная платформа для создания и развития интернет-проектов, которая позволяет строить профессиональные сайты и их мобильные версии на HTML 5 c помощью инструментов drag-and-drop. Сервис доступен на 11 языках. Wix работает по бизнес-модели freemium, предлагая возможность создавать сайты бесплатно и развивать их, приобретая полезные улучшения. Wix

Wix. com Wix. com

Ключевые возможности Wix Бесплатны е шаблоны Бесплатны й хостинг Поисковая оптимизац ия  Ключевые возможности Wix Бесплатны е шаблоны Бесплатны й хостинг Поисковая оптимизац ия

Ключевые возможности Wix Подключение собственного домена Оптимизация для мобильных устройств Добавление внешнего HTML-кода Ключевые возможности Wix Подключение собственного домена Оптимизация для мобильных устройств Добавление внешнего HTML-кода

Ключевые возможности Wix Защита страниц Модули блога,  интернет-магаз ина, списка,  галереи мультимедиаКлючевые возможности Wix Защита страниц Модули блога, интернет-магаз ина, списка, галереи мультимедиа и пр. Постинг в соцсетях Блоки статистики

Сайты Google • Сайты Google (англ. Google Sites) — упрощённый бесплатный хостинг на базеСайты Google • Сайты Google (англ. Google Sites) — упрощённый бесплатный хостинг на базе структурированной вики. • Может использоваться как часть Google Apps. Позволяет при помощи технологии wiki сделать информацию доступной для людей, которые нуждаются в её быстрой подаче. Пользователи сайта могут работать вместе, добавлять информацию из других приложений Google, например, Документы Google, Календарь Google, You. Tube, Picasa и из других источников. Сайты Google

Google сайты Google сайты

u. Сos • u. Coz – бесплатная система управления сайтом и хостинг для сайтов,u. Сos • u. Coz – бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули u. Coz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др. u. Cos

Ключевые возможности u. Cos Более 250 дизайнов (шаблонов) для создания сайта возможность создать собственныйКлючевые возможности u. Cos Более 250 дизайнов (шаблонов) для создания сайта возможность создать собственный дизайн страниц широкий выбор конфигурации сайта

Ключевые возможности u. Cos Большое дисковое пространство Предоставление домена третьего уровня в 21 различнойКлючевые возможности u. Cos Большое дисковое пространство Предоставление домена третьего уровня в 21 различной зоне Возможность привязать к сайту собственный домен

Ключевые возможности u. Cos WYSIWYG online редактор версия сайта для PDA регистрация через социальныеКлючевые возможности u. Cos WYSIWYG online редактор версия сайта для PDA регистрация через социальные сети

Конструктор сайтов u. Coz Конструктор сайтов u. Coz

(от английского table data — данные таблицы) и заканчивается парным ему тэгом