Monday, 2 May 2016

Learn HTML EASY TO UNDERSTAND Chapter 2

Posted on 22:57 by Juju Komariah
Chapter 2. Choosing Text Editor HTML

 In this chapter you will learn to create HTML pages with a standard text editor.
OBJECTIVES
Upon completing this section, you should be able to

  1. Choose a Text Editor.
  2. Create a Basic Starting Document.
  3. Understand and Set Document Properties.
  4. View Your Results in a Browser.
Choosing a Text EditorThere are many different programs that you can use to create web documents. Text editors are basic word processing programs without all of the "bells and whistles" of full-blown word processors. The advantage of using a text editor is that the files are created and saved with few if any invisible formatting codes, which could drastically effect your document when, saved as a web page and displayed in a browser. For this reason, text editors can be used quite effectively to create web documents.
HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand, these programs will generate the HTML ‘source code’ for you. HTML Editors are excellent tools for experienced web developers; however, it is important that you learn and understand the HTML language so that you can edit code and fix ‘bugs’ in your pages.
The current versions of both Microsoft Word and Corel WordPerfect also have the abilities to create web pages.
For this course, we will focus on using the standard Microsoft Windows text editor, NotePad. You can apply the same concepts using any text editor on any platform.
Starting NotePadNotePad is the standard text editor that comes with both 16 and 32-bit versions of the Microsoft Windows operating system. To start NotePad in Windows 95 follow the steps below:
  1. Click on the "Start" button located on your Windows task bar.
  2. Click on "Programs" and then click on the directory menu labeled "Accessories".
  3. Locate the shortcut called "NotePad" and click the shortcut once.
Creating a Basic Starting Document
As stated in Chapter One, there are certain elements that are required in a web document’s structure. The easiest way to create and develop a document is to type the required elements in as a starting point. This way you can add to your document by inserting elements and adding content between the starting and ending tags of existing elements and you won’t have to try to remember if you have typed in the closing tag or not.
In NotePad you would start with:
<HTML><HEAD><TITLE></TITLE></HEAD><BODY>
</BODY></HTML>

 At this point your page has a HEAD and a BODY section inside the HTML tags. You also have a TITLE element, inside the HEAD element, which you should fill in. The text in the TITLE element is used by the surfer’s browser and also by search engines.
The TITLE of your document appears in the very top line of the user’s browser. If the user chooses to "Bookmark" your page or save as a "Favorite"; it is the TITLE that is added to the list.
The text in your TITLE should be as descriptive as possible because this is what many search engines, on the Internet, use for indexing your site.
The following is an example of a document title:
<HTML><HEAD><TITLE>TrainingTools.com: HTML, JavaScript, FrontPage Courses for Free</TITLE></HEAD><BODY>

</BODY></HTML>


Setting Document Properties

Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links.

Color Codes
Colors are set using "RGB" color codes, which are, represented as hexadecimal values. Each 2-digit section of the code represents the amount, in sequence, of red, green or blue that forms the color. For example, an RGB value with 00 as the first two digits has no red in the color. See the chart below for a listing of some of the commonly used colors:
RGB ColorHexadecimal Value
White#FFFFFF
Black#000000
Red#FF0000
Green#00FF00
Blue#0000FF
Magenta#FF00FF
Cyan#00FFFF
Yellow#FFFF00
Aquamarine#70DB93
Baker's Chocolate#5C3317
Violet#9F5F9F
Brass#B5A642
Copper#B87333
Pink#FF6EC7
Orange#FF7F00


 There are several resources available on the Internet that chart colors and their hexadecimal values. If you require more information about color values, there is an excellent site entitled "VGDesign’s Interactive Color Cube" that displays the background color code when you put your cursor over a small color sample. The web address is:http://www.vgdesign.com/color.html
The BODY Element
The BODY Element of a web page is an important element in regards to the page’s appearance. This element contains information about the page’s background color, the background image, as well as the text and link colors.
If the BODY Element is left blank, web browsers will revert to their default colors. In older browsers, if the BODY element is left blank, the page’s background color will be a light gray. The newer browsers, IE 4+ and Netscape 4+, default to using the client’s Windows colors settings.
It is very common to see web pages with their background color set to white or some other color. To set your document’s background color, you need to edit the <BODY> element by adding the BGCOLOR attribute. The following example would display a document with a white background color:
<BODY BGCOLOR="#FFFFFF"></BODY>

TEXT Color
The TEXT attribute is used to control the color of all the normal text in the document. This will affect all of the text within the document that is not being colored by some other element, such as a link. The default color for text is black. The TEXT attribute would be added as follows:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000"></BODY>
In this example, the document’s page color is white and the text would be red. As suggested earlier, it is important to ensure that your document’s text is a color that will stand out from your background color.

LINK, VLINK, and ALINK
These attributes control the colors of the different link states:
  • LINK - initial appearance – default = Blue
  • VLINK - visited link – default = Purple
  • ALINK - active link being clicked – default = Red
Many web developers will set the link colors of their documents to flow with the color scheme of the site. The format for setting these attributes is:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#0000FF" VLINK="#FF00FF" ALINK="FFFF00">
The results of the above BODY element would be a white background with links being blue, visited links as magenta and active links colored in yellow.
Using Image Backgrounds
The BODY element also gives you the ability of setting an image as the document’s background. Background images are "tiled" in the web browser; which means that they are replicated and positioned below and beside each other until the browser screen is filled. To create a professional look, images must be ‘seamless’. Meaning that when the copies are placed below and beside each other the seams are invisible.
Using background images can be very effective if used properly. For instance, you may want your company’s logo as your background or you could also create a border background so that it appears as though your page is divided into two columns. A background image must be either in the form of a .gif or .jpg file. There will be more information on image files provided in Chapter 6.
An example of a background image’s HTML code is as follows:
<BODY BACKGROUND="logo.gif" BGCOLOR="#FFFFFF">
In this example, we have set the document’s background image to ‘logo.gif’. We have also added the BGCOLOR attribute as well so that the browser window will have a white background during the process of loading the background image.
HTML Tip

When using a background image for your document, keep in mind that your text will appear on top of the image. Background images should be a light color so that your text is readable.
Before you set the color properties of your document, keep in mind that not every user who visits your page will have their display colors set to the same as yours. Some users still work on computers that can only display 16 colors. Use caution when setting your document’s properties if you are concerned about how the page will appear.



Previewing Your Work
Once you have created your basic starting document and set your document properties it is a good idea to save your file. Since you are publishing for the Internet, you must save your files in a format that web browsers can interpret. A standard web page’s file extension is usually ".htm". Some developers name their files with the extension ".html" but this format is not compliant on all platforms. In our examples we will use the .htm file extension.
To save a file, in NotePad, follow these steps:
  1. Locate and click on the menu called "File .."
  2. Select the option under File Menu labeled "Save As …"
  3. In the "File Name" text box, type in the entire name of your file (including the extension .html). i.e. index.html
In NotePad you have to type the entire filename including its extension. If you do not type in the file’s extension, NotePad will assume that you want your document to be a text document with the extension .txt.
Edit, Save & View CycleAs you continue to add to your web document(s), it is important to preview your work in a browser such as Netscape Navigator or Microsoft Internet Explorer.
To preview your work, open a web browser and do the following:
In Netscape Navigator:
  1. Click on the menu labeled "File …"
  2. Locate the menu option, "Open Page … "

  1. In the "Open Page" dialog box, click on the "Choose File …" button and locate your web document. Ensure that the "Navigator" button option is clicked as you want to preview the work in the browser window.
  2. Once you have chosen the file click on "Open"
In Microsoft Internet Explorer:
  1. Click on the menu labeled "File …"
  2. Locate the menu option, "Open …"

  3. In the "Open" dialog box, click on the "Browse …" button and locate your web document. Click "OK" once you have selected your file.
Once you have opened and previewed your work in a web browser, you can continue working by adding to and editing the html file, saving the file with the changes and then viewing the changed file.
You will be more productive if you do not close your web browsers; simply minimize them and continue working. When you want to preview your work again:
  • save your html file’s changes
  • switch to one of your browsers
  • hold down the [SHIFT] key
  • in Netscape, click on the button labeled "RELOAD"
  • in IE click on the button labeled "REFRESH"
The web browser will load the same document but with the new revisions. This process is the Edit, Save and View cycle.


Chapter 2 – Exercise 1
The goal of this exercise is to familiarize you with using the concepts discussed in Chapter 2.

 Procedure
  1. Start Notepad.
  2. Create the following HTML page:
    3. <HTML>
    <HEAD>
    <TITLE>XYZ Corporation</TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
    </BODY>
    </HTML>
    This will set your documents background color to white. (Older browsers default to gray)
  3. Save your file – call it index.htm. Save it in the C:\HTMLFILES\Exercises directory.
  4. Preview your file. View your file in Navigator, IE and any other browser that you have installed and are using.


Review Questions
  1. What are the advantages of using a text editor instead of a full-blown word processor?
  2. What does the TITLE element do?
  3. What attribute controls the document’s background color?
  4. How are colors expressed as attribute values?
  5. What does the BACKGROUND attribute do?


Summary
As a result of this chapter, you should be able to :

  • Choose a text editor
  • Create a basic document
  • Set the document’s properties
  • View the results of your work
Posted in | No comments

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)