Building and editing HTML webpage
Building and editing HTML webpage
There are many programs with which you can create webpages, even without knowing the HTML language, such as Microsoft FrontPage or Macromedia Dreamweaver.
The text editors are the most basic programs, and the most used,for editing the webpage. The advantage is their simplicity, to create a webpage a few of the HTML language's codes are necessary, so the documents are made easily and rapidly, even more it uses very little space and memory sources, but they require knowing the HTML language.
Of the known text editors, the most used is NotePad, it is also used for this course, but you can use any text editor. For beginners I recommend using Notepad or Notepad++, but the advanced can use other programs like Dreamweaver.
Creating the base of a HTML document
As you saw in Lesson 1 there are general elements that are necessary to create a HTML document.
First open the Notepad and write the basic structure of a web page. This is:
<html><head><title>Title</title></head> <body>Content </boy></html>d
Now your webpage has HEAD and BODY inside the <HTML> base . It also has the TITLE element inside the HEAD element,that you should fill in with a representative text as the title of your document.
What you write in TITLE will appear in the upper line of the browser (above the menu). At TITLE you can put any text, but it is better to write something that describes as best as possible the subject and content of your webpage, because it is what most Internet search portals search and index, also is it indicated to not exceed 70 characters.
Below you will find an example on how a TITLE menu can be filled in and a content inside the page:
<html><head><title>HTML - Free courses and Tutorials</title></head> <body> <h1>Page content</h1>Lessons, examples and explanations. </ody></html>b
Setting document properties
- Document properties can be controlled by the attributes of the BODY element, ex: such as colors for page background, text and various link phases.
Colors are set by using the basic colors: red, green and blue, the word used is RGB (Red, Green, Blue), they are represented as hexadecimal values and are written betwin quotes (" "), but first you must add the character '#'. Each 2 units of the code represent one of the RGB colors.
For example: #00aa11 is a color that does not have Red (00), has Green (aa) and has less Blue (11).
The BODY element
- - You can add to this element information to define the backgound color or image, the text and color of the links.
- - If the body element is not filled with other attributes then the browser will present the standard colors, usually the background is white.
- - To set the color of the page's background add in the label <BODY> the attribute BGCOLOR.
- - The following example will present a document whose background is blue:
<body bgcolor="#0000ff"></body>
- Text Color
- - The TEXT attribute controls the normal text's color in the document.
- - This will affect all text in the document that is not colored by other elements, such as the link.
- - The standard color for text if Black.
- - Here's an example where the color of the background will be blue and the text color will be red, the attribute TEXT will be added as:
<body bgcolor="#0000ff" text="#ff0000"></body>
- Links (LINK, VLINK and ALINK)
- - These attributes control the link's color in different states1. LINK - Initial color of the link. Standard is blue2. VLINK - color of a visited link. Standard is purple.3. ALINK - color at the time of the activation. Standard is red.
- - The way of setting these attributes is the following:
<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff" alink="#ffff00"></body>
The result will be a page with a white background, red text, blue links, visited links will be colored pink and links will be yellow when activated.
- Using an image as a background for the webpage (background)
- - The body element offers the possibility of replacing the webpage's background with an image (Background image). If the image is smaller than the webpage's size then the image will be multiplied to cover the whole document. It is indicated that the image be in *.gif or *.jpg format. Using an image will give a nice look to the document. To see what a document whose background is a picture looks like Click Here.
- - An example of HTML code with background image is the following:
<body background="imagine.gif" bgcolor="#ffffff"></body>
In this example, the webpage's background will be given by the image in the file "imagine.gif" and also I set the BGCOLOR so that during the process of loading the image, the color of the background will be white.
After you created the base of the document and set your properties, you must save the file. Saving must be done in a format that your browser can recognize. The stardard extension for a file that represents a webpage is ".htm" or ".html". I usually use (".html").
- To save a document to look like a webpage, in NotePad chose from the File menu the command Save and save the file with any name you want but with the html (or "htm") extension - (At File name: write the name and the extension ".html", for example: index.html). If you do not write the extension, Notepade will save the document with the "txt" extension.
- To see the document as a webpage, go to the directory where you saved the file and simply open it (either with Enter or by double-clicking with the mouse), it will be opened automatically by browser that you use (Mozilla Firefox, Internet Explorer, Opera). Or open your browser and click the Open command to open the document you saved.
- To continue work to change the webpage or to add something to the HTML document, open the document with NotePad. One way is to open the Notepad and from the File menu choose Open then find the file you want to modify and click the Open button. After you finish doing the changes, save, so that if you reopen the document as a webpage it will be opened with the new format.
