Конспект урока Технологии создания сайта

Конспект урока "Технологии создания сайта"

Вопросы:

· Как менялись веб-сайты в последние десятилетия?

· Технологии и инструменты создания сайтов, для чего они (сайты или технологии?) нужны?

· Язык разметки гипертекста HTML.

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

Позже, с появлением различных интернет-ресурсов и сервисов требования к сайтам стали меняться, как и их содержание. Сайты стали взаимодействовать с пользователями при помощи различных инструментов, полей ввода, кнопок и других. А их структура становилась всё сложнее. На смену веб-страницам со статичным содержимым пришли веб-страницы, содержащие интерактивную структуру и динамичную анимацию.

Такое качественное изменение сайтов не могло не отразится на инструментах и технологиях для их создания. Рассмотрим некоторые из них:

Большинство веб-сайтов в сети «Интернет» содержат разметку, созданную при помощи языка разметки гипертекста HTML, сокращённо от «HyperText Markup Language». Именно при помощи этого языка разметки выделяются различные блоки на веб-страницах, в которых размещается информация, помимо этого информация может оформляться каким-либо образом. Изначально для создания сайтов этого языка было достаточно.

Для создания современных сайтов используется множество различных технологий, рассмотрим основные. Начнём с каскадных таблиц стилей или CSS, их использование расширяет возможности оформления отдельных элементов сайта. А также упрощает работу со стилями. Теперь информация об оформлении различных элементов веб-страниц хранится в отдельных файлах и не загромождает исходный код страницы на HTML.

Сделать веб-страницу динамичной позволяет Java-Скрипт. С помощью этого сценарного языка программирования можно создавать различные выплывающие окна, передвигающиеся блоки и другие динамические элементы веб-страниц.

Хранить пользовательскую и другую информацию на сайтах позволяют различные базы данных. В качестве системы управления базами данных чаще всего используют «MySQL».

Связать все эти технологии воедино и задать логику работы сайта помогают различные языки программирования. Из них самым популярным в плане программирования сайтов считается язык PHP.

Посмотрим, какими же программами и технологиями можно пользоваться для создания простых сайтов. Для этого можно использовать визуальные HTML-редакторы, например «Adobe Dreamweaver» или «Microsoft Frontpage». Также простую веб-страницу можно создать с помощью некоторых программ, входящих в пакет «Microsoft office», сохранив документ в формате веб-страницы. Простыми и понятными инструментами для создания сайтов являются различные онлайн конструкторы сайтов. Самыми распространёнными в русскоязычном сегменте интернета являются «Ucoz» и «Wix.com», однако возможности большинства онлайн-конструкторов ограничены выбором деталей оформления из предложенных. Если же вы хотите детально разработать свой сайт, но ни одного из визуальных редакторов у вас нет, можно воспользоваться обычным текстовым редактором «Блокнот», записав в нем код разметки на языке HTML.

Рассмотрим язык разметки гипертекста подробнее. В нём указания для разметки задаются при помощи тегов и атрибутов. Теги – это указания для разметки страницы и её отображения, они записываются в угловых скобках.

<тег>

Большинство из тегов парные, то есть состоят из открывающегося тега и закрывающегося. Закрывающийся тег начинается со знака «/». Так абзац текста в языке HTML размещается между тегами:

Для некоторых тегов указываются параметры, которые называются атрибутами. Так, при размещении картинки указывается одиночный тег «img», его параметрами могут быть ссылка на файл с изображением, ширина и высота изображения на странице.

Рассмотрим структуру простой HTML-страницы. В начале записывается тег «DOCTYPE HTML», который указывает, что тип данного документа – HTML-страница. Весь код разметки страницы записывается между тегами «HTML» и «/HTML». Любая HTML-страница состоит из заголовка и тела страницы. Заголовок может содержать название страницы, а так же указания к браузеру для её отображения. Он размещается между тегами «head» и «/head». Тело страницы содержит все указания по её разметке, оно размещается между тегами «body» и «/body».

<!DOCTYPE HTML>

<HTML>

<head>

Заголовок страницы

</head>

<body>

Тело страницы

</body>

</HTML>

Пример структуры простой HTML-страницы

Название страницы записывается между тегами «title» и «/title» .

Создадим простую веб-страницу с текстом при помощи текстового редактора «Блокнот».

Сохраним нашу веб-страницу в документе с именем “Моя первая веб-страница” и расширением “HTML”.

Свернем рабочее окно блокнота и найдём нашу веб-страницу. Откроем её с помощью одного из браузеров, например Интернет Эксплорера. Мы видим, что наша веб-страница содержит записанный нами текст.

Вернемся к коду нашей веб-страницы. Добавим на неё еще три абзаца текста. Первый абзац будет содержать текст, который записан жирным шрифтом. Для этого его содержимое заключается между тегами “b” и “/b”. Запишем в нём поясняющее сообщение что этот текст записан жирным шрифтом.

Второй абзац запишем курсивом. Для этого его содержимое запишем между тегами “i” и “/i”. Запишем в нём соответствующее поясняющее сообщение. Сделаем третий абзац подчёркнутым. Для этого его содержимое нужно заключить между тегами “u” и “/u”. Запишем в нем соответствующее поясняющее сообщение.

Сохраним наш документ и перейдем к окну браузера. Нажмем на кнопку “Обновить страницу”. Теперь наша веб-страница содержит четыре абзаца текста, которые мы записали.

Добавим картинку на нашу страницу. Для этого добавим ещё один абзац, внутри которого будет содержаться одиночный тег “img”. Для одиночного тега закрывающийся тег не требуется. Нам нужно указать адрес картинки. Для этого нужно дописать к этому тегу атрибут “irc”, после которого поставить знак равенства и в кавычках записать адрес картинки. Пусть наша картинка находится в одной папке с веб-страницей, тогда нам остаётся записать лишь имя файла с расширением «png». Таким образом, картинка будет добавлена в оригинальном размере на нашу веб-страницу.

Итак, сохраним наш документ. Перейдём к окну браузера и нажмём на кнопку “Обновить страницу”. Мы видим, что теперь внизу страницы появилась картинка.

Важно запомнить:

Простые сайты можно создавать при помощи:

· визуальных HTML-редакторов;

· некоторых офисных программ;

· онлайн-конструкторов;

· текстового редактора «Блокнот», записывая в нём код веб-страницы на языке разметки гипертекста.

Для создания современных сайтов могут применятся следующие инструменты:

· Для разметки веб-страниц – язык разметки гипертекста HTML.

· Для оформления веб-страниц используют каскадные таблицы стилей или “CSS”.

· Для создания динамичных элементов веб-страницы используют сценарный язык программирования “Java-Скрипт”.

· Для хранения информации используют базы данных ”MySQL”.

· Для того, чтобы связать эти технологии воедино, используют различные языки программирования, например “PHP”.

Научились создавать простые веб-страницы при помощи языка HTML в текстовом редакторе «Блокнот».