In this article I'll show you the very basics of HTML language. We'll create our very first HTML page from the scratch while I'll explain things to you. This article is the first part from the serie of three articles covering the secrets of HTML language.
Introduction
To make a universal website which everyone could see, one needs a common language which every computer can understand. In World Wide Web this language is HTML (HyperText Markup Language). HTML is a very simple language. With HTML you can create online documents to World Wide Web. HTML language is standardized language and to create a valid HTML page you need to follow this standard. In this article everything is like it should be according to this HTML 4.01 standard. When you know more about HTML you notice that not everything can be done if we follow the standard so that?s when we have to break it. But that?s in another article. When you?ve read this article you already know how to make HTML page which you can upload into internet (we?ll discuss that in another article) where everyone can see it. Ok, let?s get started.
The HTML 4.01 standard is declared in http://www.w3.org/TR/html401/
You can browse that site while you read this article so you learn the same time how to take advantage of that specification.
You don?t need no special software to create HTML pages. Notepad will do just fine but there are also more sophisticated tools like Macromedia Dreamweaver, Adobe GoLive and many many more?some of them are free and some will cost you a fortune. But remember. There?s NOTHING you couldn?t do with pico what you can do with ie. Dreamweaver. So Notepad will do just fine now. Just make sure that the editor you are using saves the document as pure text type.
Structure of Page
HTML language consists of ?Tags?. Tags specify to web browser how to display the text in the page. These tags are in <open></close> format so the ?/? line closes a tag. Not all tags must be closed but you?ll learn them while you read this article.
HTML page includes few parts that are in every page you see in the WWW. Now let?s take a look at our first page, shall we?
First thing you must do is to declare the HTML version that you use, This is not a real must but is considered a good habit and it enables you to make valid HTML pages. HTML 4.01 specifies three DTD?s (Document type defination) and you must include one of them in your webpage. Each of these types vary in the elements they support. We?ll be using the ?loose? type which allows us to do something different than ?strict? (you can read more about DTD?s on http://www.w3.org/TR/html401/struct/global.html#didx-document_type_declaration-1). So our first line in our page is following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This is the Document type Defination we just made. Now let?s continue our journey into HTML.
Next we?ll have to do following things: I?ll explain them in a moment
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=iso-8859-1">
</HEAD>
<BODY>
First comes the <HTML> tag. This tells that we?re dealing with HTML page and not something else. This tag will be closed in the very end of the page we?re making but first comes first so let?s continue.
Next tag is <HEAD> tag. Everything inside this tag is invisible to viewers. There are few things that can be inside this tag and one of those are the <TITLE> tag which tells the browser the title of our page. You can see a title of every webpage on the top left corner of the browser. You can write any title you want for the page but I used ?My First HTML Page? and after you?ve written it you close the tag with </TITLE> tag.
Now I?ll tell you few other things that can be inside the <HEAD> tag.Those things can be <META> tags which we?ll get in another article. Now we?ve put there one META tag that tells the browser that what kind of file it is handling and what character set it?s using. This is a must thing to do if we want to write valid HTML pages. We?re going to look better these META tags in another article. Other things to put inside the HEAD tags are <SCRIPT> tags which we?ll also cover in another article. Script tag usually includes Javascript code like you might have seen somewhere. But let?s close our head tag with </HEAD> tag and continue our way.
Then we?ll actually open the main tag in our page which is <BODY> tag. Everything inside of this tag will be displayed in website. So this is where you actually put the content of the page. We want something to be on the website so we write next ie.
Hello all! This is my first HTML page
Now that line will display in the web browser as it is. There are lots of ways to make it look better but we?ll get to them in other articles.
Next we can close all of our open tags writing:
</BODY>
</HTML>
This will close our opened BODY tag and also our opened HTML tag. Now we are done with our first HTML page. And we can look it through our web browser. The complete page should be like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=iso-8859-1">
</HEAD>
<BODY>
Hello all! This is my first HTML page
</BODY>
</HTML>
It wasn?t difficult was it? Now when you have written that to your notepad or some other text editor you can save it. While you save it be sure to check that the file extension is either .html or .htm! Both will do just fine but it must be either one. Now you can double click the file and your default browser will open it and you can see that it say ?Hello all! This is my first HTML page? in white background, doesn?t it? You can delete the Hello all! This is my first HTML page line from the file and also the title text My First HTML Page and save it as a template for your future projects. So you don?t have to write this stuff always.
Now, that you?ve learn to do the first HTML page we?ll look into one exception that can be in that template, and that is FRAMES. Frames divide your page into different parts where every part can show different HTML page. I don?t recommend you to use frames since it?s not good webdesign but if you want to try them I?ll explain them to you next?carry on if you want to know how to use frames.
USAGE OF FRAMES
Frame definition consists of two tags. <FRAMESET> tag and from <FRAME> tag. FRAMESET tag defines that you are using frames and the FRAME tag defines the specific frame.
One thing to notice is that when you use frames the FRAMESET tag will replace the BODY tag so let?s do simple Frames to our page. Edit the template to following and I?ll explain the parts in a moment.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>My First HTML Page</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=iso-8859-1">
</HEAD>
<FRAMESET ROWS=?50%, 50%?>
<FRAME SRC=?frame1.html?>
<FRAME SRC=?frame2.html?>
</FRAMESET>
</HTML>
Ok, let?s look a little closer this edit. First comes the FRAMESET tag
<FRAMESET ROWS=?50%, 50%?>
Now, it has replaced the BODY tags in our page and looks like a normal tag in any way but what is that ROWS=?50%, 50%? part? It?s an attribute. Every tag in HTML can have attributes which define more specific that tag. We?ll discuss about the attributes in other article but I?ll tell a little about them now. You can check the HTML 4.01 specification and there choose the ?elements? to see what attributes can be given to any tag. Very useful info. Let?s now look at this attribute.
ROWS=?50%, 50%?
This means that this frameset divides the window into 2 different horizontal sections where each one is 50 % of the whole window. Got it? You can change the values and see how it affects to the page. Now if you wonder why there?s no pages in those windows? It?s because you haven?t done those frame1.html and frame2.html pages yet. You can do them by altering our template we did and place them in same folder where you have this first page and then open it. See? Now it displays those pages in one page which is divided into two parts. That?s all from Frames for now but remember to read the upcoming articles too. There you?ll learn much more about HTML, JAVASCRIPT etc?
While I?m writing them you can get to know the specification a little better and maybe find yourself a tool that you like so the next time we begin you have everything ready.
I?ve included some links to software that you can use to create web pages and they are all 100% FREE but the best way to find a tool which you like is to browse the web and search. I can?t recommed any freeware ?cause I?m using Dreamweaver MX which is commercial but I?ve also listed some features which the tool should include:
FEATURE LIST FOR WEB CREATION TOOL
Highlighting of syntax by different colors and styles of a font.
Highlighting of syntax for several script languages in one document.
Opportunities for customizing of highlighting and the addition of new languages
Multiple history of 'Undo-Redo' for the edited documents
Integrated File Manager for rapid access to the documents.
Multi-document interface
These are basic features that could be useful to you but you have to make your own mind of what you want to use. I suffest you try different software and then choose what to use. In the beginning is good to stick with free- or shareware products but if you plan to do websites for a living then you should think commercial products.
TOOLS FOR WEBPAGE CREATION
Pico, Quanta, and VIM
