
- •Курс: «телекоммуникационные и компьютерные технологии в политической журналистике»
- •Модуль 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. Глоссарий.
Элемент textarea
Тэг <textarea> создает внутри формы поле для ввода многострочного текста, отображаемого в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Для пересылки на сервер каждая введенная строка дополняется символами %0D%0A ("Возврат каретки" и "Перевод строки" с предшествующим символом %), полученные строки объединяются в одну строку, которая и отправляется на сервер под именем, задаваемым параметром name="имя" который используется для идентификации данных при пересылке на сервер.
Параметр cols=n определяет ширину поля в символах. Параметр rows=n задает число строк видимого текста области.
Между тэгами <textarea> и </textarea> можно поместить текст, который будет отображаться по умолчанию.
<html> <head><title> Пример области ввода данных</head></title> <textarea name="aist" rows=3 cols=50> Это первая строка по умолчанию Это вторая строка по умолчанию Самохвалов А.И. </textarea>
Этот
код будет отображен браузером следующим
образом:
Модульная лекция: мл 3-7.
2.11. Создание фреймов.
На рис. 2.1. показан пример фреймовой структуры HTML-документа.
Рис.2.1. Пример фреймовой структуры HTML-документа
Прежде всего, необходимо обратить внимание на структуру документа. Страница состоит из нескольких частей называемых фреймами. В верхней части страницы указывается тема сайта, ниже отображается разделы пособия (ссылки): HTML-язык, Dreamweaver, Photoshop, Регистрация Web-сайта в Internet. Слева внизу – отображается Web-страница другого документа, в котором перечислены главы выбранного вверху учебного раздела HTML-язык. Справа – отображается Web-страница начала содержимого второй главы, которая выбрана справа – 2. Правила использования тэгов- HTML-языка
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, фреймов (frames - кадры), располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Выбор фреймовой структуры оправдан в следующих случаях:
при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
для расположения в определенном месте окна просмотра информации, которая должна постоянно находится на экране вне зависимости от содержания других подобластей экрана;
для представления информации, которую удобно расположить в нескольких смежных подобластей окна, каждая из которых может просматриваться независимо.
Этот список носит рекомендательный характер. Ниже рассматриваются типичные варианты использования фреймов и правила разработки документов, содержащих фреймы. ежде всего, необходимо отметить, что документ, содержащий фреймы, не может содержать в себе тэг <BODY>. Вместо него используется тег <frameset>. В составе этого тэга имеется тэг <frame>, с помощью которого и в окне браузера выводится документ. Каждый <frameset> может иметь несколько вложенных тэгов <frame>, список которых завершается тэгом </frameset>. В свою очередь фреймовый документ может содержать несколько тэгов <frameset>.
Возможный вариант фреймовая структуры документа следующий:
<framest rows="20%,80%">
<frame src="soderj.html">
<frameset cols="30%,70%">
<frame src="alltem.html">
<frame src="pict.gif">
</frameset> </frameset
Параметр rows может иметь несколько значений, разделенных запятой. Каждое значение может задаваться либо в виде числа, либо в процентах относительно размера экрана. В нашем примере параметр имеет два значения ( "20% и 80%").
Это означает, что экран делится по вертикали на две части (кадра) в процентном отношении 20% - первая верхняя подобласть экрана и 20% - вторая нижняя подобласть экрана. В свою очередь, нижняя часть (80%) делится на две части (области) по горизонтали - 30% - левая часть, 70% - правая часть.
Параметр cols также может содержать несколько значений, количество которых задает число подобластей по горизонтали в текущем фрейме.
Рассмотрим назначение каждого элемента представленного выше фреймового документа
<frameset rows="20%,80%"> - определяет число подобластей по горизонтали,
т.е. экран делится на два кадра по вертикали, первый кадр занимает 20% экрана,
<frame src="soderj.html">-отображается документ в верхнем кадре 20% экрана
<frameset cols="30%,70%">-нижний кадр делится на два кадра по вертикали:
левый - 30% от экрана, правый - 70% от экрана.
<frame src="alltem.html"> -загружает документ alltem.html левый фрейм.
<frame src="pict..gif"> - загружает изображение в правый фрейм
</frameset> - закрывает набор фреймов нижнего frameset (кадра)
</frameset> - закрывает набор фреймов верхнего frameset (кадра).