-
Notifications
You must be signed in to change notification settings - Fork 0
/
glossary.html
215 lines (191 loc) · 9.88 KB
/
glossary.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Glossary Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Logo -->
<header>
<a href="index.html"><img id="logo" src="Content-images/thedistrict.png" alt="The Game District Logo"> </a>
</header>
<!-- Bar START-->
<div class="page-bar">
<!-- Dropdown menu -->
<a><i id="dropdown-menu" class="fas fa-bars"></i></a>
<!-- Search Bar -->
<div class="search-box">
<input class="search-txt" type="text" name="Search" placeholder="Search ...">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<!-- Bar END-->
<!-- Sidebar -->
<div id="sidebar" class="show-sidebar">
<a href="index.html">Landing <i id="home-icon" class="fas fa-home"></i> </a>
<a href="reviews.html">Reviews <i id="reviews-icon" class="fas fa-file-alt"></i> </a>
<a href="glossary.html" class="active">Glossary <i id="glossary-icon" class="fas fa-book-open"></i></a>
<a href="jobs.html">Jobs <i id="jobs-icon" class="fas fa-briefcase"></i></a>
<a href="tutorials.html">Tutorials <i id="tutorials-icon" class="fas fa-chalkboard-teacher"></i></a>
</div>
<!-- CONTENT START -->
<div class="table-container">
<table class="glossary-table">
<caption class="table-title"> CSS Information taken from: <a href="https://quizlet.com/70510784/html-and-css-vocabulary-flash-cards/">https://quizlet.com/70510784/html-and-css-vocabulary-flash-cards/ </a> </caption>
<thead>
<tr>
<th>Tag</th>
<th>Meaning</th>
</tr>
</thead>
<tbody>
<tr>
<td>background-color</td>
<td>Used to set the color of the background of a element</td>
</tr>
<tr>
<td>height</td>
<td>Is responsable for setting the height of a element</td>
</tr>
<tr>
<td>width</td>
<td>Is responsible for setting the width of a element</td>
</tr>
<tr>
<td>padding</td>
<td> Padding sets the amount of space that's between a object and its orbit (area around it).</td>
</tr>
<tr>
<td>font</td>
<td>For setting the attributes of font like if it's bold, italic or underlined ect. </td>
</tr>
<tr>
<td>font-family</td>
<td> Sets what the style of text will be used such as "Times new Roman" or "Ariel". </td>
</tr>
<tr>
<td> font-size:</td>
<td> Is what you use to set how big or small you want your text to be. </td>
</tr>
<tr>
<td> text-align:</td>
<td> Places your text in different prefered locations such as left aligned, centered or right aligned. </td>
</tr>
<tr>
<td> border-style</td>
<td> Is a tag that resets the previous styles of a class. It's useful to make web developers edit new classes without having to look through tonnes of previous code that will affect the new class. </td>
</tr>
<tr>
<td>all:unset</td>
<td> Is a tag that resets the previous styles of a class. It's useful to make web developers edit new classes without having to look through tonnes of previous code that will affect the new class. </td>
</tr>
<tr>
<td>display:flex</td>
<td> Is the building block for using flex commands. It's used to tell the compiler you're about to use flex comannds. </td>
</tr>
<tr>
<td>flex-direction </td>
<td> Sets the layout of data. For example you can say flex-direction:row to show information side by side, and you can use flex-direction:column to show information underneath each other. </td>
</tr>
</tbody>
</table>
<table class="glossary-table">
<caption class="table-title"> HTML </caption>
<thead>
<tr>
<th>Tag</th>
<th>Meaning</th>
</tr>
</thead>
<tbody>
<tr>
<td>head</td>
<td>"head" is the tag used to contain metadata. This is for information about the html document such as it's styles, links and scripts.</td>
</tr>
<tr>
<td>header</td>
<td>header "header" is the tag used for placing information in the upper section of a website known as the header.</td>
</tr>
<tr>
<td>body</td>
<td>The Body tag is used for the middle section of your website which usually holds the bulk of your website's features.</td>
</tr>
<tr>
<td>footer</td>
<td> "footer" is the tag used to represent the bottom section of your website. It will usually have limited information which may include contact details </td>
</tr>
<tr>
<td>p</td>
<td>"p" is known as the paragraph tag which is used for storing paragraphs of information along with images if a image tag is placed inside of it. </td>
</tr>
<tr>
<td>img</td>
<td> The "img" tag is used to embed images into your website via a hyperlink or a picture saved to your computer </td>
</tr>
<tr>
<td> h1, h2, h3, h4</td>
<td> h1,h2,h3,h4 These tags are special pre-set styles usually used for headings.You can apply them to various text by typing between the open and closing of the tags </td>
</tr>
<tr>
<td> ul</td>
<td> "ul" stands for unordered list. This tag is ment for setting up lists that follow no order like bullet points. </td>
</tr>
<tr>
<td> ol</td>
<td> "ol" stands for ordered list. This tag is for data that follow a logical order . example 1,2,3,4. </td>
</tr>
<tr>
<td>li</td>
<td> li "li" stands for list item. This tag is used to set what's inside of your unordered lists or ordered lists. </td>
</tr>
</tbody>
</table>
</div>
<!-- Footer START -->
<footer>
<!-- Wrapper -->
<div id="body-container">
<!-- Contact Us LEFT BLOCK -->
<div id="contact-us">
<h3> Contact Us: <br/> </h3>
<a href="#"><i id="phone-icon" class="fas fa-phone-square"></i> 07467127035 </a> <br/>
<a href="#"><i id="maps-icon" class="fas fa-map-marked-alt"></i> University Drive, Northampton NN1 5PH </a> <br/>
<a href="#"><i id="envelope-icon" class="fas fa-envelope"></i> [email protected] </a>
</div>
<!-- Quick Links CENTER BLOCK -->
<div id="quick-links">
<h3> Quick Links: <br/> </h3>
<a href="index.html"> Homepage </a>
<a href="jobs.html"> Jobs </a>
<a href="glossary.html"> Glossary </a>
<a href="Reviews.html"> Reviews </a>
<a href="tutorials.html"> Tutorials </a>
</div>
<!-- Social Media RIGHT BLOCK -->
<div id="social-media">
<h3> Follow Us On:<br/> </h3>
<a href="#"><i id="facebook-icon" class="fab fa-facebook"></i>Facebook</a> <br/>
<a href="#"><i id="twitter-icon" class="fab fa-twitter-square"> </i>Twitter</a> <br/>
<a href="#"><i id="pinterest-icon" class="fab fa-pinterest-square"> </i> Pinterest </a>
</div>
</div>
</footer>
<!-- Footer END -->
<!-- jQuery Core 3.3.1 -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Hamburger menu, on click navigation toggle -->
<script>
$(document).ready(function(){
$("#dropdown-menu").click(function(){
$(".show-sidebar").toggle();
});
});
</script>
</body>
</html>