|
Adding some Text
In this HTML tutorial you shortly will work through an
exercise that will produce your first web page that you
will save onto your hard drive, then view it with your
web browser. Later in tutorial 9, when you have gained
knowledge to produce a decent web page or site, you will
learn how to upload a site onto the WWW
Exercise 1 My First Web Page
Step 1. Requirements:
At this stage in this HTML tutorial you only need to
use Windows notepad, or the equivalent simple text
edit or on a Mac as your HTML editor, and a browser such
as IE explorer. To refresh your memory on Web
Browsers see Tutorial
1 - Web Browsers.
I believe that this is the best way to learn the code
and layout of HTML.
If you have a more sophisticated HTML editor you
can use this. These editors, depending on the editor,
may have editing windows such as
- Code view, this is a view similar to that produced
by notepad, but enhanced, to make it easier to read
the code. Achieved with
- The text in various colours
- Automatic code indentation
- The use of bold or italic text.
- WYSIWYG (What you see is what you get),
this means that the appearance of the page in the editor
looks similar to what a browser will produce.
- Tag view. Similar to Code view but graphic
icons are used for all the tags.
If you use one of these editors you can use the code
page view, the same as using notepad. Or if you use one
of the other views that will automatically create the
code for you, always switch to the code view to see how
changes effect the code produced.
In order to learn the code ensure that you look at
the code produced.
It may be possible to have 2 windows on view at the
same time.
Please note that automatic processes sometimes produces
additional code that is not actually required.
Step 2. Preparation.
- Create a folder (Directory) named my-web-pages,
using Windows Explorer, or the equivalent on
a Mac. Take a note of exactly where you save it I.e.
its path. I suggest that the best place would be
in the Root directory so the final result would be C:/my-web-pages
- In order to carry out Step 4 below, you require at
least 1 web browser installed on your computer.
To refresh your memory on Web Browsers see Tutorial
1 - Web Browsers.
Besides reading these step, Dreamweaver 4 users 
click here for additional instructions.
Because the above code only produces a blank web page
you will add
- My First Web Page between the title tags
- The words Hello World between the body tags,
as below. Note that no additional tags are required.
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>Hello World
</BODY>
</HTML>
Step 3. Enter the Code.
Depending on your preferred method of learning, you can
copy (ctrl c) and paste (ctrl v) the above code
into your HTML Editor or type it in. You will possibly
remember better by typing it in, this is also better if
your keyboard skills need improving.
Top.
Step 4. Saving your page
Save this file using the Save as... option as index.html
to the folder my-web-pages you created in step
one. After you have saved the file, close notepad.
Click here to find
out why index.htm it is a special file name, also read
the panel above, File
names
Top.
Step 5. View your page in a Web browser.
To do this open the file index.htm in the folder
my-web-pages in your browser. You will find detailed
instructions on how to do this with Microsoft Internet
Explorer, the most popular web browser.
Note: Many of the purpose built HTML editors have a button
that you can click that automatically performs this step.
|
