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..
- Includes everything you see within the browser window! Text, Images, Tables, Forms, Links…etc
<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
Tags: HTML, programming, Web