· 10 years ago · Jan 13, 2016, 09:33 PM
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Lab1</title>
5 <link rel="stylesheet" type="text/css" href="style.css" />
6 <link rel="stylesheet" type="text/css" href="style.css" />
7 <script type="text/javascript" src="C:\Users\ben\Desktop\ziurimkaturim\jquery-2.2.0.min.js"></script>
8 <script type="text/javascript" src="C:\Users\ben\Desktop\ziurimkaturim\jquery.tablesorter.min.js"></script>
9 <script type="text/javasript">
10 $(document).ready(function()
11 {
12 $("#sortable").tablesorter();
13 });
14 </script>
15
16
17 </head>
18
19
20
21 <body>
22 <table id="sortable">
23 <thead>
24 <tr>
25 <th>Last Name</th>
26 <th>First Name</th>
27 <th>Email</th>
28 <th>Due</th>
29 <th>Web Site</th>
30 </tr>
31 </thead>
32 <tbody>
33 <tr>
34 <td>Smith</td>
35 <td>John</td>
36 <td>jsmith@gmail.com</td>
37 <td>$50.00</td>
38 <td>http://www.jsmith.com</td>
39 </tr>
40 <tr>
41 <td>Bach</td>
42 <td>Frank</td>
43 <td>fbach@yahoo.com</td>
44 <td>$50.00</td>
45 <td>http://www.frank.com</td>
46 </tr>
47 <tr>
48 <td>Doe</td>
49 <td>Jason</td>
50 <td>jdoe@hotmail.com</td>
51 <td>$100.00</td>
52 <td>http://www.jdoe.com</td>
53 </tr>
54 <tr>
55 <td>Conway</td>
56 <td>Tim</td>
57 <td>tconway@earthlink.net</td>
58 <td>$50.00</td>
59 <td>http://www.timconway.com</td>
60 </tr>
61 </tbody>
62 </table>
63 <div class="sidemenu">
64
65 <ul>
66 <li><a class="active" href="#">Home</a></li>
67
68
69 <li class = "sidemenu">
70 <table id= "centerTheTable">
71 <td >
72 <li><strong><a href="#Q1.1"> Lab 1 </a></strong></li>
73 <li><nav>
74 <a href="#Q1.1">Q1.1</a>
75 <a href="#Q1.2">Q1.2</a>
76 <a href="#Q1.3">Q1.3</a>
77 <a href="#Q1.4">Q1.4</a>
78 <a href="#Q1.5">Q1.5</a>
79 <a href="#Q1.6">Q1.6</a>
80 <a href="#Q1.7">Q1.7</a>
81 <a href="#Q1.8">Q1.8</a>
82 <a href="#Q1.9">Q1.9</a>
83 <a href="#Q1.10">Q1.10</a>
84 <a href="#Q1.11">Q1.11</a>
85 </nav></li>
86 </td>
87 <td >
88 <li><strong><a href="#Q2.1"> Lab 2 </a></strong></li>
89 <li><nav>
90 <a href="#Q2.1">Q2.1</a>
91 <a href="#Q2.2">Q2.2</a>
92 <a href="#Q2.3">Q2.3</a>
93 <a href="#Q2.4">Q2.4</a>
94 <a href="#Q2.5">Q2.5</a>
95 <a href="#Q2.6">Q2.6</a>
96 <a href="#Q2.7">Q2.7</a>
97 <a href="#Q2.8">Q2.8</a>
98 <a href="#Q2.9">Q2.9</a>
99 <a href="#Q2.10">Q2.10</a>
100 <a href="#Q2.11">Q2.10</a>
101 </nav></li>
102 </td>
103 </table>
104 </li>
105
106
107
108 </div>
109
110
111
112 <div id="bground" style="margin-left:26%;padding:1px 16px; width:72%;">
113 <div id="generalInfo" >
114 <h2>Assignment #1</h2>
115 <strong><p>Group: 62</p>
116 <p>Members: Benas Kauzonas and Olga Koshelyuk</p>
117 <p class="normalFont">Date: 8/1/2016</p>
118
119 </div>
120
121 <div>
122
123 <h1>Questions from lab 1</h1>
124
125 </div>
126
127
128 <div class="questions">
129
130 <div class="answers">
131 <h1 class="questionHead" id ="Q1.1"><abbr title="Make sure you have read Paul Ford's article On HTML5 and the Group That Rules the Web (see Reader on BlackBoard). What is the key difference between the HTML5 Recommendation published by W3C and the one published by the WHATWG?">Question 1.1</abbr></h1>
132 <section>
133 <p> WHATWG sees the Web pages as software appications, whereas W3C sees it more as a document-delivery format.
134 <q> WHATWG sees the Web as an evolving, living platform; the W3C exists to formally recommend certain things.</q>
135 </p>
136 <figure id="figCap">
137 <float><img src="https://images.whatwg.org/logo" alt="WTHATWG logo"></float>
138 <figcaption><em>The official logo of WHATWG</em></figcaption>
139 </section>
140 </div>
141
142
143 <div class="answers">
144 <h1 class="questionHead" id="Q1.2"><abbr title="Explain the difference between the Internet and the World-Wide Web. Provide links to the online resources you used (if any) to answer this question.
145">Question 1.2</abbr></h1>
146
147 <section>
148 <dl>
149 <dt>The Internet is the network of networks which connects computers with TCP/IP standards. The World Wide Web is an information space. </dt>
150 <blockquote cite = "http://www.w3.org/Help/#webinternet">
151 <dd>...the Internet is a network of networks, defined by the TPC/IP standards.</dd>
152 <dd>...the Web is an information space. The first three specifications for Web technologies defined URLs, HTTP, and HTML.</dd>
153 </blockquote>
154 </dl>
155 </section>
156 </div>
157
158 <div class="answers" id="Q1.3">
159 <h1 class="questionHead"><abbr title="What are the three essential technologies that Tim Berners-Lee created to build the World-Wide Web on top of the already existing Internet infrastructure?">Question 1.3</abbr></h1>
160 <section>
161 <ul id="iconLinux">
162 <li><abbr title="HyperText Markup Language">HTML</abbr>: HyperText Markup Language. The markup (formatting) language for the Web.</li>
163 <li><abbr title="Uniform Resource Identifier">URI</abbr>: Uniform Resource Identifier. A kind of adress that is unique and used to identify to each resource on the Web. It is also commonly called a URL.</li>
164 <li><abbr title="HyperText Transfer Protocol">HTTP</abbr>: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the Web.</li>
165 </ul>
166 </section>
167 </div>
168
169 <div class="answers" id="Q1.4">
170 <h1 class="questionHead"><abbr title="Create a document with the text ´´Hello World!´´ in a word processor such as Microsoft Word or LibreOffice Writer. Save the file as a Web page or HTML document and inspect the HTML source (you can do this within the word processor, but it may be easier to do it using a plain text editor). Describe briefly your findings. Hint: you could use the HTML <pre> tag with the proper escaping to show some example HTML source code generated by the word processor.
171">Question 1.4</abbr></h1>
172 <section >
173 <p>The web page shows the text we typed in the word in the same font and size, however source code has a lot of additional lines for the <q>head</q> part. The body part looks like this and specifies features of the text like font, size, tab etc.</p>
174 <p>This is the <code>Panel</code> constructor:</p>
175 <pre><code class="codeClass">
176 html xmlns:v="urn:schemas-microsoft-com:vml"
177 xmlns:o="urn:schemas-microsoft-com:office:office"
178 xmlns:w="urn:schemas-microsoft-com:office:word"
179 xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
180 xmlns="http://www.w3.org/TR/REC-html40" </code></pre>
181 </section>
182 </div>
183<!-- <and>< ignores the tag-->
184 <div class="answers" id="Q1.5">
185 <h1 class="questionHead"><abbr title="Find out which port (according to the current IANA assignment) is used for the following protocols:
186HTTP
187SSH
188FTP
189" >Question 1.5</abbr></h1>
190 <section id = "backgroundPic">
191 <p>
192
193 <table class = "flatable" id = "sortable">
194 <th>Protocol</th>
195 <th>Port</th>
196 <th>Description</th>
197 <th>Source</th>
198 <th>Reason</th>
199 <tr>
200 <td class = "capitalizeIt"> http </td>
201 <td> 80 </td>
202 <td> Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. </td>
203 <td> <a href = "https://tools.ietf.org/html/rfc2616">https://tools.ietf.org/html/rfc2616</a> </td>
204 <td> The article is written by authoritative source (Internet Engeneering Task Fource) by recognized computer scientists </td>
205 </tr>
206
207 <tr>
208 <td class = "capitalizeIt"> ssh </td>
209 <td> 22 </td>
210 <td> Secure Shell (SSH) is a protocol for secure remote login and other secure network services over an insecure network. </td>
211 <td> <a href = " https://www.ietf.org/rfc/rfc4251 "> https://www.ietf.org/rfc/rfc4251 </a> </td>
212 <td> The article is written by authoritative source (Internet Engeneering Task Fource) by recognized computer scientists </td>
213 </tr>
214
215 <tr>
216 <td class = "capitalizeIt"> ftp </td>
217 <td> 21 </td>
218 <td> The File Transfer Protocol (FTP) is a protocol that makes it possible to transfer files from one computer (or host) on the Internet to another. </td>
219 <td> <a href = " https://tools.ietf.org/html/rfc1635"> https://tools.ietf.org/html/rfc1635 </a> </td>
220 <td> The article is written by authoritative source (Internet Engeneering Task Fource) by recognized computer scientists </td>
221 </tr>
222
223 </table>
224 </p>
225 </section>
226 </div>
227
228 <div class="answers" id="Q1.6">
229 <h1 class="questionHead"><abbr title="Look at the following two HTML paragraphs:
230
231 <p>This is an <strong>important</strong> point.</p>
232
233 <p>This is another <b>important</b> point.</p>
234
235Explain why the HTML of the first paragraph should be preferred. Illustrate this with an example. Also, identify another pair of HTML constructs for which the same rationale holds.">Question 1.6</abbr></h1>
236 <section>
237 <p>First paragraph marks the word as important and makes it bold, second one only makes bold without asigning any significancy to it.
238The same happens with italic and emphasized tags. Em gives the text semantic importance.</p>
239 </section>
240 </div>
241
242 <div class="answers" id="Q1.7">
243 <h1 class="questionHead"><abbr title="">Question 1.7</abbr></h1>
244 <section>
245 <p>Span tag is used for elements in the line, whereas div is used to format block of text with CSS.
246They both are used to style text</p>
247 </section>
248 </div>
249
250 <div class="answers" id="Q1.8">
251 <h1 class="questionHead"><abbr title="">Question 1.8</abbr></h1>
252 <section>
253 <ul id="iconPi">
254 <li>Frames allow the user to have multiple pages in the same browser.</li>
255 <li>With frames we can keep one part of the page static while changing the other parts of the page.</li>
256 <li>If we create a top frame we can use it as a header (as that page is static it acts like an include page).</li>
257 <li>Frames can be used to reduce server load, as there is no need to reload all the pages when ever a new page is visited.</li>
258 </ul>
259 <p>Source:<a href="http://www.plus2net.com/html_tutorial/html_frmpros.php">Plus2Net's HTML tutorial on advantages of using frames</a></p>
260 </section>
261 </div>
262
263 <div class="answers" id="Q1.9">
264 <h1 class="questionHead"><abbr title="">Question 1.9</abbr></h1>
265 <section>
266 <ol>
267 <li>CSS benefits accessibility primarily by separating document structure from presentation. </li>
268 <li>CSS allows precise control over spacing, alignment and positioning.</li>
269 <li>CSS provides precise control over font size, color, and style.</li>
270 <li>CSS allows users to change author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color.</li>
271 <li>CSS supports aural style sheets, which specify how a document will sound when rendered as speech.</li>
272 <li>CSS provides more precise control over the display of alternative content than HTML alone.</li>
273 </ol>
274
275 <p>Source:<a href="http://www.w3.org/TR/CSS-access">Accessibility Features of CSS, W3C NOTE 4 (August 1999)</a></p>
276 </section>
277 </div>
278
279 <div class="answers" id="Q1.10">
280 <h1 class="questionHead"><abbr title="">Question 1.10</abbr></h1>
281 <section>
282 <p>We would expect it not to look different from the rest of the text because as we can judge from question 8 em differs from italic with semantic significance. It does behave accordingly.</p>
283 </section>
284 </div>
285
286 <div class="answers" id="Q1.11">
287 <h1 class="questionHead"><abbr title="">Question 1.11</abbr></h1>
288 <section align="middle">
289
290 <table class = "flatable">
291 <caption>We have chosen to compare Google's Chrome and Mozilla's Firefox.</caption>
292 <tr >
293 <th><strong class="flatable">
294 Mozilla Firefox</strong>
295 </th>
296
297 <th><strong class="flatable">
298 Google Chrome</strong>
299 </th>
300 </tr>
301
302 <tr align="middle">
303 <td>
304 <a href="https://www.mozilla.org/firefox"><image src="http://img03.deviantart.net/0d1d/i/2004/07/e/7/firefox_dock_icon.png"></img></a>
305 </td>
306
307 <td>
308 <a href="https://www.google.com/chrome/browser/desktop/index.html"><image src="http://icons.iconarchive.com/icons/thebadsaint/my-mavericks-part-1/128/Google-Chrome-icon.png"></img></a>
309 </td>
310 </tr>
311
312 <tr align="left ">
313 <td>
314 Firefox, though, still beats it in level of customization. It may be a little slower and clunkier, but with some advanced customization (which is not that hard) you can tweak every tiny corner to your own taste.
315 </td>
316
317 <td>
318 Chrome is a much more polished browser. Google put in a lot of time and work polishing it for everyday use. As a result, it is smoother, it feels faster, looks better and yet has some underlying features built in.
319 </td>
320
321 </tr>
322 </table>
323 </section>
324 </div>
325 <footer></footer>
326
327 </div>
328
329 <div>
330
331 <h1>Questions from lab 2</h1>
332
333 </div>
334
335 <div class="questions">
336
337 <div class="answers" id="Q2.1">
338 <h1 class="questionHead">Question 2.1</h1>
339 <section>
340 <p>Google Cheome, go to Menu>more tools>Developer tools or CTRL + Shift + J. The console appears on the right side and has different section as well as Console.</p>
341 </section>
342 </div>
343
344 <div class="answers" id="Q2.2">
345 <h1 class="questionHead">Question 2.2</h1>
346 <section>
347 <p>
348 <button type="button" onclick = "changeBackground()">Red background</button>
349 <script>
350 function changeBackground(){
351 document.body.style.backgroundColor = "red";
352 }
353 </script>
354
355 <button type="button" onclick = "changeBackgroundToDefault()">Default background</button>
356 <script>
357 function changeBackgroundToDefault(){
358 document.body.style.backgroundColor = "inherit";
359 }
360 </script>
361
362 </p>
363
364 <a href="http://bb.vu.nl" onclick="OVERRIDDEN(event);" ><p id="indentIt">Go to Blackboard</p></a>
365 <pre>Click on the link to see if the event is overridden. </pre>
366 <script>
367 function OVERRIDDEN(event) {
368 event.preventDefault();
369 alert("Default action is overridden");
370 }</script>
371 </section>
372 </div>
373
374 <div class="answers" id="Q2.3">
375 <h1 class="questionHead">Question 2.3</h1>
376 <section>
377 <p>The code for overriding is placed in the body, which can be a disadvantage if the website is not working.
378 In our code we make a reference to the function and then code for function is written.
379 In the example code the function is listed inside the click itself. In both codes we use the preinstalled function event.preventDefault().</p>
380 </section>
381 </div>
382
383 <div class="answers" id="Q2.4">
384 <h1 class="questionHead">Question 2.4</h1>
385 <section>
386 <p>5bbb9d44</p>
387 </section>
388 </div>
389
390 <div class="answers" id="Q2.5">
391 <h1 class="questionHead">Question 2.5</h1>
392 <section>
393 <p>Main similarities between Java and JavaScript are in the basic syntacsis, if and while loops, dotnotation for objects. </br>
394 Differences: does not have a compiler(it is included in the web page and works when you load it) types of variables are simplified, there are no classes.</p>
395 </section>
396 </div>
397
398 <div class="answers" id="Q2.6">
399 <h1 class="questionHead">Question 2.6</h1>
400 <section>
401 <p>Asynchronous JavaScript and XML. Asynchronous means that request for the server would be sent without program waiting for reply while executing</p>
402 </section>
403 </div>
404
405 <div class="answers" id="Q2.7">
406 <h1 class="questionHead">Question 2.7</h1>
407 <section>
408 <p>Objects that are preinstalled in the hosting environment (Web browser for example). Window and document. There is no equivalent because in Java for example it is executed in the program right away and not awaited in the browser.</p>
409 </section>
410 </div>
411
412 <div class="answers" id="Q2.8">
413 <h1 class="questionHead">Question 2.8</h1>
414 <section>
415 <p>Date is used to work with date and time </br>
416 Array objects can store multiple variables</p>
417 </section>
418 </div>
419
420 <div class="answers" id="Q2.9">
421 <h1 class="questionHead">Question 2.9</h1>
422 <section>
423 <p>Event is some action (click of a mouse, key press etc) done by the browser or user on which JS can react. Event listeners are used to initiate the event if the expected action was performed.</p>
424 </section>
425 </div>
426
427 <div class="answers" id="Q2.10">
428 <h1 class="questionHead">Question 2.10</h1>
429 <section>
430 <p>It is part of the Places Library of the Google Maps API that creates an access to Google storage of places all around the world. The main function of it is to create the input box, and while the User is typing in address, it is searching through the library for the match.</p>
431 </section>
432 </div>
433
434 <table class = "flatable">
435 <div >
436 <th>Name</th>
437 <th>Category</th>
438 <th>Amount</th>
439 <th>Location</th>
440 <th>Purchase date</th>
441 </div>
442
443 <tr>
444 <td> Pineapple </td>
445 <td> Food </td>
446 <td> 1 </td>
447 <td> Moscow </td>
448 <td> 1/01/2016 </td>
449 </tr>
450
451 <tr>
452 <td> Umbrella </td>
453 <td> Accessory </td>
454 <td> 5 </td>
455 <td> Amsterdam </td>
456 <td> 3/11/2015 </td>
457 </tr>
458
459 <tr>
460 <td> Headphones </td>
461 <td> Technology </td>
462 <td> 1 </td>
463 <td> Berlin </td>
464 <td> 16/09/2015 </td>
465 </tr>
466
467
468 <tr>
469 <td><INPUT class = "medium-btn" TYPE="TEXT" NAME = "Name" ></td>
470 <td><INPUT class = "medium-btn" TYPE="TEXT" NAME = "Category"></td>
471 <td><INPUT class = "medium-btn" TYPE="number" min="0" max = "10000000" NAME = "Amount"></td>
472 <td><select required>
473 <option value="">None</option>
474 <option value="volvo">Barcelona</option>
475 <option value="saab">Chicago</option>
476 <option value="mercedes">Kaunas</option>
477 <option value="audi">Vilnius</option>
478 </select></td>
479 <td><INPUT class = "big-btn" TYPE="DATE" NAME = "Date"></td>
480
481 </tr>
482
483 </table>
484 <p></p><p></p>
485 <form action="http://wt.ops.few.vu.nl/api/5bbb9d44" method="post"><INPUT class = "big-btn" TYPE="SUBMIT" value = "Submit" ></form>
486 </div>
487
488 <div id="footerID">
489 <p></p>
490 </div>
491
492
493
494 </body>
495</body>
496</html>