HTML

Tuesday, 11 December 2012

CSS and Classes

CSS comes in really useful when it comes down to formatting your site, it allows you to set different formatting rules such as colour, width and alignment for all text of that type. For example, if you were using multiple unordered lists across your site then you may want to create a Cascading Style-Sheet (CSS) . Doing this is fairly simple, first set-up the style tags <style> </style> in the main <head> tag. Now enter your CSS format rules. To do this you need to write this code, changing content to suit you of course;

<style>

ul {list-style-type: square}

</style>

There are a few important things to notice. Firstly, the tag we are defining to create CSS for must not be within angled brackets ( < > ). Secondly the details should be encased in curly braces. The final thing to notice is that no speech marks are required, unlike directly editing tag attributes. This process will make things much easier as if you decide you don't like square bullet points then instead of having to go to each and every <ul> tag attribute and change it manually, you can simply edit the CSS and it will change for every <ul> tag.

So now you know how to write CSS, you need to know how to create classes to make your developing even easier. Classes go a step further from CSS, they allow you to create certain rules as usual, but then define them by a particular keyword. This allows you to utilise them in different situations across your site. For example, say you were a retail company and decide that occasionally you would have a sale on certain items and wanted people to know that. without CSS this would take a lot of time to implement as many different items may require to be edited. A class will simplify this process. Say you wanted and sale items to be coloured red then you could set a class to do just that. You could also use it for ordered lists, and maybe even on other HTML files, but that's another blog. Setting up classes is very similar to CSS;

<style>

.sale {color: red}

</style>

It's hard to see but this is very important, before sale is a period (or full stop), this must be entered as it defines the text as a class (also known as a function in other programming languages) if you omit this then the class won't be recognised and it won't work. Besides the period, the coding is exactly the same, the only other difference is that classes have to be manually utilised, but this doesn't require a great deal of coding. Simply enter this line within the tag attributes

<li class="sale">

This tells the browser that that line should be set to the class "sale", defined in the <head> section. The result is that the text on that line should become red.

Classes are great as they allow you to format individual sections of your content, without having to alter all of it like CSS or attributes editing does.

Here is the final output with some example content and as always, the HTML is right beside it.

Next on the HTML agenda is looking at how to layout your HTML pages to get the best visual effects.

Monday, 10 December 2012

December 21st HTML Prank

So now for that doomsday 'joke'. This would work best if you have a friend with a PC who's average when it comes to technology. When you've made this file put it on a USB stick and ask to borrow there PC/Laptop for a while. When you can safely say they're not peering at your every move, upload the file. If you want to skip to the tutorial then scroll to the bottom and you can find the full coding there.

So what are we going to do. Many, if not all, should know that the supposed end of the world will be coming on 21st December this year. Lynx already played on that theme with their anti-persperant "FINAL". Now you can have some fun too.

As always open up a blank notepad (or the text editor program you use) and create the base template lie below, if you already have one, or know how to make one then, then just skip ahead. Remember to save the file as a .htm file or it won't work properly.

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

</body>
</html>

Now that we have that set-up we can start to create our masterpiece. First off will be a page title. Something fitting like, CIA SECURE DATABANKS, should suffice. Add this line to the <head> section

<title> CIA SECURE DATABANKS </title>

Wonderful, now that we have our contextual title, we can begin on the process of the actual content. First we need a page title. For this 'joke' we are going to keep to the Server log idea, so what better title than; "Server Datalog: 20th December 2012". This allows us to create a serverlog that shows the events on the night before the end. The heading should contain something similar to this, again under the <head> tag;

<h1> Server Datalog: 20<sup>th</sup> December 2012 <h1>
The <sup></sup> tags are optional however they will register the 'th' as superscript, meaning it will be raised slight above the rest of the text to give the aesthetic look of the date but this is not needed if you wish to omit it.

You can choose to underline it ( <u></u> ) but omitting it adds to that core process aesthetic feel of the page. Now for the real meat of the joke, the body. It may be better to add some aesthetic attributes to the body, I used a matrix-esqe look for that added "kick". To set this we simply edit the <body> tag with coding similar to this, you can edit the colours to what you see fit and there are around 16 HTML accepted colour phrases;

<body style="background-color: black; color: green">

Notice that the semi-colon is only used when another statement is in use, the final statement does not need one, just finish it with closing speech marks. So here is what we should have so far, as ever the HTML code is right next to the Internet Explorer output.

Now we need to fill the body with content, for the server-log aesthetics we should start by using an unordered list ( <ul> </ul>). This will create the bullet points of the log content. We will also need to use the <li> </li> tags to define each list item. I have used some example content but you can always adjust it to your liking; (ignore the hyperlinks, that is just the format when that particular text is entered into a browsing program)

<ul>

<li>12:00hours: UFO sighted</li>
<li>12:20hours: 5 more appear</li>
<li>12:25hours: America under attack</li>
<li>12:30hours: London, Paris and Washington unreachable</li>
<li>13:00hours: FATAL ERROR!!! SERVER BREACH #FFA9EE000000</li>
<li>13:03hours: CONNECTION LOST</li>
<li>13:46hours: CONNECTION REESTABLISHED with Washington Exchange</li>
<li>14:05hours: cite_url"http://www.cnn.com/": Invasion Death Toll Reaches 4Billion</li>
<li>15:00hours: cite_url"http://www.msnmews.com/": African Continent Destroyed</li>
<li>15:08hours: POWER FAILURE!!! SWITCHING TO SECONDARY POWER</li>
<li>ERROR!ERROR!ERROR!ERROR!ERROR! : SERVER #46EA8A23FE COMPROMISED, SOURCE UNKNOWN</li>
<li>@"!@"@£@@**$*£"@@!!!!@@$$$££$</li>
</ul>

<h1><b>Connecting to HAARP STATION #1692...</b></h1>

<h1><b>CONNECTION ESTABLISHED</b></h1>

<p> SERVER: Anyone still there?</p>

<p>HAARP: Where's your God now!</p>

<p>SERVER: #ALERT# ERROR404!!! CONNECTION LOST!!!

<p> SERVER STATUS: 10:59:46PM: Loading... </p>

I have also added some extra parts to continue the 'story' of the prank. You may notice that there are also some other tags hidden such as the <b> </b> tag. This tag denotes any text enclosed to be set in a bold format. You can add, omit or edit any content as you please and If you wish to see a live version of the prank visit http://www.code4robots.co/.

The full coding can be found below.

<html>

<head>
<title>CIA SECURE DATABANKS</title>

<h1> Server Datalog: 20<sup>th</sup> December 2012 </h1>

</head>

<ul>

</ul>

<h1><b>Connecting to HAARP STATION #1692...</b></h1>

<h1><b>CONNECTION ESTABLISHED</b></h1>

<p> SERVER: Anyone still there?</p>

<p>HAARP: Where's your God now!</p>

<p>SERVER: #ALERT# ERROR404!!! CONNECTION LOST!!!

<p> SERVER STATUS: 10:59:46PM: Loading... </p>

</body>

</html>

Next I will be looking at using CSS and Classes to format your text based visuals on your sites.

Thursday, 6 December 2012

Creating Entities

Entities, such as an ampersand (&) or the copyright logo, are special characters that would not appear on a standard english QWERTY keyboard, in a program like word, for example, you would have to sort through the Insert -> Add Symbol Pane for quite a while to find the right one. However, HTML supports a create entity function. Besides the use of special characters, other characters, such as the ampersand, are on the keyboard put may be used to denote other tasks, thus must be created as an entity in order to prevent HTML confusing itself and mistaking it for a function, not a character.

To create an entity first create, or use one fo your existing files if you have one, a set of body tags like this;

...
<body>
<p> This is where we will create our entity </p>

</body>
</html>

Now in the marked location, for this 'tutorial' I will be using a simply copyright statement and a trademark on a random non-existant company that I will make up but you can type any content you want.

First we need to basic statement. Something like this should suffice;

Copyright (entity) of xrobot(entity) ltd. All Rights Reserved

Very simple, now for the real meat, the coding for entities. This comes in the addition of our old friend, the ampersand (&) generally located as SHIFT+7 on a standard QWERTY keyboard, this indicates that the following 'attribute' is a special character and should be ignored as anything other, such as a function. For example, the entity for the copyright 'C' and the trademark 'TM' is

&copy

&trade

If we now type this line of code instead into our html body tag, then we should end up with an output similar to the one in the coming image;

<p> Copyright © of xrobot ™ ltd. All Rights Reserved.

It is important to include the semi-colon after the end of the entity, ot the browser will try to find an entity relating to all the content after the ampersand and will result in no outputed entity.
You should get something similar to this;

There are more entity commands to be found if you search for them but next to look at will be a little break from all the functions and tags, and looking at something that looks serious, but could be good for a december prank to pull on your friends!

Wednesday, 5 December 2012

Lists and Nested Lists

Lists can be very useful in our lives, be it for instructions or shopping lists. HTML5 allows you to easily create lists in any text editor, I use notepad as it is pre-installed on all Windows machines, and quickly customise them using simply attributes.

There are two varieties of lists in HTML5, order lists and unordered lists. Ordered lists contain numbers or letters and are generally used for instructions or step-by-step guides. Unordered lists contain simple bullet points to show multiple details of a topic, such as a shopping list or locations for fishing.

They each have there own tags to signify the type you want to use. <ol> </ol> represents Ordered Lists and <ul> </ul> represents and Unordered List.

However, if you were to enter this into your text editor;

<ul>
Fish
Eggs
Milk
</ul>
It will not work, you have to signify each line with the <li> </li> tags.

<ul>
<li>Fish</li>
<li>Eggs</li>
<li>Milk</li>
</ul>

This time you should be able to see the unordered list in your web browser like so;

For an ordered list you simply change the <ul> tags to <ol> tags and then the bullet points will be replaced by numbers, however these are only defaults and can be customised later.

Nested Lists are exactly what they sound like, they are a list within a list. A good example of where this comes in handy is if you are listing places you will visit and their order, you could add an unordered list to show options for things to do at that location.

This is very simply to implement, in my coding I use indents to create a clearer structure for viewing (and debugging!) but there is no specific rule for indentation.#

Firstly, create an ordered list, using the <ol> and <li> tags and then where you want to have the nested list create another tag like this, <ul><li> below that item, this will start the ordered list from that item. This sounds fairly complex, but below is the HTML5 coding for a shopping list with a particular order that the fish must be acquired.

<ul>

       <li>Fish</li>

      <ol>
             <li>Salmon</li>
            <li>Cod</li>
     </ol>

<li>Eggs</li>
<li>Milk</li>

</ul>

It is a fairly simply tag nest to implement and still present quite a nice visual nested list on screen as can be seen with the image below, again featuring both the notepad HTML5 code and the visual output in Internet Explorer;

Next to look at is creating entities, especially useful for copyright or using ampersands(&) in text.

Starting with HTML5!

Just started learning HTML5 using a very handy beginner's guide from the writers down at Microsoft press. I will put the link down below for anyone interested in starting themselves.

In just a few short hours, I managed to create a matrix-esque website about travel information outfitted with copyright and horizontal lines! Even managed to edit the colours of the lines and the background/text.

Put the current version (In Internet Explorer) below along with the .htm file from notepad. You can make out the tags used pretty easily and the different styles utilised.

Next on the agenda is to add some ordered and unordered list, <ol> and <ul> respectively, and then find something to put in there, maybe a set of instructions like login details, or just some quirky travel locations, could dabble in nested lists then too.

The link for the book is right here , the companion teaching files .zip can be found here , but that link is also noted in the book itself.