Представление о вебконструировании n n Всемирная информационная

Представление о вебконструировании

n n Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время наиболее популярной службой сети Интернет. Большинство информационных ресурсов WWW представлены в виде веб-страниц, которые объединяются в веб-сайты.

n n Для создания веб-страниц используется язык разметки гипертекстовых документов HTML (Hyper. Text Markup Language). Разработан специально для создания вебдокументов, например веб-страниц.

Классификация методов и инструментов web-проектирования по степени автоматизации Методы и инструменты Визуальные, позволяют производить все работы по созданию веб-сайта с высокой степенью автоматизации и не требуют знания языка HTML. Они уменьшают трудоемкость и сроки разработки сайта Ручные (Программные) – разработка сайтов с помощью языков HTML, CSS

Инструменты-редакторы визуального конструирования Ш Microsoft Front. Page; Ш Dream. Weaver (Adobe ‑ Macromedia); Ш Namo. WEb. Editor.

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

Другие языки программирования для создания веб-сайтов n n Кроме языка разметки гипертекстовых документов HTML при создании веб-сайтов широкое применение получил язык сценариев Java Script. Он используется, для создания отдельных интерактивных, элементов вебстраниц, например, динамических меню, часов, календарей, форм запросов, счетчиков посещений страниц, систем голосований и. т. п. Для программирования на стороне сервера используют языки PHP или Perl.

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

Основные понятия HTML

Веб-страница — это документ (например, текстовый), размеченный с помощью специальных элементов HTML — тегов, или html-тегов. Такие страницы часто называют html-страницами. Этот документ можно создавать в обычных текстовых редакторах, например редакторе Блокнот, а затем сохранять созданные файлы с расширением. htm или. html.

§ Суть языка HTML заключается в разметке текста с помощью управляющих символов ‑ тегов, которые располагаются в угловых скобках. § Теги html бывают двух типов — парные и одиночные — и заключаются в угловые скобки <Имя_тега> § Большинство тегов парные, т. е. имеют открывающий элемент <Имя_тега> и закрывающий элемент </Имя_тега>.

Атрибуты. Значения атрибутов § Тег может иметь атрибуты и значения атрибутов. Атрибуты добавляют в тег для расширения или модификации его действий. § В языке HTML безразлично, в каком регистре вы записываете названия тегов и их атрибуты § Чувствительными к регистру являются только некоторые значения атрибутов. § Сразу возьмите за правило писать значения атрибутов в нижнем регистре

HTML-документ всегда должен начинаться открывающим тегом <html> и заканчиваться закрывающим </html>.

Внутри, как в контейнере, расположены два блока: 1. блок служебной (неотображаемой на экране) информации <head>…</head> 2. блок <body>…</body> (тело страницы), в котором размещается отображаемая браузером информация: тексты, рисунки, аудио и видеофрагменты, анимации и модели.

§ Внутри блока <head>…</head> размещается блок <title>…</title> и мета-теги, содержащие служебную информацию. § Текст, заключенный между тегами <title>…</title> отображается в заголовке окна браузера.

Структура HTML-документа <HTML> <HEAD> <TITLE>Название страницы</TITLE> </HEAD> <BODY> Здесь находится текст странички, различные картинки. </BODY> </HTML>

Таблица основных тегов языка HTML ТЭГИ НАЗНАЧЕНИЕ <html>…</html> Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ. <head>…</head> Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. <title>…</title> <body>…</body> Помещает название документа в оглавление программы просмотра страниц. Определяет видимую часть документа.

В HTML-документе можно разместить комментарии, которые браузером не отображаются: <! Комментарии>.

Пример 1 § Создать простой HTML-документ в Блокноте. Сохранить созданный файл prim 1. htm. Открыть созданный документ в браузере. § Структура такого документа представляется следующим образом: <html> <!Открытие HTML документа> <head> <title> Первый проект </title> </head> <body> <!Содержание (тело) документа> Текст первой странички </body> </html>

Результат отображения HTML-документа в браузере title body

Форматирование текста в HTMLдокументе § Для определения шрифта, его размера и цвета символов используется тег …. § Для того, чтобы этот тег работал, в него надо добавить атрибуты: size, color, face.

Атрибут size § Значениями атрибута size могут быть целые числа от 1 до 7. § Стандартный размер по умолчанию – 3. § Пример применения атрибута size: управление размерами шрифтов § В теге можно задавать относительные размеры шрифтов. Для этого перед значением размера добавляется знак «+» или «-» , говорящие о том, что браузер должен увеличить или уменьшить размер шрифта по умолчанию на соответствующую величину.

Атрибут color § § В браузерах используется 16 предопределенных цветов. Есть 2 способа представления цвета текста: 1. 2. § С помощью шестнадцатеричных чисел С помощью имени цвета, определенного в спецификации языка. Если шестнадцатеричные числа записываются как значения атрибута, то пред ними должен быть помещен символ #. § Например: color =”цвет символа” color=“blue” или color=“#10 c 74 c”

Атрибут face § Шрифт задается атрибутом face= “название шрифта” например Arial и т. д. § В атрибуте face автор может определить несколько значений, разделив их запятыми. Браузер сначала ищет первый шрифт, затем, если не находит его, пытается найти второй и т. д.

§ Важнейшими структурными элементами веб -страницы являются заголовки и абзацы. § Предусмотрено 6 уровней заголовков, которые обозначаются h 1, h 2, . . . h 6. Для описания уровней используются соответствующие теги, например, для третьего уровня — <h. З> и </h 3>. По умолчанию заголовок уровня 1 самый крупный, а уровня 6 — самый маленький.

Таблица тегов для форматирования текста Тег Назначение Полужирный шрифт Курсивный шрифт Результат использования Полужирный шрифт Курсивный шрифт Подчеркнутый шрифт <big> </big> Текст большого размера БОЛЬШОЙ Текст меньшего размера маленький

Таблица тегов для форматирования текста Тег Назначение <hl>…</hl> Задает уровень и размер заголовка <h 6>…</h 6> Разбиение текста на абзацы с переходом на новую строчку Переход на новую строку без создания абзаца <ol>. . </ol> Создает нумерованный список <ul>. . </ul> Создает ненумерованный список <li> Элемент списка Устанавливает размер текста в пределах от 1 до 7 Устанавливает цвет шрифта Выравнивание текста абзаца по левому краю. Допустимые значения: right (по правому краю), center(по центру).

Пример 2 § Вывести текст с использованием тега . <html> <body> Шрифт Arial красного цвета вдруг стал большим. Внезапно текст уменьшился. Текст превратился в Tahoma зеленого цвета </body> </html>

Результат выполнения

Пример 3 § Создание списков <HTML> <HEAD> </HEAD> <BODY> Ненумерованный список <UL type=disc> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </UL> Нумерованный список <OL> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </OL> </BODY> </HTML> Результат выполнения

Вставка изображений n n Изображения для веб-странице можно создавать и редактировать в различных графических редакторах, они также могут быть получены с помощью цифрового фотоаппарата, сканера, сети Интернет. Наиболее предпочтительны для изображений графические форматы gif, jpg и png, которые позволяют ускорить процесс загрузки.

n n n Для размещения изображений на вебстранице предназначен тег <img>. В простейшем случае он имеет вид <img src="Имя. Файла">. В общем случае он может содержать атрибуты, которые задают способ отображения.

Чтобы вывести на экран изображение, нужно: n n Указать, в каком файле оно хранится. Имя файла с изображением задается в разметке в качестве значения атрибута src (англ. Source источник). Обычно разработчики располагают файлы изображений в одном из подкаталогов каталога, хранящего HTML-документ. Традиционно этот подкаталог называют images или graphics. В этом случае значение атрибута src должно содержать относительную ссылку на файл, т. е. ту часть маршрута файла изображения, которая начинается с имени подкаталога.

Ссылка на изображение n n n <img scr=“computer. gif”> - файл размещен на локальном компьютере в том же каталоге. <img scr=“C: computer. gif”> - в другом каталоге локального компьютера <img scr=“http: //www. server. ru/computer. gif”> на удаленном сервере в интернете.

Атрибуты тега img (продолжение на следующем слайде) Атрибут Назначение src="Имя. Файла" определяет месторасположение файла с изображением. width=”x” ширина прямоугольника, выделяемого браузером для изображения, в пикселях height=”x” высота прямоугольника, выделяемого браузером для изображения, в пикселях. align=”значение атрибута” изображения можно выровнять на странице по горизонтали и вертикали. Значения атрибута: n left – выравнивание по левому краю (по умолчанию); n right – по правому краю; n top – по верхнему краю; n middle –выравнивание по середине; n bottom – выравнивание по нижнему краю.

Атрибут Назначение alt=”описание” Описание атрибута появляется в текстовых браузерах (вместо рисунка), в графических браузерах (до полной загрузки изображения), когда указатель мыши попадает на изображение. Необходимо всегда включать атрибут alt в тег img. hspace=”x” ширина свободного пространства слева и справа от изображения в пикселях. vspace=”x” ширина свободного пространства над и под изображением в пикселях. border =”x” Определение рамки в пикселях вокруг изображения.

Фоновые изображения n n Изображения можно использовать не только как иллюстрации к тексту, но и как фоновые изображения с рисунком. Для этого используется атрибут background, значением которого является имя файла с изображением. Он может применяться в элементе body. <body background=”back. gif”>

Создание таблиц n n В таблице может размещаться не только текст. . . но и кнопки или картинки. Таблицы позволяют достаточно контролировать расположение элементов на странице!

Чтобы разобраться в устройстве таблицы, рассмотрим простой пример: Такая табличка реализуется следующим кодом: <TABLE BORDER="1" WIDTH="200" BGCOLOR="#A 0 DDA 0"> <CAPTION>Таблица 1. </CAPTION> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE> n Таблица начинается тегом <TABLE> и заканчивается </TABLE>.

Тег <table> может включать следующие атрибуты: 1. 2. 3. 4. 5. 6. 7. 8. WIDTH="n" - определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек; ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа); BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки; BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатеричное значение цвета; CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселях; CELLPADDING="n" - определяет расстояние в пикселях между рамкой ячейки и текстом; BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатеричное число. BACKGROUND="picture. gif" - заполняет фон таблицы изображением;

9. FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения: • • • 10. VOID - рамки нет (значение по умолчанию); ABOVE - рисуется только граница сверху; BELOW - только граница снизу; HSIDES - границы сверху и снизу; VSIDES - только границы слева и справа; LHS - только левая граница; RHS - только правая граница; BOX - рисуются все четыре стороны; BORDER - также все четыре стороны. RULES="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения: • NONE - нет линий (значение по умолчанию); • GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже; • ROWS - только между рядами; • COLS - только между колонками; • ALL - между всеми рядами и колонками.

n n n Таблица может иметь заголовок - метки <CAPTION> и </CAPTION>. Располагаться он должен непосредственно после метки <TITLE. . . >. Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы: n n TOP - значение по умолчанию, заголовок над таблицей по центру; LEFT - заголовок над таблицей слева; RIGHT - заголовок над таблицей справа; BOTTOM - заголовок под таблицей по центру.

Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь атрибуты: n n ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо); VALIGN=CENTER - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю); BGCOLOR="#hhhhhh" - устанавливает цвет фона для строки. BACKGROUND="picture. gif" - заполняет фон строки изображением.

Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие атрибуты: n n n n n ALIGN=LEFT - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо); VALIGN=CENTER - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю); WIDTH="n" - определяет ширину ячейки в n пикселей; HEIGHT="n" - определяет высоту ячейки в n пикселей; COLSPAN="n" - устанавливает "размах" ячейки по горизонтали. Т. е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки; ROWSPAN="n" - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы; NOWRAP - присутствие этого атрибута показывает, что текст должен размещаться в одну строку; BGCOLOR="#hhhhhh" - устанавливает цвет фона ячейки; BACKGROUND="picture. gif" - заполняет фон ячейки изображением.

Сложные таблицы Во время создания HTML-таблицы очень полезными могут быть два атрибута colspan и rowspan. n Что касается сложных таблиц, то их построение без этих двух атрибутов невозможно. n Атрибуты colspan и rowspan предназначены для объединения соответственно нескольких столбцов или строк HTML-таблицы в одну ячейку. n Ниже приведен пример разметки сложной таблицы: <table width="100%" border=“ 1”> <tr><td со 1 sраn="2">Столбцы 1 и 2 oбъeдинeны </td></tr> <tr><td align="center">Cтpoкa 2</td> <td rowspan="2">Стpoка 2 и 3 oбъeдинeны </td></tr> <tr><td align="center">Cтpoкa 3</td></tr> </table> n Вывод этой разметки браузером показан на рисунке.

Ссылки Ссылка позволяет связать текст или картинку с другими документами и переходить на них по нажатию ссылки. n За организацию ссылок на языке HTML отвечает тег <a> </a>, который использует следующий шаблон: <a href = "адрес ссылки"> текст для щелчка по нем мышью < /а >. n Ссылка состоит из четырех частей: • открывающий тэг <A> • связь с документом URL • текст гипертекстовой ссылки • закрывающий тэг </A> n ПРИМЕР: <a href =”second. html”> Ссылка на локальную страницу </a>

Ссылки Относительные Ссылки на файл, находящегося на том же компьютере Абсолютные Ссылки на файлы других компьютеров и в Интернет

Примеры относительных ссылок 1. <A HREF= «second. html» > Переход на документ «second. html» , находящийся в одном каталоге с текущим документом (рис. 3. 10) 2. <A HREF= «folder/second. html» > Переход на файл «second. html» в подкаталоге «folder» текущего каталога (рис. 3. 11); Рис. 3. 10. Файл находится в том же каталоге Рис. 3. 11. Файл находится в подкаталоге 3. <A HREF=. . . /Site 2/second. html» > подняться вверх на один шаг по дереву каталогов, перейти в каталог «Site 2» и осуществить переход на «second. html» Рис. 3. 12. Файл находится в соседнем каталоге (рис. 3. 12).

n В абсолютной ссылке точно указаны компьютер, каталог и файл. <A HREF= «http: //www. aichyna. com/user/registr. shtml» >

n Гиперссылкой может служить любое изображение, поддерживаемое браузером. Для этого между тегами <a href >. . . </a > нужно вставить тэг изображения, например: n <a href="d 1. htm"> <img src="face. gif"> </a> n Возможно совместное использование текста и графики, например: <a href="kolas. htm"> <img src="kolas. jpg"> Якуб Колас </a> n n В этом примере перейти на страничку Якуба Коласа kolas. htm можно щелкнув по небольшому портрету kolas. jpg или надписи под ним. Тег обеспечивает подпись на новой строке под портретом Ссылка на страницу Я. Коласа

n Тег <A>может содержать атрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на ссылку, то появится ее описание – содержимое этого атрибута (рис. 3. 13). <a href=“http: //www. microsoft. com/visualc/” title=”C++MSDN”> Ссылка на страницу в Интернет </a> Рис. 3. 13. Изображение ссылки в браузере

Пример 4 <! - first. html --> <html> <head> <title>1 st HTML</title> </head> <body> <a href="second. html“ title=“Ссылка на 2 -ю страницу”> Ссылка на локальную страницу </a> <a рref="http: //www. microsoft. com/visualc/"> Ссылка на страницу в Интернет </a> </body> </html>