Файл: История развития HTML.pdf

<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">

search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.

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

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

tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.

up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.

sizes

Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения:

Ширина высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина высота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

title

Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.

type

Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".

Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

АТРИБУТЫ ТЕГА <SCRIPT>

async

Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).

charset

Определяет кодировку символов

crossorigin

Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).

anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.

defer

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

nonce

Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.

src

Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.

type

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

Гиперссылки создаются с помощью парного тега <a></a>. Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Обязательным параметром тега <a> является атрибут href, который задает URl-адрес веб-страницы.

<a href="http://site.ru">указатель ссылки</a>

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

Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:

метод доступа://имя сервера:порт/путь

Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:

Путь содержит имя папки, в которой находится файл.

Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный [Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г. ].

absolute-relative-path

Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:

1) протокол, например, http (опционально);

2) домен (доменное имя или IP-адрес компьютера);

3) папка (имя папки, указывающей путь к файлу);

4) файл (имя файла).

Рис.2 Пример структуры папок

Существует два вида записи абсолютного пути — с указанием протокола и без него [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.]:

http://site.ru/pages/tips/tips1.html

//site.ru/pages/tips/tips1.html

Если файл находится в корневой папке, то путь к файлу будет следующим:

http://site.ru/index.html

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

http://site.ru/

Обычно в качестве индексного файла выступает документ с именем index.html. Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.

Относительный путь описывает путь к указанному документу относительно текущего.

Путь для относительных ссылок имеет три специальных обозначения:

/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки

./ указывает на текущую папку

../ подняться на одну папку (директорию) выше

Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

3. Якоря

Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак # [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ]

.

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

<th id="about-color">color</th>

<a href="https://html5book.ru/css-shrifty/#about-color" class="site" target="_blank">color</a>

Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки.

<a href="http://www.fast-torrent.ru/film/gran-za-granyu-tv.html" target="_blank"><img src="//html5book.ru/wp-content/uploads/2014/07/Fringe.jpg" alt="Fringe"></a>

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

ссылка на телефонный номер

<a href="tel:+74951234567">+7 (495) 123-45-67</a>

ссылка на адрес электронной почты

<a href="mailto:example@mail.ru">example@mail.ru</a>

ссылка на скайп (позвонить)

<a href="skype:имя-пользователя?call">Skype</a>

Заключение

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

Интернет-бизнес стремительно развивается, растет конкуренция, появляются новые сервисы и сайты.

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

В процессе работы были решены следующие задачи:

Изучена литература

Составлен обзор источников

Изучена история создания языка HTML

Изучена структура HTML – документа

Изучены основные теги языка HTML

Цель работы- изучить основы программирования на языке HTML достигнута

Список литературы

Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г.

Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.

Айзекс С."Dynamic “HTML и XHTML. Секреты создания интерактивных Web - страниц " BHV./ С. Айзекс. 2012 г.

Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.

Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г. 

Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.

Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.