-
Notifications
You must be signed in to change notification settings - Fork 4
/
pthree.html
153 lines (117 loc) · 5.11 KB
/
pthree.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
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
147
148
149
150
151
152
<!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 3</h3>
<hr class="line">
<br><br>
<b>HTML and CSS</b>
<br><br>
<p><b>HTML</b> stands for <b>Hyper Text Markup Language</b></p>
<p>HTML is a markup language used to design websites.<br>
With HTML, we can create web pages and even entire websites.<br>
In html we use tags. Most tags have an <i>opening</i> < > and <i>closing</i> < /> tag. <br>
The content of your page (text, images, etc.) goes in between these tags.<br>
There are tags for bold, italics, paragraphs, headers, links, images, and so on.</p>
<p>Necessary tags in each html page are the html tag, head tag, body tag, and DOCTYPE.<br>
I like to include a title tag also, as it reflects the title of your page in the browsers title bar.</p>
<p>Every page needs to include the tags below:<br><br>
<ul>
<li>DOCTYPE tag <!DOCTYPE html> - specifies to browsers which Document Type is being used.</li><br>
<li>Opening html tag <html> - everything between this tag, and matching closing tag is html.</li><br>
<li>Opening head tag <head> - contains title and other metadata stuff used by search engines.</li><br>
<li>Closing head tag </head> - used to close off head section and begin body section.</li><br>
<li>Opening body tag <body> - used to begin main content of your pages</li><br>
<li>Closing body tag </body> - end of content</li><br>
<li>Closing html tag </html> - end of html (also the last line).</li><br>
</ul>
<p>In that order.</p>
<br>
<p>The title tag is not necessary for the site to work, it is optional.<br>
If you include a title tag, place it between the opening and closing head tags (head section).<br><br>
Example:<br><br>
<!DOCTYPE html><br><br>
<html><br><br>
<head><br>
<title>Home Page</title><br>
</head><br><br>
<body><br>
Content goes here (between the body tags).<br>
</body><br><br>
</html>
<br><br><br>
That's it.<br>
Notice, all tags have closing tags, except the doctype, which doesn't need one.<br>
If you save that little bit in a text editor (i.e. test.html)<br>
and open it in a browser, you will see that it works.
</p>
<br>
<hr class="line">
<br>
<p><b>CSS</b> stands for <b>Cascading Style Sheet</b></p>
<p>A style sheet is used to <i>style</i> your website.<br>
Everything on your website (text, margins, borders, images, etc.) has properties.<br>
Using style sheets (css) makes designing your website easy by assigning certain properties<br>
to elements within your website.<br>
For instance, if you want all the headers on every page of your site to be the same font, size, and color, you would do this in your style sheet.<br>
If you want all <b>bold</b> text to be Arial, 12pt, green. You would assign those properties in the css file.</p>
<p>Example:<br><br>
b {<br>
  font-family: Arial, Times, sans-serif;<br>
  font-size: 12pt;<br>
  color: green;<br>
}
</p>
<p>Notice the curly brackets and semi-colons, both must be used, and in place.<br>
We also name 3 fonts here, arial is priority (first in line).<br>
If for some reason, someone doesn't have that font installed on their system, times (second in line) would then be used,
if that fails, serif would be used. Think of these extra fonts as back-ups.<br><br>
With CSS, indentation is not absolutely necessary, but keeps code neat, and easily read-able.
Also, it's good practice, and sometimes (with other languages) <i>is</i> necessary.<br>
</p>
<p>CSS has come a long way and is very useful in many ways. It is very much worth learning if you're into Web Design.
</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>