Tutorial : Basics of HTML | Course 1
 |
|
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:
|  Previous Page (1 of 3)  Next Page (3 of 3) |
|
| Reader Rating from 1-5 |
|
|
|
|
|
|
 Currently there are no Talkback posted on "Tutorial : Basics of HTML | Course 1", Click here to be the first to post a talkback.
|
|
|
| |
