Якщо потрібно за посиланням відкрити інший документ, то потрібно в тезі а, як значення атрибута href вказати ім'я файлу (зі шляхом або без шляху), на який потрібно перейти.
Якщо обидва файли знаходяться в одній папці, то достатньо просто вказати ім'я файлу з розширенням.
Якщо файли знаходяться в різних папках, то потрібно вказати відносний шлях до файлу.
Створимо кілька пов'язаних гіперпосиланнями сторінок. Всі файли розташовуватимемо в одній папці. Тому посилання на файли можна робити без шляхів.
Зробимо у цьому файлі тільки меню. Відображення у браузері:
При клацанні на першому посиланні відкривається файл 1.html. При клацанні на другому посиланні відкривається файл 2.html. При клацанні на третьому посиланні відкривається файл 3.html.
Відображення у блокноті:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Найпопулярніші служби Інтернету</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
h2 {
color: #3498db;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
a {
color: #2980b9;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.back-to-top {
display: block;
text-align: right;
margin-top: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h1>Найпопулярніші служби</h1>
<ul>
<li><a href="1.html">Служба передачі гіпертексту</a></li>
<li><a href="2.html">Служба передачі файлів</a></li>
<li><a href="3.html">Служба груп новин</a></li>
</ul>
</body>
</html>
Відображення у браузері:
При клацанні на посиланні «На початок» відкривається файл 0.html. Відображення у блокноті:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Найпопулярніші служби Інтернету</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
h2 {
color: #3498db;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
a {
color: #2980b9;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.back-to-top {
display: block;
text-align: right;
margin-top: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h2>Служба передачі гіпертексту</h2>
<p>Ця служба, заснована на протоколі HTTP, використовується у 99% посилань.</p>
<p><a href="http://www.microsoft.com/ukraine/defaulte.htm">http://www.microsoft.com/ukraine/defaulte.htm</a></p>
<a href="0.html" class="back-to-top">На початок</a>
</body>
</html>
Відображення у браузері:
При клацанні на посиланні «На початок» відкривається файл 0.html. Відображення у блокноті:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Найпопулярніші служби Інтернету</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
h2 {
color: #3498db;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
a {
color: #2980b9;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.back-to-top {
display: block;
text-align: right;
margin-top: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h2>Служба передачі файлів</h2>
<p>Протокол FTP дозволяє працювати з файлами та папками на віддаленому вузлі так само, як і на звичайному локальному комп'ютері.</p>
<p><a href="ftp://ftp.microsoft.com/welcome.txt">ftp://ftp.microsoft.com/welcome.txt</a></p>
<p>Зазвичай до імені машини, яка підтримує службу передачі файлів, додають "ftp".</p>
<a href="0.html" class="back-to-top">На початок</a>
</body>
</html>
Відображення у браузері:
При клацанні на посиланні «На початок» відкривається файл 0.html. Відображення у блокноті:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Найпопулярніші служби Інтернету</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #2c3e50;
text-align: center;
}
h2 {
color: #3498db;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
a {
color: #2980b9;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.back-to-top {
display: block;
text-align: right;
margin-top: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h2>Служба груп новин</h2>
<p>Групи новин є зручним середовищем для спілкування.</p>
<p><a href="news://msmews.microsoft.com/microsoft.public.webdesign.html">news://msmews.microsoft.com/microsoft.public.webdesign.html</a></p>
<a href="0.html" class="back-to-top">На початок</a>
</body>
</html>