New Adobe Dreamweaver CS5 Tutorials Coming Up!!

Since I've begun with the latest trend on website designing articles, I thought I'd continue in that fashion by teaching both the HTML code and the Dreamweaver software. So it is sort of complimentary to the two sects of people who want to learn web designing: 1) I'll do it the hard way 2)I'll do it the easier way!

So, this post is just to inform you guys that I'll be starting off with videos, articles & detailed tutorials on Adobe Dreamweaver soon, right after the Tutorials on HTML Coding are over. So thanks, give us your feedback through the monthly polls and comments box!

Thank you!

Creating Image Maps With HTML: Tutorial 1

Since, during the three-part series of "What is HTML?", I never really explained what the exact syntaxes were for each tag, or how to exactly structure the page, you can download my free e-book: HTML: A Basics Guide. It will give you a completely new understanding of HTML and will allow you to understand it better. It will explain the syntaxes much more deeply and how to use them in several situations. 

If you wish to download the Free e-book now, click here.

In one of my last articles, actually part of the "What is HTML?" series, I began discussing about creating image maps, independent clickable areas on an image, that can serve as links to specific sites that are defined in HTML code. I explained how it was written, the "title" attributes, the "href" attribute and the "shape" attribute. But I intentionally left out the "coords" attribute, because it was a little more advanced so to say, in respect to the article I had written. 

So, I've come back and written out this article, which thoroughly explains image mapping, its potential applications and how to create them using the HTML code. The "coords" attribute, is short for "coordinates" and implies that itself. In order to define a specific area on any image, or plane surface, we need a system by which the browser can recognize it. So, in this case, we're going to be using the basic Cartesian system of coordinates to define the area on the image. 

As I stated in the previous article: the "shape" attribute comes in 3 types in HTML. a) rectangle b) circle c) polygon. The most favorable shape that is used to define areas on a surface, is the rectangle. Circles can also be used, when we deal with buttons that around round. Polygons have much more wider applications because a much more specific form of the area can be obtained by using this shape. But, for some unknown reason, the "rectangle" is usually preferred over the others.

So, what we do is, we first decide which shape we need to use to define our image maps. After that, we have to decide the appropriate coordinates we will enter as the value to the "coords" attribute. Now, I know it is impossible to actually manually find out what coordinates the area belongs to relative to the image itself, but there is a great website, where you can actually upload your image, map it after choosing your shape, and then get the respective coordinates.

If you want to visit it, please click here.

Once you've got the coordinates for your shape, then you can create the "href" attribute, which will create the link that clicking on that area will take you to. 

So, for instance, if I have a picture of myself, and a great big RV next to me, and I especially love my RV. I want to advertise the shop that got me this wonderful RV, and I want to also share my Facebook profile page to all of my friends.

So, I have a crazy idea! I want to take that same picture, and change it somehow, so that whenever somebody clicks on the part of the image that contains me, it will directly take them to my Facebook profile page, whereas, if anyone clicks on the part of the image that contains just the RV, it will take them to the RV's seller's online website. 

So here, the use of image maps comes into play. So first, we'll insert he image using the <img> tag and the "src" attribute. Then, we'll create a title for it using the "title" attribute. Maybe we'll name it something like: Me & My RV! After that, we'll create a "usemap" attribute, and type in the image's identity. Then we'll open the <map> tag, and in the "name" attribute, we'll write in the identity we gave the image in the "usemap" attribute. Once we've don that, we'll open the <area> tag, and respectively fill out the details of each of these attributes for both the image maps: "shape", "coords", "href" and "title".

So here is how the code will look like:

<html>

<body>

<img src="meandmyrv.jpg" title="Me & My RV!" usemap="#meandmyrv">

<map name="meandmyrv">

<area shape="rect" coords="31,564,73,231" href="http://www.facebook.com/" title="My Facebook Profile Page!">

<area shape="rect" coords="45,587,21,134" href="http://www.bigcowvehicles.com/" title="Big Cow Vehicles Ltd.">

</map>

</body>

</html>

As you can see, this is how it is done. The coordinates I've entered here are just bogus, and are dummy coordinates. The image I've tried to insert is from my own PC, and if you want to insert one from the Internet itself, you can copy paste its URL instead. 

Give us some more feedback by replying to this article using the Comment boxes. Also, participate in our monthly polls, and please vote for any of them! Thank you!

Download Free E-Book for HTML From Here!

The first HTML Guide for Beginners is available Now! Below, you will find a download link to MegaUpload from where you can download the PDF document. The document is around 12 pages long and contains deep explanations of HTML Basics, structuring pages, inserting images, creating titles, changing backgrounds, using CSS, positioning of text, attributes & elements etc.

To download it, click here now!

If you're finding problems with this download, please comment below for feedback or send your personal queries to fxdepotproductions@gmail.com

The next book in the HTML Guide series is coming up, and will be for Advanced users of Basic codes. It will discuss more elements, attributes, tags, techniques, results, software and so, and will be much more in-depth than the first book was.

So, hopefully you enjoyed the book, and for those of you who found any problems with the book, you can contact me at the above mentioned contacts.

Thank you!

Free HTML E-Book for Visitors!

There is going to be a free e-book coming up about website designing and innovative new methods of changing designs and executing HTML codes. There is also a special, independent, E-Book for those who want to learn about HTML coding. It gives the latest, basic & advanced copies of HTML codes, and will come in two free sets. Namely HTML: A Basic Guide, and HTML: An Advanced Guide.

All these E-Books are free, and those who wish to download them can do so from this blog. It will be coming soon, and it is a great guide to those who wish to create basic or even advanced and specialized websites or blogs for themselves. It will help expand your creativeness and will allow you to better develop your sites for future expansion! Hope you will like the E-Books when it comes out!

Also, I would like visitors to address to my polls, please participate in them so I can change the way I present these articles to you! Also, please comment on the other articles I've posted and give us your feedback, which will be of enormous help! Thank you!

What is HTML? - Adding Content to Your Website

This article is the third part in a series of articles known as: "What is HTML?", if you have not read the first two articles before this one, then this article is of no further use to you. If you wish to go the previous article, go to this link: http://somniumtuts.blogspot.com/2011/04/what-is-html-creating-basic-webpage.html

If you wish to go to the beginning of this entire series, click this link: http://somniumtuts.blogspot.com/2011/04/what-is-html-basics-guide.html

In the second part of this series, we have read about how to insert an icon into your website using HTML, how to insert line breaks, paragraphs, section dividers, titles and background colors. In this article, we will see specifically how to insert images and how to create independent "clickable" areas on the image using "usemaps". We will also look into the explanations for the code that was written in the previous article. We shall go into depth of these codes and we'll try to explain them as best we can. We shall also talk about positioning text in this article.

Inserting images is not that much of a difficult thing to do, especially when you have the power of HTML in the grasp of your hand. With HTML, you can do almost anything to edit or insert items into your website.
You can insert images into the website by using the <img> tag, which like <br> and <hr> tags, do not have closing tags. Here is some code to show you how to insert an image into your website:

<html>
<head>
<title>
FXDepot Productions|The best place to learn computer stuff...
</title>
</head>
<body>
<img src="http://www.wormsandgermsblog.com/uploads/image/Dog%20face2.jpg/"
        title="Dog's Face">
</body>
</html>

Here is how to above code will look like in a normal Chrome window:

Dog's Face - The above code in the Chrome web browser

What we have just down is insert an image from a URL in the Network itself. You can also do this by uploading your own image into any image hosting service and using the link they give you for the image as the Source for the HTML code.

What Happened?

According to the code above, we used the <img> tag and inserted an image from a location in the internet network using its URL. We added the "src" attribute to the <img> element. "Src" stands for "source" and we inserted the "image source" as the URL of the image itself. You can insert any image like this from the internet if you just have the URL. You can also insert images from your own computer. But there a few rules to be followed for doing so. 

• First, you must put the HTML code you have written, content, images and the stuff in your website in just ONE folder. This will be known as your website's "root directory" from where all the images, graphics, text etc. are uploaded from. 
• This will not work if you are writing the HTML code for your website, it is better to give a specific URL of the image when you're dealing with this.

If you wish to upload images from your own computer nonetheless, here's how to do it:

First download a free FTP Client server onto your computer. I would recommend the FTP Client server FileZilla, and you can download it from here: http://filezilla-project.org/download.php

You're web hosting service, or the company that hosts your website on the internet, must have the ability to accept data into your website through FTP. You can find this out by either questioning them through FAQ, or contacting them directly. 

Once you've got your FTP program downloaded, you must get the FTP host, username, password & port  number details and then connect to your website. After that, you can continue uploading your HTML Code and images through this. If you wish to upload images from your computer itself, here is the code you have to write:

<html>

<head>

<title>

My Website

</title>

</head>

<body>

<img src="myimage.extension" title="My Image">

</body>

</html>

In the case of this above code, you have to replace "myimage" with the actual name of your image. You have to replace ".extension" with the actual extension of your image, namely: ".jpg", ".png" etc.

Then, along with the HTML code, you have to also upload your image into the website using the FTP server. Using this method, you can successfully import images from your computer to your website, without needing to upload your images into any image hosting services. 

The "title" attribute is just an added detail. Whenever you hover your cursor over the image, the text added in the "title" attribute will appear. 

Now, we shall talk about how to create "usemaps" for our images. Usemaps are just certain clickable areas within an image. For instance, if you wish to insert an image of you and your house by your side, and you want links within the image itself. One link goes to your profile on Facebook, and the other is a link to a real estate agent's website from where you bought your house from. But only one link can be inserted in an image normally (we will talk about the codes for that later). So how do you insert TWO links within the SAME image, in TWO DIFFERENT spots in the image?

And thus usemaps come into play. Here is how you do it! 

<html>

<head>

</head>

<title>

Me & My House

</title>

<body>

<img src="meandmyhouse.jpg" title="Me and My House!" usemap="#meandmyhouse">
<map name="meandmyhouse">
<area shape="rect" coords="98,115,247,585" href="www.google.com" title="Me!">
<area shape="rect" coords="432,26,812,444" href="www.somniumtuts.blogspot.com" title="My House!">
</map>

</body>

</html>

Here we have used the "usemap" attribute to the <img> tag. What we've done here is we've written "#meandmyhouse", what this does is it defines a special name for the image that you plan to map. Then, we create a <map> tag, and using the "name" attribute, write down the name of the image we gave previously under the "usemap" attribute. Then we open the <area> tag, that defines the area you want mapped on the image for creating a specific link there. We also specify the shape we wish to use in defining the area. The several options are:

rectangle = "rect"
circle = "circle"
polygon = "polygon"

In this case we've used the "rect" value as the shape. We have written this within the "Shape" attribute of the <area> tag. Then within the "href" attribute, we write down the URL that we want as the link. Then, in the "title" attribute, we write the name that would appear if we hovered our cursor over the specific part of the image that we have particularly defined.

You can try this yourself with some other picture you have, and it is a really good experience. Custom navigation bars, independent advertisements, custom-made buttons etc.

How to Position Text


Positioning text isn't all that difficult, and can be achieved simply by applying some CSS code. Here is a simple example of the code:

<html>
<body>
<div style="text-align: centre;">
<p>I love to skate on Mount Everest!</p>
</div>
</body>
</html>

In this code above, we use both the <div> tag, and the "style" attribute, with the value "text-align" for positioning our specific text: "I love to skate on Mount Everest!".
The <div> tag is nothing but a layer, to which we assign attributes for content like texts, graphics, animations etc. within those <div> tags. Using the "text-align" attribute, we have three different options:

1. centre
2. left
3. right

You can use this to position images and other stuff also. 

Give us your feedback, and give some comments to help us improve our articles! Thank you!

What is HTML? - Creating a Basic Webpage

This article is the second part of a potential series of articles known as: "What is HTML?" and if you haven't read the first part, this article will be of no use to you. If you wish to proceed to the First Part of this website designing series, go to this link: http://somniumtuts.blogspot.com/2011/04/what-is-html-basics-guide.html

We left from the First Part about how to mentally structure your page and creating a few elements of the HTML coding. Now, in this article, we shall proceed with much more information on how to code and write HTML for your developing websites. In the first part of this series, I discussed about how to get good and FREE source code editors for writing and editing HTML codes, and a few elements of the HTML code, and how to write them, plus a few normal examples. 

Now here, in this article, we will discuss about a few more elements and special attributes assigned to them, and also, how to add an icon to your developing website.

We left behind the First Part of this series with a few tags, namely: <html>, <head> & <title> tags. Now, we shall discuss about the <body></body> tags, that contain all the other content, text, graphics, videos, images etc. within it! You can also change the background color of the website by adding a simple attribute to the <body> tag element. Attributes are simply extra codes assigned to special parts of an element, or tags, that change the appearance, function etc.

In order to change the background color of the website, we shall use a little bit of CSS or Cascading Style Sheets to do this, and is the preferred way of changing the background color. It is simple to set the BG color, and here is an example of the code on how to do it, updating the code we began with from the First Part of this continuing series:

<html>

<head>

FXDepot Productions|The best place to learn computer stuff...

</head>

<body style="background-color: #1BCCE0;">

</body>

</html>

Here is how the above mentioned code will look in a web browser:

The above code in a web browser.

As you can see in the above code, we have added the attribute to the <body> opening tag, telling the web browser to apply the specific background color command to the entire body of the website. The "style" is the attribute attached to the element, followed by an equal sign, the command of "background-color:#1BCCE0;" I will explain the syntax of this code later on, and how to write it. The alphanumeric code you see followed by the hash sign is the hexidecimal code of the particular color I have chosen. You can also write the name of the colors, like: red, green, black, white, but more intense colors, including shades or lighter colors, cannot be done, so the hexidecimal number of the color must be inserted. It is impossible to remember all the alphanumeric codes of all the colors, so you can go to http://www.colorpicker.com/, where you can just select the color and its code will appear immediately above!

Now we will talk about how to insert icons for your website. First, you must create an icon for yourself. Doing it isn't that hard, and you can use Photoshop or any other good image editor to create an icon. But there are certain restrictions as to how you create your image, and the image can either be only of the dimensions 16x16 or 32x32. The color mode should be in RGB, and the color bit should be 16 bit or 32 bit, respectively. If you are making your image in the dimensions of 16x16, then you must use 16 bit colors. Likewise if you're making it in the dimensions of 32x32.

So after you have created you're image, save it with the extension of ".png". Then you have to host it online in any FREE image hosting service. I would recommend using Image Shack for hosting your images online. Here is the link to it: http://imageshack.us/

Once you've uploaded your image in your account, you'll be given a few links to images, you must copy and paste the specific "Direct Link" to any Word document and keep it safe. Once you've done this, you must begin writing the code. An explanation of this code will be below it, but a more specific and intense explanation will only be in the following article of this series.

<html>
<head>
<title>
FXDepot Productions|The best place to learn computer stuff...
</title>
<link rel="icon"
        type="image/png"
        href="The Direct Link You Got!">
</head>
<body style="background-color:#1BCCE0;">
</body>
</html>

As you can see in the code above, the icon code is inserted in the <head> tags, like I discussed in the First Part of this series, and is inserted using the <link> tag. If you notice the code carefully, you can see that the <link> tag doesn't have any closing tags like: </link>. This is one of the exceptions of from the rule, and many other elements follow this same style. For example the <hr> tag, is used to create a horizontal line across the page to divide two sections of text, graphics, images etc. The <hr> tag doesn't have any closing tags. The <br> tag is used to create link breaks, here is a simple code of involving all the items discussed above:

<html>
<head>
<title>
FXDepot Productions|The best place to learn computer stuff...
</title>
<link rel="icon"
        type="image/png"
        href="The Direct Link you Got">
</head>
<body style="background-color:#1BCCE0;">
<p>I love eating pizzas <br> because they are so tasty and are <br> healthy!</p>
<hr>
<p> I hate eating pizzas <br> because they are disgusting and are <br> not healthy!</p>
</body>
</html>

As you can see, the <p> tag is for the starting of a new paragraph, and has a closing tag: </p>. As you can see I've inserted the <br> tag which creates line breaks for sentences and also the <hr> tag, which creates a dividing horizontal line across the webpage.

The <link> tag is used to insert the icon. Within the <link> element, we have assigned three attributes, namely: rel, type & href. I will not explain the "ref" attribute now. The "type" attribute specifies the type of extension the image carries, for instance ".jpg", or ".png" or ".gif". In this case we have an image of the particular extension: ".png".

The "href" attribute is the URL or the link to the image that you wish to be inserted as an icon. In this attribute, you have to replace "The Direct Link you Got!" with the direct link you received from your image hosting service for the picture you wish to be inserted as an icon in your website.

So, I hope this article gave you a lot of information on HTML coding, and keep visiting this blog for the other parts of this continuing series: "What is HTML?"

Please give us some feedback by submitting comments from below, so we can alter our way of writing these articles to suit the common audience. Thank you!

What is HTML? - A Basics Guide

HTML is basically a Mark-up language as applied through its full form, Hyper Text Mark-Up Language. It simply uses tags, to open and close certain commands. Learning HTML is extremely easy with a little effort, and can be applied in website designing and creating your own websites. The new version of HTML 5 is currently being written and will be released soon afterwards. CSS is also an important language to learn, both independently and complimentary with HTML code.

Here we will just go through a quick and basic guide on HTML Codes. Our video channel will SOON come up with a few videos that explain the concepts more better and give you a better understanding of HTML and how it can be used for designing attractive and perfect websites.

Creating and editing HTML codes need special source code editors, and for beginners who are starting out with HTML, I would like to recommend Notepad++, which can be downloaded for free off the internet. If you are not comfortable with this, you can also use the normal text editor Notepad installed on a Windows Operating Software, or any simple text editors found on various other operating systems.

Once you've got you're source code editor up and running, you have to primarily think of the structure of the page and how you want it to look like. It is better to not jump to any hasty designs with a lot of attractive features, and it is better for you to begin with more simple designs, like a basic heading, a few columns, some posts here and there, maybe a simple Navigation Bar made out of simple Photoshop-created pictures.

Once you've got your website's basic page structure ready, you can begin outlining it on a piece of paper, which you can keep aside for just reference. Then, you can begin by applying it to the HTML and CSS code.

Now, we will go through the basics of creating any formal HTML webpage for your website.

All HTML pages begin with the <html> tags. The opening tag, or the beginning of a specific command, always usually begins with the angle bracket, the name of the command, the closing angle bracket. The closing tag, or the ceasing of a particular command being carried out, is always an angle bracket, a front slash, followed by the same name of the command, and the closing angle bracket. For instance, the closing tag for the <html> tag is: </html>.


The <html> tag is compulsory, especially for beginners who are just learning the HTML code, and all codes written out in HTML begin with the <html> tag, and end with the </html> closing tag. All the other content, tags, attributes and elements added for the website will ALWAYS be inside or within these two tags. Then let's move on to the <head></head> tags. The <head> tag contains all the information about the code that is not part of its actual content, that you see visually on the browser screen. Information like the webpage's title, icons, links and other stuff are added within these tags. We will be learning just one other element that is added inside the <head> tags and we will continue to the content from there. As you know, the <head> tag, ends with the </head> tag, and within it the <title></title> can also be added. It describes the actual title of the webpage that you are viewing. 


I will give a brief code below, and explain its results following it:


<html>
<head>
<title>
FXDepot Productions | The best place for learning computer stuff...
</title>
</head>
</html>

What will basically appear on the webpage is something like this:

The Code from above opened in a web browser.

What happened is this: we opened the code with a simple <html> tag which is compulsory for every webpage. Then we opened the <head> tag, that carries all the commands and visual data that is not visible in the contents part of the website. We have not added any specific content, which requires the beginning of the <body></body> tags, so the page remains blank. In the <head> tags we have added the <title> tag, which shows the title of the webpage. I wrote: "FXDepot Productions | The best place to learn computer stuff..."

And so it popped up as the title of the webpage up in the Google Chrome tab there, same as it would in all the other web browsers. I hope you understood this part of the HTML basics guide. Since this is Part One, we shall continue with how to change the content, visual data and how to insert an icon for your website.

Please comment below so we receive your feedback and improve our articles based on that! Thank you!

Website Designing & How to Do It!

Recently FXDepot Productions set up a video channel for all of our tutorial-lovers, and we tried to inculcate a good learning experience through them. Currently that Youtube Video Channel is doing well, and we are getting a lot of views.

To visit the video channel, please visit this site: www.youtube.com/user/FXDepotProductions/

Website Designing is not a tough task, and for those people who are looking forward to making a website for themselves or for some specific reason, this tutorial will help you and guide you through the process. This tutorial will provide you with modernized, free-to-use web hosting services and guides to get you through making your websites good-looking and attractive.

Web browsers are software, like Internet Explorer, Mozilla Firefox, Netscape Navigator or Google Chrome. These browsers, decode and download information from a remote computer that has these codes and files, or some specific location online. The code, that is specifically used for website designing is HTML, which stands for Hyper Text Mark-Up Language. It is a fairly simple language to learn and is used to design websites. The newly updates versions of HTML coding use different design-specific languages like CSS (Cascading Style Sheets) to compliment the code of HTML. CSS is used specifically for styling, positioning and increasing the visual attractiveness of the website.

So, the first thing you need to do is to learn HTML if you REALLY want to make your own website. Making your own website takes a lot of time and patience and is a really educating process. So please, you have to be patient to actually GET to making your own website.

So learning HTML is very easy and you need a few basic requirements to get you through doing that. You need good source code editors, I would recommend installing the free Notepad++ program, which is available at: http://notepad-plus-plus.org/release/5.9

Here you can download the installer package and setup your source code editor for free! You will be using this code editor for editing and creating your HTML codes for your website.

FTP, is another way of uploading information or codes into your websites domain. This can be done through an FTP Client like FileZilla, which is free to use!

Since I will not be explaining how HTML is used or any tutorials on learning it, you can find ample number of tutorials for HTML on FXDepot's Video Channel: www.youtube.com/user/FXDepotProductions/

Now we will continue talking about how to setup your website online. Websites are allotted special names, or addresses on the Internet, called domain names, for example like: www.google.com, www.youtube.com, www.somniumtuts.blogspot.com, and getting these special addresses within the internet network is not easy. Several companies have servers, or computers capable of storing large amounts of information, and they are called web servers, that provide people with addresses of their own, though, for a price. So, usually, and legally, domain names are always bought, it is almost never free. Free domain names are provided by many web hosting services, but will prefix their own company's name to your domain name. For instance, if you have bought a special domain name from yolasite.com, for FREE, your domain name will be something like this: www.yoursite.yolasite.com.

So, I have found a good web hosting service online called zymic.com, which provides free domain names which have reasonably cool prefixes to them. For instance, zxq.net, is one of their FREE prefixes and is pretty cool, you have to admit that, so hopefully that ease your restlessness. I would recommend using zymic.com, since they provide you with a Free MySQL Database, which is of GREAT use later on as you develop your website.

So, here is the end of this article, and hopefully it has helped you in progressing with the development of your website. For more tutorials on website hosting services or website designing, check out both a few upcoming articles right here on FXDepot Productions, or check out our special video channel at: www.youtube.com/user/FXDepotProductions/