|
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.
|
