Murdernickel's Safehouse: August 2011

Wednesday, August 31, 2011

CSS3 and HTML5 Example 1: Navigation Bar

Having good and easy to navigation is important for any site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.
In this example we build the navigation bar from a standard HTML list.
A navigation bar is basicly a list of link, using <ul> and <li> elements makes perfect sense:

<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a hreft="about.html">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

ul
{
list-style-type:none;
margin:0;
padding:0;
}

The code in the example is the standard code used in both vertical and horizontal navigation bars.

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:

a
{
display:block;
width:60px;
}

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Both methods work fine, but if you want the links to be the same size, use the floating method.

Inline List Items

One way to build a horziontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

li
{
display:inline;
}

Floating List Items

In the example above the links have different widths.

For all the links to have equal width, float the <li> elements and specify a width for the <a> elements:

li
{
float:left;
}

a
{
display:block;
width:60px;
}

Tuesday, August 30, 2011

Advanced CSS3 Tutorial 5: Pseudo Classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

Links can be displayed in different ways in CSS supporting browsers

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Note: These must be in the above order. Pseudo-class names are not case-sensitive.

Monday, August 29, 2011

Advanced CSS3 Tutorial 4: Align

In CSS, several porperties are used to align elements horizontally.

Center Aligning Using the margin Property

Block elements can be aligned by setting both the left and right margins to "auto".
(margin:auto does not work in Internet Explorer 8 unless !doctype is declared.)

Setting the left and right margins to auto specifies that they should split the available margin equally, The result is a centered element:

.center
{
margin-left:auto;
margin-right:auto;
width 70%;
background-color:#353535;
}

Note: Aligning has no effect if the width is 100%; In IE5 there's a margin handling bug for block elements.

Left and Right Aligning Using the position Property

One method of Aligning elements is to use absolute positioning:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#353535;
}

Absolute positioned elements are removed from the normal flow, and can overlap elements.

Crossbrowser Compatibility Issues

When aligning elements like this, it's a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.

There is a problem with IE8 and earlier when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Left and Right Aligning Using the float Property

Another method of aligning elements is to use the float property:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Sunday, August 28, 2011

Advanced CSS Tutorial 3: Float

With float an element can be pushed to the left or right allowing other elements to wrap around it.
Float is most commonly used for images but is useful for other things too.

How Elements Float
Elements may only be floated horizontally, not vertically.
A floated element will move as far on its horizontal axis as it can. This means all the way to the left or right of its containing element.
The elements after the floating element will flow around it; elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
img
{
float:right;
}

Floating Images Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Turning off Float - Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
.text_line
{
clear:both;
}

Saturday, August 27, 2011

Advanced CSS3 Tutorial 2: Positioning

The CSS positioning properties allow you to position an element. It also allows you to place an element behind another, and specify what should happen when an element's conetent is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are 4 different positioning methods.

Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning
And element with a fixed position is positioned relative to the browser window, it will not move even if the window is scrolled.
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning
A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
h2.pos_top
{
position:relative;
top:-50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:h2
{
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
An element with greater stack order is always in front of an element with a lower stack order.
Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.

Friday, August 26, 2011

Advanced CSS3 1: Grouping Selectors

In CSS you can group selectors together to save time and become more efficient.
For example, before you would have to type out all this:
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

But when you group selectors it becomes this:
h1,h2,p
{
color:green;
}
As you can see this is far more efficent and easier to read.

It is also possible to apply a style for a selector within a selector.
In the following example, One style is specified for all p elements, a second style is specified for all elements with class="marked", and a third is specified for p elements with class="marked":
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

Thursday, August 25, 2011

CSS3 Tutorial 8: Styling Lists

In HTML there are 2 kinds of lists, Unordered lists and ordered lists; these can be styled with CSS.
There are multiple list item markers to choose from, the most common are circle and square.
You can also use custom images as list markers, I'll show you that later in this tutorial.

Defining List Item Markers

You use list-style-type to define the type of list item marker:
ul.a {list-style-type: square;}
ul.b {list-style-type: circle;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

These are some examples of values for ordered and unordered lists.

Using an Image as the List Item Marker

To use an image as the List Item Marker use list-style-image:
ul
{
list-style-image: url('image.here');
}

Unfortenuatly this does not show equally in all browsers, In IE and Opera it is displayed a little higher than in Firefox, Chrome and Safari.

This is a Crossbrowser solution:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url('image.here');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

Wednesday, August 24, 2011

CSS3 Tutorial 7: Styling Links

Styling links in CSS3 is just as simple as Text. You can style the link, the link after it's visited, the link when it's hovered over and the link when it is clicked. Links can be styled with any CSS property. Here's some examples of Link Styling:

a:link {color:#ff0000;}
a:visited {color:#00ff00;}
a:hover {color:#ff00ff;}
a:active {color:#0000ff;}

When setting the style for the different link states they must be in the above order to work properly.

Text decoration for links is the same as text as well, Here's an example:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background color for links is the same as anything else in CSS too:

a:link {background-color:#b2ff99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#ff704d;}
a:active {background-color:#ff704d;}

Tuesday, August 23, 2011

CSS3 Tutorial 6: Using Custom Fonts

In CSS3 you can specify the use of custom fonts. It doesn't matter if the person viewing the page doesn't have the font installed, You simply host the font online and use @font-face in your CSS to link to it! The code that you use is this:

@font-face {
font-family: [Custom font name];
src: url('[url to font]');
}

You can't use any fonts though, you have to use a special font format, You can generate them at http://cufon.shoqolate.com/generate/. To implement the new font you would use font-family like this:

h1 {
font-family: [CustomFontName], Arial;
}

Arial is there in case someone is using an outdated browser that doesn't support @font-face such as Internet Explorer. .otf format fonts are the most widely supported; It is supported by all browsers except Internet Explorer and Safari on the iPhone, You can use @font-face multiple times in your CSS document so you should also include .eot and .svg versions of the same font in your CSS so it is compatible with all browsers.

Monday, August 22, 2011

CSS3 Tutorial 5: Text styles

With CSS you can also define what color your text will be and its alignment. You can decorate it, so that it is all upper-case or lower-case etc.and you can indent it.

Text Color
In CSS you can use a Hex value, an RGB value or a color name to define the color. To define the color you specify the HTML element you're going to be using and then the color like so:

body {color:blue;}
h1 {color:#FF3030;}h2 {color:rgb(46, 139, 87);}

Text Alignment
The text-align property sets the horizontal alignment of text, The options available are center, left, right or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). Here's an example of some of the available options:

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration
The property text-decoration is used to set or remove decorations from text; Its most common use is to remove underlines from links, To do this you would use this code:

a {text-decoration:none;}

You can also decorate text with it:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

It's not recommended to underline text that isn't a link because this can be confusing.

Text Transformation
This property is used to specify upper and lower case letters in text. It can be used to turn all the text to upper or lower case letters or to just capitalize the first letters of each word. To do this you would use text-transform. Here's an example:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text Indention
This is used to specify the indention of the first line of text. You simply put:

p {text-indent:50px;}

You can change the indent to whatever you want.

Sunday, August 21, 2011

CSS3 Tutorial 4: Adding a Background

In HTML5 you use CSS to set a background color or image because the tag for this in HTML is no longer supported.

Background Color
To set a background color you simply use the property background-color in the element body like so:

body {
background-color:#000000;
}

It's good form to use Hex color codes to define the color, #000000 would make the background color Black, a list of the most commonly used colors can be found here. A demo of this example can be found here.

Background Image
There are multiple ways to set a Background Image to be repeated; It can be repeated Horizontally, Vertically, In a Set position, Or no repeat at all.

This is the basic code to include a Background image.

body{
background-image:url('img.jpg');
}

For this image to be repeated Horizontally you would add "background-repeat:repeat-x;", It would look like this:

body{
background-img:url('img.jpg');
background-repeat:repeat-x;
}

For no repeat at all the code would be "background-repeat:no-repeat;" and would look like this:

body{
background-img:url('img.jpg');
background-repeat:no-repeat;
}

To make it so it doesn't repeat at all and is fixed in one place you would add "background-position:[position];" to the above code, Here's and example with the image being displayed in the right top.
body{
background-img:url('img.jpg');
background-repeat:no-repeat;
background-position:right top;
}

Saturday, August 20, 2011

CSS3 Tutorial 3: Adding style sheets to your HTML document

There are 2 ways of adding Stylesheets to your document, Internal stylesheets and External stylesheets.
The easiest and most efficient way is using external style sheets, which is making your HTML document look at a separate CSS file and using that, With Internal Stylesheets the document reads a stylesheet which is contained in the same document; External stylesheets must end in .css.

Using an external stylesheet
In your <head> section of your document simply put

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

You can name your stylesheet whatever you like, the stylesheet document must end in .css

Using internal stylesheets
In your <head> section put

<style type="text/css">
[your css here]
</style>

Friday, August 19, 2011

CSS3 Tutorial 2: id and class Selectors

Along with setting styles for HTML elements, you can also specify your own selectors called id and class.

id
The id selector is used to specify a style for a unique element, the id selector is defined with a #.

#paragraph
{
text-align:left;
color:yellow;
}

You can't start an id name with a number, it won't work in Firefox.

class
The class selector is used to specify the style for a group of elements. The class selector is commonly used on multiple elements, This lets you set a style for many HTML elements with the same class. The class selector is defined with a '.'
In this example, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}

As with id, don't start a class with a number, this is only supported in Internet Explorer.

Thursday, August 18, 2011

CSS3 Tutorial 1: Intro to CSS3

CSS stands for Cascading Style Sheets, it was invented to solve one problem, How to display HTML elements. HTML was never intended to contain tags for formatting a document, It was intended for basic tags like <h> and <p>, When color attributes were added to HTML 3.2 it caused a nightmare for web developers, Each page had to be edited individually every time you wanted to change the color or font, and thus CSS was born.
The way CSS saves work is the ability to use external style sheets, in laymen's terms: having your CSS document separate from you HTML document.

CSS documents are normally saved in external .css files, editing this file allows you to change all your pages at once.

CSS Syntax
A CSS rule has 2 main parts, the selector and the declaration, Here's an example:

h1 {
color:red;
font-size:14px;
}

The selector is usually the HTML element you want to style. Each declaration consists of a property and a value, The property is the style attribute you want to change and each property has a value.

To add comments to CSS code you use "/*" to open the comment and "*/" to close it.

Wednesday, August 17, 2011

HTML5 Example 1: Your very first website

Today you're going to put together everything you've learned so far. You can find the source code for this here. Be sure to edit this however you like, Check out a live example here. My next tutorial will be an introduction to CSS3!

Tuesday, August 16, 2011

HTML5 Tutorial 9: Small and h

<small>
The Small tag is very useful for small print or copyright or trademark declarations in footers. It looks like this:

This text is small

The tag is used like this:

<small>This text is small</small>

<h>
The h tag is useful for making text larger and for headers. It's used by putting <h and then a number after it.
Here's an example:

<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>

This is what it looks like:

This is h1
This is h2
This is h3
This is h4
This is h5
This is h6

Monday, August 15, 2011

HTML5 Tutorial 8: Adding Audio to your page

Another great feature included in HTML5 is the ability to directly include audio without having to use an external service, javascript or Flash. Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

This is how the code for Audio looks:

<audio src="http://www.archive.org/download/NyanCatlongVer/NyanCatLong6Hours.ogg" controls preload="auto" autobuffer></audio>

There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.

Sunday, August 14, 2011

HTML5 Tutorial 7: Adding Video to your page

One of the most exciting buzz these days in web circles is about HTML5 and specifically video on HTML5. HTML5 video tag has solved the age old problem site owners and designers face on how to best embed video on websites.

Prior to the new HTML5 video tag you basically had two options for embedding video on your site to get a video player or to use a 3rd party service like YouTube to host your video and them use their embed code to put the video on your site.

Most people are currently using the 2nd option of using services like YouTube to host their videos and them embedding them on their own site. This option is not really a better design standard than getting a video player and hosting your own videos but it is quicker and free which is why most people end up using this configuration for videos.

For people who do decide to have their own video player they quickly find out that a quality one can be costly and customization may require both a graphic designer and a web designer all just to place a video on their site.

That is where the magic of HTML5 video comes in. It has a simple straight forward tag that is similar to an image tag with a source and attributes. It looks like this:

<video src=”movie.webm” poster=”movie.jpg” controls>I am ALT text</video>

If you have ever added video to a website you know how much simpler that is. However, the problem is that the browsers of the world are not quite ready for what HTML5 has to offer.

Currently only one browser has a robust support for HTML5 video tags and that is chrome, firefox also has limited support and IE hasn’t even touched video in HTML5 in its current browsers yet. So what does that mean for you? It means a good percentage of people using computers to access the internet will not be able to render the video on your page.

Which is why for now when it comes to building websites video in HTML5 is like that golden egg sitting just out of your reach that you really want but you just cannot have. The push for HTML5 compliance is getting louder and louder everyday though so before you know it HTML5 will have enough standards in browsers to make 2.0 web design much easier.

Saturday, August 13, 2011

HTML5 Tutorial 6: Headers and footers

The header and footer tags have been simplified in HTML5, before you had to use CSS to define the header and footer and then use div tags to include them. Now in HTML5 it's just 2 simple tags! I introduce to you:
<header> </header> and <footer></footer>

<header>

The <header> tag specifies an introduction, or a group of navigation elements for the document and is used like so:

<header><p><b>This is a header!</b></p></header>

You can add whatever tags you want to the header, I used the paragraph and bold tags from a previous tutorial, Unfortunatley I can't show what this looks like because it is not allowed in Blogger.

<footer>
The <footer> tag is almost the same as the header tag, The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information, you use it like this:

<footer>This page is copyright Murdernickel 2011, All rights reserved</footer>

As with above, I'm unable to show what this looks like due to it not being allowed in Blogger.

Friday, August 12, 2011

HTML5 Tutorial 5: Making lists

Making lists in HTML is very easy, we will be using the tags <ol>, <ul>, <menu> and <li> today.

<ol>
To make a standard ordered list like this:

Item 1
Item 2
Item 3

You would use the tag <ol> which stands for Ordered List, for any list you must also use the tag <li> which stands for List Item, You use the tags together like so:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

This will show up like the above example.

<ul>

<ul> stands for Un-ordered list which is bullet points, like so:

Item 1
Item 2
Item 3

To use them you simply change <ol> to <ul> like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<menu>

This is probably the most used form of lists, Checkboxes, They look like this:

Item 1

Item 2

Item 3

To use them you simply use the following code:

<menu>
<li><input type="checkbox" />Item 1</li>
<li><input type="checkbox" />Item 2</li>
<li><input type="checkbox" />Item 3</li>
</menu>

Catch'ya later guys.

Thursday, August 11, 2011

HTML5 Tutorial 4: doctype Declaration

<!doctype>

The <!DOCTYPE> declaration must be the very first thing in your HTML5 document, before the <html> tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

It is important that you specify the doctype in all HTML documents, so that the browser knows what type of document to expect.

The doctype in HTML 4.01 required a reference to a DTD, because HTML 4.01 was based on SGML. HTML5 is not based on SGML, and does not require a reference to a DTD, but need the doctype for browsers to behave as they should.

Using the tag:

The !doctype declaration in HTML5 has been simplified, all you do is place <!doctype html> as the very first line of your document before your <html> declaration like so:

<!doctype html>
<html>
</html>

And you're done!

Catch you guys later.

Wednesday, August 10, 2011

HTML5 Tutorial 3: Adding images and pictures

Adding images and pictures is easier than you might think, the tags we will be using today are <img> and <a>, I'll start out by showing you the <img> tag.

<img>
To add an image to your document you would use the <img> tag but you can't simply put something like <img>panda</img>, you must use something called a Image Source, which means the picture you want to include must already be uploaded somewhere on the internet (although you can get in trouble for using other peoples pictures without getting proper permission ).
For example, to add a picture of a panda your code should look like this:

<body>
<img src="http://www.rockfuse.com/blog/wp-content/uploads/2011/04/panda.jpg" alt="Panda" />
</body>

This code would show up like this:

The alt="Panda" is what shows up if the picture can not be displayed for one reason or another. Remember adding the / before the closing > is good practice.

<a>

To place a link in your page you would use the <a> tag, but like the above <img> tag you need other factors inside the tag for it to work correctly. It is used like this:

<body>
<a href="http://murdernickelsafehouse.blogspot.com"> Murdernickel's Safehouse </a>
</body>

The href factor is necessary for the link to work correctly, it stands for hyperlink reference and tells the browser what it is linking too. The text between the opening tag and closing tag can be changed to whatever you like.

When this code is implemented it shows up like this:

Murdernickel's Safehouse

The default coloring for links in HTML5 is

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

Although this can be changed with CSS which I will show you at a later date.

Thanks for taking the time to read this, Catch you all later.

Tuesday, August 9, 2011

HTML5 Tutorial 2: More basic tags

The tags we will be covering today is: <b> <br /> <i> and <del>, These tags are very useful for making your site easier to read and more user friendly.

<b>
The <b> tag is used for defining bold text, the body code for the <b> tag looks something like this:

<body>
<b>This is bold text</b>
</body>

The end result of this looks like this:

This is bold text

<br />
<br /> signals the browser to insert a line break, when inserted to the body code it looks like this:

<body>
This is line one.
<br />
This is line two.
</body>

This would look like this:

This is line one.
This is line two.

Although it is not necessary to have a / in the tag it is good form to do so.

<i>
<i> is the tag to make text italicized, Your body code should look like this when it is put in:

<body>
<i>This text is italicized</i>
</body>

In your browser it will look like this:

This text is italicized

<del>
The final tag I will be showing you today is the <del> tag, this tag strikes through text like ~~this~~, when added to the body of your HTML document it looks like this:

<body>
<del>This text is deleted</del>
</body>

The final product looks like this:

~~This text is deleted~~

That's it for this time, See y'all tomorrow.

Monday, August 8, 2011

HTML5 Tutorial 1: Starting out

HTML is a mark up language that is most popular in websites. It is a simple yet logical language to learn, and uses tags. To start out you're going to need a text editor like Notepad++.

We're going to make a very very basic site today using the tags <html> <head> <title> and <body>

Open a new document and type

<html>

</html>

These tags need to be declared in EVERY HTML document you make no mater how big or small they may be, this tag is what tells your browser that it's going to be reading an HTML document.

The next tag we're going to use is <head>, add it just underneath your <html> tag and be sure to close it, it should now look like this:

<html>
<head>

</head>
</html>

Now it's time to finally add something that will show up in your document, the <title> tag, This is the text that displays in the tab in Chrome, it will look something like this:

<html>
<head>
<title>Title goes here</title>
</head>
</html>

This next tag may be the most important tag of the whole document, the <body> tag which is for, you guessed it, the body of the page! When you add it it will look something like this:

<html>
<head>
<title>Title goes here</title>
</head>
<body>
This is the body text
</body>
</html>

Save this as tutorial.html and open it with your browser of choice. You can change the title and body text to what ever you like as practice. Remember, Have fun!

Sunday, August 7, 2011

Solid State Drives Worth it?

Are Solid State Drives worth it over normal Drives with Platters? Besides from the increased read-write times what else do they offer?

Saturday, August 6, 2011

Gameboy Advance Clones?

Been thinking about picking one of these bad boys up off of DealeXtreme, What it is for anyone who doesn't know is a Gameboy Advance with 2gbs of internal storage and a backlight, It can play .gba ROMs and from what I've heard has pretty piss-poor support for NES games.

Does anyone have this? If so, how is it?