Делаем сайт — как вставить ссылки — Уроки HTML – 4

Делаем сайт — как вставить ссылки — Уроки HTML – 4

Делаем сайт - как вставить ссылки - Уроки HTML – 4

Делаем сайт - как вставить ссылки - Уроки HTML – 4

В прошлых уроках мы рассмотрели способ создания шаблона сайта и создали одну – единственную страничку сайта. Когда-то я прочел статью о том, что именно одностраничные сайты приносят больше всего прибыли… на самом деле похоже на правду – не было столько интернет магазинов и люди обычно совершаю два – три перехода по ссылкам на одном сайте, а тут все на одной странице. Мы не будем делать одну страничку, мы рассмотрим способ объединения страниц в сайт с помощью ссылок и поговорим о том, как меняться ссылками с другими сайтами, т.е. как должны выглядеть эти ссылки. Поговорим так же о ссылках на файлы, чтобы пользователи могли загружать файлы. Все как обычно подробно и попроще, чтобы было понятно новичкам (чайникам).


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

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

Меню можно расположите в левой колонке или там, где вы считаете более приемлемым. Меню обычно состоит из рубрик, которые будут на сайте. Например: Главная, Скачать, Фото, Гостевая, Ссылки – ну например, пять страниц. Если у вас предусмотрено больше страниц сайта с рубриками то делайте сразу – HTML тем и плох, что придется редактировать каждую страницу отдельно, но нас в случае чего это не остановит.

Тег гиперссылки — <a href=””></a>
Путь к файлу указывается в кавычках.
Имеются так же и параметры ссылки, но я вам расскажу о одном параметра – target – значение которого указывает как будет открываться страничка на которую указывает эта ссылка.
Target=_blank — страница будет открываться в отдельном окне.
Если параметра target нет, то ссылка открывается в том же окне.

Пример ссылки на вашу главную страницу: <a href=”index.htm” Target=_blank >Главная</a> — эта ссылка будет работать только на вашем сайте, для обмена с другими сайтами она не подойдет. Если вы обратили внимание расширение файла главной страницы .htm, если расширение другое, то и ссылка на главную страницу сайта должна быть изменена.

Процесс создания меню, его мы будем помещать между тегами <td> и </td>:
1. Так как самих страниц на которые мы будем ссылаться еще нет, мы просто пока напишем их название а потом создадим. Раньше страницы назывались index1.htm, index2.htm и т.д. или index1-0.htm, index1-1.htm и т.д., но сейчас больше принято давать понятные имена страницам т.к. поисковики научились читать имена страниц и это вроде как влияет на позиции сайта в поисковике, поэтому мы оставим имя главной страницы сайта без изменений ( при обращении к сайту идет поиск главной страницы и это файл index, расширение может быть не таким как у нас, а вот имя не отличается), но другие страницы мы переименуем. Итак записываем ссылки на страницы <a href=”index.htm”>Главная</a><a href=”skachat.htm”> Скачать </a><a href=”foto.htm”> Фото</a><a href=”guest.htm”>Гостевая</a><a href=”links.htm”>Ссылки </a> Обратите внимание, что все имена (несуществующих пока) страниц сайта мы записываем английскими буквами, кроме того все наши странички будут открываться в одном окне – мы убрали параметр таргет (Target).
2. Теперь нужно обновить страницу – вы увидете, что все ссылки выстроились в ряд, одна за одной – если такая позиция вас устраивает, то можете сделать чуть получше разделив ссылки значками. Например: <a href=”index.htm”>Главная</a> | <a href=”skachat.htm”>Скачать</a> | <a href=”foto.htm”> Фото</a> | <a href=”guest.htm”>Гостевая</a> | <a href=”links.htm”>Ссылки</a> Просто скопируйте этот текст себе в страничку, вставьте, обновите страницу и вы увидите, что получилось, поэкспериментируйте.
3. Если же вам нужно, чтобы ссылки шли вниз по одной на каждой строчке, то нужно отделить их тегом <br> О этом теге мы поговорим чуть позже, когда будем рассматривать редактирование текста, но действия от этого тега такие же как и от нажатия кнопки Enter – текст переходит на новую строчку, этот тег не парный и его вы запомните быстрее остальных. Например: <a href=”index.htm”>Главная</a> <br> <a href=”skachat.htm”>Скачать</a> <br> <a href=”foto.htm”> Фото</a> <br> <a href=”guest.htm”>Гостевая</a> <br> <a href=”links.htm”>Ссылки</a> Обратите внимание, если вы вставите эти ссылки они будут располагаться по одной на странице.

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

Теперь нужно создать страницы skachat.htm, foto.htm, guest.htm, links.htm – этих страниц в вашей папке moisait нет, есть только страница index.htm. Мы будем просто копировать файл index.htm и из него делать все наши страницы.

1. Выделяем файл index.htm. Для этого подводим курсор (стрелочку) мыши к файлу и нажимаем левую кнопку мыши – цвет значка, надписи и фона поменяется – файл выделен.

2. Далее нам необходимо скопировать файл, для этого одним из (некоторые говорят способов копирования восемь ) способов копируем файл. Вариант из простых – нажимаем «Правка / Копировать» (вверху открытого окна, в котором вы выделяли ваш файл (Ваша папка moisait). Если простой вариант не подходит жмем на клавиатуре Ctrl + C – для этого нажимаем и держим Ctrl и один раз нажимаем C

3. Вставляем файл index.htm в папку moisait (или если вы переименовали то в папку с данным вами именем), для этого нажимаем «Правка / вставить» или Ctrl + V Должен появиться файл «Копия index.htm» — теперь в вашей папке два файла.

4. Переименовываем файл «Копия index.htm» в skachat.htm

5. Повторяем процесс пока все траницы не будут созданы.

Если мы хотим, чтобы вместо надписей в меню были картинки, то мы должны вместо текста поставить между тегами <a href=”index.htm” > ССЫЛКУ НА ИЗОБРАЖЕНИЕ </a>
Пример: <a href=” skachat.htm” ><img src=”images/diz/kartinka.jpg” ></a> Эта картинка будет вести на страницу «Скачать». Только я советовал бы еще прописать параметры картинки. Пример <a href=” skachat.htm” ><img src=”images/diz/kartinka.jpg” Width=30px Height=25px Alt=”Скачать бесплатно программное обеспечение для обработки фотографий” border=0></a>

Вот теперь мы можем поговорить о ссылках для обмена , такие ссылки на ваш сайт, должны быть полными. Например: <a href=”http://www.vash-sait.besplatni-xosting.ru” > Персональный сайт фотографа </a> Это текстовая ссылка.

Баннер — <a href=” http://www.vash-sait.besplatni-xosting.ru ” ><img src=” http://www.vash-sait.besplatni-xosting.ru/images/diz/kartinka.jpg” Width=30px Height=25px Alt=”Скачать бесплатно программное обеспечение для обработки фотографий” border=0></a

Ссылки на файлы ничем не отличаются от ссылок на страницы, например ссылка на архив fot-zima.zip лежащий на вашем сайте будет выглядеть так <a href=”fot-zima.zip” >Фотографии зимних пейзажей</a>
Если файл fot-zima.zip находится не в корневом каталоге, а в паке downloads вашего сайта, то ссылка будет выглядеть так — <a href=” downloads/fot-zima.zip” >Фотографии зимних пейзажей</a>


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

Прошу задавать вопросы и высказывать свое мнение по поводу статьи.


Понравилась статья?
Закажи бесплатную подписку!

Сообщения по теме:

  • Делаем сайт — текст — Уроки HTML — 5
  • как сделать успешный сайт?
  • Как сделать сайт и быть на нем админом

  • Метки: , , ,

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

    1. Александра 05.08.2009 #

      Здравствуйте, Сергей.
      Подскажите, пожалуйста, как сделать так, чтобы ссылка (например, такая: ) открывалась в новом окне. Заранее спасибо за ответ.
      С уважением,
      Александра

    2. Sergio9 05.08.2009 #

      Добавте параметр target=_blank

      Получится примерно так < a href="http://www.lamer-stop.ru/2009/06/23/delaem-sajt-kak-vstavit-ssylki-uroki-html-4/”" target=_blank>Текст ссылки < /a>

      Только пробела между < и a или < и /a> быть не должно.

    3. Александра 05.08.2009 #

      спасибо большое!

    4. Sergio9 05.08.2009 #

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

    5. SMS 22.12.2009 #

      Спасибо огромное!

    6. Slava 05.05.2010 #

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

    7. admin 05.05.2010 #

      Slava: разве? это скрипты которые преобразуют адрес, собирают и выдают страницу.

    8. Slava 05.05.2010 #

      Если я правельно понял то название страниц пишутса только англо.Но можно их писать англо буквами но на руский манер.Пример{silki=сылки}

    9. admin 05.05.2010 #

      Slava: если ssilki, то так вроде для раскрутки даже лучше, чем просто index или links, хотя с главной страницей лучше обойтись без экспериментов (т.е. index.htm и все тут (это для html)).

    10. Slava 06.05.2010 #

      Здраствуйте.Скажыте ув.Админ,если сохранить страницу на комп то название пишетса на руском,то вот это название это то что в ссылке находитса или то что находитса в теге title.Например ваша даная страница сохранилась так{Делаем сайт-как вставить ссылки и т.Д.}.И ищо один вопрос,страница делаетса как документ html тоесть ssilki.html то в ссылку надо писать все или просто ssilki.Сможет ли поесковик найти то что надо?Спасибо.

    11. admin 06.05.2010 #

      Slava: 1. имя файла при сохранении берется из тайтла.
      2. нужно писать имя ссылки + расширение. ssilki.html — правильно ( если конечно расширение не htm или php, тогда ssilki.htm или ssilki.php)
      3. Поисковик на сайте находит и загружает главную страницу index.htm, затем индексирует ее, и затем загружает для индексации другие страницы, ссылки на которые он обнаружил.

    12. Slava 06.05.2010 #

      Большое человеческое спасибо!!!Очень помогли.

    13. Бурундушка 11.05.2010 #

      Спасибо огромное! Вы мне очень помогли)))

    14. Максим 14.05.2010 #

      А у меня вот такая фигня!

      У вас написано «4. Переименовываем файл «Копия _index.htm» в skachat.htm»
      А в скрипте мы используем это <a href=»index.htm» rel=»nofollow»>Главная</a> и т.д…
      Я все папки переименновал…и когда я захожу например на туже главную у меня выдает опять ошибку!И я сразу заметил ссылку D:moisait”index.htm”
      в этой ссылке в канце где index.htm используются почему то ковычки как и в теге…И так же со всеми выдает ошибку…И не могу переименновать файл с кавычками т.к. нельзя!!!Помогите

    15. admin 15.05.2010 #

      Максим: а что за кавычки? попробуй вообще без них.. — это случаем не апострофы? не по одной кавычке делаешь?

      Вообще кавычки получаем нажимая на Shift и удерживая жмем на цифру 2 — если включен русский язык, то все должно получиться, если английский язык, то нужно нажимать Shift и русскую букву Э — на этой кнопке тоже есть кавычки.

      И еще, я чтобы ссылка не получалась активной делал пробел между кавычкой и ссылкой » index.htm» так вот в начале не должно быть пробела. Кстати попробуй скопировать ссылку и вставить себе.

    16. Максим 15.05.2010 #

      Делал и на русском ковычки SHIFT + 2 И на английском SIFT + э.
      Сохраняю,обновляю страницу сайта,нажимаю фото нормально,нажимаю главная нормальная и потом я нажимаю любое скачать,ссылки,главная на все выдает ошибку опять…хотя первые 2 раза получилось…Не знаю что за проблема такая…Ну не в какую(((Если вообще ковычки стераю,они потом сами появляются… Всё равно такая ссылка — D:\moisait\”skachat.htm” …ну впринципи я в адресной строке если ковычки убераю,у меня заходит на сайт…но не буду же я всё время уберать ковычки…Помогите пожалуйста,думаю у кого то та же проблема была,молчит

    17. admin 15.05.2010 #

      Максим: возможно если какие-то ссылки работают, а другие нет, значит что-то ты все-таки сделал правильно и можно продублировать эти же ссылки просто изменив их.
      Судя по всему у тебя проблемы с ссылкой на страницу skachat.htm

      Я как-то сталкивался с ерундой когда появлялся скрипт на странице, даже если я го удалял — подозрения были, что заражен компьютер того, чья страница мне попала в руки, я тогда создал копию нормальной страницы, переименовал и скопировал текст из глючной, а затем вставил — все заработало..
      Кстати можно посмотреть полностью ссылку на страницу — skachat.htm .
      Случаем она не так выглядит — D:\moisait\”skachat.htm” ? или D:\moisait\skachat.htm ?

    18. Максим 15.05.2010 #

      Нет,Я просто всё сделал как надо..Захожу на одну работает,на вторую работает а на третью не работает…и после этого третьего клика вообще даже эти первые две не работают…
      Да да ссылка выглядет именно так D:\moisait\”skachat.htm”
      С кавычками,но повторюсь если убрать ковычки эта ссылка будет работать правильно и всё будет норм…Ну я не хочу всё время переходя на ссылки из меню стерать в адресной строке эти кавычка,это долго и не удобно…Хочется просто нормально перейти и всё

    19. admin 15.05.2010 #

      Максим: я имел ввиду в коде — так < a href=D:\moisait\”skachat.htm” >текст ссылки < /a>т.к. в коде должно быть < a href="skachat.htm">текст ссылки < /a>
      А на какой странице вы находитесь в момент когда перестает работать — на третьей? Может именно на этой странице и ошибка?

    20. Максим 15.05.2010 #

      В коде html было просто название skachat.htm…всё теперь понял проблему…вообще ковычки не только в коде на главной убрал но и везде…Всё теперь хорошо:)Спасибо…Жду новых статей…Опублекуйте пожалуйста какую нибудь новую статью по более сложному обновлению сайта…Хочу научиться делать хотя бы такой сайтик:) в смысли не та ссылка на которую вы зашли а тот что в ней…Хочу узнать много нового:)

    21. admin 15.05.2010 #

      Максим: прошел по ссылке — там как я понял флеш плеер с базами анекдотов самое сложное, а все остальное так же как и у HTML сайта.

      Я советовал бы не заниматься подобными сайтами (видимо взломан и украдена база) т.к. там конечно красивый дизайн, но этого можно добиться и воспользовавшись обычным шаблоном — есть бесплатные шаблоны. Можно нарисовать шаблон и разрезать самостоятельно — http://www.lamer-stop.ru/2009/07/28/kak-sdelat-sajt-rezhem-shablon-v-photoshop/

      Кстати в видео уроке — http://www.lamer-stop.ru/2009/08/07/kak-sdelat-sajt-s-pomoshhyu-frontpage/ именно про создание сайта на шаблоне, а если делать только на html, без применения изображений, то конечно так красиво и не получиться.

      Вот статья про то, как делают красивые сайты —
      http://www.lamer-stop.ru/2009/06/21/delal-sajt-sam-a-poluchilos-xuzhe-pochemu/

      Вот про то, где можно скачать шаблон — http://www.lamer-stop.ru/2009/06/14/gde-skachat-besplatnye-shablony-dlya-sajta/

      Тех статей о html которые есть достаточно, для того, чтобы создавать свои сайты — на одном моем сейчас 2 — 7 тысяч посетителей в день, но в наше время сайты делают уже не на html страницах, а просто устанавливают CMS — типа вот этого сайта.

      Дальше — после изучения html, стоит изучать программирование профессионально, т.к. все порталы созданы уже не на html, а с применением нескольких языков программирования — java script, php, ajax и т.д.
      Я начинал изучать java script, php, action script, но не пошло :) в смысле не понравилось, хотя и отметился скриптом комментариев и формой для отправки сообщений на одном сайте скриптов.

      Советую пролистать раздел — http://www.lamer-stop.ru/category/delaem-sajt/ если будут вопросы задавайте и если будут еще идеи тем для публикации — готов рассмотреть и возможно написать инструкцию.

      И еще, к шаблонам лучше переходить все-таки освоив HTML — легче потом понимать, куда текст вставляется :)

    22. Тулька 18.04.2011 #

      Здравствуйте, поскольку на Вашем сайте присутсвуют уроки html и про флешки уроки есть, то рискну спросить :)
      Вопрос — Сделала слайд-шоу из моих работ. Вставила код в ЖЖ-блог и всё нормуль, единственное, не могу понять где в этом коде регулируется громкость музыки? Воспроизведение здесь вроде автоматическое, если я правильно поняла, но музыки не слышно, нужно каждый раз добавлять громкость. Где тут в коде эта громкость? Буду Вам очень признательна за помощь :).
      Вот код:
       

    23. admin 18.04.2011 #

      Тулька, если я правильно понял, вы вставляете флеш презентацию… если да, то попробуйте во время вставки звука в презентацию добавить эффект Custom (Пользовательский) и передвинув маркеры повыше добиться большей громкости….
      Или, вам в своей презентации нужно в action script посмотреть какие есть способы управления звуком и изменить громкость звука… так же сохраняя во флеш, можно выбрать качество звука получше.
      Специальных тегов в html для изменения громкости не знаю… попробуйте параметр volume=5… но это только если вы вставляете звук напрямую в страницу.
      Попробуйте поискать еще по запросу «macromedia flash вставка звука громкость»

    24. Vicky 30.08.2011 #

      Здравствуйте, скажите а можно ли в Html прописать несколько гиперссылок (дело в том что у меня gif файл,необходимо что бы при нажатии на одну картинку открывалась одна страница, а при нажатии на другую картинку анимации открывалась другая страница,картинок в анимации 6 )?????

    25. admin 30.08.2011 #

      Vicky, так только во флеш можно сделать (на ява скрипт тоже наверное), но гиф файл один и потому ссылка к нему будет прописана только одна.

    26. Николаевич 24.12.2011 #

      Я вставляю фильм:

      На моём компе это срабатывает, а при записи на сервер — НЕТ!
      Что-то нужено добкавить на сервер? Что именно? И чтобы фильм показывался именно в назначенном окне! И желательно без предварительных закачек на какие-либо блоги.
      Буду очень признателен, если приведете подробные коды!

    27. admin 25.12.2011 #

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

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

    28. Алинка))) 08.02.2012 #

      супер)))

    29. Владимир 06.03.2012 #

      Дд.как сделать кнопку :

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

    30. admin 06.03.2012 #

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

    31. Салли 22.08.2013 #

      Здравствуйте,подскажите что бы работать на HTML что нужно скачать или установить? Где писать теги? И как потом вывести его на сайт? Я новичок, ничего не понимаю,

    32. admin 22.08.2013 #

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

      Салли, а для какой цели Вам сайт на html? Может я смогу что-то еще подсказать.

    33. Laslo 23.12.2013 #

      Отлично, спасибо!

    Оставить комментарий

    

    0.49MB/0.00046 sec