|
HTML Basic Tutorial
Lesson 2
Basic Html tag
How to learn offline
How to save and view in browser
Your First HTML code:
Open your notepad Start menu (bottom left) -
Programs - Accessories - Notepad.
Or open
Practice HTML (click
this link to open it). See pic.
Practice HTML feature
has advantage that you can type the text in bottom box and you can view
the end result (i.e. browser thing) at the same time without saving it
or opening your browser window. Well I recomend that you should practice
in both ways.
Type <html> </html> tags in your Notepad
or Practice HTML. In Notepad you'll need to save it and look into your
browser to see how the code will work in your web site..
Every HTML document starts with <html>
and closes with </html> It
is called tag. The first one is opening tag and the second one is closing
tag. In closing tag most of the time you have to add
/ with the first tag. But
there are few tags which does not need closing tag. We'll see it later
as we go along.
html code has special value for <
smaller than sign, closing tag /
and closing brakets greater
than sign > etc.
If you miss one of this you will find your code will not work. So please
check each and every time for these small brakets and slash.
Your tag in Practice HTML will look like
this.
Ok now let's add another tag. <head>
</head> tag always goes inside <html></html>
tag.
|
<html>
<head>
</head>
</html>
|
Now add <title></title>
tag inside <head> <head>
tags.
Inside <head> tag always title tag goes and inside title tags Title
of the page goes.
<html>
<head>
<title>
Here your Page title will go.
</title>
</head>
</html> |
Now let's add <body>
</body> tag.
Here your whole contents of document will go. You can add any text, picture,
link and so on.
The visible part of the web pages are nothing but the
contents of body. So whatever things you'll
add inside your <body></body> tag will show up in your web
site.
|
Basic HTML Tags
<html>
<head>
<title>
Here your Page title will go.
</title>
</head>
<body>
Here your page contents will go.
</body>
</html>
|
It is your basic tag
for <html> and this tag will be the same for all the html files.
So each and every time when you'll make a new html file you'll have to
add this basic tag.
Ok now type Hi, Welcome to my web. inside the
<body> </body> tag.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
Hi, Welcome to my web.
</body>
</html> |
Practice HTML -
Click on test button. Your text will appear on top box. And html code
is in bottom box.
Notepad (for Notepad users)- Save your file now
in .htm format and view it in your browser. (Method is given below)
How to Save your work and View it in Browser?
This method will work for your offline
use too.
Type <html> </html> tags in your Notepad.
Your tag in Notepad will look like this.
 |
 |
Now You'll have to save your work to
view it in your browser. For this Click on File Menu of your notepad
(see above pic). A
menu box will pop up now click on Save AS...
Now a dialog box (Save As ) will pop open (see
below pic). Follow the number on pic to save
it.
Select directory/folder C: or whatever you chose.
Make a new folder by clicking on N. 1
N. 2
- Now name (type name) the folder as HTML or MyHtml whatever
you like. This will be your folder to save your work each time.
N. 3 - Now double click on this yellow
(folder) with left mouse button to open it.
N. 1-
Now it shows your folder name as Html
N. 2- Type the desired file name. I typed
lesson1.htm
save as type must be .htm or .html (change it by clicking
on arrow).
N. 3- Click on Save to save your work. That's it.
Now let's see it in Browser. I asume that you've
already downloaded the desired browser. I prefer Internet Explorer but
I view it in both browser to make sure that page looks alright, because
sometimes Netscape does not show the page the way it should look. If you
don't have a browser get it from here.
You'll find the link for the browser's home
page. Follow the instruction (given in their page) to download and install
browser.
Ok now open your Internet Explorer Browser. To open it Click on Start
- Programs - Internet Explorer
Now type your file name in Address column Ex.
c:\Html\lesson1.htm (because you've saved your file in this folder).
Press Enter key of your keyboard.
Now your browser will show
Hi, Welcome to my web.
OK, the same way each and every time when you make a change
you can save your work in Notepad and look into the browser to see how
your page will look.
For offline use open the notepad type html tags for practice, save it
and look into your browser. (follow above method).
We'll learn more things in next lesson.
|
