Создание Сайтов и их настройка

Видео уроки Подключение скриптов в HTML. Включение подсветки карты изображения.

Подключение скриптов в HTML. Включение подсветки карты изображения.

Итак, Друзья. В прошлом видео уроке мы завершили раздел таблицы в HTML и поговорили о последних двух тегах из раздела. Это HTML-теги <colgroup> и <col>.

А сегодня мы начнем новый раздел, посвященный использованию скриптов в HTML. Раздел состоит только из одного видео урока, в котором мы познакомимся со скриптами, узнаем, что такое скрипт, как использовать скрипты, как подключить скрипт в HTML и т.д. Что касается тегов, которые мы будем использовать. Их будет два, это тег <script> и тег <noscript>.

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

Подключение скриптов в HTML. Включение подсветки карты изображения.

Что такое script?

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

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

Скрипты в HTML.

В нашем случае мы будем использовать два HTML-тега, которые помогут нам подключать скрипты.

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

HTML-тег <noscript> предназначен для оповещения посетителя страницы о том, что у него в браузере отключена поддержка скриптов, или ее вовсе нет. И значит, он не сможет использовать полный функционал страницы, на которой находится.

Подключение скрипта. Как вставить скрипт в HTML? (Все варианты подключения)

Начнем с тега <script> и разберемся, как его использовать в HTML. Ведь для того, чтобы мы смогли сделать станицу более динамичной мы должны уметь подключать или внедрять скрипты в HTML. Как я упоминал чуть выше, мы имеем несколько вариантов подключения скриптов в HTML.

Подключения скрипта с другого сервера.

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

В этом примере мы подключим поддержку JQuery в наш документ. Файл со сценариями находится на сервере google и для его подключениям нам достаточно указать правильный адрес расположения файла. Здесь также стоит отметить, что при использовании тега <script> мы в обязательном порядке должны использовать HTML-атрибут type, который поможет указать веб-браузеру, к какому типу документа относится подключаемый файл.

Итак, для подключения переходим на страницу разработчиков google. Чтобы облегчить Вам поиск, вот ссылка: https://developers.google.com/speed/libraries/devguide#jquery. Затем мы просто копируем в наш HTML-документ код примерно такого вида:

Версия библиотеки может отличаться.

После того, как код скопирован, мы вставляем его в HTML-документ перед закрывающим тегом <head>. После чего мы можем проверить, подключилась библиотека или нет. Как это сделать смотрите в видео уроке.

Это, пожалуй, самый простой способ, так как здесь кроме копирования и вставки готового кода не нужно больше ничего делать. Единственное, что следует добавить это то, что мы обязаны указать атрибут type со значением. То есть конечный вид кода будет примерно таким:

Подключения скрипта с нашего сервера.

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

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

Сам файла скрипта Вы сможете скачать на странице дополнительных материалов к ВидеоКурсу на этой странице.

Как проверить работу скрипта смотрим в видео ролике.

Внедрение сценария скрипта в HTML-документ. Как вставить скрипт в HTML?

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

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

$(function() {
        $('.map').maphilight();
        $('#squidheadlink').mouseover(function(e) {
            $('#squidhead').mouseover();
        }).mouseout(function(e) {
            $('#squidhead').mouseout();
        }).click(function(e) { e.preventDefault(); });
    });

После чего его необходимо вставить между тегами <script>. То есть какие-то отдельные функции, мы можем добавлять непосредственно в HTML-документ перед тегом <head>:

Здесь также стоит отметить, чтобы работала подсветка карты изображения необходимо добавить все предложенные скрипты. То есть библиотеку JQuery, подключить файл, который находится в дополнительных материалах и добавить функцию в HTML-документ. Если не будет выполнен хотя бы один из пунктов, подсветка работать не будет.

HTML-тег <noscript>.

Что касается тега <noscript>, то здесь все просто. Данный тег будет включаться в работу в том случае, если веб-браузер пользователя не имеет поддержку скриптов или она отключена. Это парный тег. Между открывающим тегом и закрывающим мы должны указать информацию, которая будет выводиться пользователю в случае, когда его браузер не поддерживает работу скриптов. Например, так:

Этот тег необходимо указать после открывающего тега <body>.

Видео урок: Подключение скриптов в HTML. Включение подсветки карты изображения.

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

В следующем видео мы продолжим знакомство со скриптами в HTML и начнем знакомиться с еще одним понятием, это объекты в HTML, такие как видео, аудио и flash-баннеры. Для начала разберемся, как вставить видео в HTML и познакомимся с HTML-тегами <object> и <param>.

Расскажи друзьям:
Поделись ссылкой:
Комментарии
  1. Артем

    Понял, что пишу не на тот сайт, изучив первоисточник библиотеки maphilight.js.
    У Вас лишний код:
    $('#squidheadlink').mouseover(function(e) {
    $('#squidhead').mouseover();
    }).mouseout(function(e) {
    $('#squidhead').mouseout();
    }).click(function(e) { e.preventDefault(); });
    который на прямую относится к примеру, приведенному на сайте первоисточника.

    Ответить
    1. Михаил Веб

      На момент публикации, код был не лишний. Вы даты-то смотрите. Специально для Вас выводятся

      Ответить
  2. Артем

    Подскажите пожалуйста, может по этому вопросу не в эту тему пишу… :-)
    Как сделать так, чтобы при наведении на одну область ссылки подсвечивались дополнительные области, например если мне нужно подсветить несколько островов на карте, которые имеют одно название, скажем Гавайи, как мне их связать в одну ссылку?

    Ответить
    1. Михаил Веб

      Честно говоря не совсем понял

      Ответить
  3. Егор

    @ Михаил Веб:
    Ну да, это отдельная тема.

    Ответить
  4. Михаил Веб

    @ Егор:
    Здравствуйте.
    Да, действительно не упомянул, чтобы не возникало никакой путаницы. Да, и я считаю, что это отдельная тема для разговора.
    Но спасибо за замечание.

    Ответить
  5. Егор

    Здравствуйте, вы почему-то неупомянули о возможности подключения скриптов в footer. Это важный момент.

    Ответить
  6. Михаил Веб

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

    Ответить
  7. Баяс

    Михаил, если б это было так просто, я бы не задавал глупых вопросов. Дело в том что, при переносе скриптов, в файле functions.php нужно переделать команды в формате header на формат footer. Я сам весьма смутно представляю как это можно осуществить, но должен быть алгоритм действий, универсальный для всех сайтов. Это базовые знания для тех, кто работает в этой тематике. Я понимаю, что вы не волшебник, а всего лишь учитесь, но поскольку это «ваша основная специализация», давайте все же попробуем разобраться, иначе все наши статьи по тем или иным вопросам так и останутся теоретическими измышлениями, скопированными с других сайтов и абсолютно бесполезными. То есть КПД от таких заметок нулевой. Прошу прощения за столь резкие высказывания, но наболело: в сети огромное количество сайтов, где рассказывается как перенести скрипты в футер, но в большинстве своем это бездарный плагиат, авторы которых ненамного больше меня разбираются в этих вопросах. Поскольку ваш сайт посвящен именно этой сложной тематике, и как я смею думать, у вас есть склонность к разбору таких тем, я надеюсь, что правильный ответ будет найден.

    Ответить
  8. Михаил Веб

    @ Баяс:
    Здравствуйте.
    Просто перенести скрипты и все, ни о каких командах ничего не слышал. А с какими проблемами Вы сталкиваетесь? Более конкретно, если можно.

    Ответить
  9. Баяс

    Михаил, скажи пожалуйста, как можно безболезненно перенести скрипты с хедера в футер, какие команды куда нужно прописать? Советы по этому поводу, которые даются в сети,не работают. Мне это нужно для ускорения загрузки сайта. Заранее спасибо.

    Ответить

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Навигация по статье