Fabric of the Cosmos: August 2013

Tuesday, 27 August 2013

YAY WEBSITES!

This week we planned out a quick website.
After nearly doing one on the tardis I decided to keep it sweet and simple and do it on baking.

i got a few imagef off google to use on my site then i created my own logo:

very simple but cute non the less :)

and here is a screen shot of what it looks like at the moment:

I will hopefully get the homepage and the about page done sometime this week :D

Woops missed a week!

From last week:

We learnt

Cascading Style Sheets
or
CSS

These style sheets can be used to clean up an html file, make rounded corners and font colours etc.

pretty much the same sort of language as html, but instead the brackets are not done by a

< >

they are done like this:
{ }

To add css to your html file you write:
<link href="css/main.css" ref="stylesheet" type="tect/css"/>

To reset your webpage so that there are no browser settings involved:
*{margin:0;

padding:0;

border:0;}

To reference something from an html file you use a hash tag # to retrieve id tags. For example id i wanted to get a big picture from the html file and position it I would write:
#bigPicture {margin sizes etc}

Margins are written in the brackets clock wise like this:
{margin: top; right; bottom; left;}

Its always good to leave yourself comments when you're writing code.
for html you leave comments like this:
<!-comment-!>
and in css:
/*-comment-*/

This helps you keep track of everything.

FONTS

Size:
{font-size: 12px;

Type:
{font-family: georgia;

Colour:
{color:blue;

Tuesday, 13 August 2013

Markup structure, Twitter feed

New Tags

<br /> break tag

<div></div> seperation tags

<span></span> inline seperation tag

<ul></ul> un-ordered bullet point list

<li></li> list tags

<ol></ol> ordered list, numbers

<a href="mailto:email address">title</a> email tag

 comments for yourself, not shown on website

Tuesday, 6 August 2013

HTML and Social Media intro

Today we learnt about coding and social media.

A web page usually consists of:

The Head

This does not show up on your web page. This is what tells the server what to show on the page. For example, it sets the coding and the language of the page under meta:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

html is the code language and utf-8 means English.

The meta hyperlink can also be used to edit the description that shows up on google under the title of the site and the web address.

Description Hyperlink:
<meta name="description" content"Offical home of Hello Kitty and friends."/> etc

The title can be used to find your page more easily on google and also shows up on the tab title or window title. This can also be found under the head of the hypertext.

Title Hyperlink:
<title> Hello Kitty </title>

TITLE AND DESCRIPTION

All this is found within <head> </head>.

The Body

This will show up on your web page.

Everything that is in the "body" of the web page goes within <body> </body>.

For headings we have:

<h1>Heading</h1>

<h2>Sub Heading</h2>

<h3>Minor Heading</h3>

For paragraphs we put them in <p></p>. Its important to put your paragraphs within this hypertext, as otherwise the server wont recognize spaces between the different paragraphs.

For example without hypertext:

I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are!

WITH hypertext:

<p>I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are!

I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! I love animals so so much its unbearable how cute they are! </p>

Anchoring means linking pretty much, and looks a little like this:
<a href="web page">HELLO KITTY</a>

and will hopefully turn out looking like this on your page:

HELLO KITTY

to have it open on a new window or tab:
<a href="webpage" target "_blank">

HREF means [h]ypertext [ref]erence

IMAGES!
can be done like this:
<img src="image name"/>
which will end up looking like this:

img means "image" and src is short for "source"

Thursday, 1 August 2013

History of the Web

The World Wide Web (www), was created in 1990 by a man called Tim Berners-Lee.
Even though, development started years before that (around 1980), it generated little interest until Robert Cailliau rewrote the proposal for a "a large hypertext database with typed links", and by christmas 1990 they had created all the necessities for the web: HTTP (HyperText Transfer Protocol),

HTML (HyperText Markup Language) and the very first web browser which was also called WorldWideWeb.

Since then the web exploded, with now nearly every home having at least one or two computers connected to the internet. With the release of the WorldWideWeb, more and more browsers were made over time. Internet Explorer was released in 1995, Mozilla in 1998 and Google Chrome in 2011, the contrast between the amount of users is massive!
To put it in perspective:

1991: WorldWideWeb - 4,000,000 users
2012: Chrome, Safari, Internet Explorer, Opera - 2,405,000,000 users

That is 1,595,000 more users in the space of just 21 years!

This is a perfect example of someones dream starting off small and maybe not getting the funding the first few times, but with hard work and determination, it has now become of almost a necessity within our society.

Pages