Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

ВВЕДЕНИЕ

Большинство людей в той или иной степени знакомо с одной из основных услуг Интернета – World Wide Web (WWW или “всемирной паутиной”). Благодаря этому мы можем на компьютере находить и просматривать документы, содержащие текст, графику или звук практически на любую тему. Следует заметить, что всемирная паутина это относительно недавнее изобретение. В 1990 году сотрудник Европейской лаборатории ядерной физики Тим Беренс-Ли изложил основные принципы WWW. Это явилось причиной появления новых технологий программирования в сети Интернет.

В последнее время часто можно услышать словосочетание Web-сервер и слово браузер. Web-сервер обозначает компьютер, который предоставляет другим компьютерам страницы гипертекста в ответ на их запрос. Когда этот гипертекст по линиям связи приходит на Ваш компьютер, то на нем должна быть уже загружена программа, которая гипертекст сможет правильно отобразить. И такая программа называется браузер. В настоящее время наиболее распостраненные браузеры – это Microsoft Internet Explorer, Mozilla Firefox, Netscape Navigator и Opera.

Далее мы рассмотрим возможности создания страниц гипертекста (Web-страниц). А так как самая популярная программа-браузер Microsoft Internet Explorer входит в состав операционой системы Windows, то Вы сразу же можете посмотреть, как Ваш гипертекст выглядит на экране.

Известно, что HTML является языком разметки и используется для форматирования данных (текста и графических изображений) в сети Интернет. При этом в качестве управляющих элементов используются теги. Тегом считается управляющее слово, заключенное в угловые скобки. Например, отметить, что данный документ является страницей гипертекста можно с помощью открывающего тега <HTML> и закрывающего тега </ HTML>.

НЕ нашли? Не то? Что вы ищете?

Теги не чувствительны к регистру, однако, тем не менее, для улучшения восприятия текста, желательно использовать символы в одном регистре (принято использовать большие буквы). Заметим, что типичной ошибкой программирования является пропуск закрывающих тегов. Эта ошибка может заметно исказить отображаемую Web – страницу, однако обычно не приводит к полной остановке отображения страницы браузером. Для создания страниц гипертекста мы в дальнейшем мы будем использовать редактор Блокнот, который является одним из компонентов Windows. Для его запуска следует нажать кнопку Пуск, затем выбрать раздел Программы, далее строку Стандартные и там Вы уже увидите программу Блокнот.

В основном HTML-файлы (файлы с гипертекстом) обычно имеют расширение html (правда возможны и другие расширения). Поэтому у Ваших файлов может быть любое имя, но расширение обязательно должно быть html. Для того, что увидеть результат работы, необходимо запустить Internet Explorer и затем открыть выбранный файл (другой более простой вариант – двойной щелчок по пиктограмме созданного файла с гипертекстом).

Начнем с подробного комментария простого HTML-файла, который как мы уже говорили, можно написать в Блокноте (листинг 1).

Листинг 1.

1 <HTML>

2 <HEAD>

3 <TITLE>Программирование для Internet

4 </TITLE>

5 </HEAD>

6 <BODY>

7 <P>Добро пожаловать на наш Web-сайт!</P>

8 </BODY>

9 </HTML>

При наборе данного текста в Блокноте нумерацию вводить не нужно (мы ее поставили лишь для удобства последующего комментария). Тег в первой строке ( <HTML> ) сообщает браузеру о том, что за этим тегом и вплоть до закрывающего тега </HTML> (строка 9) следует текст на языке HTML. Отметим, что файл HTML всегда должен начинаться с тега <HTML> в первой строке документа и заканчиваться тегом </HTML> в последней строке.

Каждый файл HTML подразделяется на две основные части – элемент заголовка, который содержит общую информацию о документе, и тело документа, в которое помещается содержательная часть страницы. В строках со 2-й по 5-ю находится секция заголовка нашей Web – страницы (заголовок располагается между тегами <HEAD> и </HEAD>). Указание заголовка является обязательным требованием для каждого HTML - документа. В заголовке можно указать текст, который помещается в верхней части окна браузера. Этот текст вводится при помощи парных тегов <TITLE> и </TITLE>, помещаемых внутри заголовочной части страницы. Заголовок отображается на цветном фоне в полосе верхней части окна браузера, при этом в заголовочной части кроме заголовка могут располагаться другие элементы (в дальнейшем мы увидим какие).

В строке 6 тег <BODY> открывает элемент BODY (тело документа). В тело документа помещается то содержание, которое должно отображаться браузером (в основном это текстовая информация и изображения). Для размещения текста в HTML-документе используются различные теги. В строке 7 расположен параграф - <P>Добро пожаловать на наш Web-сайт! </P>. Параграф размещается отдельно от остального материала страницы и он отделяется пустыми строками, автоматически вставляемыми до и после текста параграфа. Таким образом, после создания текста с информацией указанной на листинге.1, сохранения этого текста в файле с расширением html и двойного щелчка мышкой по пиктограмме созданного файла в окне браузера мы увидим картину, подобную показанной на рис.1.

Рис.1.

ОСНОВНЫЕ ТЕГИ HTML

Заголовки. Вывнивание по горизонтали.

Заголовки являются простым средством разметки текста, а именно изменения размера текста в зависимости от уровня заголовка. Обычно используется 6 тегов заголовков (начиная от Н1 до Н6) для выделения новых разделов и подразделов страницы. При этом Н1 имеет наибольший размер букв, следующий тег Н2 меньше и т. д. В примере на листинге 2 в HTML–файле продемонстрированы теги заголовков различных уровней.

Листинг 2.

<HTML> <HEAD> <TITLE> Заголовки

</TITLE> </HEAD> <BODY> <CENTER>

<H1> Заголовок 1 - го уровня</H1> <H2> Заголовок 2 - го уровня</H2>

<H3> Заголовок 3 - го уровня</H3> <H4> Заголовок 4 - го уровня</H4>

<H5> Заголовок 5 - го уровня</H5> <H6> Заголовок 6 - го уровня</H6>

</CENTER> </BODY> </HTML>

В строке <CENTER> используется тег CENTER, который центрирует по горизонтали в окне браузера содержание, заключенное между тегами <CENTER> и </CENTER>. Если этот тег не указать, то по умолчанию выравнивание производится по левой стороне. На рис.2 показан результат просмотра данного файла в окне браузера.

Рис. 2.

Часто требуется обеспечить выравнивание того или иного фрагмента текста (не только заголовков) либо по ширине страницы, либо по левому полю, либо по правому. Для этого в тегах можно использовать параметр align. Например, если значение align=JUSTIFY, то это соответствует выравниванию по ширине страницы. На листинге 3 приведен пример с использованием этого параметра, а результат отображения страницы в окне браузера на рис.3.

Листинг 3.

<HTML> <HEAD><TITLE> Заголовки</TITLE> </HEAD> <BODY>

<h3 align=center> Заголовки </h3>

<p align=JUSTIFY> Заголовки являются простым средством разметки текста, а именно изменения размера текста в зависимости от уровня заголовка. Обычно используется 6 уровней заголовков (начиная от Н1 до Н6) для выделения новых разделов и подразделов страницы. </p> </BODY> </HTML>

Рис.3.

Другие возможные значения для параметра align – left, right, center.

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

Например, в рассмотренном выше примере можно следующим образом создать красную строку:

   Заголовки являются простым средством

В дальнейшем мы увидим, как это можно выполнить более эффективным способом. На листинге 4 приведен файл с формированием красных строк в двух параграфах подобным образом.

Листинг 4.

<HTML> <HEAD> <TITLE>Отступ </TITLE> </HEAD> <BODY>

<P style="text-indent:30">Известно, что HTML является языком разметки и используется для форматирования данных (текста и графических изображений) в сети Интернет.</P> </BODY> </HTML>

Как видно из данного фрагмента у параграфа задается свойство text-indent, которое определяет отступ красной строки. При этом задается величина красной строки в пикселах. Можно задать отступ красной строки в сантиметрах:

<P style="text-indent:1cm">

или в процентах от ширины экрана:

<P style="text-indent:15%">

Стилевое оформление текста

В языке HTML текст можно отображать текст жирным шрифтом, подчеркиванием или курсивом. В этом разделе мы разберем – как технически это сделать. Рассмотрим следующий пример на листинге 5.

Листинг 5.

<TITLE> Стилевое оформление </TITLE> </HEAD> <BODY>

<H1 ALIGN =center> <U> Добро пожаловать на наш сайт! </U></H1>

Мы разработали эту страницу для обучения

возможностям языка <EM>HTML</EM>. Далее Вы познакомитесь с многими возможностями языка <STRONG> <U>HTML </U></STRONG> </BODY> </HTML>

В этом примере нам встречается подчеркивание. Для этого используются тег <U> и соответственно </U>. Обратите внимание на строку ALIGN = center в теге <H1>. Это обеспечивает выравнивание заголовка первого уровня по центру.

Тег <EM> позволяет обеспечить курсив последующего текста. Следует заметить, что когда Вы используете вложенные теги, то не забывайте закрывать их в обратном порядке. Тег <STRONG> применяется для жирного шрифта последующего текста. На рис.4 показан результат отображения файла в окне браузера.

Рис.4.

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

Листинг 6.

<PRE> Щелкните на названии любой строки,

выделяемой якорем,

чтобы перейти к

соответствующей странице.

</ PRE>

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

</BODY> </HTML>

Гиперссылки

Самой важной особенностью HTML является возможность создавать гиперссылки на другие документы, находящиеся или здесь же (в той же папке или просто на этом же компьютере), или в каком-то другом месте (на других компьютерах в сети Internet).

В HTML для ссылок на другие Web-страницы в качестве якоря может выступать как текст, так и изображения. Далее на листинге 7 приведен пример использования якорей на уже созданные нами страницы (предыдущие HTML-файлы). Заметим, что в программе принято, что предыдущие тексты располагаются в файлах программа1.html и программа2.html. Если Вы сохранили свои разработки в других файлах, то Вам следует скорректировать названия.

Листинг 7.

<TITLE> Гиперссылки </TITLE> </HEAD> <BODY>

<H2> <U> Пример использования якорей </U></H2>

<P> Щелкните на названии любой строки, выделяемой якорем,

чтобы перейти к соответствующей странице:</P>

<P> 1 гиперссылка <A HREF="программа1.html">

Запустите Вашу первую страницу </A></P>

<P> 2 гиперссылка <A HREF="программа2.html">

Запустите Вашу вторую страницу </A></P>

</BODY> </HTML>

На рис.5 приведен результат выполнения файла в окне браузера.

Рис.5.

Первая ссылка на другую страницу приведена во фрагменте - <P> 1 гиперссылка <A HREF="программа1.html"> Запустите Вашу первую страницу </A></P>. Ссылки вводятся в текст с помощью элемента А (якорь). Важным параметром якоря является адрес. Для задания адреса необходимо использовать атрибут HREF тега якорь следующим образом: <A HREF = “адрес”>.

В качестве адреса указывается местонахождение файла. В данном случае предполагается, что файлы (программа1.html и программа2.html) находятся в одном каталоге, поэтому в качестве ссылки указывается только имя файла. Если Вы хотите указать ссылку на файл находящийся в другом каталоге, то необходимо указать полный путь к этому файлу. Это выглядит следующим образом -

<A HREF= "C:/inrormatika/программа1.html">.

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

<A HREF="http://www. *****">.

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

<A HREF = "mailto: электронный адрес"> отправить письмо… </A>.

Например,

<A HREF="mailto:*****@***ru"> Мой адрес электронной почты</A>.

Можно также указать гиперссылку на документ созданный в одном из приложений (например, в Microsoft Word или в Microsoft Excel). В этом случае при открытии подобной страницы Вам будет предложено открыть рассматриваемый файл в соответствующем приложении либо сохранить файл на диске. На листинге 8 показан пример с гиперссылками на документы Word и Excel.

Листинг 8.

<TITLE> Гиперссылки </TITLE> </HEAD> <BODY>

<H2> <U> Пример использования якорей </U></H2>

<P> Щелкните на названии любой строки, выделяемой якорем,

чтобы перейти к соответствующему файлу.</P>

<P> 1 гиперссылка <A HREF="Файл1.doc">

Откройте файл с методическими указаниями </A></P>

<P> 2 гиперссылка <A HREF="Книга1.xls">

Файл с электронной таблицей</A></P>

</BODY> </HTML>

По умолчанию все гиперссылки отображаются синим цветом с подчеркиванием. Уже просмотренные гиперссылки меняют цвет на фиолетовый. В дальнейшем мы рассмотрим каким образом можно изменить эти цвета.

Изображения

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

Листинг 8.

<TITLE> Включение изображений </TITLE> </HEAD>

<H1> ИЗОБРАЖЕНИЕ </H1>

<IMG SRC="рис1.jpg" BORDER="1" HEIGHT="250" WIDTH="350"

ALT = “Место фотографии”>

</BODY> </HTML>

В строке <BODY BGCOLOR="#CDCDCD"> добавляется фон. Здесь задается заливка экрана некоторым цветом – в данном случае серым. Цвет фона можно задать одним из двух методов: либо указать цвет по названию (таких названий более 100 ,например navy – темно-синий, а crimson - малиновый), либо использовать шестнадцатиричный код того цвета, который мы хотим использовать. Когда мы указываем название цвета, то используется следующий синтаксис :

<BODY BGCOLOR="navy">

Поясним теперь числовое задание цвета. Все цвета образуются смешением красного, зеленого и синего цвета. Первые два символа (после решетки) представляют интенсивность красного в данном цвете фона, следующие два отвечают за интенсивность зеленого, а последние два представляют синий цвет. Значение 00 для этих символов соответствует наиболее бледному оттенку, который может принимать данный цвет, а FF – самому яркому. В соответствии с таким форматом записи значению #FF0000 будет соответствовать самый яркий красный цвет.

В строке <IMG SRC="рис1.jpg" BORDER="1" HEIGHT="250" WIDTH="350"> задается изображение на странице. Тег <IMG> позволяет задавать местоположение файла. Имя и путь к файлу задается в атрибуте SRC. Если файл с изображением (рис1.jpg) находится в той же папке, что и HTML-файл, то достаточно указать просто его имя. Если файл с изображением находится в другом каталоге, то требуется указать его полный путь. Например, это может выглядеть следующим образом:

<IMG SRC= "C:\Информатика\рис1.jpg" BORDER="1" HEIGHT="250" WIDTH="350">.

Если файл располагается во вложенной папке (относительно папки, где располагается HTML-документ), то следует оформить тег следующим образом:

<IMG SRC="Новая папка/рис1.jpg" BORDER="1" HEIGHT="250"

WIDTH="350" ALT = “Место фотографии”>

В теге IMG существует атрибут BORDER=х, который обозначает наличие границ. Если х=1, то толщина рамки будет равна 1 пикселю, если х=2, то толщина - 2 пикселя и т. д.

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

Вы можете также использовать в качестве фона не цвет, а рисунки (фоновые изображения). В этом случае необходимо заменить строку <BODY BGCOLOR="#CDCDCD"> на строку с графическим объектом, содержащим фоновое изображение. Так, может быть использована следующая конструкция <BODY BACKGROUND = "C:/информатика/рис2.jpg">. В этом случае атрибут BACKGROUND устанавливается значением имени файла с графическим изображением.

На рис.6 показано, к каким изменениям в окне браузера приведет включение фонового рисунка. Изображение, используемое в качестве фонового, не обязательно должно быть большого размера. Браузер укладывает этим изображением всю поверхность фона по горизонтали и вертикали, как кафельной плиткой. Фоновые изображения могут придать Вашим страницам приятный вид.

Рис.6.

Старайтесь не пользоваться изображениями с резкими переходами цвета, поскольку они будут отвлекать внимание пользователя. Пример на рис.6 как раз не отвечает данным требованиям.

Использование изображений в качестве якоря

Теперь, после того как Вы научились добавлять в страницу Web изображения, рассмотрим каким образом можно использовать изображение в качестве якоря на другие страницы. Далее на листинге 9 приведен пример, где это реализуется.

Листинг 9.

<TITLE> Навигация с изображениями </TITLE> </HEAD>

<IMG SRC="рис2.jpg"

BORDER="1" HEIGHT="100" WIDTH="100" ALT = "ПЕРВАЯ СТРАНИЦА"> </A><BR>

<IMG SRC="рис3.jpg"

BORDER="1" HEIGHT="100" WIDTH="100" ALT = "ВТОРАЯ СТРАНИЦА"> </A> </BODY> </HTML>

В данной программе для создания гиперссылки используются элементы A и IMG. В строке <A HREF="программа2.html"> указывается какой файл вызывается при щелчке по изображению. Само изображение задается традиционным способом :

<IMG SRC= "рис2.jpg" BORDER="1" HEIGHT="100" WIDTH="100" ALT = "ПЕРВАЯ СТРАНИЦА">.

Заметим также, что в программе используется тег <BR>, который позволяет перейти на следующую строку.

Форматирование текста с помощью тега <FONT>

Рассмотрим, как можно изменять цвет и форматирование текста страницы. В следующем фрагменте (листинг 10) приведен простой пример на эту тему.

Листинг 10.

Мы разработали</FONT><br>

этот сайт </FONT><br>

для изучения </FONT><br>

языка</FONT><br>

</BODY> </HTML>

Здесь используется тег FONT и несколько его атрибутов. Первый из них – это атрибут COLOR, задающий цвет форматированного текста. При этом нужно либо указать цвет по названию, либо задать его шестнадцатиричный код. Вторым в примере является атрибут SIZE, используемый для изменения размера форматируемого текста. Здесь после SIZE следует указать число пунктов, на которые увеличивается размер шрифта относительно стандартного размера шрифта для данного браузера.

В текст можно ввести горизонтальные линии для разделения фрагментов текста. Для этого используется тег <HR>. Например,

<HR WIDTH=25% SIZE=1>

в текст документа включается горизонтальная линейка, длина которой составляет 25 процентов от ширины окна браузера. При этом линейка создается с новой строки. Если необходимо сделать заливку линии цветом, то следует использовать параметр COLOR:

<HR WIDTH=25% COLOR =BLACK SIZE=1>

При этом толщина линии определяется значением параметра SIZE. Далее на листинге 11 показан HTML-код страницы с использованием нескольких горизонтальных линий.

Листинг 11.

Мы разработали</FONT><br>

этот сайт </FONT><br>

для изучения </FONT><br>

языка</FONT><br>

</BODY> </HTML>

В дальнейшем мы будем использовать теги div и span. Эти теги не выполняют заметных визуальных эффектов при отображении. Однако рассматриваемые теги помогают задать оформление отдельных блоков. Отличие этих тегов друг от друга заключается в переводе строки (для тега div) и отсутствии перевода (для тега span). Далее на листинге 11 приведен HTML-код страницы иллюстрирующий эти теги. На рис.7 приведен пример подчеркивающий это отличие.

Листинг 11.

<HTML> <HEAD><TITLE> Пример тегов div и span

</TITLE> </HEAD> <BODY>

Пример тега <strong>div</strong><div>

   Заголовки являются простым средством

разметки текста, а именно изменения

размера текста в зависимости от уровня заголовка.

</div>Далее приводится пример тега <strong>span</strong>

<span>Обычно используется 6 уровней заголовков

(начиная от Н1 до Н6) для выделения новых разделов

и подразделов страницы. </span>Завершение примеров

по рассматриваемым тегам.</BODY> </HTML>

Рис.7.

Неупорядоченные списки

На листинге 12 приводится пример вывода текста в виде неупорядоченного списка. Элемент неупорядоченный список создает список, элементы которого помечаются маркером. Начинаться и заканчиваться неупорядоченный список должен тегами <UL> и </UL>.

Листинг 12.

<TITLE> СПИСКИ </TITLE> </HEAD>

<UL> <LI> МОСКВА </LI> <LI> МИНСК </LI> <LI> ЛОНДОН </LI>

На рис.8 показан результат выполнения данного файла в окне браузера.

Рис. 8.

Каждый элемент неупорядоченного списка должен вводиться тегом <LI> . Закрывающий тег </LI> не является обязательным.

Вложенные и упорядоченные списки

Вложенные списки составляются так же, как и простой список, рассмотренный нами ранее, просто вложенные списки содержатся внутри другого списка. Каждый новый вложенный список сдвигается вправо относительно того, в который он вложен, и у него меняется маркер. Далее приведен пример вложенного списка (листинг 13), а результат отображения данного файла в окне браузера показан на рис.9.

Листинг 13.

<TITLE> СПИСКИ пример2 </TITLE>

</HEAD><BODY BGCOLOR="#CDCDCD">

<UL> <LI> МОСКВА </LI>

<UL> <LI> Шатура </LI> <LI> Красногорск </LI>

<LI> Химки </LI> </UL>

<LI> НИЖНИЙ НОВГОРОД </LI> <UL>

<LI> Кстово </LI> <LI> Бор </LI> </UL> </UL>

</BODY> </HTML>

Рис. 9.

Упорядоченные списки начинают и заканчиваются с помощью тегов <OL> и </OL>. Рассмотрим следующий файл на данную тему (листинг 14). Здесь значение параметра TYPE определяет какая (в виде букв или цифры) нумерация элементов списка будет производиться. Например, в данном примере задается автоматическая нумерация сначала римскими, а затем арабскими цифрами. Если бы нам понадобилось задать нумерацию в виде букв, то тогда мы бы определили упорядоченный список следующим образом:

<OL TYPE="a">

Таким образом, мы можем создавать вложенные упорядоченные списки. Пример приведен на рис.10.

Листинг 14.

<TITLE> СПИСКИ пример 3 </TITLE> </HEAD>

<LI> МОСКВА </LI> <OL TYPE="1">

<LI> Шатура </LI> <LI> Красногорск </LI>

<LI> Химки </LI> </OL>

<LI> НИЖНИЙ НОВГОРОД </LI> <OL TYPE="1">

<LI> Кстово </LI> <LI> Бор </LI> </OL> </OL>

</BODY> </HTML>

Рис.10.

Основы таблиц HTML

Другой способ форматирования – использование таблиц и на листинге 15 приведен пример файла, создающего простую таблицу.

Листинг 15.

<TITLE> Таблица </TITLE> </HEAD>

<CAPTION> Пример простой таблицы</CAPTION>

<TR> <TH> Заголовок 1 </TH> <TH> Заголовок 2 </TH> </TR>

<TR> <TD> 1 ELEMENT </TD> <TD> 2 ELEMENT </TD> </TR>

<TR> <TD> 3 ELEMENT </TD> <TD> 4 ELEMENT </TD> </TR>

<TR> <TD> 5 ELEMENT </TD> <TD> 6 ELEMENT </TD> </TR>

<TR> <TD>7 ELEMENT </TD> <TD> 8 ELEMENT </TD> </TR>

</TABLE> </BODY> </HTML>

Результат отображения данного файла в окне браузера показан на рис.11.

Рис. 11.

Все теги и содержание таблицы должны размещаться между тегами <TABLE> и </TABLE >. Первый из этих тегов имеет несколько атрибутов. В атрибуте BORDER можно задать толщину рамки в пикселях. Если Вы хотите сделать рамку невидимой, то следует указать значение BORDER=”0”. Горизонтальное выравнивание (таблицы в целом) определяется атрибутом ALIGN. Атрибут WIDTH задает ширину таблицы. Вы можете этот параметр задавать количеством пикселей и в процентах относительно ширины окна браузера. В рассматриваемом случае ширина таблицы задается - 70 процентов от ширины окна браузера. В строке <CAPTION> Пример простой таблицы</CAPTION> задается заголовок таблицы. Этот текст выводится непосредственно над таблицей. Элемент строки таблицы <TR> выполняет форматирование ячеек отдельной строки таблицы. В строку попадают все ячейки, перечисленные между тегами <TR> и </TR>. Самым мелким объектом таблицы является ячейка данных. Существуют только два типа ячеек: размещаемые в разделе заголовка <TH>…</TH> и в разделе тела таблицы <TD>…</TD>. Отличие этих элементов в том, что для заголовка автоматически выполняется выделение содержимого ячеек жирным шрифтом.

Рассмотрим теперь каким образом можно создать следующую таблицу (рис.12).

Рис.12.

Для этого следует создать следующий HTML-файл.

Листинг 16.

<HTML> <HEAD> <TITLE> Таблица </TITLE> </HEAD>

<CAPTION> Пример таблицы c объединением ячеек</CAPTION>

<TR > <TH colspan="3" ALIGN ="center"> Заголовок </TH> </TR>

<TR ><TD align="center"> 1 ELEMENT </TD>

<TD align="center"> 2 ELEMENT </TD> <TD> 3 ELEMENT </TD> </TR>

<TR><TD colspan="2" align="center"> 5 ELEMENT </TD> <TD align="center"> 7 ELEMENT </TD> </TR></TABLE> </BODY> </HTML>

Поясним данный фрагмент. В таблице есть возможность увеличить размер некоторых ячеек по сравнению с остальными. Для этого нужно в открывающем ячейку теге указать атрибут COLSPAN. Этому атрибуту присваивается числовое значение определяющее число объединяемых ячеек.

Внутренние гиперссылки

Ранее мы рассматривали связывание различных Web-страниц с помощью текстовых и графических якорей. Однако, если страница большая, то удобно организовывать гиперссылки на разделы страницы (это так называемые внутренние гиперссылки). Рассмотрим следующий пример на эту тему.

Листинг 17.

<HTML> <HEAD><TITLE> Добавление внутренних гиперссылок </TITLE> </HEAD><BODY BGCOLOR="#CDCDCD">

<CENTER><A NAME="1C"> </A><P> <FONT COLOR ="red" SIZE="+3" FACE="Arial"> КОНЦЕПЦИЯ СИСТЕМЫ 1С:ПРЕДПРИЯТИЕ<P> 1С:Предприятие является универсальной системой автоматизации деятельности предприятия ( занимающегося как торговлей так и производством). При этом 1С:Предприятие может быть использована для автоматизации самых разных участков работы. Основной особенностью системы 1С:Предприятие является возможность ее конфигурирования для каждого варианта использования (программу можно настроить для “себя”). И функционирование системы делится на 2 процесса – конфигурирование (создание вида или варианта использования программы) и исполнение (собственно работа с программой 1С:Предприятие ). На этапе конфигурирования можно создавать различные виды объектов.. </P><A HREF="#1C"> Перейти к концепции системы 1С:ПРЕДПРИЯТИЕ</A></BODY> </HTML>

Здесь в строке <A NAME="1C"> вводится внутренняя гиперссылка, а далее по тексту обеспечивается возможность перехода по данной гиперссылке с помощью тега - <A HREF="#1C">. Вы можете также создавать гиперссылки на закладки на других страницах html, указывая ссылку в виде HREF="имя_страницы. html#имя_ссылки”.

СОЗДАНИЕ КАРТ ГИПЕРССЫЛОК

Ранее мы рассматривали создание гиперссылок при наведении курсора мыши на изображение. Теперь мы рассмотрим создание карт ссылок. В этом случае в качестве якоря гиперссылок используются отдельные части изображения, называемые горячими точками. В примере приведенном на листинге 17 тег <map> создает карту ссылок и присваивает ей имя, по которому на нее можно ссылаться.

Листинг 17.

</map>

</body> </html>

Все элементы карты ссылок располагаются между тегами <map> и </map>. Обязательным атрибутом тега <map> является атрибут name:

<map name="prim">

Далее в строке

…usemap="#prim">

используется имя элемента для ссылок на карту. Горячие точки на изображении вводятся элементами area. Каждый тег <area> должен содержать следующие атрибуты: href – адрес гиперссылки для данной области, shape и coords определяют тип геометрической фигуры горячей области и ее координаты. В строках

<area href="str1.html" shape="rect"

coords="1,1,200,100">

создается горячая область в форме прямоугольника, координаты которого задаются в атрибуте cords. Координаты создаются при помощи координатных пар, состоящих из двух чисел, определяющих положение по оси x и y. Ось x располагается горизонтально и начинается с левого верхнего угла, а ось y направлена вниз из этой же точки. Для определения прямоугольной горячей области достаточно задать координаты левого верхнего и правого нижнего углов прямоугольника. В записи первые два числа – это координаты левого угла, а следующие два числа координаты правого угла. В рассматриваемом примере мы создаем для данной картинки две различные гиперссылки.

Кроме прямоугольника существуют другие фигуры для формирования областей гиперссылок. Например,

<area href="str1.html" shape="poly"

coords="1,1, 50,1,200,100,100,100">.

В этом случае мы задаем прямоугольник произвольной формы, координаты которого определяются в атрибуте cords простым перечислением координат всех вершин многоугольника.

Еще один вариант фигуры можно задать следующим образом:

<area href="str1.html" shape="circle"

coords="50,60, 30">.

В этом случае в качестве области на экране формируется круг, а в качестве координат задаются координаты центра круга и его радиус.

Чтобы связать с картой ссылок графическое изображение, Вы должны включить атрибут usemap следующим образом:

<img src="Новая папка/рис1.JPG" width="200" height="200" usemap="#prim">.

ТЕГИ <META>

Для поиска информации в Web используются поисковые системы. Поисковые системы исследуют сайты по ссылкам на их страницах, запоминают информацию, идентифицирующую каждую страницу. Теги <META> содержат два обязательных атрибута. Первый из них, NAME, используется для уточнения самого тега <META>. В другом атрибуте CONTENT задаются данные, предназначенные для поисковых систем. В следующих строках используется элемент META с атрибутом keywords:

<META NAME=”keywords” CONTENT=”Сайт, тег, гиперссылки, методические разработки”>.

В данном случае используется ключевое слово keywords и далее перечисляются ключевые слова характеризующие тематику условного сайта. Эти ключевые слова используются поисковыми системами при поиске в Web. Если часть из указанных Вами слов будет присутствовать в строке поиска, заданной на клиентском компьютере, то Ваш сайт попадает в список найденных сайтов.

Возможен другой вариант использования тега META:

<META NAME=”discription” CONTENT=” Сайт c методически разработками по Web-дизайну.”>. Здесь вместо списка ключевых слов приводится краткое описание вашего сайта. Это описание используется поисковыми системами для классификации вашего сайта.

ТЕГ <FRAMESET>

Ранее рассмотренные страницы имели возможность ссылаться друг на друга, но не могли воспроизводиться браузером одновременно. Одновременно отобразить несколько страниц можно с помощью тега <frameset>. Для этого в нашей странице содержащей фреймы располагается строка

<frameset cols="200,*">

Эта запись сообщает браузеру, что в документе будут располагаться фреймы, описание которых приводится между тегами <frameset> и </frameset>. При этом параметр cols определяет положение фреймов в окне браузера. Значение, присваиваемое этому атрибуту задает ширину фрейма в пикселах или в процентах относительно ширины окна браузера. В приводимом на листинге 18 примере объявляются два фрейма. Первый из них начинается с левой стороны и имеет ширину 200 пикселей. Второй фрейм занимает все оставшееся пространство (для этого используется символ звездочка).

После распределения экранного пространства необходимо задать файлы, которые будут выводиться во фреймах. Делается это с помощью элементов

<frame name ="nav1" src="str1.html">

В этом элементе в атрибуте SRC указывается адрес выводимой в данный фрейм страницы. Атрибут name используется для идентификации фрейма. Это можно использовать в гиперссылках для указания фрейма в который нужно загружать целевую страницу. Например, гиперссылка

<A href=”primer. html” target=”v1”>

будет вызывать загрузку файла primer. html во фрейм со значением v1 у атрибута name.

На листинге 18 показан пример создания фреймов, а результат этой страницы приведен на рис.13.

Листинг 18.

</frameset>

</html>

Рис.13.

Рассмотрим еще один пример. Необходимо создать страницу показанную на рис.14.

Рис.14.

Здесь на странице два фрейма. В левый фрейм выводится страница с двумя гиперссылками в виде картинок. HTML-файл (в качестве имени этого файла используется lev. html) выводимый в левый фрейм показан на листинге 19.

Листинг 19.

<html>

<body>

</body></html>

В этом файле указывается, что загрузка при щелчках по гиперссылкам в левом фрейме производится во второй фрейм (правый). Здесь также в тегах рисунков устанавливается ширина картинок. На листинге 20 показан файл соответствующий рис.14.

Листинг 20.

<html>

</frameset>

</html>

ВЛОЖЕННЫЕ ТЕГИ <FRAMESET>

Страницы можно сделать более интересными, если использовать вложенные фреймы. Рассмотрим страницу показанную на рис.15.

Рис.15.

Файл соответствующий данному рисунку приведен на листинге 21. Первый уровень тегов frameset вводится в строках

<frameset cols="200,*">

<frame name ="nav1" scrolling="no" src="frem1.html">

Здесь указывается отсутствие скроллинга и определяется файл загружаемый в левый фрейм. После этого правый фрейм разделяется на 2 части горизонтальной линией.

Листинг 21.

</frameset>

</frameset> </html>

Введение

Партнерка на США и Канаду по недвижимости, выплаты в крипто

ВВЕДЕНИЕ

ОСНОВНЫЕ ТЕГИ HTML

Заголовки. Вывнивание по горизонтали.

Стилевое оформление текста

Гиперссылки

Изображения

Использование изображений в качестве якоря

Неупорядоченные списки

Вложенные и упорядоченные списки

Основы таблиц HTML

Внутренние гиперссылки

СОЗДАНИЕ КАРТ ГИПЕРССЫЛОК

Рассмотрим еще один пример. Необходимо создать страницу показанную на рис.14.

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы