Sassy CSS

CSS!

Cascading Style Sheets help personalize and create a web page. It allows the style of a web page to be kept entirely separate from the content of a web page. This not only saves bandwidth, as when the DNS cache the data and location it also saves the CSS data and doesn't have to completely re-download the styles for every refreshed web page.

This also makes it a lot easier for editing.

Rather than editing each separate page of the HTML data (which could be hundreds of pages), you can simply edit one CSS file and change what is needed.

Firstly, ya need to link your CSS to your HTML file. 

This is just done by saving the CSS in the same location, then you simply <link href="whatever i called my folderdoodly"

I then need to repeat to the silly HTML that its a css file.

So after the folderdoodly" rel="stylesheet" type"text/css" />

Yay. Its linked. 

We then went on to basic syntax and structure
h1 {color:#FFFF;
font-size:14px;}

CSS uses the curly brackets instead of the <
ie. if i wanted to change the background colour of my main container i would type

#container {
background-color:#CC0000;
}
This will only change the background colour
Yes, I have spelt colour wrong, but the CSS only reads american english and so we are required to use their silly spelling.
The # in front of the ID is because the CSS also won't recognize the name I have given to the div.
I called my main body the container so the #container allows the CSS writer to identify the area that I want to change.

We also had to reset the basics, so the margin, border and padding (inside the box) are all reset to 0.

Setting the font-family is done by choosing a cascading selection of fonts
ie. tahoma, arial, sans serif
This means that if the web browser doesn't have tahoma installed, it can then use arial as a backup and if arial also isn't available, it will use whatever the default sans serif font is.

There are also three separate codes for identification;
ID is the #container
Class is the class that you want it in .orange
* is the universal CSS code and is used in things like the
 *{margin:0;
border:0;
padding:0;}

For adjusting width and height of divs, it is simply changed by typing
width:960px; within the { brackets in the area the change needs to be made.

Floats are how the divs are positioned on the page. So 3 containers that need to sit side by side horizontally on the page will automatically align vertically and to the left.
So to change this float tags are needed.

ie.
#boxone { float:left;
}
#boxtwo{ float:left;}

This will make the boxes change position, which can also mess around with the rest of the page.
So to stop anything below these boxes automatically floating up, the tag clear:both; is used.
So that pretty much sums up the CSS we have learnt this week.

=]

Code, code and more code and of course mark-up structure

Ahoy,

This week we have continued on with the code writing, with the addition of some new tags!!!

Also, we began using these tags to reproduce the layout of already created webpages. 

Some newbies we have learnt are;

<meta> which is how the page gets displayed in the SERP (search engine ranking pages)

<br/> the break tag which as is self explanitory, adds a break to the text

<div> the div tag adds a division into the page and an 'invisible box' around the information. This is only invisible until the CSS is added.

<span> span isolates the texts for individual styling, kinda like the <strong> tag giving bold, the span could be used to colourize a certain selection of text

The list tags:
<ul> this is for unordered lists which as default on most browsers is set as bullet points.

You can also create secondary lists under the main points

ie.

<ul>

<li>Home

<ul>

<li>Pages</li></ul>

</li>

</ul>

This would create a list like this

• Home
• Pages

There is also the <ol> tag (ordered lists) which gives numbered lists

1. Home
1. Pages

There is also a tag for when you want to leave notes on your code that wont appear on your webpage,

this is <!---description-->

This commenting can still be read in the source code of webpages unless deleted before publishing. 

On Google Chrome you can access the webpages source code by using Ctrl+U

Also using the <a> anchor tag we learnt last week we can add emails to our pages! 

ie.

<a href="mailto:ellejbrennan@gmail.com" target="_blank">email me at:</a>

This usually will open in a installed email program such and microsoft outlook (which noone really uses anymore) so it has little use 

We then went on to recreate a webpage that Philippa had already designed using ID tags to identify our individual <div> tags.

Camel case is one way to help make code IDs easier to identify, such as <div id="bigPicture">

This just makes the words a little easier to make out once the page is full of code and stops it all looking like mumbo jumbo and the capital P is like a camel hump gettit! aahhhaaaaaha

Lastly we learnt a little about using hexcodes to create flat colours on the pages and escape codes such as &copy; for the copyright symbol

On another note we learnt how to add the social media gadgets onto our pages, so get at me. Check out my slick as profiles =]

Elle out.

Codecrackaa - AKA How the web works and HTML intro

 So this week its all about learning HTML and how the internet works and i took lots of notes (cause that's how I roll)

Basically this is what i wrote from what Philippa wrote and now am re-writing it for your viewing pleasure. Starting with how the internet works, from what I have gathered, all that websites compose of are collections of files. Each device for example a computer, iPad, cellphone, or anything with access to the internet has an IP address - which stands for Internet Protocol.

An example of this we were given was 210.54.8.253

These numbers are converted to something which us beings can read and remember such as www.witt.ac.nz. Simple. 

Bytes = the measurements of data transfer. The smallest measurement of this data transfer is called a bit, which holds a value of 1 or 0. 

Web addresses use a Domain Name System (DNS) which automatically connects the domain name with the IP address. 210.54.8.253 = www.witt.ac.nz

URL is used as a specific webpage on the internets. This means Uniform Resource Locator... So many abbreviations. This is the http://www. that is in front of the DNS.

DNS servers accept requests from other servers to converts Domain Names into IP addresses.

DNS servers also cache (store) the directions to the IP address so they are easier to find in the future. 

Computers that are connected to the internet hold on of two names. They can either be;

Clients - machines that access the internet

OR

Servers - serve things out to the client machines

Browsers are the amazeballs part of the operation really, cause without them we couldn't browse. That is my favourite thing to do. They open/render the website on screen when the page and its content download to your machine, once the web server has located said content. 

A browser is a program that you install onto your comp which allows the easy access to view the content online. 

The wonderful browser reads the code of the website files and renders them onto your screen. 

So all these words make the internet possible! And that means I can waste my time looking at cute pictures of kittens and stuff. 

HTML is short for Hyper Text Markup Language so it pretty much marks things up. 

It is the industry standard but definitely not the only way to write code and create webpages. 

Knowing about the code and how it works teaches how websites are constructed. 

We will be using Adobe Dreamweaver and learning HTML1 (cause we are too cool to learn that new 5 one).

We just learnt some basic tags today like:

 <h1></h1> for main header

<strong></strong> for bold

<a href="http://www.google.com" target=" blank"> for a website anchor

Sweet eh. 

Makes little sense when like that. 

Also, I have a new twitter account now. 

Get at me 

https://twitter.com/@sugarteef 

My puppy!

Just a photo of my baby Rosie xx

History of zee interwebs and other exciting tales

So this was our first week of the semester and the discovering of the Internet and all its secrets!

I always thought of myself as 'computer savvy' but it seems that the addiction I have to the web comes without any thought towards its history. After being shown part of a BBC2 doco called 'The Virtual Revolution' I realised how little I actually know about it or how it came to be.

The birth of the Internet we know today began with a U.S government program named ARPA. This was in 1962 before the word 'Internet' had even been coined. By 1969 university's were beginning to use the systems, known as ARPANET which became the basis of hosts and new operating systems were being created. Interest was slowly growing and ideas flowing and by 1974 the idea of linking these ARPANET networks together became the creation of TCP/IP by Vint Cerf. Around 1977 the first commercial PC was created which also had a massive effect on how we have such readily available access to the web today, unfortunately the following year was also the first for spam :[. With this new development and PCs becoming more common the first virtual communities started to appear, the first of these was The Well. People were suddenly able to connect and discuss anything and everything with others who had similar interests and knowledge and this created a large (for its time) online community. The Well is still online and operating to this day with an active underground community of dedicated members!

 A prominent name comes up when you search for creator often internet and its Tim Berners-Lee. Berners-Lee wasn't the creator of the Internet but is the creator of the version of the internet that we know today. He created the idea of the World Wide Web and the use of a global hypertext system and by 1990 this was in place as well as HTML, HTTP and URLs.

The Internet has since expanded at an amazing rate with most homes having a computer with a connection and the introduction of computers into technologically secluded countries such as Africa. Seeing the effect the web has had on our society through availability of information and the freedom it gives to its users, will this change the societies not yet affected by it in a negative or a positive way? The web gives its uses the ability to research anything, see places they would normally never dream of, express their own opinions, listen to others and have the freedom to think for themselves. Access to the rest of the world has never been easier, as here I sit on my comfy couch on my iPad typing away. I have to say, the iPad was not a good choice for writing this essay of a short story.

So what have I learned? Who created the reason I have the freedom to learn and have access to knowledge I require. I'd give them a big high five!

And I have learned how to make a blog. Hurray! Hopefully someday ill be a web master, not just a social media addict.

K, thnx for reading.


Elle