Робимо сайт на html: як вставити гіперпосилання правильно. Урок 4.

Робимо сайт - як вставити посилання - Уроки HTML - 4

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

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

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

Меню можна розташуйте в лівій колонці або там, де ви вважаєте більш прийнятним. Меню зазвичай складається з рубрик, які будуть на сайті. Наприклад: Головна, Завантажити, Фото, Гостьова, Посилання - ну наприклад, п`ять сторінок. Якщо у вас передбачено більше сторінок сайту з рубриками то робіть відразу - HTML тим і поганий, що доведеться редагувати кожну сторінку окремо, але нас в разі чого це не зупинить.

Тег гіперпосилання -
Шлях до файлу вказується в лапках.
Є так само і параметри посилання, але я вам розповім про одному параметра - target - значення якого вказує як буде відкриватися сторінка на яку вказує ця посилання.
Target = _blank - сторінка буде відкриватися в окремому вікні.
Якщо параметра target немає, то посилання відкривається в тому ж вікні.

Приклад посилання на вашу головну сторінку: Головна - це посилання буде працювати тільки на вашому сайті, для обміну з іншими сайтами вона не підійде. Якщо ви звернули увагу розширення файлу головної сторінки .htm, якщо розширення інше, то і посилання на головну сторінку сайту повинна бути змінена.

Відео: Картинки в html. Як вставити посилання в картинку?

Процес створення меню, його ми будемо розміщувати між тегами і :
1. Так як самих сторінок на які ми будемо посилатися ще немає, ми просто поки напишемо їх назва а потім створимо. Раніше сторінки називалися index1.htm, index2.htm і т.д. або index1-0.htm, index1-1.htm і т.д., але зараз більше прийнято давати зрозумілі імена сторінок тому пошуковики навчилися читати імена сторінок і це ніби як впливає на позиції сайту в пошуковій системі, тому ми залишимо ім`я головної сторінки сайту без змін (при зверненні до сайту йде пошук головної сторінки і це файл index, розширення може бути не таким як у нас, а ось ім`я не відрізняється), але інші сторінки ми перейменуємо. Отже записуємо посилання на сторінки Головна Завантажити ФотоГостеваяСсилкі Зверніть увагу, що всі імена (неіснуючих поки) сторінок сайту ми записуємо англійськими літерами, крім того всі наші сторінки будуть відкриватися в одному вікні - ми прибрали параметр таргет (Target).
2. Тепер потрібно оновити сторінку - ви побачите, що всі посилання вишикувалися в ряд, одна за однією - якщо така позиція вас влаштовує, то можете зробити трохи кращі розділивши посилання значками. Наприклад: Головна | завантажити | фото | Гостьова | Посилання Просто скопіюйте цей текст собі в сторінку, вставте, поновіть сторінку і ви побачите, що вийшло, поекспериментуйте.
3. Якщо ж вам потрібно, щоб посилання йшли вниз по одній на кожному рядку, то потрібно відокремити їх тегом
Про це тезі ми поговоримо трохи пізніше, коли будемо розглядати редагування тексту, але дії від цього тега такі ж як і від натискання кнопки Enter - текст переходить на нову сходинку, цей тег НЕ парний і його ви запам`ятаєте швидше за інших. Наприклад: Головна
завантажити
фото
Гостьова
Посилання Зверніть увагу, якщо ви вставите ці посилання вони будуть розташовуватися по одній на сторінці.

Наше меню готове, тільки один мінус - при натисканні на посилання відкривається сторінка з повідомленням про помилку.

Тепер потрібно створити сторінки 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. Повторюємо процес поки все траніци не будуть створені.

Відео: Програмування html.Созданіе сайту в блокноте.Урок 2 Вставка ізображенія.Фон зображення

Якщо ми хочемо, щоб замість написів в меню були картинки, то ми повинні замість тексту поставити між тегами ЗАСЛАННЯ НА ЗОБРАЖЕННЯ
Приклад: Ця картинка буде вести на сторінку «Завантажити». Тільки я радив би ще прописати параметри картинки. приклад

Ось тепер ми можемо поговорити про посилання для обміну, такі посилання на ваш сайт, повинні бути повними. Наприклад: Персональний сайт фотографа Це текстове посилання.

банер -

Посилання на файли нічим не відрізняються від посилань на сторінки, наприклад посилання на архів fot-zima.zip лежить на вашому сайті буде виглядати так Фотографії зимових пейзажів
Якщо файл fot-zima.zip знаходиться не в кореневому каталозі, а в паку downloads вашого сайту, то посилання буде виглядати так - Фотографії зимових пейзажів

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

Прошу задавати питання і висловлювати свою думку з приводу статті.