Выпуск №3. Работа с тегами ссылок и изображений в HTML

ссылки и изображения

Доброго времени суток, уважаемый подписчик. Из этого урока, как я и обещал, мы узнаем, как создавать ссылки, какие они бывают. Также поработаем с изображениями. Для этого нам понадобятся HTML-теги ссылок <a> и изображений <img />.

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

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

Итак, создадим папку "уроки по html", в ней создадим папку "урок1", и в нее скопируем файлы нашего первого урока.

Затем, в папке "уроки по html", создадим папку "урок2", и в нее скопируем файлы нашего второго урока.

И, наконец, в папке "уроки по html", создадим папку "урок3", в ней создадим и сделаем нашу обычную заготовку (надеюсь, делать это вы уже научились).

Теперь зайдем в папку "урок1" и переименуем наш файл с расширением .html (должен быть begin.html) в lesson1.html.

Зайдем в папку "урок2" и переименуем файл второго урока в файл lesson2.html.

Аналогично поступим с папкой "урок3": переименуем созданную заготовку в lesson3.html, откроем ее с помощью блокнота и начнем работать.

Начинаем…

HTML-тег ссылок

Тег, с помощью которого создаются ссылки — это тег <a href="адрес документа (URL)"> текст ссылки</a>.

href — обязательный параметр, собственно определяет по какому адресу ведет ссылка.

Ссылки бывают абсолютные и относительные (внутренние).

Абсолютные — это ссылки на другие документы сети,

Относительные — это ссылки на различные места одного и того же документа.

Давайте, наконец-таки, сделаем ссылку, например, на наш первый урок. Для этого в заготовке lesson3 наберем:

<a href="../урок1/lesson1.html">ссылка на урок 1</a>

Аналогично на наш второй урок, ссылка будет выглядеть так:

<a href="../урок2/lesson2.html">ссылка на урок 2</a>

Разберемся в коде.

По записи href="../урок2/lesson2.html" можно догадаться, что это путь к файлу lesson2.html относительно файла lesson3.html. Мы сейчас на странице lesson3.html.

Две подряд идущие точки говорят о том, что мы вышли из папки урок3, где находится lesson3.html, в папку "уроки по html".

Запись /урок2/ означает, что мы зашли в папку "урок2" , и lesson2.html имя файла который требуется открыть.

То есть, ..(две точки) означают выйти из папки в родительскую для нее папку, а / (косая или слеш) — войти в папку.

Для наглядности, если нужно выйти из папки, а из той папки, в которую мы вышли тоже нужно выйти, то написать это нужно так: ../.. .

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

Соответственно если файл, на который нам нужно перейти, находится в этой же папке, например, в нашей папке (урок3) находится файл my.html, то нам нужно в href записать просто имя этого файла, то есть <a href="my.html"> ссылка на файл находящийся в той же папке </a>.

Теперь создадим ссылку на какой — нибудь сайт, например на google.ru. Это будет выглядеть следующим образом:

<a href="http://www.google.ru">google</a>

То есть в href нужно прописать http://+название сайта.

Надеюсь понятно, что текст между открывающим и закрывающим тегом <a>(<a href="…"> вот здесь</a>) может быть абсолютно любой, главное, куда указывает href.

Да и после каждого закрывающего тега </a> можно поставлять тег <br> (напомню, это переход на новую строку) для красивого расположения наших ссылок.

До сих пор мы делали ссылки на html страницы, однако существует возможность создавать ссылки на файлы других типов.

Здесь есть два нюанса в работе этих ссылок:

Первый — это то, что если браузер поддерживает тип файла, на который направлена ссылка, то он откроет этот файл сам, в своем же окне. Это файлы с расширением (gif, png, jpg, html, xhtml и др.).

Второй — это то, что если браузер не поддерживает тип файла, на который направлена ссылка, то он откроет программу, которая ассоциирована с данным файлом. Это файлы с расширением (avi, doc, xls и др.).

Выглядит такая ссылка достаточно просто, <a href="videoFile.avi"> текст ссылки </a> — подобная ссылка вызовет видеопроигрыватель, которым вы просматриваете "avi-файлы".

Аналогично с другими форматами.

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

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

Примеры таких ссылок:

<a href="mailto:адрес email">Отправить почту другу</a>

Здесь ключевое слово mailto, после которого идет адрес почтового ящика. По нажатию на эту ссылку вызовется программа работы с почтой (Outlook Express, The bat и др.), причем адрес получателя уже будет заполнен, останется только написать письмо и отправить его.

<a href="news:newsname">Новости</a>

Здесь news — означает переход к ресурсу новостей, newsname — это название группы новостей, на которую вы подписаны. Откроется программа Outlook Express для работы с новостями.

Нельзя не затронуть еще один вид ссылок. Это внутренние ссылки.

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

<a name="metka1"></a>

А, допустим, в начале документа делается ссылка на эту метку. Это выглядит так:

<a href="#metka1">перейти на метку 1</a>

Обратите внимание на то, что значение name у метки и значение href у ссылки совпадают.

Итак, возьмите какой-нибудь достаточно длинный фрагмент текста, сделайте в нескольких местах метки.

<a name="metka1"></a>
<a name="metka2"></a>
<a name="metka3"></a>
<a name="metka4"></a>

А в начале страницы сделаем ссылки на эти метки.

<a href="#metka1">перейти на метку 1</a>
<a href="#metka1">перейти на метку 2</a>
<a href="#metka1">перейти на метку 3</a>
<a href="#metka1">перейти на метку 4</a>

И у нас получилось такое оглавление в начале страницы.

HTML-тег изображений

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

Для вставки изображения используется тег <img src=url>.

Параметр src является обязательным. Адрес url может быть как абсолютным, так и относительным.

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

Также тег <img…> имеет ряд параметров. Вот некоторые из них:

<img

align=top — выравнивание верхнего края изображения по верхнему краю строки;

left — выравнивание изображения по левому краю относительно окна браузера, причем окружающий текст обтекает изображение;

right - выравнивание изображения по правому краю относительно окна браузера, причем окружающий текст обтекает изображение;

border=число — задает рамку вокруг изображения с толщиной на заданное количество пикселей;

>

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

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

Ссылка на архив нашего урока: Архив 3 урока

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (47)

  1. андрей

    я благодарен ребятам за программу

  2. elena

    Здравствуйте, Андрей. Начинаю с самого начала «Для обучения нам понадобятся «браузер » (что это такое и где его взять или как установить?) (в котором вы просматриваете «веб — страницы» (что это такое, где я это просматриваю ?). ППристите,пожалуйста, мое невежество. Но, прежде чем что-то делать, я должна понять… Здоровья Вам и терпения… Елена Владиславовна

    • Валентин

      Леночка,лапочка,Браузер — это программа при помощи которой вы бегаете по интернету, браузеры бывают с разными названиями,потому что сделаны разными авторами и даже компаниями,какие браузеры? — это в первую очередь Microsoft Internet Explorer,затем- Opera, Maxthon, Safary и другие их очень много можно найти, если поспрашивать в Google, Yandexe , Ramblere и других поисковиках.

    • Андрей

      Браузер-программа для просмотра веб-страниц(сайтов). В Windows есть встроенный браузер Internet Explorer. Есть браузеры Опера Мозилла. Скачать из можно из интернета. Устанавливаются они так же, как и любая другая компьютерная программа. Пользоваться Internet Explorer Я Вам не рекомендую, лучше установите Оперу, либо Мозиллу. Есть и другие браузеры, все их можно найти в интернете.

    • Роман

      Можна из ввежливести Вас спрасить: Ви первий день в интернете?)))))))))))))))

  3. Олег

    Здравствуйте!
    Я пытаюсь изучать html. Скажите пожалуйста , почему у меня не вставляется риснок . В src указан путь к файлу в соседней папке на одном и том же диске. А вместо этого пустая рамка. Заранее спасибо.
    Что не так в этом тексте?

    Adobe Encore DVD1,5 – Быстрый старт2.

    Откроем Encore.

    • Rohviktor

      Олег и все читатели статей, прошу Вас задавать вопросы не в комментариях, а присылать на email: contact@webformyself.com. Также вопросы присылайте со своим наработками и файлами и четко указывайте на проблему.

      Впредь, вопросы, задаваемые в комментариях, рассматриваться редакцией http://www.webformyself.com не будут!

      • Tanuxa

        Редакция сайта Webformyself.com, я бы с удовольствием отослала бы вам письмо со своими наработками, потому-что проходя именно этот урок у меня возникли проблемы — КУЧА ВОПРОСОВ :) , но не сделала это по одной банальной причине — я не умею отсылать письма с помощью «Outlook Express». Думаю не одна я столкнулась с подобной проблемой, хотелось бы что бы у вас был ещё один запасной аэродром — для таких как я. Поэтому мои вопросы и комментарии вы увидите внизу :) — ЕЩЁ РАЗ ИЗВИНЯЮСЬ — МЫ НЕ ГРАМОТНЫЕ :) :( , но я обещаю когда научусь отсылать сообщения в «Outlook Express», буду только так и делать. А пока-а-а!!!

        • Валентин

          Таня,я тоже не ахти какой пользователь ,но могу всё-таки посоветовать: Не обязательно пользоваться Outlook Express» у вас же есть обычная почта ,где вы зарегистрированы, открываете при помощи кнопочки «Написать письмо» или «Ответить», откроется окошечко в котором надо ввести «Кому» а во второй строчке вводите адрес на который вы хотите отправить письмо, если письмо уже у вас давно заготовлено, то на этой же страничке в самом низу есть пунктик «Прикрепить файлы» нажимаете на этот пунктик ,- появится новое окошко»Обозрение» в нем находите своё заготовленное письмо,клацаете по нему , оно автоматически копируется на вашу отправляемую почту,и можете нажимать кнопку «Отправить»,правда надо помнить, что письмо не должно превышать 5мб,таким же способом можно отправлять и фотографии,своим друзьям.КВА

          • Tanuxa

            Валентин, спасибо что были не равнодушны к моему комментарию. :)
            Меня несколько дней назад эта «МЫСЛЯ» осенила! :)
            Извиняюсь за свою не сдержанность.
            P.S. Даже скачала уроки про почту «Outlook Express», в принципе ничего сложного!!! :)

        • Андрей

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

  4. Александер

    спасибо за курсы все понятно и легко

  5. Марина

    нашла небольшую ошибочку в этом уроке, а именно в:



    так метки не работают…

    нужно писать так:



    и тогда все в порядке… все работает)))

  6. Марина

    ссори…… в коментах же нельзя писать тэги….. в общем в тэгах на метки нужно ставить знак #, а то без них не работают ссылки………..

    • Виктор Иванович

      Спасибо, Марина, я тоже смог разобраться в»#» , благодаря Вашему комментарию!

  7. Елена

    Спасибо большое Андрей! Меня давно интересовал вопрос как устанавливают на сайте ссылки на различные сайты, файлы. Из урока все понятно! СПАСИБО!!!

  8. Галина

    Спасибо за урок, уважаемый Учитель

  9. Евгений

    На этом уроке уже пришлось голову включать и догонять некоторые вещи самостоятельно. Грамотно и мудро со стороны учителя. Спасибо.

  10. tigRenOk

    Спасибо вам большое! У меня получилось. Весь вечер мучалась, а лабу по HTML сдавать на завтра. В общем СПАСИБО!!!

  11. Иммагинатор

    Хороший курс!

  12. Tanuxa

    Спасибо, за урок!!! Но у меня есть несколько вопросиков! :)
    Не работает ссылка на видео. Видео файл находиться в той же папке что и файл с уроком. Я пробовала сделать ссылку на видео и в формате AVI и WMV — Windows Media Player открывается, но видео не проигрывается. А KMPlayer даже и не открывается. И почему-то программа «Download Master» запускается, когда переходишь по ссылке с видео в формате AVI. Что я сделала не правильно? Нормально открываются только: документ формата TXT — открывается прямо в браузере, документы формата DOC и XLS — открываются в приложениях.
    И ещё вопросик: Почему в теге BR надо ставить / слэш?
    Что косаеться ссылок на разные части текста, то действительно без # (решётки) в теге A HREF=»#METKA1″ ссылка не будет работать.
    Вроде ВСЁ!!!

  13. Валентин

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

  14. Валентин

    Почему то не отправляются комментарии,сообщает» Ошибка WordPress»

  15. сергей

    Спасибо! Все понятно!

  16. Мархабо

    Спасибо за урок, но почему-то не отвечаете на вопросы по указанному адресу.
    Почему в браузере Internet Explorer ссылки с3-го урока на 1-й не просматриваются, а наоборот — да.
    И 3-урок в интернете отображается недолго.с чем это связано?

  17. Елена

    учусь с детьми.Очень забавно бывает, когда у меня что — то не получается и вместе ищем причину.Я прямо ими горжусь.Младшей всего 9, а уже что — то соображает.Спасибо вам, за ваш труд ребята!

  18. Намуна

    Благодарю за уроки.
    Переходы для меня были загадочны, как фокусы.
    Теперь — ясность.

  19. Владислав

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

    Есть еще одна сторона этого вопроса. На мехмате МГУ в далекие времена работал профессор Хинчин, он говорил своим ученикам: «Нельзя давать студентам на экзаменах задачи, которые вы сами с ними полностью не решали до конца.» Это на мехмате МГУ! Это великий Хинчин! Здесь прежде всего уважение к ученикам. А ещё.
    Это означает — всё надо делать аккуратно. Неаккуратность всегда ведет к ошибкам.

    И вместе с тем известен случай, когда студенту на экзамене была дана ранее не решенная математическая задача. И он её решил!
    И вошел в историю развития теории вероятностей.
    Но это совсем другая песня! Это песня о неправильных силлогизмах и их роли в развитии гипотез. Она же чрезвычайно важна для развития интеллектуальных баз знаний. Для инфобизнеса!… Эта интереснейшая тема — но невозможно её раскрыть в комментариях.
    Вот так, маленькая закорючка иногда бывает очень важной штучкой!
    Владислав.

  20. Олег

    Хотелось бы по узнать об относительных и абсолютных ссылках

  21. Лена

    Да! Головой пришлось пользоваться в этом уроке больше чем в остальных, но это и хорошо, так лучше «руки запоминают» :)

  22. Николай

    благодарю за урок всё получилось хоть и не с разу!

  23. Станислав

    Здравстыуйте, Андрей! Спасибо за урок. Ссылки для меня узкое место.

  24. Lucina

    Спасибо за урок. Что-то мне уже было известно, но вот, например, про метки и ссылки на них — это было полезно. Обязательно напишу у себя что-нибудь длинное, специально, чтобы наставить туда меток :)

  25. Роза

    Всё понятно. Разобралась.

  26. Алексей

    А здесь никто не заметил что ссылки не работают пробовал создать свою прописал почти все тоже самое всеромно неработает.

  27. Александр

    Спасибо, буду учиться

  28. Любовь Островская

    В блокноте картинка появляется, а в браузере нет, ешё нужно разбираться где мои ошибки. Интересно разбираться даже в своих ошибках.

  29. Баночкин Сергей

    Я в простеньком вебмастере изготовил 6 станичек спустя год решил добавить к ним еще одну или другую новые страницы, но ни одна ссылка на какую-нибудь другую страницу не работал. Только на те, которые у меня уже были.
    Возможно внутри этих страниц был вложен скрипт на запрет от других ссылок?
    = Баночкин С. =

  30. Михаил

    И опять — полное непонимание того, что происходит! Ссылки вида <a href="../ после отработки переадресаций — оставят в коде такое <a href="домен.ru/../и далее — то есть битую ссылку!
    Продолжать стоит? Можете проверить на своих проектах!
    Относительные ссылки никогда нельзя начитать с точек, получается ерунда, хотя всё и работает! Такое можно применять только с img поскольку это адрес на вывод элемента в данном месте.

    • Андрей Кудлай

      Да что Вы такое говорите?
      1. В коде ничего они оставить не могут, поскольку код пишет верстальщик в данном случае и код не может сам как-то переписаться на лету — это верстка, это не программный код. Никаких битых ссылок при этом не будет. Собственно, относительные ссылки используются сплошь и рядом.
      2. Это стандартная работа с относительными ссылками. Для того, чтобы выйти из одной папки и обратиться к другой, нужно использовать именно такую конструкцию — ../ — это ни что иное, как указатель на родительский каталог… без данной конструкции, используя механизм относительных ссылок, выйти из каталога на уровень вверх попросту невозможно.
      Ну и, быть может, другие ресурсы подтвердят мои слова и слова Андрея Бернацкого:
      htmlbook.ru
      ru.html.net
      Ну и, наконец, официальная документация по HTML — http://www.w3.org — здесь также почему-то используются относительные ссылки (relative uri)… с чего бы они пишут в документации «неверные» вещи, не подскажете? :)

  31. Михаил

    cy-pr.com/tools/analyzer/
    И посмотрите ка великолепно у вас образуется промежуточный каталог /../

    Такое работает, но при проверки на битые ссылки, всё это вылезает!
    Так делать — нельзя! Это неграмотно, относительные ссылки должны начинаться с первой после домена папки!

    • Андрей Кудлай

      Так а что в этом плохого? Это что — битая ссылка по Вашему? Отнюдь нет. Попросту анализатор так показывает ссылки на внутренние страницы. Относительно текущего документа (мы ведь работаем с относительными ссылками), так вот, относительно текущего документа — это правильная ссылка. Битая же ссылка — это ссылка, которая ведет в никуда, ссылка, при переходе по которой сервер отдает ошибку 404.
      Ну можете посмотреть еще через анализатор предложенную выше страницу консорциума (http://www.w3.org/TR/html401/struct/links.html), разрабатывающего стандарты для веба. Там Вы также обнаружите «промежуточный каталог». На самом деле это не промежуточный каталог, это родительский каталог, который имеется в ссылке, поскольку только относительно него (опять же, мы работает с относительными ссылками) можно обратиться к каталогу на одном уровне относительно родителя. Кстати, на вопрос Вы так и не ответили — почему же в документации пишут, что так можно делать и делают сами?
      И еще вопрос. Представим, что я новичок в изучении веба. И вот я читаю Ваш комментарий по данному вопросу и документацию от разработчиков Интернета и стандартов по этому же вопросу. Как Вы думаете, кому мне верить? Ответ очевиден — документации.
      Если Вы продолжите в последующих комментариях игнорировать мои встречные вопросы, тогда оставляю за собой право считать дальнейшую дискуссию банальным флудом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree