Поточний час:
Сьогодні 23 липня, понеділок 2018 рік
Zura-Blog 3 роки 7 місяців 4 дня

Ваш ip адрес:54.224.103.239

Доброго дня!
Ви обновили сторінку в 18 : 35
Статистика

Кількість публікацій на блозі: 376
Кількість коментарів на блозі: 107
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_31aПривет, сегодня решил вернуться к теме о ссылках в HTML. В предыдущей публикации “Что такое гиперссылки” был приведен только один пример кода для ссылок, было сказано о категории ссылок, и как создать страницу со ссылками, в которой вы можите сохранять свои интересные ссылки..

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

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

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

Как работает такая ссылка на странице можно посмотреть перейдя на страницу “Примеры HTML”, в конце страницы находится блок с номерами (1,2,3,4), для каждого номера предназначен пример html-кода, нажимаем на номер и попадаем на ту частичку страницы, где находится тот пример html-кода по которому закреплен  номер (индентификатор), на который мы щелкнули в конце страницы.

Перейти на страницу “Примеры HTML” можно  здесь, или подвести курсор мыши к кнопке “HTML” в верхнем меню сайта, и из выпадающего списка клацнуть кнопку “Примеры HTML”.

Ссылка на сайт

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

<a href= “http://google.ua” target= “_blаnk” >GOOGLE</a>.

Начинаем разбирать по частям, как прописать ссылку и что значит каждая часть

1 первая ⇒ Открываем тег “а” <a это парный тег,

2 вторая ⇒  дальше нужно дописать к парному тегу  “а”  атрибут “href” к тегу “а” <a href

3 третья ⇒ дальше указываем куда ведет ссылка, дописываем ссылку к атрибуту  “href = ” “,   в кавычках указываем ссылку <a href= “http://google.ua” — я выбрал для примера ссылку на гугл.

4 четвертая ⇒  конечно тег  “а” нужно закрыть  </a>  <a href= “http://google.ua” </a>

 

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

5 ⇒ ддля того чтобы ссылки открылась в другой вкладке,  нужно прописать еще один атрибут “target” 

куде именно прописать, смотрим на код  (выше),  после   “http://google.ua”  дописываем  target= ” “  и в кавычках указываем значение   _blank  (значит с новой страницы) перед закрывающим тегом </a>

 ссылка будет открыватся в новой вкладке

<a href= ” http://google.ua” target= “_blank ” >GOOGLE</a> вот этот код  чтобы страница открывалась в новом окне.

 

<a href= " http://google.ua" target= "_blank " >GOOGLE</a>

ссылка будет открыватся на странице

<a href= “http://google.ua” </a> код откроет ссылку в том же окне.

<a href= " http://google.ua" target= "_blank " >GOOGLE</a>

Ссылки – id

Теперь хочу рассказать о еще одном виде ссылок, о котором я упоминал в начале публикации. Они называются “якорные ссылки”.

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

Например и как такие ссылки работают, можно посмотреть на странице “Примеры HTML”.

Возьмем к примеру страницу Zura–Blog которая называется “Примеры HTML” там находится несколько таблиц, и я хочу сделать так, чтобы при нажатии на цифру  меня перекинуло на тот абзац где находится нужная мне таблица на странице.

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

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

 

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

Как создать подобный вид ссылки.

1 ⇒ Прописываем теги,  параграф.<p></p>

2 ⇒ Между параграфами давайте пропишем  название<p>Таблиця 1.</p>

3 ⇒ А теперь ссылку  разумеется вначале  нужно открыть тег  “а”  далее указать атрибут  href= ” ”   теперь мы должны  выбрать элемент, и указать в нем индетификатор “id”   я  для примера возьму заголовок своей тренировочной страницы, и пропишу индентификатор.

<p> id= “head”  Тут зібрані всі необхідні посилання на сайти, які стануть в нагоді початківцям </p>

 

<p> id= "head"  Тут зібрані всі необхідні посилання на сайти, які стануть в нагоді початківцям </p>

 

4 ⇒  атрибут  “id”  указывает, что это индентификатор, и прописывается перед тегом <p> id= “head”

5 ⇒ Прописываємо в  абзаце <p>Таблиця 1</p> тег для ссылки с атрибутом  <a href=  в кавычках указываем название индетификатора “head”,  обезательно перед индентификатором должна быть решетка.

<p><a href= “#head” >Таблиця 1</a></p>  

 

<p><a href= "#head" >Таблиця 1</a></p>

Название индентификатора можно любое дать, не обязательно “head”.

Эти ссылки можно делать, если нужно перейти на какую-то другую страницу, просто нужно дописать  about.html “” а в кавычках указать индентификатор.  Индентификатор в свою очередь нужно прописать на html-странице.

Ссылка для того чтобы закачать файл.

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

1 ⇒  Создаем папку на сайте и прописываем название на латинском языке  “dawnloud” вы можите прописать свое название

2 ⇒ Вставляем в папку файл, например table.doc

3 ⇒ На странице в кодах прописываем абзац<p></p>, между тегами “Р”  пишем “Скачати статтю”.

<p>Скачати статтю</p>

4.Теперь делаем этот абзац со ссылкой на закачку файла. <p><a href=  в кавычках указываем название папки “dawnloud” і название файла  table.doc 

<p><a href= “dawnloud/table.doc>Скачати статтю</a></p>

 

<p><a href= "dawnloud/table.doc>Скачати статтю</a></p>

Посилання на email—адресу

1 ⇒ Прописываем теги параграфа.<p></p>

2 ⇒ Между параграфами давайте просто пропишем <p>Автор</p>

3 ⇒  Далее тег и атрибут <p><a href= ” “  а в кавычках укажем mailto: адрес почтового ящика. 

<p><a href= “mailto:ааа@mail.ru”>Автор</a></p>

<p><a href= "mailto:ааа@mail.ru">Автор</a></p>

 

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

Перед окончанием публикации хочу обратить внимание на такую ​​вещь, как грамотно выражаться, что означает сама язык  HTML.

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

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

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

На этом все.

 

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

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