-
Notifications
You must be signed in to change notification settings - Fork 4
/
pfour.html
112 lines (81 loc) · 3.51 KB
/
pfour.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="row">
<div class="column left">
<center>
<hr class="circle">
<ul class="link">
<li><a href="index.html">home</a></li>
<li><a href="ptwo.html">gh-pages</a></li>
<li><a href="pthree.html">html/css</a></li>
<li><a href="pfour.html">links</a></li>
<li><a href="pfive.html">lists</a></li>
</ul>
<hr class="circle">
</center>
</div>
<div class="column middle">
<h2>Sample Website</h2>
<h3>This is Page 4</h3>
<hr class="line">
<br><br>
<b>Absolute and Relative Links</b>
<br><br>
<p>The difference between <i>absolute</i> and <i>relative</i> links.<br><br>
<p><b>Absolute Links</b></p>
<p>An <i>absolute</i> link uses a path that leads to a source outside of your own directory.<br><br>
For instance: You want to create a link to an image on someone elses website.<br><br>
You would use something like:<br> <img src="https://www.somewebsite.com/images/picture.jpg"><br><br>
This will work for some time, but problems can occur if or when that particular website no longer exists, or if the owner changes or moves that particular image.<br>
Then you end up with a broken link (a link that points nowhere).<br><br>
Example of absolute link: <a href="https://thehappypuppysite.com/wp-content/uploads/2020/02/Black-Dogs-HP-long.jpg"> puppy</a><br>
With the link above, I have no control on how long it will remain working, since the link points to an image on a website that doesn't belong to me.<br><br><br>
</p>
<hr class="line">
<br>
<p><b>Relative Links</b></p>
<p>A <i>relative</i> link uses a path that leads to a source within your own directory.<br>
The examples below assume there is an image named 'dog.jpg' in the root directory.<br><br>
In the link below, dog.jpg is in the same directory.<br>
<img src="dog.jpg"><br><br><br>
Below, dog.jpg is in the same directory (same result as above).<br>
<img src="./dog.jpg"><br><br><br>
Below, dog.jpg is in the <i>images</i> folder of the same directory.<br>
<img src="images/dog.jpg"><br><br><br>
Below, dog.jpg is in the <i>images</i> folder, which is in the <i>files</i> folder.<br>
<img src="files/images/dog.jpg"><br><br><br>
Below, dog.jpg is in a folder one level up from current directory.<br>
<img src="../dog.jpg"><br><br><br>
Below, dog.jpg is in a folder two levels up from current directory.<br>
<img src="../../dog.jpg">
</p>
<br><br>
<center>
<a class="topper" href="#">• back to top •</a>
</center>
</div>
<div class="column right">
<p>
<b>Updates & Other Notes<br>
(in descending order)</b>
<br><br>
<p class="rc"><b>Update 5 - Mar 25th, 2023</b><br>
Small changes here and there. Fixed some typos and other little things.</p>
<p class="rc"><b>Update 4 - Nov 11, 2022</b><br>
Uploading files to GitHub.</p>
<p class="rc"><b>Update 3 - Oct 31, 2022</b><br>
GitHub Pages? Yes you can absolutely use this for GitHub Pages. Short guide on how to do that on page 2.</p>
<p class="rc"><b>Update 2 - Oct 30, 2022</b><br>
At first, this was a 2 column layout, but because I had a lot of space on the right side (almost equal to left) I added a 3rd column here, which turned out for the better since I am actually using it now.</p>
<p class="rc"><b>Update 1 - Oct 29, 2022</b><br>
Eventually I will put any updates and other notes here, in descending order (most recent at top).</p>
</div>
</div>
<div class="footer">Copyright © 2023 David Lawson • All rights reserved</div>
</body>
</html>