Форматирование текста и размещение графики. HTML-теги html, head, body. Теги, которые есть в любой страничке интернета

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

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

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

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

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.

Рис. 1. Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

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

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

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

1.2.2. Элемент

Необязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Заголовок моей странички

4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:

Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:

Название Вашей первой странички

Заголовок моей странички

Это моя первая web-страничка!

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

Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

Название страницы

Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы

Название страницы

Любой заголовок
Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом

Другой текст

Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).

Название страницы

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

Хочу выделить текст жирным, а этот уже курсивом

Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

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

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

В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)

Мои поздравления!
Несложно же?)

Задание 1. Создание простейших файлов HTML

Чтобы создать свой файл HTML, сделайте следующее:

Создайте папку HTML , в которой мы будем сохранять созданные Web-страницы.

Запустите стандартную программу Блокнот (Notepad).

Наберите в окне редактора простейший текст файла HTML:

Учебный файл HTML

Расписание занятий на вторник

Сохраните файл под именем RASP.HTM.

Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.

Откройте в меню броузера Файл (File) , Открыть (Open) , Просмотр (Обзор - Browse ) и найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

Задание 2. Управление расположением текста на экране

Информация.

При отображении HTML-документов броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелов.

При необходимости выполните п.п. 5-6 задания 1.

Откройте первоисточник Web-страницы – в меню броузера Вид (View) , Источник (В виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах HTML.

Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

Учебный файл HTML

Расписание

занятий

на вторник

Сохраните внесенные изменения в файле RASP.HTM, с помощью командФайл (File) , Сохранить (Save) . Закройте программу Блокнот (Notepad).

Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу используя клавишуF5 или с помощью командВид (View) , Обновить (Refresh). Изменилось ли изображение текста на экране?

Примечание

В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.

Задание 3. Тэги перевода строки и абзаца

Информация.

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

Тэг перевода строки
отделяет строку от последующего текста или графики. Тэг абзаца

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

Внесите изменения в текст файла HTML:

Учебный файл HTML

Расписание

занятий

на вторник

4. Сохраните внесенные изменения в файлеRASP.HTM.

Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу.Как изменилось изображение текста на экране?

Задание 4. Выделение фрагментов текста

Информация.

Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:

… для выделения полужирным ,

… для выделения курсивом,

… для выделения подчеркиванием .

Учебный файл HTML

Расписание занятий на вторник

2. Посмотрите новую полученную Web-страницу.

Возможно использование комбинированных шрифтов:

Расписание занятий на вторник

Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

…	ошибочная запись

Задание 5. Использование стилей заголовка

Информация.

Существует два способа управления размером текста, изображаемого броузером:

использование стилей заголовка,

задание размера основного документа или размера текущего шрифта.

Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки броузера. Стиль Н1 – самый крупный.

Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание занятий на вторник

Посмотрите новую полученную Web-страницу.

Задание 5. Задание размера текущего шрифта.

Информация.

Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.

Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание

занятий на вторник

Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тэг .

Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.

Задание 6. Гарнитура и цвет шрифта

Информация.

Тэг предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .

Для изменения цвета шрифта в тэге можно использовать атрибут COLOR="X" .

Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:

красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.

Примеры записи цвета в формате RGB приведены в таблице:

Таблица 1

Цвет		Цвет
			фиолетовый

			коричневый
			оранжевый
	бирюзовый

Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание >

занятий на вторник

Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

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

Информация.

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

Современные броузеры для выравнивания текста используется атрибут ALIGN= , который встраивается в теги абзаца или заголовка.

Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание

занятий на вторник

Задание 8. Задание цвета фона и текста

Информация.

При изображении фона, текста броузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки броузера. Эти цвета устанавливаются в начале файла HTML в тэге . Запись цвета аналогична цвету шрифта (см. таблицу 1 п.12). Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK=и VLINK=определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).

Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание

занятий на вторник

Задание 9.

Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?

Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

Любая Web-страница должна начинаться с тега , а заканчиваться его закрывающим близнецом . Структурно Web-страница разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами и , а тело документа обозначается тегами и

Итак, для начала создайте новую папку и назовите ее, к примеру, "Мой сайт ". Затем откройте программу "Блокнот" и наберите в нем следующий HTML-код:

Выбираем в "Блокноте": "Файл" - "Сохранить как..." , задаем имя index.html и сохраняем в нашу папку "Мой сайт ". Посмотрим, что у нас получилось. Результат

Теперь разберем то, что мы набирали:

Указывает программе просмотра страниц что это HTML-документ
- определяет место, где помещается различная информация не отображаемая в теле документа (тег ). Здесь располагается тег названия документа и теги для поисковых машин
- в этом теге указывается заголовок страницы
- определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты)

2. Изменяем цвета фона и текста

Теперь попробуем изменить цвета фона и текста. Для этого отредактируем наш файлик index.html . Кликаем по нему правой кнопкой мыши и выбираем:
"Открыть с помощью" - "Блокнот"

Вносим следующие изменения:

Результат

Посмотрим, что нового у нас появилось в нашем html-коде:

Параметры тега - text и bgcolor :

text - устанавливает цвет текста документа, используя значение цвета в виде RRGGBB (пример: 000000 - черный цвет), либо используя константы цвета, например для черного цвета, используемой в нашем уроке
bgcolor - устанавливает цвет фона документа, используя значение цвета в виде RRGGBB (пример: FF0000 - красный цвет), либо используя константы цвета, например для красного цвета, используемой в нашем уроке

Теги
и :

- (BReak line) устанавливает перевод строки в том месте, где этот тег находится.
*не требует парного закрывающего тега
- представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура
Параметр color - устанавливает цвет текста

3. Выравнивание текста

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

с аналогичным параметром align

Текст	Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом и после него автоматически добавляются небольшие вертикальные отступы.
Текст	Выравнивание по центру
Текст	Выравнивание по левому краю
Текст	Выравнивание по правому краю
align="justify"> Текст	Выравнивание по ширине
Текст
Текст	Отключает автоматический перенос строк, даже если текст шире окна браузера
align="center">Текст	Выравнивание по центру
align="left">Текст	Выравнивание по левому краю
align="right">Текст	Выравнивание по правому краю
align="justify">Текст	Выравнивание по ширине

* По умолчанию текст выравнивается по левому краю.

Отличие между параграфом (тег ) и тегом

в том, что в начале и в конце параграфа появляется вертикальный отступ, чего нет в случае использования тега

Давайте попробуем разместить текст по центру при помощи тега параграфа . Вносим изменения в index.html

Результат

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

4. Списки

Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.

Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом и его закрывающим близнецом . Отдельные элементы списка объявляются при помощи обозначающего тега

, который не имеет закрывающей пары. Точнее, закрывающий тег может применяться, но он необязателен.

Давайте создадим еще одну html-страничку. Для этого опять откроем "Блокнот" и внесем туда следующий HTML-код:

Списки

Mapкированный список

Первый пункт списка

Второй пункт списка

Третий пункт списка

Сохраним файл как spiski.html в папке "Мой сайт ".
Посмотрим, что у нас получилось Результат

(Unordered List) - тег служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег

Атрибуты:

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

title - Всплывающая подсказка при наведении курсора на список.

(List Item) - тег служит для обозначения элемента (строки) списка. Используется в нумерованных() и ненумерованных() списках

Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов и . А элементы списка объявляются при помощи все того же тега

. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер. Немного отредактируем нашу страничку spiski.html , внеся туда следующие изменения:

Списки

Mapкированный список

Первый пункт списка
Второй пункт списка
Третий пункт списка

Нумерованный список

Первый пункт списка

Второй пункт списка

Третий пункт списка

Результат

В теге атрибут type имеет следующие типы маркеров:

1	Нумерации обычными арабскими цифрами (по умолчанию)
A	Обозначение элементов списка при помощи символов латинского алфавита верхнего регистра (заглавные буквы). Нумерация идет по алфавитному порядку, начиная от A до Z
a	Обозначение элементов списка при помощи символов латинского алфавита нижнего регистра (маленькие буквы). Нумерация идет по алфавитному порядку, начиная от a до z
I	Устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра
i	создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра

* Параметр type с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр type с соответствующим значением разрешено указывать в теге элемента списка

Пример записи:

Примечание:
Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.

Давайте еще рассмотрим теги:
- служит для создания списка определений
и - являются описанием списка определений.

Опять редактируем нашу страничку spiski.html :

Результат

5. Вставка изображения

Давайте вернемся к нашей страничке index.html и попробуем вставить в нее изображение. Делается это при помощи тега с обязательным параметром scr (от source - источник ), в котором указывается адрес картинки (место, где она находится).

Создайте в папке "Мой сайт " еще одну папку и назовите ее "picture ". Теперь, сохраните в нее эту картинку:

Открываем папку "picture " и видим, что наша картинка носит имя kartinka и имеет расширение .jpg

Приступаем к редактированию index.html

Результат

Тег - выравнивание изображения по центру. Также, могут быть использованы теги:

Выравнивание по левому краю
- выравнивание по правому краю

Разберем параметры тега , которые мы использовали в данном примере:

src="picture/kartinka.jpg" - здесь мы указали адрес нашего изображения, т.е. место, где находится наша картинка.

Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

А теперь перечислим все параметры тега

. align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Может принимать следующие значения:

bottom - выравнивание нижней границы изображения по окружающему тексту

left - выравнивает изображение по левому краю окна

right - выравнивает изображение по правому краю окна

middle - выравнивание середины изображения по базовой линии текущей строки

top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки

. alt - альтернативный текст для изображения

. border - толщина рамки вокруг изображения. Указывается в пикселях.

Пример: border="1"

. width - ширина изображения. Указывается в пикселях или процентах.

Пример: в пикселях - width="155" , в процентах - width="100%"

. height - высота изображения. Указывается в пикселях или процентах.

Пример: в пикселях - height="155" , в процентах - height="100%"

. hspace - горизонтальный отступ от изображения до окружающего контента. Указывается в пикселя

Пример: hspace="5"

. vspace - вертикальный отступ от изображения до окружающего контента. Указывается в пикселя

Пример: vspace="5"

. ismap - сообщает браузеру, что картинка является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

. lowsrc - путь к графическому файлу низкого разрешения для предварительного отображения

. src - путь к графическому файлу

6. Ссылки

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

В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тегом с параметром href , которому соответствует закрывающий тег . В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок: картинку с «горячими областями», щелчок на которых приводит к срабатыванию соответствующих ссылок.

Давайте попробуем создать на странице index.html ссылку на вторую страничку spiski.html . Для этого добавим следующий html-код (редактируем index.html ):

Результат

Чтобы создать графическую ссылку, необходимо между тегами и вствить изображение. Приведем пример на нашей картинке. Ссылка будет выглядить следующим образом:

Рассмотрим параметр target , который может принимать следующие значения:

Blank - загружает страницу в новое окно браузера

Self - загружает страницу в текущее окно

Parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self

Top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self

* По умолчанию используется _self