Did archeologist Really find the earliest Computer
![Picture](/uploads/9/1/5/3/91532286/imgres_5_orig.jpg)
Did they really find the first every computer?.
When I seen this first I thought it was a joke but as I watch on I became more and more interested and convinced it was no joke.
It all started when archeologists anboard a roman shipwreak off the coast of greece on an island called antikythra, when they came across this rather unusual device. Although there was lots of other riches onboard the wreak this was the one theat drew the most interest.
It is thought the the device was onboard the ship of a Roman lady of high importance that was being brought to meet her future husband and that the device was a gift from the family of the bride to be, using carbon dating scientists found that the ship had sank around 60 BC.
There has been all types of examinations done to this device
from clock makers to scientists and MRI scans to determine
what this device was used for or what it did. They came to the conclusion that the device was used by ancient Greeks calculate the movement of the stars an planets.
(Please watch documentary for more information.)
The 2000 year old computer - decoding the Antikythera Mechanisim
HTML PROGRAMMINg language
Code to create a webpage
|
<!DOCTYPE html>
<html> <head> <title>MyFirstHtmlWebpage</title> </head> <body> <h1>HTML & CSS</h1> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <p>HTML paragraph.</p> </body> </html> Your webpage should look something like this
|
HI everyone and welcome back to my blog, in this entry I will be doing some basic HTML. If you would like to learn some HTML all that you will need to do is download Notepad ++ from the web to get started.
When you have downloaded notepad++, click file at top left corner scroll to new and click, hay presto you have a new project, then just type in the code I will be posting on the left hand side and soon we will have a html webpage. To run your webpage go to run on the toolbar and top go to run and run with what ever browser you like, different browsers will make your work look a little different. Today I will start of by writing the page title, a heading an ordered and unordered list and a paragraph. |
Aligning HTML how to make the page look good
Code for centering paragraphs and heading
<!DOCTYPE html>
<html> <head> <title>MyFirstHtmlWebpage</title> </head> <body> <center><h1>HTML & CSS</h1></center> <ol> <li>This</li> <li>Is an</li> <li>ordered list</li> </ol> <ul > <li>This </li> <li>Is an</li> <li>unordered list</li> </ul> <center><p>HTML paragraph.</p></center> </body> </html> |
Centering
HI everybody and welcome back to my blog, today I will be showing how to center headings and paragraphs. As you can see on left, all that I had to do to make the headings centered was to add center open and closing tags with the closing tags always having a forward slash so that the computer knows that this is the end tag, without this your program simply will not work. Example (/END TAG) What the different tags are used for First of all starting with: (!DOCTYPE html) this is just so that we know what the doctype is. html tag: this is the outline of your web page just like a A4 page. Head tags: are where we will put our page title and our style sheet (Ill explain the style sheets later in my blog when we are doing CSS). Title tags: what you write in here will appear on the top of your webpage. Body tags: Are where all of your code will go, like the human body everything that we need to work is in our body without body we would not function properly. Center tags : these will center the pieces it is wrapped around. OL: this is short for ordered list (NUMBERS). ul: this stands for unordered list(BULLET POINTS). LI: simply stands for list Item. P: Stands for paragraph. (Don't forget to forward slash on the end tags or your html will not work.) |
Your webpage should look something like this
Adding an image to your webpage
code for inserting images<!DOCTYPE html>
<html> <head> <title>MyFirstHtmlWebpage</title> </head> <body> <center><h1>HTML & CSS</h1></center> imagecode <img src="htmlBlog/imgres.png" alt="HTML5 Icon" style="width:128px;height:128px;"> image code <ol> <li>This</li> <li>Is an</li> <li>ordered list</li> </ol> <ul > <li>This </li> <li>Is an</li> <li>unordered list</li> </ul> <center><p>HTML paragraph.</p></center> LINK<a href="http://www.w3schools.com/html/default.asp"> <img src="htmlBlog/download.jpg" alt="HTML5 Icon" style="width:128px;height:128px;"></a>LINK and image </body> </html> |
Inserting images to webpageHello everybody and welcome back to my blog, today i will be showing ye how to put and image and a link to your webpage.
First of all you will have to make a folder to contain your html page and your pictures, this must be the same folder or else the computer will not be able to find the pictures to show on the webpage. For the picture we will use the <img> tags plus src="the folder name and the images name, to get the image name and type go to properties and find the name, make sure to add if it is .png, .jpg or .gif For the link you must go to the page you want to link and get the url on top of the page and insert after href tags make sure it is in quotation marks each side of the address. You can now click on the w3Schools image link for more tutorials |
How your webpage should look
internal style sheet
<style>
body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> |
Welcome back all, today I will show how to make an internal style sheet.
For this we will need to use these tags <style></style> these must be placed in between the head tags on your html page, before we start we need to know what tags we are using so we can reference the tags, the tags we are using are h1, body,Li and p. What we need to do now is easy really. so we type the tag we are using and give them a color type and font size. To find more fonts styles and colors just go to w3 schools for more tutorials. For more colors and fonts go to w3schools |
css
enternal style sheets
code
body {
background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } |
External style sheet
HI and welcome back to my blog today I will be doing a screen cast showing how to create and link an external style sheet along with some (CSS ) Cascading Style Sheets these are called cascading style sheets as they will cascade the design through all the pages that you have linked. we will be use the same code that we have used for the
internal style sheet. (ERROR NO STYLE TAGS NEEDED) |
using fieldset
fieldset tags<!DOCTYPE html> <html> <head> <title>MyFirstHtmlWebpage</title> </head> <body> <center><h1>HTML & CSS</h1></center> <fieldset><ol> <li>This</li> <li>Is an</li> <li>ordered list</li> </ol></fieldset> <fieldset><ul > <li>This </li> <li>Is an</li> <li>unordered list</li> </ul></fieldset> <center><p>HTML paragraph.</p></center> </body> </html> |
how to use fieldset tagsHello and welcome back to my blog today I wil be showing how to use the fieldset tags.
fieldset is a divider as it divides up the page into separate sections. All that needs to be done is to but the fieldset tags before and after which ever piece of the webpage you would like to wrap around, on my webpage ive put them around the unordered list and the ordered lists |
Adding colour using css
Code
background-color: red; font-family: verdana; font-size: 20px; color:white; text-align: center; |
Using color
Hello and welcome back to my blog today i will be showing how to use color in CSS, we will be using the external style sheet that we created earlier. Today I will change the color on the text and add background color to the paragraph. So we need to go to the external style sheet and in between the curly brackets of P and H1 |
make webpage look better with some Css
Code
body { background-color:lightblue ; } h1 { background-color: red; font-family: verdana; font-size: 20px; color:white; text-align: center; } fieldset{ border: 1px solid black; margin: 100px 150px 100px 80px; background-color: white; } p { background-color: red; font-family: verdana; font-size: 20px; color:white; } div{ margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: red; } |
Using CSS
Hi all today I will be tiding up the web page, as it looks its a little messy so I will Divide up the page using Css external style sheet. We will be using the external code to accomplish this. As we can see the pictures and links are pushed up against the left side to move these out we will need to put the images and links in div tags and use the external sheet to style them. The style we will be using I have posted on the Left in bold. Or for different styles try out W3schools where there is a vaste array of styles. |
How you page should look