-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreport.html
388 lines (317 loc) · 18.2 KB
/
report.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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles/report.css" />
</head>
<body>
<div class="report-body">
<h1>Report</h1>
<p id="third-party"><b>No 3<sup>rd</sup> party library used.</b></p>
<hr>
<h2>HTML</h2>
<hr>
<h3>5 or more types of structure elements introduced in HTML5 such as
‘header’ and ‘article’. Headings (‘h1’ to ‘h6’) and ‘div’ are not structure elements.</h3>
<h4>What are the types and where are they used?</h4>
<br>
Structure elements that I used on my website:
<ol>
<li><span>
<</span>header> </li> <p>I used <i>header</i> to identify the header of the most pages. It is
in <b>outputNavigation.php</b> file which generates
header for the pages when the function is included and called. Opening tag is on <b>line 4</b>
and closing tag is on <b>line 28</b> in the <b>outputNavigation.php</b> file.
You can find this file in <b>php</b> folder.
</p>
<li><span>
<</span>nav> </li> <p>I used <i>nav</i> to identify the footer's navigation. It is in <b>outputFooter.php</b>
file which generates
footer for the pages when the function is included and called. Opens on <b>line 8</b> and
closes on <b>line 25</b> in the <b>outputFooter.php</b> file.
You can find this file in <b>php</b> folder. </p>
<li><span>
<</span>article> </li> <p>I used <i>article</i> to wrap the biggest part of text in <b>index.php</b>
file. As you guessed,
it is in <b>index.php</b>.The structure element type opens on <b>line 27</b> and closes on
<b>line 50</b>.</p>
<li><span>
<</span>footer> </li> <p>I used <i>footer</i> to wrap the footer of the page. The code is in <b>outputFooter.php</b>
file. You can find it in <b>php</b>
folder. It is opened in <b>line 4</b> and is closed on <b>line 27</b>.</p>
<li><span>
<</span>main> </li> <p>I used <i>main</i> to wrap the second part of the <b>index.php</b> file.
The code is in <b>index.php</b> file. The opening tag of the <i>main</i>
is on <b>line 12</b> and closing tag is on <b>line 25</b>.</p>
<li><span>
<</span>section> </li> <p>I used <i>section</i> to wrap the table content which will be needed
later in project in <b>rankings.php</b> file. The opening tag is on <b>line 11</b>
and the closing tag is on <b>line 85</b>.</p>
</ol>
<hr>
<h3>10 or more types of content ele- ments, such as ‘p’, ‘a’, ‘img’, and ‘ul’.</h3>
<h4>what are the types and where are they used?</h4>
<br>
Content elements that I used on my website:
<ol>
<li><span>
<</span>a> </li> <p>I used <i>a</i> element to make links. You can find <i>a</i> element
in most of the pages because some of the are in php functions:</p>
<ul class="ul-small">
<li>outputNavigation.php</li>
<p>In this file the opening tag is on <b>line 14</b> and continues to end on <b>line 17</b>
and closing tag is on <b>line 28</b>. You can find this file in <b>php</b> folder.</p>
<li>outputFooter.php</li>
<p>Opening and closing tags on <b>line 7 and line 18-20</b>. You can find
this file in <b>php</b> folder.</p>
<li>index.php</li>
<p>Opening and closing tags on <b>line 18 and line 19</b>.</p>
<li>user.php and user-register.php</li>
<p>Opening and closing tags are on the same thing but on different lines which are on
<b>line 26</b> - user.php and <b>line 29</b> - user-register.php</p>
</ul>
<li><span>
<</span>p> </li> <ul class="ul-small">
<li>index.php</li>
<p>Opening and closing tags on <b>line 16, 19, 29, 35, 41 and 47</b>.</p>
<li>user.php</li>
<p>Opening and closing tags on <b>line 17, 24 and 26</b>.</p>
<li>user-register.php</li>
<p>Opening and closing tags on <b>line 16, 26 and 29</b>.</p>
<li>user.php and user-register.php</li>
<p>Opening and closing tags are on the same thing but on different lines which are on
<b>line 26</b> - user.php and <b>line 29</b> - user-register.php</p>
<li>rankings.php</li>
<p>Opening and closing tags on <b>line 15</b>.</p>
<li>terms.php</li>
<p>Opening tag is on <b>line 14</b> and closing tag is on <b>line 108</b></p>
</ul>
<li><span>
<</span>ul> </li> <p>I used <i>ul</i> to create unordered lists.</p>
<ul class="ul-small">
<li>outputFooter.php</li>
<p>In this file the opening tag is on <b>line 9</b> and closing tag is on <b>line 23</b>.
You can find this file in <b>php</b> folder.</p>
</ul>
<li><span>
<</span>li> </li> <p>I used <i>li</i> to add an element to the <i>ul</i>.</p>
<ul class="ul-small">
<li>outputFooter.php</li>
<p>Opening and closing tags are on <b>line 19</b>.</p>
</ul>
<li><span>
<</span>i> </li> <p>I used <i>i</i> to display font-awesome element(arrow)</p>
<ul class="ul-small">
<li>index.php</li>
<p>Opening and closing tags are on <b>line 22</b>.</p>
</ul>
<li><span>
<</span>em> </li> <p>I used <i>em</i> to make text italic</p>
<ul class="ul-small">
<li>terms.php</li>
<p>Opening and closing tags are on <b>line 108</b>.</p>
</ul>
<li><span>
<</span>img> </li> <ul class="ul-small">
<li>outputNavigation.php</li>
<p>Opening tags are on <b>line 20</b>.</p>
<li>outputFooter.php</li>
<p>Opening tags are on <b>line 7</b>.</p>
<li>index.php</li>
<p>Opening tags are on <b>line 18, 33, 39 and 45</b>.</p>
<li>user.php and user-register.php</li>
<p>Opening tags are on <b>line 14</b> for user.php and <b>line 15</b> for user-register.php.</p>
</ul>
<li><span>
<</span>br> </li> <ul class="ul-small">
<li>game.php</li>
<p>Tag is on <b>line 13</b>.</p>
<li>terms.php</li>
<p>Tags starts from <b>line 15 to line 107</b>.</p>
</ul>
<li><span>
<</span>table> </li> <ul class="ul-small">
<li>rankings.php</li>
<p>Opening tag is on <b>line 16</b> and the closing one is on <b>line 82</b>.</p>
</ul>
<li><span>
<</span>button> </li> <ul class="ul-small">
<li>user.php and user-register.php</li>
<p>Tags are on <b>line 23</b> - user.php and on <b>line 27</b> - user-register.php.</p>
</ul>
<li><span>
<</span>input> </li> <ul class="ul-small">
<li>user.php and user-register.php</li>
<p>Tags are on <b>line 19 and 21</b> - user.php and on <b>line 18, 20, 22 and 24</b> - user-register.php.</p>
</ul>
<li><span>
<</span>form> </li> <ul class="ul-small">
<li>user.php and user-register.php</li>
<p>Opening tags are on <b>line 13</b> and closes on <b>line 28</b> - user.php
and on user-register.php it opens on <b>line 12</b> and closes on <b>line 31</b>.</p>
</ul>
<li><span>
<</span>h1> </li> <ul class="ul-small">
<li>outputFooter.php</li>
<p>Opening tag is on <b>line 6</b> as well as the closing tag.</p>
<li>index.php</li>
<p>Opening tag is on <b>line 28</b> as well as the closing tag.</p>
<li>game.php</li>
<p>Opening tag is on <b>line 13</b> and closing tag is on <b>line 14</b>.</p>
<li>user.php and user-register.php</li>
<p>Opening tag is on <b>line 15</b> as well as the closing tag - user.php.</p>
<p>Both tags are on <b>line 16</b> - user-register.php.</p>
<li>terms.php</li>
<p>Both tags are on <b>line 13</b>.</p>
<li>rankings.php</li>
<p>Both tags are on <b>line 13</b>.</p>
</ul>
<li><span>
<</span>h2> </li> <ul class="ul-small">
<li>index.php</li>
<p>Both tags are on <b>line 34, 40, 46</b>.</p>
</ul>
<li><span>
<</span>h3> </li> <ul class="ul-small">
<li>index.php</li>
<p>Both tags are on <b>line 15</b>.</p>
</ul>
</ol>
<h3>Meta Data</h3>
<p><span>
<</span>meta> tags are written in <b>outputHead.php</b> file which you can find in <b>php</b>
directory.
Starting from <b>line 8</b> to <b>line 10</b></p>
<hr>
<h2>CSS</h2>
<hr>
<h3>Page design: use text, colour, position, and shape formatting to improve page design.</h3>
<h4>What CSS formatting are used to improve page design? Where are they used?</h4>
<ol>
<li>Text</li>
<p>I am using font called - "Montserrat" for the most of the page.
It is from Google Fonts website which can generate CSS link code for the font implementation
and uses theirdata base to download the fonts for client in the website. I used other fonts like
"Arial"
and a font family called - sans-serif as a font stack in case Google Fonts would not work. For
the larger text areas I used "Arial" font because I think it is easier to read then the
"Montserrat". CSS link is in <b>outputHead.php</b> file which you can find in <b>php</b>
folder. The link itself is on <b>line 16</b>.</p>
<li>Colour</li>
<p>I am using colour palette to make the website look similar in all of the pages. The main colours
are listed below this paragraph. These colours are widely used in 'a', 'p', borders, etc.
Also, I used couple additional colours to identify hover elements for interactivity. I decided
to go transparent with the header/navigation just because it looks great for me.
The same thing goes for background images, I used linear-gradient to make look background darker
to not distractother people who are visiting the website.</p>
<img src="ss/colors.png" alt="Color Palette">
<li id="css-grid">Position</li>
<p>I have been using CSS Grid and it helped me a lot. It is easy to manage and control position of various
content. It is everywhere except <b>game.php</b> and <b>rankings.php</b> if not including the functions
that generates header and footer. The header is center-aligned because of align-item feature that CSS
Grid has.
In index.php I used 5-column grid for 5 elements in the header and ended it after main content, below,
I used 3-column grid as well because putting 5-column to display three columns was not going to happen.
So, I managed to divide a page between different number of columns.<br>
I mostly use margin: 0 auto; because it straightens almost any item I wanted during the course work.
Also, I like the idea of having position:absolute header with transparent background, it looks way
better then
just the simple one with the color in there.
</p>
<li>Shape Formatting</li>
<p>I have been using border-radius for user.php, user-register.php and rankings.php. Primerily on input
boxes, buttons,
divs and table.
</p>
</ol>
<hr>
<h3>Class and ID: define and use Classes and ID for group and individual formatting respectively.</h3>
<h4>what are the classes and ID and where are they used? why the class/ID is needed?</h4>
<ol>
<li>Class</li>
<p>Classes are more reusable then ID's because classes are not unique comparing to the other half. I used
classes
when I want to position or style all elements together within the same class. Whether it would an
element in a few pages or
only one but all headings within the one page or div wrapper with the class. Like <i>div
class="grid-container"</i>
on <b>line 253</b> in style.css, for example. This class is made only for the position and alignment
purposes. <br>
<li>ID</li>
<p>I used ID's to select a certain element to position or change it somehow within the page. For
example,
<i>.items-in-main p#slogan</i>
is changed to have letter-spacing when others do not have it. You can find classes and ids in
almost
every page of the website.</p>
</p>
</ol>
<hr>
<h3>Grid layout: arrange page contents in multiple rows and columns: maximum
2 marks for using CSS grid and maximum 1 mark for using Bootstrap.</h3>
<h4>what is the layout method used and which page/where is it used</h4>
<p>Most of the time, I used CSS Grid layout method. Files like index.php, user.php, user-ranking.php were done
completely with CSS Grid. I made specific number of columns but auto number of rows because I was adding
stuff
and kept changing the row numbers, so I decided that automatically generated rows will save time and
display
will be more elastic if I wanted to add something more.
<a href="#css-grid">More information about me using CSS Grid in "Position" section.</a>
</p>
<hr>
<h2>PHP</h2>
<hr>
<h3>PHP functions (No marks for using ‘include’ to add blocks of HTML to a page).</h3>
<h4>File containing the function, function name, what it does, and any known error.
Reusable PHP function for multiple pages, such as generating the page header.
</h4>
<ol>
<li>outputHead.php</li>
<p>This function generates the head of the html page including doctype, languages, 'head' tag,
meta tags, links to the css files and the title. When calling this function it needs to have a
title name of the page as an argument and then it displays 'title' tag in the page where its called.
The function closes 'head' tag and opens 'body' tag as well. <br>
You can find this file in <b>php</b> directory called <b>outputHead.php</b>.
</p>
<li>outputNavigation.php</li>
<p>This function generates link elements as a navigation bar inside header structure element.
It creates five links at the moment and the logo in the middle as a link to refresh the page.
It holds Page Name as a argument which if matched with one of the link names inside the array,
displays one of the header link elements with class - selected. It can show in which page the visitor
is at the moment. The function creates Grid layout for the header as well.<br>
You can find this file in <b>php</b> directory called <b>outputNavigation.php</b>.
</p>
<img src="ss/header.png" alt="Header Screen Shot">
<li>outputFooter.php</li>
<p>This function, which requires no argument, generates the footer and unordered list that acts like a
bottom
navigation bar with few extra links - Register and Report. The function closes all available tags, like
'ul', 'nav', 'footer', 'div's, 'body' and 'html'.<br>
You can find this file in <b>php</b> directory called <b>outputFooter.php</b>.
</p>
<img src="ss/footer.png" alt="Footer Screen Shot">
</ol>
<hr>
<div class="website-pages">
<h2>Website pages</h2>
<h3>Home (index.php)</h3>
<img src="ss/index.png" alt="Index page">
<h3>Game (game.php)</h3>
<img src="ss/game.png" alt="Game page">
<h3>Login / Register (user.php and user-register.php)</h3>
<img src="ss/login.png" alt="Login page">
<img src="ss/register.png" alt="Register page">
<h3>Rankings (rankings.php)</h3>
<img src="ss/rankings.png" alt="Rankings page">
<h3>Terms (terms.php)</h3>
<img src="ss/terms.png" alt="Terms and Conditions page">
</div>
<hr>
<p class="third-party"><a href="#top">Lift off</a></p>
<a href="report-game.html">Game Report</a>
</div>
</body>
</html>