-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
146 lines (142 loc) · 5.92 KB
/
index.html
File metadata and controls
146 lines (142 loc) · 5.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header class="header">
<nav>
<ul id="header">
<li>
<a href="">
HOME
</a>
</li>
<li>
<a href="">
HTML
</a>
</li>
<li>
<a href="">
CSS
</a>
</li>
<li>
<a href="">
JAVASCRIPT
</a>
</li>
</ul>
</nav>
</header>
<main>
<div>
<h1>HTML Путь к файлу</h1>
<a href="#header"><- Назад </a>
<a href="#footer">Вперед -></a>
<p>Путь к файлу описывает расположение файла в структуре папок веб сайта.</p>
<div>
<br>
<h2>Примеры пути к файлам</h2>
<br>
<div>
<span>Путь</span> <span>Описание</span><br>
<span>img
src="picture.jpg"</span> <span>picture.jpg
находится в той же папке, что и текущая страница</span><br>
<span>img src="images/picture.jpg"</span> <span>picture.jpg находится в
папке images в текущей папке</span><br>
<span>img src="/images/picture.jpg"</span> <span>picture.jpg находится в папке
images в корне текущего веб-сайта</span><br>
<span>img
src="../picture.jpg"</span> <span>picture.jpg
находится в папке на один уровень выше текущей папки</span><br>
</div>
</div>
<div>
<br>
<br>
<h2>Пути к HTML файлам</h2>
<p>Путь к файлу описывает расположение файла в структуре папок вебсайта.</p>
<p>Пути к файлам используются при связывании с внешними файлами, например:</p>
<ul>
<li>Веб-страницы</li>
<li>Изображения</li>
<li>Таблицы стилей</li>
<li>JavaScripts</li>
</ul>
</div>
<br>
<br>
<div>
<h2>Абсолютные пути к файлам</h2>
<p>Абсолютный путь к файлу - это полный URL адрес файла:</p>
<h4>Пример</h4>
<div>
<p><img src="http://schoolsw3.com/images/picture.jpg" alt="Горы"></p>
<a href="#">Редактор кода -></a>
<br>
</div>
</div>
<p>Теги <img> и атрибуты src и alt описаны в главе HTML Изображения.</p>
<br>
<br>
<div>
<h2>Относительные пути к файлам</h2>
<p>Относительный путь к файлу указывает на файл относительно текущей страницы.</p>
<div>
<p>В этом примере путь к файлу указывает на файл в папке images, расположенной в корне текущего
веб-сайта:</p>
<h4>Пример</h4>
<p><img src="/images/picture.jpg" alt="Горы"></p>
<a href="#">Редактор кода -></a>
</div>
<div>
<br>
<br>
<p>В этом примере путь к файлу указывает на файл в папке images находятся в текущей папке:</p>
<h4>Пример</h4>
<p><img src="images/picture.jpg" alt="Горы"></p>
<a href="#">Редактор кода -></a>
</div>
<div>
<br>
<br>
<p>В этом примере путь к файлу указывает на файл в папке images находятся в папке на один уровень выше
текущей папки:</p>
<h4>Пример</h4>
<p><img src="../images/picture.jpg" alt="Горы"></p>
<a href="#">Редактор кода -></a>
</div>
</div>
<div>
<br>
<h2>Практика лучше всего</h2>
<p>Рекомендуется использовать относительные пути к файлам (если возможно).</p>
<p>При использовании относительных путей к файлам, веб-страницы не будут привязаны к вашему текущему
базовому URL-адрес. Все ссылки будут работать на вашем собственном компьютере (localhost), а также на
вашем текущем общественном домене и вашем будущем публичном домене. </p>
</div>
<a href="#header"><- Назад</a>
<a href="#footer">Вперед -></a>
</div>
<p>Картинок там не было, так что держите котика)</p>
<img src="./img/cat.jpg" alt="Котик">
<p><mark>Я просто хотел сделать красиво, не ругайте сильно)))</mark></p>
<br>
<br>
</main>
<footer>
<ul id="footer">
<li><a href="#">Сообщить ошибку</a></li>
<li><a href="#">Печать страницы</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">О нас</a></li>
</ul>
</footer>
</body>
</html>