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