iMutawa http://www.imutawa.com Just another WordPress site Thu, 08 Sep 2011 19:58:42 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Learning the basics of HTML – 1 http://www.imutawa.com/2011/09/08/learning-the-basics-of-html-1/ http://www.imutawa.com/2011/09/08/learning-the-basics-of-html-1/#comments Thu, 08 Sep 2011 19:19:55 +0000 Nasser http://www.imutawa.com/?p=36 What’s up everyone!

I’ll start posting about the basics of web development starting with HTML, which is the simplest and the most important language to learn to be able to start developing your own website.

I’m sure you have seen this before in links http://www.some-website.com/index.html  – where index.html is basically an HTML file that includes basic html tags translated by web browsers (ie, FireFox, Safari, Google Chrome..etc) into the layout you see in every website you visit. HTML is the short term for “HYPER TEXT MARKUP LANGUAGE”, and is transferred via HTTP – “HYPER TEXT TRANSFER PROTOCOL”.

before I go deeper in this, all you need is an HTML editor, and I would recommend Adobe Dreamweaver to start with. Dreamweaver gives you two options, to either start coding by yourself, or start building your website with the “WYSIWYG” editor (What You See Is What You Get). But I advice to first learn basics of HTML to be able to go deeper in your development in the future, regardless of any HTML or Code editor you use.

I have developed my first website back in 1996 using basic HTML tags, and believe me, it’s really easy to learn! Think of it this way, every web page you see is structured into two basic areas, just like human beings.. a HEAD, and a BODY. Below is a simple form of HTML code:

<html>

<head> ... </head>

<body> ... </body>

</html>

The basic HTML syntax is <tag> … </tag>. As you have seen in the code above, I have started the HTML code with <html> to let the browser know this is a HTML page, which ends with </html>. As mentioned earlier, HEAD part starts with <head> and ends with </head>, and the same goes with the BODY part, starting with <body> and ending with </body>.

You may ask, what is the difference between HEAD and BODY parts?

HEAD:

  • Includes page title (the title you see in the browsers’ title bar)
  • External file inclusion (we will come to that later on when we talk about JavaScript and CSS)
  • Meta tags; those include page refreshing and forwarding option, I will also talk about them as we go..
BODY:
  • Includes everything you see within the browser window! Text, Images, Tables, Forms, Links…etc
So, let’s add a title to our page! and let’s set it to be “My Website!”.
<html>

<head> <title> My Website! </title> </head>

<body> </body>

<html>

So, I guess you have noticed that every HTML should start and close in this syntax <tag> … </tag>. Adding the slash “/” is to close the tag. Now, with the code above, we have included a title to our page. Now let’s add some text and spice up the page, with some colors maybe? here’s the code:

<html>

<head> <title> My Website! </title> </head>

<body> <font face="tahoma" color="red" size="16"> Hello! welcome to my first website!</font> </body>

</html>

Save your HTML file, double click on it to run it on a browser the output will be…

I hope that was useful, see you in part 2

]]> http://www.imutawa.com/2011/09/08/learning-the-basics-of-html-1/feed/ 0 Web Programming 101 http://www.imutawa.com/2011/09/05/programming-101/ http://www.imutawa.com/2011/09/05/programming-101/#comments Mon, 05 Sep 2011 11:29:02 +0000 Nasser http://www.imutawa.com/?p=15 What’s up!

I have always been motivated to learn and know more about Web programming languages, tools, methods..etc. All programming languages have something in common and I’ll show you the similarities in a minute. For example, the following code will do two simple things:

  1. Save a variable; which is an identifier for a specific value.
  2. Print the value of a variable.
You won’t have to do or follow anything, just try to find the resemblance between the two languages I’ll use now:
language: PHP
<?php

//this is a comment 

/*
this is another code comment, which will not have any effect on the code. 
Developers use these comments as a reference to know what they have done
in this area, or what they should do! 
*/

//Now this is variable called "text" being set to the value "Hello, World!"

$text = "Hello, World!";

//and now, displaying the value of this variable, this will be the PHP script output

echo $text;

?>

And now.. the same code but using JavaScript

//this is a comment 

/*
this is another code comment, which will not have any effect on the code.
Developers use these comments as a reference to know what they have done
in this area, or what they should do!
*/

//Now this is variable called "text" being set to the value "Hello, World!"

var text = "Hello, World!";

//and now, displaying the value of this variable, this will be the javascript output

document.write(text);

Web programming languages and techniques can never be explained in a single post. I’ll keep on posting educational articles on the basics of web development languages, techniques, and tools.. and simple How-To guides. Was that useful? drop a comment! :)

]]> http://www.imutawa.com/2011/09/05/programming-101/feed/ 6 Welcome! http://www.imutawa.com/2011/09/02/welcome/ http://www.imutawa.com/2011/09/02/welcome/#comments Fri, 02 Sep 2011 23:59:31 +0000 Nasser http://www.imutawa.com/?p=8

Welcome to my Development blog! :)

I’ll be frequently posting about my own web/app development plans and projects. You may have been following my other blog (Blog37.com), which covers – mostly- social topics. So, I thought about creating this new spot to cover my other interests; Development tools, techniques, tryouts..etc.

Stay tuned for Tutorials and Lessons.

Regards,
Nasser

]]> http://www.imutawa.com/2011/09/02/welcome/feed/ 1