>> Thursday, May 19, 2011
Introduction to HTML
What is HTML?
HTML (HyperText Markup Language) is a language that is used to create websites or web pages and is not difficult to learn at all.
Which software is needed to write HTML
There are several thousands of software that can create websites, however the source code is what we will learn and this can be done with the simple existing "NotePad" from your computer.
Well, there is another more cool software called Notepad++ which render the codes colorful and makes it easier to compare the different tags when you'll write them. You may Download it and install it.
You need a Browser
A browser is what you need to read the HTML that you have written in the Notepad. As such if you have written that your page should have a blue border in your CSS codes, then the browser will display a blue border when showing your page.The most popular browsers are:
- Internet Explorer
- Firefox
- Google Chrome
And it is recommended to have several browsers in order to test the appearance of your web page on each of them. The three browsers mentioned above would be enough. However in the case of internet explorer which is the default browser on all windows system, you'll have to get the latest because the one that you have on your system may not display very well the CSS.
Lets create our first web page
Now we have the tools, lets start our first page! We will come to the CSS part later.Tags
Suppose you want to say "Welcome to my web page", it is not sufficient just to write it. In addition to simple texts, an HTML page contain tags. A tag start with "<" and ends with ">" (in blue without the quotes). For example <tag>
A web page contain lot of these tags. However they are not are visible to the visitors of that web page. In fact only your browser understand how to read them. In brief tags will be used to let you distinguish between the title of a page, which text is in bold and which of them should be underline etc..
There is two types of tags: The tag that work in pair and the tag that work alone.
The tag that work in pair
This type is the most common. Simply write a tag, write what you want to write and re-write the tag with a slash "/". For example:
<title>Welcome to my web page</title>So when you write this your browser will understand that "Welcome to my web page" (without the quotes) is the title of your web page.
The tag that work alone
This type is rare and it is use to insert an element in the page. This type of tag will have the slash after the word(s) in the tags. For example:
<hr/>
This tag is used to insert a straight line in the page.
Attributes
Using attributes will give more precision to a tag. Attributes can be written on both pair and alone tags. For example:
<tag name="buhth"/>This inform us that the tag name is buhth
<tag author="Ibn Omar">Welcome to Buhth.com</tag>For pair tags, simply put the attributes in the first part of the tag and the second remain the same.
I hope you have understand what are tags and attributes. You will learn more tags and attributes throughout this course.
An HTML page
You may now open your Notepad(++) and then we will test our first page.
The basic codes for a web page is:
<html>
<head>
<title>Welcome to buhth.com !</title>
</head>
<body>
</body>
</html>
So you will need this code above for every page you will code. Now copy these codes to notepad. After that, still on notepad, click on "File" and select "Save As..." and enter a name and put .html as extension. See the screenshot below:
I have named mine buhth.html but you can choose any name.
Now go to the folder where you have save the .html file and you will see a file with the icon of your default web browser with the name of which you have saved the file.
Now click on that file to open it.
Oh there is nothing on the page? So we have written all of these codes to get a blank page? No in fact the page contain many information that your browser needs and we have also give a title to the page (Welcome to buhth.com)
Note: Every time you need to edit the html file - mine is buhth.html - you just have to right click on it and select NotePad ++ (if you have it installed) or right click then select "open with" and then select Notepad. Do not right click on the html file and select 'edit' directly as it will open Microsoft word (if ever you have it installed on your pc).
What does all these codes means?
1. <html>: this is the main tag which will contain everything in the page, as you can see, the </html> which close the tag is the last one.
2. <head> this tag contain some pre-information for the page. In formations such as the <title> of the page and the <meta>. The meta tag is used to indicate that you will use specific characters.
3. After we close <head> we start with the tag <body>. It is after this tag that write the content of our page and it end with </body>. So if we had put some text between them in our first test, the text would have appear in the blank area of your browser.
Notes and Comments
Sometimes we can put comments or notes inside our XHTML page so that it remind us of a thing if we will edit the page later. These comments or notes will not be visible to the normal visitor of the web page from a browser. A comment or note start with <!-- and ends with -->. For example:
<html>
<head>
<title>Welcome to buhth.com !</title>
</head>
<body>
<!-- tips : here we write the content of a web page -->
</body>
</html>
If you save these codes via Notepad as an html file and then you open it, you will notice no changes to the first page we created as the codes are invisible to internet browsers.
You may follow our latest posts on HTML to learn more about it.
