- •Курс: «телекоммуникационные и компьютерные технологии в политической журналистике»
- •Модуль 3.
- •Что такое Web-сайт.
- •Язык создания Web-страниц.
- •Задания для самостоятельной работы.
- •Тестовые вопросы по модулю.
- •Глоссарий.
- •А) Основная литература.
- •Б) Дополнительная литература
- •Модуль 3. Создания Web-сайтов с помощью html-языка. Модульная лекция: мл 3-1.
- •Что такое Web-сайт.
- •Этапы проектирования и создания Web-сайта
- •2. Язык создания Web-страниц.
- •Модульная лекция: мл 3-2
- •2.1. Структура html- документа.
- •2.2. Элемент body и его параметры.
- •2. 3. Тэги форматирования текста.
- •Элемент font
- •Модульная лекция: мл 3-3
- •2.4. Преформатированный текст - тэг pre.
- •2.5. Заголовки - элементы h1,h2,h3,h4,h5,h6
- •2.6. Создание списков.
- •2.6.1. Упорядоченные (нумерованные) списки
- •2.6.2. Неупорядоченные списки
- •2.6.3. Маркированные списки.
- •2.6.4. Вложенные списки.
- •2.6.5. Списки определений
- •Модульная лекция: мл 3-4
- •2.7. Использование звуковых файлов.
- •2.7. 1. Воспроизведение файлов формата мрз
- •.2.8. Навигация по html-документам.
- •2.8. 1. Внутренняя навигация - по страницам html-документа.
- •Модульная лекция: мл 3-5.
- •2.9. Создание таблиц.
- •Модульная лекция: мл 3-6.
- •2.10. Создание форм. Элементы формы.
- •Элемент textarea
- •Модульная лекция: мл 3-7.
- •2.11. Создание фреймов.
- •Модульная лекция: мл 3-8
- •2.12. Создание таблицы стилей - css.
- •2.12. 1.Формирование листа стилей
- •2.12.2. Что такое css ?
- •Модульная лекция: мл 3-9
- •2.12.3. Чем css отличается от html ?
- •2.12.4. Синтаксис и принцип работы css.
- •2.12.5. Типы селекторов в css
- •Модульная лекция: мл 3-10
- •2.12.6. Использование стилей внутри тэга.
- •Регистрация Web-сайта в Интернете
- •Загрузка новых файлов на сервер.
- •5. Задания для самостоятельной работы.
- •6. Тесты для промежуточного контроля.
- •7. Глоссарий.
2. Язык создания Web-страниц.
Для создания текстового файла, каковыми являются Web-документы, можно использовать любой текстовый редактор, например, блокнот и визуальные редакторы, например Dreamweaver. Для использования текстовых редакторов необходимо знать html-язык. В этом случае разработчик сам вводит тэги, определяющие структуру и содержимое разрабатываемого им Web-сайта. В основе всех визуальных редакторов лежит html-язык и мощный инструмент таблицы каскадных стилей CSS. При создании Web-страниц html-язык не ставит никаких ограничений (в отличие от визуальных редакторов). Web-дизайнеры страниц могут использовать любые тэги и всю свою фантазию, применяя самые последние возможности html-языка и таблицу каскадных стилей CSS. В качестве редакторов тэгов можно использовать простейшую программу, входящую в поставку Windows: - notepad или блокнот.
То что мы видим на экране компьютера предоставляет нам специальная программа, которая имеется во всех Windows, и называется браузер Internet Explorer (IE). Браузер интерпретирует html-документы, которые сформированы с помощью специальных конструкций html-языка. После запуска Web-сайта браузер читает тэги html-языка, интерпретирует их и отображает на экране в виде графических и текстовых объектов страницы.
При подготовке html-документа для форматирования отдельных его фрагментов используются шрифт и размер шрифта, стиль начертания, цвет текста и фона и другие текстовые эффекты. Для форматирования текста (редактирования) используются специальные конструкции html-языка - тэги (tag – ярлык, признак). Все тэги выделяются символами - ограничителями (< и >), между которыми записывается идентификатор (имя) тэга и возможные параметры. Имена тэгов и его возможных параметров задаются с помощью идентификаторов - ключевых слов, наименование которых закреплены в языке html в соответствии со стандартом. Большинство тэгов состоят из начального (открывающего) тэга и завершающего (закрывающего) тэга, который отличается от открывающего наличием символа / (слэш) перед именем того же тэга. Обратите внимание на принцип вложения одного тэга во внутрь другого. Действие тэга распространяется на ту часть текста документа, которая находится между открывающим и закрывающим тэгами. Есть тэги, которые не нуждаются в закрывающих тэгах. Тэги, которые требуют соответствующего закрывающего тэга, называются тэгами - контейнерами. Все, что записано между соответствующими открывающим и закрывающим тэгами, называется содержимым тэга. В процессе интерпретации тэгов
Модульная лекция: мл 3-2
2.1. Структура html- документа.
Каждый документ, отвечающий требованиям html-языка, документ можно начинать с тэга html, внутри которого содержатся head и затем body Ниже приводится возможный вариант структуры html-документа.
<html> - начало html-файла
<hrad> - начало заголовка
<title> Название сайта </title>
... другие элементы заголовка
</head> - конец заголовка
<body параметры тэга > - начало содержимого документа
... тело документа
</body> - конец содержимого
</html> - конец html-файла
Рассмотрим еще один пример структуры документа.
<html> <head> - можно в одной строке
<meta charset=windows-1251">
<title>Заголовок документа</title>
</head>
<bodyY>
Тэг 1 - часть документа
Тэг 2 - следующая часть документа
Тэг 3 - следующая часть документа
и т.д. .........................................
Тэг N, другая часть документа
</body>
</html>
В рассмотренном выше примере использованы следующие тэги:
<html> - тэг начала документа. У него есть тэг конца документа - </html>
<head> - тэг начала заголовка документа, закрывающий тэг </head>
<meta параметры> - содержит кодировку страниц, информацию, необходимую поисковой машине и т.д.
<title> - тэг, содержащий наименование документа. Используется как заголовок окна.
<body> - тэг начала выводимого на экран документа. Необходим тэг конца</body>
В данном примере указана русская кодировка страниц (windows-1251 – русский алфавит).