|
There are several options availabe for creating a web page, but a basic knowledge of HTML can be really beneficial in both understanding what is going on behind the scenes, and to allow you to make any changes to your site. These tutorials don't promise to make you an expert, but they will give you a basic understanding.
Starting Off:
The first thing you should do after opening your web page editor is to give your new file a name, then . . . File -->
Save As . . . (See previous lesson). If you start creating your webpage without organizing your pictures, graphics, etc., you might
find that when you upload your site, your web pages won't be able to find the pictures because they won't be in the same relative position.
One good way to learn more about web pages is by looking at other people's pages and opening them up in an HTML Editor. Study how they have created
various effects, and try out the ones you like.
Basic HTML
HTML stands for HyperText Markup Language, the programming language used to create documents for display on the World
Wide Web. Don't let the terminology scare you. There is no magic involved - just Text and Tags. Text, you are
already familiar with - Tags are just the commands that tell the Web Browser, (Internet Explorer, Safari, Firefox etc.), how to display
the text and images of the web page.
Tags
In the simplest of web pages, the HTML and BODY tags are the only required tags. Tags are indicated by < > (the opening) and </>
(the closing) symbols.
The simplest of web pages could include the following text and tags:
<html>
<body>
This is MY webpage!
</body>
</html> |
To see how this looks as a web page click HERE
The <html> tag tells the browser that the document is an
HTML page. The <body> tag tells the browser where the body of the page
begins and ends.
In the example above,if you want the word MY to be in bold, you could use the <b> tag.
It might look something like this:
This is <b>MY</b> webpage!
To see the difference click HERE
The <b> tag tells the browser to format the text in
bold. The </b> tag tells the browser to stop formatting text in bold. The
result is the word "MY" being displayed in bold.
Attributes
Attributes are elements of the tags that tell the
browser additional properties of the tag. Attributes follow the tag name
and are usually shown in the following format:
<p align="right">My Paragraph.</p>
This tells the browser that the Paragraph is to be
aligned to the right.
Click
HERE to see the example
Linking and Referencing other
Content
So much for simple web pages. Eventually, you will need
to include references (links) to other pages, and you will want to include
images and possibly sound clips, to your web pages. Links to files can
consist of either relative or absolute paths. A relative
path indicates where the other file or entity is in relation to the
present web page. An absolute path includes all the information
needed for the web browser to find that particular page or entity.
For example:
http://www.mydomain_name.com/folder/page1.html
is an absolute path while ../page2.html is a
relative path. The relative path tells the browser where a particular
element is physically located in relation to where the present page is
located. The above example tells the browser that page2.html is located
one folder up from the present page. This is a VERY IMPORTANT
concept to learn. If you were to move the present page only,
let's say, to a different folder, without moving page2.html, the browser
would still expect to find page2.html one folder up from the new
location.
Another example:
<img src="myfriends.jpg">
This example specifies only the filename. This tells the
browser that the image is in the SAME directory as the html page that is
referring to it.
If the image was in a directory immediately under the
directory where the html page is, in a folder named "images", then the
following would be used:
<img src="images/myfriends.jpg">
This tells the browser to look in the images
directory for the image.
Here is the code showing the placement of the image
reference, and all other changes so far:
<html>
<body>
This is <b>MY</b> webpage!
<p align="right">My
Paragraph.</p>
<img src="images/friends.gif">
<p>These are my friends!</p>
</body>
</html> |
Click
HERE
to see the example.
To navigate up a directory, the ../
is added to the front of the image path to
tell the browser to navigate up one directory before navigating to the
file.
Links
To link to another webpage, use the ANCHOR tag (<A>) and
specify the Hypertext Reference with the HREF attribute as follows.
<a href="start_here.htm">Here's a link to this page</a>
or
<a href="http://www.mycoolschool.ca">Here is a link to my help files page</a>
To refer to a destination on the same page,
simply insert an ANCHOR at the desired location like this:
<a name="top">This is the first line in my page.</a>
Then link to it by specifying the anchor name in the
href, preceded by the # character like this:
<a href="#top">Here's a link to the top of my page</a>
Conclusion
There's still a lot to learn, but just remember, it's
just text. There are many programs such as Microsoft FrontPage or
Macromedia Dreamweaver, available to make the job easier, but you should
learn as much about HTML as you can before you become dependent on other
programs. You can learn a lot about HTML and how to do things by using
your web browser's View Source option to study the text of an HTML page.
If you want to try something out, start off with a simple page to see the
result, then copy it into your web page.
|
