Advanced HTML Web Authoring | Cascading Style Sheets
Advanced HTML Web Authoring |
Cascading Style Sheets
Simple HTML TutorialMG Stough, revised 1 February 2003.
Welcome to the Basic HTML Tutorial. This document provides a clear and concise introduction to creating Web Documents using HTML. I usually recommend to those who wish to learn HTML that they should do their document editing manually. They should use the simplest tools available, NotePad on Windows, or SimpleText on the Mac, or KEdit in LINUX.
This tutorial starts the beginner out at the beginning. A great place to start, eh? It will take you from knowing little or nothing about creating Web Documents, to Web Author, in little or no time at all. Indeed, with this tutorial, you will soon be able to HTML documents that are readily accessible by anybody who can get on the World Wide Web [W3].
After gaining confidence with the basics of HTML Authoring, you will probably want to embark on the grande adventure of Advanced HTML Techniques After that, you will have gained the confidence necessary to discover the magic of using Cascading Style Sheets in your Web Documents.
By The Way, an excellent method of learning how to create great Web Documents is to check out how other people have created their own Web Documents. Of course, this in no way should be construed to say that Cheating or Unauthorized Copying is acceptable in my Classroom. Such behavior falls under the Academic Misconduct and Copyright Infringement Policies that have been established here at this institution. But if you are sincere in your desire to learn, then there is nothing wrong at looking at how others have done their Web Authoring. To see what they did, click on the "View" menu and then on "Source". I give you permission here to use the View --> Source method to check out how I myself have utilized concepts presented in this document. Each of the items used in creating this document is discussed in the text below.
Good Luck as you enter into this grande adventure!
The Student Will Gain Knowledge And Experience In Web Authoring. The Student will Create A Web Document By Completing The Following Tasks:
If you already have the skills necessary for completing these tasks, then you should visit the advanced HTML page.
HTML is an acronym for "Hyper-Text Mark-Up Language." This is a special language that is used to tell a web browser how to display text and imagery on a video screen. We call the elements of this language TAGS. TAGS are Enclosed by < and > brackets. TAGS are nothing more than Light Switches. You turn them on and then you turn them off. For as long as they are turned on, they will have an effect upon the text and images that they precede. Once they are turned off, they cease to have an affect on subsequent text and imagery. Now, having said all of that, let us move on to the actual creation of a Web Document.
Use your Text Editor such as Notepad or Kedit or Simplewrite to create a New Document. This file should be saved as TYPE = TEXT. Give the file the extension ".HTML" which tells the computer that it is a Web Document containing HTML TAGS.
Every HTML document needs a title. This is an HTML LAW. But how do you give your page a Title? It is actually quite simple. To give your Web Document a Title, simply type:
<title> Insert Title Here </title>
Change the text from "Insert Title Here" to the title of your document. The title text is preceded by the start tag <TITLE> and ends with the matching end tag </TITLE>. The title should be placed at the beginning of the Web Document. It tells the Web Browser what to display in the Title Bar of the browser window.
Try this:
If you have used Microsoft Word or Microsoft Works or Star Write, then you are most likely familiar with the built in styles for headings that can be used to emphasise important sections of the document. HTML also has a built in capability of emphasizing important sections of a document with headings. HTML has six levels of built-in headings.
So, how does one go about using Headings within their Web Document? It is as easy as turning on a Light Switch! To add a heading that reflects great importance within your Web Document, type in:
<h1>Important Section</h1>
and for a slightly less important heading, type in:
<h2>Somewhat Less Important Section</h2>
In HTML, it is considered good Web Authorship to divide paragraphs from one another. This makes documents much more readable. When typing in the body text of a Web Document, you should use the Paragraph TAG to separate your paragraphs from one another. Start each paragraph with the <p> TAG. End each paragraph with the </p> TAG. This makes for clean documentation. It also serves as a visual cue for your eyes when you are editing and changing a large Web Document. To create two [2] paragraphs, type in:
<p>
Enter Paragraph Text here
</p> <p>
Enter Second Paragraph Text Here
</p>
Add emphasis to one or more words in a paragraph of text with the <em> TAG. To do this, you would type in:
This is a really <em>interesting</em> Crime Fighting topic!
Use images to enhance your Web Documents. Painting a picture augments the message that your Web Document expresses. It is easy to add an image to a Web Document. Use the <img> TAG. Thus, to add an image file whose name is "mgs.jpg", you would type in:
<img src="mgs.jpg">
This syntax [way of issuing a command] works when the image file resides in the same folder or directory as your Web Document.
Let us assume that we want to add an image file to our Web Document, but we want it to be a different size. This is done by adding height and width parameters to the <img> TAG. For the sake of example, assume that your "mgs.jpg" image file is normally 200 pixels [picture elements; also known as dots] wide and 150 pixels high, but you want it to appear in your Web Document as only 100 pixels wide and 75 pixels high. That is accomplished by typing in:
<img src="mgs.jpg" width="100" height="75">
We use the src attribute to specify the name and location of the image file that we want to insert into our Web Document. The width and height attributes are not absolutely necessary. They do help you to format the way that images and text display on the screen within the Web Browser Window.
It is important to mention here that not all people have the same type of computer, nor do they have the same type of web browser software. For this reason, not all machines will display graphics [pictures] in Web Documents. For those who's Web Browser Windows will not display images, we need to provide a text description of what the image is showing. This is done so that they can read and imagine the image, which is like watching a television when it is off. Quite stimulating for me, but probably not as much fun for you. Yet, it is nice to know what is supposed to be displayed, so we use Alternative Text to tell the viewer what the picture is about.
Alternative Text is the short description of the story that the picture tells to the viewer. Add Alternative Text by typing in:
<img src="mgs.jpg" width="100" height="75" alt="This is a picture of my Profe!">
The alt attribute tells a story about the picture, in this case "This is a picture of my Profe!". The more complex the image, the more complex the story it tells. Sometimes you might want to provide a Long Description of the picture. To do this, you use the longdesc Attribute. The longdesc [Long Description] Attribute points the Browser to another file that contains the text of your long, complex story about the picture that is being desplayed--or not displayed. Assuming that you have written the long description text in a file that you have named "aboutpicmgs.html", it is referenced by the longdesc Attribute. Add the longdesc Attribute to the <img> TAG by typing in:
<img src="mgs.jpg" width="100" height="75" alt="This is a picture of my Profe!" longdesc="aboutpicmgs.html">
There are a variety of methods by which images can be created for use in your Web Document. Digital Cameras, Scanners, Paint Programs, Computer Aided Drawing Programs, or collections of Pre-Generated Stock Images can be used to produce these images. Most browsers know how to load into memory and display image files that have been created and then saved in GIF [Graphic Image Format] and JPG [Joint Photographic Experts Group] image formats. PNG is a new image format that is being used, and many of the newest Web Browser Programs have the capability of loading these images into memory and displaying them within Web Documents. To keep things safe, though, it is advisable to use JPG or GIF files for your images.
What file format should one choose when creating images to put into their Web Document? This is a very good question that often requires a lot of thought. However, much of the difficult thought processes have already been gone through by others in the Field of Web Authoring Science. Basic rules have been established that govern the use of image file formats in Web Documents. The rules state that JPG is the preferred file format for working with and saving photographs. JPG is also preferred for images whose color and texture smoothly vary across a uniform surface [satelite imagery; digital fractal computer generated images; etc.]. GIF and PNG file formats are better suited to graphic art images which display large flat areas of color [Paintings and Silkscreens], lines [Drawings and Etchings], and text [Banners, Signposts, Posters, and Bumper Stickers]. If you stick to these basic rules, then your Web Document Imagery should load into memmory and display properly more often than not.
Can the way that an image is loaded be controlled? Of course it can. JPG, GIF, and PNG file formats support options for progressive rendering where a crude version of the image is sent first and progressively refined. This can be a useful trick for adding effect to the Web Document Imagery's impact upon the senses, thoughts, and emotions of the person who is reading your Web Document.
Is that all there is to it? Yes. It is that easy. Only, be warned. Putting images into your Web Document can be dangerous. They must be used with care and control. Why? Large image files take a lot of memmory and require a long time to load into a Web Document. Therefore, it is a good idea to reduce the size of large images. This will help to avoid the long delays that are associated with downloading images from the InterNet into Web Documents.
Hyper-Text... What does that mean? It litterally means Live Text [Text that is capable of performing some sort of behavior]. HyperText is the magic ingredient that makes the World Wide Web a truly effective tool for research, communication, and entertainment.
How does HyperText work? This is also a simple concept to grasp. HyperText operates on the principle that Links from one page to another can be established within a Web Document. These Links can then be followed from one page to another. How can they be followed? By activating the Link through the click of a mouse button or through the pressing of a keyboard key. A single click of the mouse or keyboard button tells the Web Browser to find and load into memmory the Web Document that is associated with a particular Link, no matter whether it resides on the machine that the user is currently sitting in front of, or if it resides on a machine somewhere in the remotest reaches of The World!
When the InterNet got started, one of its greatest qualities was its capacity to connect people from different cultures so that they could communicate from around the world. That is still the InterNet's most indearing trait, if you ask me. Many of the Web Documents that I have created have Links to other Web Documents that are housed on computer systems in other countries and on other continents from where I live.
So, how do you put these Links to other Web Documents into your own Web Document? As I said, it is a very simple operation. Links are defined with the Anchor TAG which looks like this --> <a> </a>. To define a Link to the a Web Document whose name is "aboutmgs.html", you would type in:
<a href="aboutmgs.html">Insert Descriptive Text Here</a>.
The text between the <a> and the </a> is displayed within the Web Document as a Description of the Web Document that the Link leads to. By default, most Web Browsers display the Descriptive Text as blue underlined text. This tells the reader that the text being displayed is a Link that Anchors another Web Document to that location within the Document. This text is often called a HyperLink or HyperText, because it is active and will do something when you click on it.
Now then, how do you ensure that the Link that you create will take the reader to the proper location? This is where being a good speller and a clear thinker comes in handy. I cannot spell very well, due to my Templating Disorder, and I seldom think clearly due to my status as a Profe! Yet, I can--in most cases--ensure that a Link which I have created will go where I want it to go. To properly establish a Link from one Web Document to Another Web Document that is on another computer, you must provide the complete path to that location.
This is much like drawing a road map to help a friend get from their home to your home. Links that connect different computers are called External Links. External Links must provide the complete Web Address [URL] of the computer and directory and folder within which the Externally Linked Web Document is housed. Let us say that we want to create a HyperText Link between our Web Document and The World Wide Web Organization. To do this, you must first find out what the URL for the Remote Site [World Wide Web Organization] is, which in this case is www.w3.org. Armed with the complete path to the remote site, you would then create your HyperText Link. To do this, type:
<a href="http://www.w3.org/">The W3, also known as The World Wide Web Organization.</a>.
Cool, eh? But WAIT! Things get even better. Picture things I mean. Did you know that you can turn an image into a HyperText Link? This allows you to add an image to your Web Document which can be clicked on by the reader. Upon clicking the image, the reader is taken to a new Location. So then, you could load in an image of a police car, and Link that image to the home page for, say, the local police department or a police supply catalogue. This makes for a more interesting ride along the InterNet Highway, don't you think?
To create a HyperText Image Link, you combine two different TAGS. Don't Panic. You already know how to use these two TAGS. Look at this:
<a href="http://www.irpd.gov"><img src="car.gif" alt="Police Department Home Page"></a>
As you can see, we have established a HyperText Link with a URL Address, using the <a> </a> TAG. Then, instead of typing in a Text Description of where the Link Goes, we insert an Image, using the <img> TAG. This loads an image into memmory and displays it within your Web Document, and it makes that image a HyperText Link which will guide the reader to a new Web Location. Pretty Slick Trick!
OK, now you know how to set up a basic Web Document. You can add text to your document. You can add images to the document. You can even add links to other documents to your Web Document. Now I am going to introduce you to another useful characteristic of Web Documents. HyperText MarkUp Language has built in capacity to organize information into manageable and useful collections of data. This means that you can create organized Lists within your Web Documents.
Currently, there are three types of List that are supported within the HTML TAG Language. These are the Unordered List [Bulleted List]; the Ordered List [Numbered List]; and the Definition List [Dictionary List]. Each of these three List Typologies serves a different purpose. And, you can combine these Typologies to create structured Lists Within Lists!
The first List Typology is the Unordered List. This is often referred to as a Bulleted List. To create an Unordered List, use the <ul> and </li> TAGS. This defines the location where an Unordered List is to be placed. Between the <ul> and </li> TAGS, you place the items that are being listed. List Items are identified by the <li> and </li> TAGS. Therefore, you are actually using two sets of TAGS to define an Unordered List.
To put an Unordered List of Items into your Web Document, you would type:
<ul> <li>First ITEM</li> <li>Second ITEM</li> <li>Third ITEM</li> </ul>
Numeric Lists are very useful. They show Rank Order of List Items. They also provide a way of listing out Instruction Steps that must be followed in sequence. This second List Typology provides an excellent method of communicating to another party How Something Must Be Done.
The Numeric List [Ordered List] is defined by the <ol> and </ol> TAGS. List Items are defined between the <ol> and </ol> TAGS through the use of <li> and </li> TAGS. As you can see, there is only one slight difference in the creation of a Numbered List [Ordered List] and the creation of an Unordered [Bulleted] List.
To put an Ordered List of Items into your Web Document, you would type:
<ol> <li>First ITEM</li> <li>Second ITEM</li> <li>Third ITEM</li> </ol>
Did you know that you can create a vocabulary list complete with Terms and Definitions? It is true! You can create a Web Document that contains a Dictionary List. The third List Typology that is supported in HTML is the Definition List [Vocabulary List]. This List Typology is useful for explaining complex concepts and for providing Study Aids for readers who are researching the topic with which your Web Document is concerned.
To create a Definition List, you first specify where you want it to sit in your Web Document by issuing the <dl> and </dl> TAGS. Then, within these two TAGS, you enter the list of Terms and their Accompanying Definitions. Each Term is surrounded by the <dt> and </dt> TAGS. Each Accompanying Definition is surrounded by the <dd> and </dd> TAGS.
To create a fully fledged Dictionary List [Vocabulary List], you type:
<dl> <dt>First TERM</dt> <dd>DEFINITION for First TERM</dd> <dt>Second TERM</dt> <dd>DEFINITION for Second TERM</dd> <dt>Third TERM</dt> <dd>DEFINITION for Third TERM</dd> </dl>
Lists can be nested, one within another. This allows for the creation of very complex Lists, such as Chapter Outlines, Instruction Sets, and Context Sensitive Definition Sets. To create a nested set of Lists, you can type:
<ol>
<li>First ITEM of TOP List Level</li>
<li>Second ITEM of TOP List Level</li>
<ul>
<li>First ITEM of Nested List</li>
<li>Second ITEM of Nested List</li>
</ul>
<li>Third ITEM of TOP List Level</li>
</ol>
Of course, the previous example only uses two List Typologies. However, the Web Author is free to use all three List Typologies in any combination that he or she sees fit. The idea is to use Lists to organize information in such a way as to make it easier for the reader to understand.
Lists are not limited to just a single item either. An ITEM can be a Paragraph or Heading, or A Heading With A Paragraph. Your Imagination and your Determination are the only boundaries to the Web Document that you create.
You now have the basic information necessary for creating a Web Document. This concludes the Basic HTML Web Authoring Tutorial. See, I told you it wasn't that bad!
Are you ready to learn more? If so, then visit the advanced HTML Techniques Tutorial. Once you have completed the Advanced Tutorial, then you will be ready to explore the Style Sheet Tutorial. You are well on the way to becoming a great Web Author! Have a lot of fun!
Now, get busy creating your Web Document!