Creating A Forensics Webpage

886 views

Published on

Published in: Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
886
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating A Forensics Webpage

  1. 1. Forensic Science Informatics<br />Unit 37<br />
  2. 2. Creating a forensics web page<br />Aim: to create a web page using html with two links<br />
  3. 3. Criteria D1 Unit 37<br />Create a web page for use by scientists, including two hyperlinks.<br />Task 4 (hand-in date: w/c 23rd Nov 2009)<br />You work for a small company as a trainee computer security consultant. The company are thinking of designing a website to provide forensic information. Provide a mock-up of a webpage using HTML with at least two hyperlinks<br />
  4. 4. This is easier than it sounds!<br />Web pages are written in hyper-text mark up language or html <br />html use tags in triangular brackets.<br />For example &lt;title&gt; indicates that what follows is the title <br />&lt;/title&gt; is the tag that indicates the title has ended. <br />Note the backward slash / inside the brackets.<br />
  5. 5. Open up notepad <br />&gt; start<br />&gt; all programs <br />&gt; accessories<br />&gt; notepad<br />
  6. 6. Paste in this code:<br />&lt;html&gt; <br />&lt;head&gt; <br />&lt;title&gt; favorites / bookmark title goes here &lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body bgcolor=&quot;white&quot; text=&quot;blue&quot;&gt;<br />&lt;h1&gt; Heading &lt;/h1&gt;<br />&lt;h2&gt; heading &lt;/h2&gt;<br />This is a web page with a few tags. <br />
  7. 7. Add a few other tags; for example:<br />&lt;p&gt; p tag &lt;/p&gt;<br />&lt;hr&gt; hr tag &lt;/hr&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;em&gt; em tag &lt;/em&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;b&gt; b tag &lt;/b&gt;<br />Save the file as name.html<br />
  8. 8.
  9. 9. Close notepad<br />Find the file <br />– double click on it, <br />it will open as a <br />web page<br />
  10. 10.
  11. 11. Experiment with different tags to see what they do.<br />&lt;b&gt; <br />&lt;center&gt; <br />&lt;em&gt; <br />&lt;H1&gt; <br />&lt;H2&gt; <br />&lt;H3&gt; <br />&lt;H4&gt; <br />&lt;HR&gt; <br />&lt;i&gt; <br />&lt;li&gt; <br />&lt;small&gt; <br />&lt;strong&gt; <br />&lt;ul&gt; <br />&lt;a href=&quot;http://www.cityofbristol.ac.uk/ &quot;&gt;CoBC&lt;/a&gt;<br />Then design a web page for forensic scientists add two hyperlinks. <br />
  12. 12. Hyperlinks<br />A hyperlink is a way of linking to another website<br />The html code is:<br />&lt;a href=“webaddress”&gt; title of website &lt;/a&gt;<br />To link to the college website we would use:<br />&lt;a href=&quot;http://www.cityofbristol.ac.uk/ &quot;&gt; CoBC &lt;/a&gt;<br />
  13. 13. Experiment with different HTML code:<br />Different fonts:<br />&lt;span style=&quot;font-family:arial;&quot;&gt;Ariel&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;span style=&quot;font-family:verdana;&quot;&gt;Verdana&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;span style=&quot;font-family:times new roman;&quot;&gt;Times&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;span style=&quot;font-family:georgia;&quot;&gt;Georgia&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />
  14. 14. Different sizes:<br />&lt;span style=&quot;font-size:78%;&quot;&gt;smallest&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;span style=&quot;font-size:100%;&quot;&gt;medium&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;span style=&quot;font-size:130%;&quot;&gt;large&lt;/span&gt;<br />&lt;p&gt;&lt;/p&gt;<br />&lt;span style=&quot;font-size:180%;&quot;&gt;largest<br />&lt;/span&gt;<br />
  15. 15. &lt;strong&gt;Bold &lt;/strong&gt;<br />&lt;em&gt;Italic &lt;/em&gt;<br />&lt;blockquote&gt;Quote&lt;/blockquote&gt;<br />Lists<br />&lt;ol&gt; &lt;li&gt;numbered list 1&lt;/li&gt;<br /> &lt;li&gt;numbered list 2&lt;/li&gt;&lt;/ol&gt;<br />&lt;ul&gt; &lt;li&gt;bullet list&lt;/li&gt;<br />&lt;li&gt;and another&lt;/li&gt;&lt;/ul&gt;<br />Different colour fonts:<br />&lt;p&gt;&lt;span style=&quot;color:#ff0000;&quot;&gt;Red font&lt;/span&gt;&lt;/p&gt;<br />&lt;p&gt;&lt;span style=&quot;color:#3366ff;&quot;&gt;Blue font&lt;/span&gt;&lt;/p&gt;<br />&lt;p&gt;&lt;span style=&quot;color:#009900;&quot;&gt;Green font&lt;/span&gt;&lt;/p&gt;<br />
  16. 16. Adding an image:<br />&lt;p&gt;Image:&lt;/p&gt;&lt;img style=&quot;DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; TEXT-ALIGN: center&quot; alt=&quot;&quot; src=&quot;http://www.libcoop.net/mcl/j0382584.jpg&quot; border=&quot;0&quot; /&gt;<br />&lt;p&gt;&lt;/p&gt;<br />This may help: http://htmledit.squarefree.com/<br />

×