Раздел 2. Web-ресурсы Интернет Тема 2. 2 Технология создания Web-документов
Базовая структура WEB-страницы Для создания Web-страницы требуется только текстовый редактор Язык HTML — это набор меток с форматом <TAG>текст</TAG> Структура Web-документа: <HTML> <HEAD> <TITLE> Заголовок окна документа </TITLE > </HEAD> <BODY> Текст документа </BODY> </HTML>
Элементы языка HTML Элемент языка HTML – это часть документа между открывающим и закрывающим тегом Пример: <BODY> основное содержание документа </BODY>.
Элементы языка HTML Блочные Текстовые Документ Тег HTML Гиперссылки Тег A HREF= Название TITLE Изображения IMG SRC= Тело BODY Слова, фразы FONT SIZE= Заголовки разделов H 1 … H 6 Абзацы P, BR, HR Списки OL, UL Таблицы TABLE Формы FORM Фреймы FRAME
Правила вложения элементов элементы не должны пересекаться (открывающий и закрывающий теги должны располагается внутри одного и того же элемента); блочные элементы могут содержать вложенные блочные и текстовые элементы; текстовые элементы могут содержать вложенные текстовые элементы; текстовые элементы не могут содержать вложенные блочные элементы.
Функциональные блочные элементы заголовки - <H 1>. . . абзацы, • • <H 6> <H 1>Заголовок первого уровня</H 1> <H 2>Заголовок второго уровня</H 2> <P>Первый абзац <P>Второй абзац списки, таблицы.
Функциональные блочные элементы Списки : упорядоченные(нумерованные) – парный тег <OL> неупорядоченные(маркированные) – парный тег <UL> списки определений – парный тег <DL>:
Функциональные блочные элементы Списки содержат элементы списка, определяемые парным тегом <LI> Маркированный список: <UL> <LI>Первый элемент</LI> <LI>Второй элемент </LI> и т. д. </UL>
Функциональные блочные элементы Нумерованный список: <OL> <LI>Первый элемент списка</LI> <LI>Второй элемент списка </LI> и т. д. </OL>
Функциональные блочные элементы Список определений: <DL> <DT>Первый термин</DT> <DD>Первое определение</DD> <DT>Второй термин</DT> <DD>Второе определение</DD> </DL>
Теги таблицы Начало и конец таблицы Парный тег <TABLE> Заголовок таблицы Заголовки столбцов Парный тег <САРТION> Парный тег <ТН> Строки таблицы Ячейки таблицы Горизонтальное выравнивание Вертикальное выравнивание Парный тег <TR> Парный тег <TD> <TD ALIGN=LEFT или. CENTER или RIGHT> <TD VALIGN=TOP или MIDDLE или BOTTOM> Перекрывающиеся столбцы <TD СОLSPAN=Число_столбцов>
Пример таблицы <TABLE BORDER> <CAPTION ALIGN=TOP> Текст заголовка таблицы </CAPTION> <TR> <TH> Название первого столбца</TH> <TH> Название второго столбца </TH> </TR> <TD> Содержимое ячейки первой строки, первого столбца</TD> <TD> Содержимое ячейки первой строки, второго столбца </TD> </TR> <TD> Содержимое ячейки второй строки, первого столбца </TD> <TD> Содержимое ячейки второй строки, второго столбца </TD> </TR> и т. д. по строкам таблицы </TABLE>
Текстовые элементы Гипертекстовая ссылка Является фрагментом текста документа, Задается при помощи парного тега <А>, Содержит обязательный атрибут HREF=, В качестве значения атрибута используется адрес URL документа, на который указывает ссылка Используется в паре с закрывающим тегом </A> <A HREF = «URL» >Текст связи</A>
Текстовые элементы Виды гипертекстовых ссылок Внутренняя ссылка - задается относительным путем поиска документа на том же Web-узле Внешняя ссылка – задается абсолютным адресом URL и направляет на другой Web-узел
Внутренняя гипертекстовая ссылка П е р в а я. ht 1. Название главы 1 1. 1. Название параграфа 1 1. 2. Название параграфа 2 1. 3. Название параграфа 3 2. Название главы 2 m 1. Название главы 1 l Содержание 1. 1 Название параграфа 1 Текст 1. 2 Название параграфа 2 Текст 1. 3 Название параграфа 3 Текст
Внутренняя гипертекстовая ссылка 1. Установить якорь перед абзацем, содержащим название главы, параграфа <A NAME="Имя_якоря"></A> 2. В содержании задать ссылки на расставленные по тексту якоря <A HREF="#Имя_якоря">Текст связи</A>
Внутренняя гипертекстовая ссылка Содержание <P><A HREF= «#gl_1» > 1. Название главы 1 </A> <P><A HREF= «#par_1_1» > 1. 1. Название параграфа 1 </A> <P><A HREF= «#par_1_2» > 1. 2. Название параграфа 2 </A> <P><A HREF= «#par_1_3» > 1. 3. Название параграфа 3 </A> <P><A NAME= «gl_1» ></A> 1. Название главы 1 <P><A NAME= «par_1_1» ></A> 1. 1 Название параграфа 1 Текст параграфа <P><A NAME= «par_1_2» ></A> 1. 2 Название параграфа 2
Внешняя гипертекстовая ссылка Содержание П ер ва я. ht ml 1. Название главы 1 1. 1. Название параграфа 1 1. 2. Название параграфа 2 1. 3. Название параграфа 3 2. Название главы 2 1. Название главы 1 2. Название главы 2 2. 1. Название параграфа 1 2. 2. Название параграфа 2 2. 3. Название параграфа 3 2. Название главы 2 2. 1 Название параграфа 1 1. 1 Название параграфа 1 Текст 2. 2 Название параграфа 2 1. 2 Название параграфа 2 Текст 2. 3 Название параграфа 3 1. 3 Название параграфа 3 Текст Вт ор ая. ht ml
Внешняя гипертекстовая ссылка Установить гипертекстовую связь с документом, содержащемся в файле «Вторая. html» <A HREF= «Вторая. html» >Переход</A>
Внешняя гипертекстовая ссылка Содержание <P><A HREF= «#gl_1» > 1. Название главы 1 </A> <P><A HREF= «#par_1_1» > 1. 1. Название параграфа 1 </A> <P><A HREF= «#par_1_2» > 1. 2. Название параграфа 2 </A> <P><A HREF= «#par_1_3» > 1. 3. Название параграфа 3 </A> <P><A HREF= «Вторая. html» > 2. Название главы 2 </A> <P><A NAME= «gl_1» ></A> 1. Название главы 1 <P><A NAME= «par_1_1» ></A> 1. 1 Название параграфа 1 Текст параграфа <P><A NAME= «par_1_2» ></A> 1. 2 Название параграфа 2
Иллюстрации: являются неотъемлемой частью Web -документов, используют два основных формата – GIF и JPEG, подготавливаются с помощью любого графического редактора.
Иллюстрации Файлы формата GIF: имеют расширение. GIF, поддерживают 256 цветов, упакованы и имеют меньший размер, чем формат. BMP Специальные возможности файлов GIF: один из цветов изображения может быть объявлен прозрачным (позволяет задать произвольный контур рисунка); чересстрочные изображения при их приеме прорисовываются постепенно, что «скрадывает» время, необходимое на их загрузку; GIF-анимация превращает обычный рисунок в видеоролик с набором кадров и сценарием их отображения.
Иллюстрации Файлы формата JPEG: могут иметь расширение. JPEG или. JPG, предназначены для хранения фотографических изображений, использующих 24 -разрядный цвет, экономят время загрузки иллюстраций.
Иллюстрации хранится на Web-узле в отдельном файле, задается непарным тегом <IMG>, содержит обязательный атрибут SRC=, в качестве значения атрибута используется адрес URL файла с изображением в относительной или абсолютной форме: <IMG SRC="picture_1. gif"> для масштабирования применяют атрибуты WIDTH= и HEIGHT= (ширина и высота рисунка в пикселах): <IMG SRC="picture_2. jpg" WIDTH="100" HEIGHT="40"> режим взаимодействия рисунка с текстом задается атрибутом ALIGN= со значениями "BOTTOM", "MIDDLE", "TOP", "LEFT", "RIGHT". <IMG SRC="picture_3. gif" ALIGN="BOTTOM">
Иллюстрации Значения атрибута ALIGN= "BOTTOM" – нижняя граница изображения совмещается с основанием текстовой строки; "MIDDLE" – середина изображения совмещается с серединой текстовой строки; "TOP" – верхняя граница изображения выравнивается по верхнему обрезу текстовой строки; "LEFT" – изображение размещается у левого края страницы, а последующий текст размещается справа от него; "RIGHT" – изображение размещается у правого края страницы, а последующий текст размещается слева от него.
Иллюстрации Для задания промежутка между текстом и изображением в пикселах используются атрибуты HSPACE= (по горизонтали) и VSPACE= (по вертикали). Для задания рисунка в качестве фонового (рабочая область окна заполняется этим рисунком последовательно) используется атрибут BACKGROUND= в теге <BODY>: <BODY BACKGROUND="waves. gif" TEXT="YELLOW">
Иллюстрации Базовое изображение Изображение, выровненное с верхом текста <IMG SRС= «имя_файла» > <IMG SRС= «имя_файла» ALIGN=TOP> Изображение, выровненное с серединой текста Изображение, выровненное с низом текста <IMG SRС= «имя_файла» ALIGN=MIDDLE> Изображение с альтернативным текстом Размеры изображения <IMG SRС= «имя_файла» ALT= “Альт. текст”> <IMG SRС= «имя_файла» ALIGN=BOTTOM>
Форматирование текста Парный тег <FONT> управляет параметрами шрифта Должен содержать хотя бы один из трех атрибутов: COLOR= FACE= SIZE= <FONT SIZE="6">
Форматирование текста Атрибут COLOR= определяет цвет текста, который может быть задан: текстовым значением COLOR="GREEN" шестнадцатеричным кодом, в котором последовательные байты задают значения красной, зеленой и синей составляющих цвета COLOR="#00 FF 00"
Форматирование текста Атрибут FACE= задает гарнитуру шрифта. Значение этого атрибута сравнивается со шрифтами, которые установлены на компьютере. Атрибут SIZE= определяет размер шрифта в относительных единицах (от 1 до 7). Для этого атрибута можно определять значение со знаком плюс или минус, которое определяет увеличение или уменьшение шрифта относительно текущего размера.
Форматирование текста Параметры шрифта, используемые в документе по умолчанию, задают с помощью непарного тега <BASEFONT>, который помещают один раз внутри элемента BODY. Он может использовать те же атрибуты, что и тег <FONT>: <BODY> <BASEFONT SIZE= размер> Текст </BODY>
Размер и цвет текста Размер шрифта <FONT SIZE= размер > Текст </FONT> Цвет шрифта <FONT COLOR="GREEN"> Текст </FONT> <FONT COLOR="#00 FF 00"> Текст </FONT> Размер базового шрифта <BASEFONT SIZE= размер> Цвет текста <BODY TEXT="#nnnnnn">
Формат шрифта Стиль текста Начальная метка Конечная метка Жирный <В> </В> Курсив <I> </I> Подчеркивание <U> </U> Моноширинный <ТТ> </ТТ>
Отображение нескольких документов на одной Web-странице Для размещения на одной Web-страницы нескольких документов страница разбивается на области – фреймы Структура такой страницы отличается от обычной Web-страницы следующим: элемент BODY отсутствует или игнорируется браузером; тело документа заменяется описанием фреймов – парный тег <FRAMESET>
Атрибуты тега <FRAMESET> Описание фрейма содержит один из обязательных атрибутов, определяющий способ разбиения окна: COLS= – окно разбивается вертикальными линиями, ROWS= – окно разбивается горизонтальными линиями; если заданы оба атрибута, создается сетка фреймов
Атрибуты тега <FRAMESET> n Значение любого из атрибутов – размеры отдельных фреймов в пикселах или в процентах от ширины окна: n <FRAMESET COLS="60%, 40%"> n <FRAMESET ROWS="40%, *">
Использование тега <FRAMESET> Между тегами <FRAMESET> и </FRAMESET> должно располагаться столько элементов, сколько областей создано с помощью атрибутов COLS= и ROWS= При этом могут использоваться дополнительные элементы FRAMESET, описывающие дальнейшее разбиение на подобласти еще меньшего размера, или непарные теги <FRAME>, определяющие способ использования области
Использование тега <FRAMESET> Тег <FRAME> должен содержать обязательный атрибут SRC=, с помощью которого указывается, какой документ загружается в соответствующую область. Значение этого атрибута – абсолютный или относительный адрес URL нужного документа. Атрибут NAME= позволяет задать имя области как значение этого атрибута.
Использование тега <FRAMESET> <HTML> <HEAD> <TITLE>Название страницы</TITLE> </HEAD> <FRAMESET COLS="25%, 75%"> <FRAME SRC=”index. html” NAME=”left”> <FRAME SRC=”viewer. html” NAME=”right”> </FRAMESET> </HTML>
Использование тега <FRAMESET> Имя области используют для загрузки в нее новых документов. Для этого в тег <А>, определяющий гиперссылку, добавляют атрибут TARGET=, значение которого совпадает с ранее определенным именем области <A HREF=”newpage. html” TARGET=”right”>
Уровни сложности HTML 1. Основные элементы разметки 2. Применение таблиц стилей
Таблицы стилей CSS (Cascading Style Sheets) Отвечают за индивидуальность Web -страницы; Используются для изменения шрифтов, цветов, размеров и расположения текста и других элементов страницы.
Таблицы стилей Принцип разделения информативной и оформительской частей Web-документа Таблицы стилей маркируют части Web-документа
Свойства таблиц стилей Существуют независимо от Webдокумента; Дают указания графическим браузерам по отображению Web-документа; Удобство восприятия кода Webдокумента; Web-документ может быть размечен только тегами абзацев <P>, которые в соответствии с таблицей стилей будут отображать текст определенным шрифтом и цветом
Пример таблицы стилей Таблица стилей: <STYLE> P {font-family: Arial, Helvetica, San Serif; font-size: 16 pt; color: green} </STYLE> В теле Web-документа: <P> Текст документа </P>
Технология использования таблиц стилей Подход к разработке Web-страниц основан на использовании спецификации свойств, каждое из которых принимает ряд значений: стилевым атрибутам элементов языка HTML можно присваивать определенные характеристики; с помощью таблиц стилей можно определять элементы (например, <P>, <H 1> и т. д. ), в результате чего они будут сохранять свою индивидуальность в рамках всей Webстраницы; можно создавать собственные классы элементов, указывая их состав, например, определив один раз, что <P> будет отображать текст красным цветом, затем при создании страницы можно сослаться на определение этого класса.
Пути реализации таблиц стилей Включать информацию о стилях внутрь Web-страницы (элемент <STYLE>); Связать страницу с отдельным файлом, в котором содержатся только определения стилей.
Внедрение таблиц стилей в Web-документ Подход применяется, когда таблица стилей распространяет свое действие только на ту Web-страницу, в которую она включена Реализуется с помощью элемента <STYLE>
Внедрение таблиц стилей в Web-документ Шаблон задания стиля в разделе заголовка страницы: <HEAD > <STYLE TYPE ="text/css"> ЭЛЕМЕНТ {свойство: значение) /*Задается стиль Элемента*/ </STYLE > </HEAD > Пример <HEAD> <STYLE TYPE="text/css"> P {font-style: italic} абзаца*/ </STYLE > </HEAD > /*Задается стиль
Терминология стилей правило – это выражение, задающее стиль, селектор – это выбранный для задания стиля тег, определение – это выражение в фигурных скобках
Внедрение таблиц стилей в Web-документ Элемент <STYLE> может содержать несколько правил, каждое определение – несколько свойств. Пример: <STYLE TYPE="text/css"> P {font-style: small-caps; Background: yellow; Padding-left: 12 px } H 1 {color: blue} UL {list-type: disc} </STYLE >
Внедрение таблиц стилей в Web-документ Одно и то же определение можно применить сразу к нескольким элементам: <STYLE TYPE="text/css"> Р, H 1, H 2, H 3, UL, OL {fontfamily: Arial, Helvetica} </STYLE >
Область действия стиля Таблицы стилей обладают свойством наследования. Пример: стиль элемента <TABLE> распространяется на входящие в него элементы строк и ячеек. Действие стиля распространяется на элементы без ограничений до тех пор, пока не встретится другой стиль
Область действия стиля Пример: <STYLE > BODY {font-family: Arial, Helvetica; font -size: 12 pt} UL {font-family: Times New Roman, Times} </STYLE > Первое определение действует на все тело страницы <BODY>, но не применяется к маркированному списку <UL>
Классы стилей Таблицы стилей позволяют создавать классы для варьирования характеристик элементов. Пример: <HEAD> <STYLE > H 1. krasota {color: red} </STYLE > </HEAD> <BODY> <H 1>Обычный заголовок</H 1> <H 1 CLASS=”krasota”>Стильный заголовок</H 1> </BODY>
Классы стилей Можно определять разные классы для одного и того же элемента: <STYLE> P. body {font-family: Arial, Helvetica; fontsize: 15 pt} P. footnote {font-family: Times New Roman, Times; font-size: 13 pt} </STYLE> Меняя в теле Web-страницы значение атрибута CLASS, можно изменить внешний вид элемента <P> в соответствии с определенным выше стилем.
Классы стилей Аналогично можно создать универсальный класс и привязывать его к любому элементу: <STYLE >. small {font-family: Arial, Helvetica; font-size: 15 pt} </STYLE> <UL CLASS=”small”>
Связывание таблиц стилей с Web-документом Подход применяется в случае, когда большое число страниц должны быть оформлены в одном стиле. Целесообразно иметь универсальную таблицу стилей и связывать с ней все необходимые страницы
Связывание таблиц стилей с Web-документом Преимущества подхода: не требуется вставлять элемент <STYLE> в начало каждой страницы; набор правил для всего сайта хранится в одной таблице, что упрощает процесс редактирования стилей; упрощается взаимодействие разработчиков в рамках одного проекта.
Методика связывания таблицы стилей с Web-документом 1. Создать отдельный документ, в котором будут описаны только стили (файл с расширением. css): Файл styles. css /* Начало описания правил для заголовков */ H 1 { font-family; Arial, Helvetica; font-size: 24 pt; font-weight: bold; word-spacing: 2 pt; }
Методика связывания таблицы стилей с Web-документом 2. С помощью непарного элемента <LINK> подключить файл стилей к Web-документу: <HEAD> <TITLE>Главная страница</TITLE> <LINK REL="sty 1 esheet" HREF="styles. css"> </HEAD>
Свойства текстовых стилей Свойство Значения Примеры word-spacing Число и ед. измерения 1 pt, 4 cm, 1 in letter-spacing Число и ед. измерения 3 pt, 0. l cm, +1 line-height Число и ед. измерения 14 pt text-decoration Значение underline, line-through, box, blink text-transform Значение capitalize, lowercase, uppercase, none text-indent Число и ед. измерения 1 in, 5%, З cm либо проценты vertical-align Значение либо проценты baseline, sub, sup, top, middle, 50% text-align Значение left, right, center, justify
Свойства шрифтов Свойство Значения Примеры font-family Название шрифта Helvetica, Serif, Symbol font-size 12 pt, +1, 120% Число/процент font-weight Число/значение normal, bolder, 100, 900 font-style Название стиля italic, oblique, normal fontvariant Название стиля normal, small-caps font Комбинация 12 pt Serif color Слово или 16 -ричное число red, green, blue, #FF 00 AA
Свойства фона Свойство Значения Примеры background- Название цвета или color значение в формате RGB white, #0000 FF background- url( ) image url (image. gif), url (http: // www. fakecorp. com/bgnd. jp g) repeat, repeat-x, repeat-y, no-repeat background- Название режима repeat backgroundattachment Название режима scroll, fixed background- Направление или процент position top, left, center, 20%, 65% background white url (image. gif) repeatx fixed Комбинация
Скачать презентацию Раздел 2 Web-ресурсы Интернет Тема 2 2 Технология
Помощь для лабораторных работ.ppt