Добавлен: 13.05.2023
Просмотров: 544
Скачиваний: 5
Окончание Таблица 4.
|
title |
Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
|
type |
Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css". |
Элемент <script>
Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента (см. таблица 5).
Для элемента доступны атрибуты async, charset, defer, src, type, а также глобальные атрибуты.
Таблица 5. Атрибуты тега <SCRIPT>
|
Атрибут |
Описание, принимаемое значение |
|
async |
Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
|
charset |
Определяет кодировку символов |
|
crossorigin |
Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). |
|
defer |
Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
|
nonce |
Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
|
src |
Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу. |
|
type |
Используются для объявления языка сценария, использованного при составлении содержимого тега. |
Элемент <body>
В этом разделе располагается все содержимое документа. Для элемента доступны глобальные атрибуты (см. таблица 6).
Таблица 6. Атрибуты тега <BODY>
|
Атрибут |
Описание, принимаемое значение |
|
onafterprint |
Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
|
onbeforeprint |
Событие, срабатывающее перед отправкой страницы на печать. |
|
onbeforeunload |
Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
|
onhashchange |
Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2. |
|
onmessage |
Событие происходит, когда сообщение получено через источник события. |
|
onoffline |
Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
|
ononline |
Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
Окончание Таблица 4.
|
onpagehide |
Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
|
onpageshow |
Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
|
onunload |
Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
Основным элементом языка HTML являются теги. Тег - это, как правило, парная конструкция, предназначенная для задания свойств текста или другой информации, расположенной внутри него. Например, если в html-документе мы напишем:
"На территории Германии был найден неизвестный науке вид ракоскорпионов - <em> Jaekelopterus rhenaniae </em>",
то это будет указанием для программы-браузера, отвечающей за правильное отображение страницы, вывести название вида ракоскорпионов "Jaekelopterus rhenaniae" курсивом, т. е. весь текст при отображении в браузере будет выглядеть так:
На территории Германии был найден неизвестный науке вид ракоскорпионов - Jaekelopterus rhenaniae
Помимо тега <em>, отвечающего за отображение наклонного текста, в языке HTML существует ещё очень большое количество тегов, предназначенных для самых различных целей. Используя эти теги, мы можем вручную, с помощью простого текстового редактора, такого, как, например, встроенный в Windows "Блокнот", создать веб-страничку, пригодную для размещения в интернете и просмотра в браузере. Однако в настоящее время существуют специальные программы - визуальные редакторы веб-страниц, с помощью которых создавать отдельные страницы и целые сайты значительно быстрее и удобнее. Наиболее известной программой из спектра визуальных редакторов веб-страниц является Dreamweaver фирмы Adobe (см. также свежий обзор визуальных html-редакторов). Всё же, хотя с помощью визуального редактора редактировать веб-страницу значительно проще, для настоящего веб-мастера знание языка HTML является необходимым - даже лучшие визуальные реадкторы не всегда правильно или оптимально вставляют теги в html-код, и, в таких случаях, без ручного его исправления не обойтись.
2. Описание создания сайта
2.1. Гипертекстовые ссылки
Важным дополнением к языку HTML являются стандарты CSS (каскадных таблиц стилей), которые были разработаны в конце 90-х.
Например, если мы хотим использовать крупный жирный текст, выделенный красным цветом, вместо того, чтобы каждый раз писать в тексте веб-страницы нужный для этого набор html-тегов:
<font color="red" size="+1"><strong>Внимание!</strong></font>
мы можем сделать следующее - описать специальный стиль "redstyle":
.redstyle {
font-size: larger;
font-weight: bold;
color: red;
}
и затем в нужном месте указать всего один тег, в атрибутах которого пропишем нужный нам стиль, например:
<span class="redstyle">Внимание!</span>
Результат будет один и то же, но, во втором случае, нам будет проще многократно применять одно и то же оформление и, что немаловажно, если мы вдруг захотим изменить затем это уже сделанное оформление, поменяв, например, цвет текста, то для этого нам достаточно будет изменить описание стиля всего в одном месте, а не редактировать множество тегов по всему пространству одной (а, тем более, нескольких) страниц. Ну и, наконец, в дополнение к удобству, средства CSS предоставляют расширенные возможности для оформления страниц по сравнению с обычными html-тегами.
Создание сайта начинается не в визуальном редакторе веб-страниц (ну или с ручного написания html-кода), а с создания дизайна для этого сайта. В этом случае создание html-страницы и размещение на ней блоков текста и элементов графического оформления - рисунков, анимации и т. д. (подобный процесс называется вёрсткой) будет уже вторым этапом. Вёрстка сайта, имеющего сложный дизайн, может быть довольно непростым и утомительным процессом. Задач обеспечить правильное красивое расположение на странице блоков текста и графики осложняется необходимостью учитывать возможность того, что эта страница будет просматриваться пользователи на разных мониторах с разным разрешением экрана и в разных браузерах, которые имеют свои особенности отображения содержимого веб-страниц. В целом к построению (более-менее сложных) веб-страниц существуют два различных подхода - это вёрстка с помощью таблиц, в ячейки которых помещается содержимое, и вёрстка с помощью тегов <div>, который позволяет указывать в своих атрибутах произвольное расположение и размер блока, в котором будет помещаться его содержимое. Каждый из этих подходов имеет свои плюсы и минусы, и между сторонниками того или иного метода неизбежно возникают споры о том, какой из них более удобный и более правильный. В целом, вёрстка с помощью таблиц является исторически более ранним методом построения сайтов и более удобна в тех случаях, когда требуется обеспечить "резиновость" дизайна и сделать так, чтобы размеры блоков на странице автоматически подстраивались под их содержимое и размеры экрана, вёрстка с помощью тегов <div> получила распространение относительно позже и оптимально подходит тогда, когда сайт имеет фиксированный дизайн.
Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.
Структура ссылок в HTML-документе. Пока что мы рассмотрели только внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL, необходимо отметить URL специальными тэгами в HTML-документе. Синтаксис HTML, позволяющий это сделать - следующий:
<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>
Тэг <A HREF="URL"> открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:
Ссылки на точки внутри документа. Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).
Для создания такой ссылки необходимо выполнить следующие шаги:
- Создайте маркер раздела. Синтаксис данного маркера следующий:
<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке </A>
- Создайте ссылку на данный маркер:
<A HREF="#named_anchor"> Текст </A>
Например:
<p><b>Список разделов</b></p> <ul> <li><a href="#ex1">Раздел 1</a></li> <li><a href="#ex2">Раздел 2</a></li> </ul> <p><a name="ex1"></a>Раздел 1</p> <ul> <p>Текст раздела 1</p> </ul> <p><a name="ex2"></a>Раздел 2</p> <ul> <p>Текст раздела 2 <br></p>
Символы "#ex1" сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1".
Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.
2.2. Графика внутри документа
Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.
Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:
<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>
Опишем элементы синтаксиса тэга::
Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.="text":
Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.=n1:
Данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.=n2: