Website TemplatesWebsite Templates

Joomla Templates | Drupal Themes | WordPress Themes | XOOPS Themes | Mambo Templates
Web Design Templates | Flash Templates | eCommerce Templates | CMS Templates | Open Source Templates | Shopping Cart Templates
VirtueMart Templates | PrestaShop Themes | osCommerce Templates | Zen Cart Templates | Magento Themes | TomatoCart Templates | Cre Loaded Templates

Article content

FRIDAY 15 JUNE, 2007

Here you will know how to create HTML-document with all known el

by Admin | post a comment

Here you will know how to create HTML-document with all known elements in basic template. After the template is ready you can enter the text. After that you will learn how to save ready documents, test them and check on accordance with standards.
All you must have in order to create HTML-documents, - is common text editor. Pages, written in HTML, represent common text files. Any program, in which it is possible to edit ASCII-files, can serve as the editor for creation web pages. You can use even text processors for this, such as Word Perfect or Microsoft Word under condition of right saving of files.

So, if you have text editor you may start the creation of basic template of HTML-document.

Document elements
First, that you'll know about XHTML is the elements which describe the document. This is tags, which you'll meet on any HTML-page. They determine different parts of document.
HTML-document has two parts: title and page body. In the title you place name and some special information about page. In order to create the title write the next in any text editor:
<head></head>
In this section you inform browser of specific information for this page, and also the title which must appear in the title of browser window.
So, the title is ready. Now you need to create body of page. In the body of page you do the greatest part of work: enter text, titles and subtitles, put hyper references, images and so on. In order to denote the beginning and the end of page's body enter after title's tags:
<body></body>
You have to place text and graphic between two these tags. Now sections <head> and <body> must be concluded in any element, having seen what all world has understood that deals with HTML-document. It's the element <html>. Above the first tag, <head>, enter:
<html>
After closing tag </body> enter:
</html>
In spite of the fact that your document is saved in a common text format, brouser will understand that this is HTML-document. We have to adhere to standard XHTML. That's why, tag <html> must look more complicated:
<html xmlns="http://www.w3.org/1999/xhtml><http://www.w3.org/1999/xhtml">
The atribute of tag <html> is the parameter xmlns, setting the area of XML names. It is needed for creation documents, compatible with XHTML requests, especially standard XHTML 1.0.
So, here is the elements, which are already in our template:
<html xmlns="http://www.w3.org/1999/xhtml><http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html>
As you see, you have almost ready web-document.
DTD
At the beginning of any web document, especially if we aspire to the observance of requirements of standard XHTML, one should include DTD (document type definition). DTD is the element which is included in the beginning of page and from which you can learn about languages and standards used in it. DTD is gradually becoming the necessary part of any site because XML begins to take stronger and stronger stands in Net and in order to get the access to web services one should use wider and wider spectrum of supplements and facilities.
So you have to put DTD in the beginning of every created page. It is not difficult to do.
If you work with the page which already exists or was created with the help of standard editor HTML, working as
WYSIWYG, you can start it with this definition:
<!DOCTYPE html
PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional .dtd">
This is DTD of transition version of standard XHTML. Brawser is informed that you use the specification of XHTML 1.0 Transitional. After the atribute PUBLIС there is the name of DTD in which the used language is indicated. Even if you use any other language on your site the XHTML language is English.
The next line of DOCTYPE is URL of that file DTD, which is supported by W3C. It is not very necesary to indicate.
As you'll see later, DTD of specification of XHTML Transitional allows to use elements which directly influence on the appearence (types, colours and so on) of page's text.
DTD of specification of XHTML Transitional allows to get the back compatibility of brawers. In other words non-standard elements created by third persons will be reflected without mistakes. But you may compel the brawser to work in a "strict" regime. You'll need DTD of specification of XHTML Strict:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Apply this definition if you are exactly sure that you won't apply any specific codes.
When do you need to use one variant or another? DTD for XHTML Strict is applied when you use plates of styles for changing visual design of page, and the elements XHTML serve only for organization of information. DTD for XHTML Transitional is applied when you change the appearance of page with the help of HTML elements. This specification is loyal to the using of old elements.
Division of element DOCTYPE for lines is not compulsory. That is all atributes can be placed in one line:
<!DOCTYPE html PUBLIC "//W3C//DTDXHTML 1.0 Strict//EN" "DTD/xhtml1-strict..dtd">
Element comment
Element comment differs from the rest ones. It contains text but don't have opening and closing tags. Instead of this text of comment is concluded in one tag, which starts with <! - - and finishes -->.
Sometimes it is necessary to hide the text for addition comments to the text HTML, written in the form of reminder. They help in editing initial code to understand quicker in what part of the document you are and what you have to do with it.
Creation of HTML template
Having saved the template in the form of text file, you will get a possibility to create new files of HTML very easily. Load the template in editor then save it under the name of created web-page.
Start with the entering of the next code in new file:
<! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Sthct//EN"
"DTD/xhtml1-sthctdtd">
<html xml ns=" http: / /www w3org/1999/ xhtml" >
<head>
<title> enter your favourite title here </title>
<!-- any design -->
<!-- last renewal 10/12->
</head>
<body>
</body>
</html>
Now save the composed code in text file with the name template. html. Now if it is necessary to create html-document load template in text editor and save it with new name. After that you can start to edit it.

Title of document
Here we'll talk about the section head HTML-document. It precedes the main part of page and is determined by the element <head> which is containering. Text between tags <head> and </head> informs browser about file, but isn't depicted as a part of document. Inside of <head> different elements can be placed, among which the next are:
<title> - name of document;
<base> - initial URL of document;
<meta> - additional information about page
<title> is compulsory. Rest of them are often absent on web-pages, though it is important to know what they represent because it is possible to create more complicated sites.
Name of document
Element <title> is given to a person for appellation of his work. Many graphic browsers depict this name in the line of title of their window. Name doesn't coincide with a name of file, this is its short description of page.
For example, "the official site of John Brown".

Element <title> must be placed after <head>:
<head><title>site map of John Brown</title> </head>
Name of document must be informative and short. Long name can look strangely in title line of browser window and can not be placed in a line of layings list or plate "Selected". Remember that internet research engines often use it. Here are some rules of choosing a name of your page:
Avoid general words. Try to inform what your page is dedicated to maximum exactly. Remember, that any name can be used as a note in research systems, for example Google or AllthcWeb.com. If it is possible avoid hackneyed slogans. Your aim is to reveal main point of page in two-three words. It doesn't always help to write simply firm's name, especially if you apply the same name on many pages of site. In spite of this try to describe briefly your company activities and to reflect them in its name. Try to use at the most 60 symbols in its name. Specification of XHTML doesn't enter limits of text length in element <title>.

Element <base>
Ways to files and URL may be rather long and may be an impediment for young web-designer. Element <base> can be used in order to facilitate his difficult work. <base> is intended for setting "basic" way, with its help all the relative URL are determined.
Element <meta>
This element is applied for additing metadata. Information about site which is contained in <meta> can be used by users or other computers. One of the most widespread applications of this element consists in entering keywords for research systems of internet, such as Yahoo or Excite. With the help of keywords your page will be easy to find by other users.
When searching robots look a page through they pay attention on popular <meta>.
Searching robots - are small programs, created for collecting information about sites and their catalogization. Some of them check against and save descriptions and keywords of your page.


The first of <meta> elements is used by robots for description of your page in the list of web-catalogs. The attribute content may conclude 50-200 words, depending on a concrete research system.
The second element of <meta> in our program is a list of keywords, which will be associated by searching robots with your site. If any user enter some of them in search field, then the reference on your site will appear among the results.
Certainly, this are not exhaustive examples of using <meta> elements. There is one rule: content attributes, name or http-equiv must be in present element. Name and http-equiv can not be used together.

Body of page
Body of page - is its main part, it is limited by two tags: opening (<body>) and closing (</body>). Inside of this section you place everything, that user will really see in browser window: text, hyper references, titles, images, elements of forms, tables and so on.
Section <body> must be placed between <html> and </html> - this means that page body is the substructure of <html>.
Almost everything, that is on this web-page, is enclosed in this section and must be placed between opening and closing tags: <body> and </body>.

Example of body section:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> FakeCorp Web Deals </title></head><body><h1> FakeCorp's Web Deals </h1> ...real contents of page</body></html>

Entering text paragraph
The most part of text which you enter between two tags <body> and </body> is enclosed in container elements <p> and </p>. They are used for division of text on paragraphs.
Pay attention: pressing Enter while entering text doesn't influence on the page depiction in browser window. superfluous omissions will be ignored.

<p> Donald Johnson<br />12345 Main Street<br /> Yourtown NY 10001<br /><p/>

Element <br/>
You can already create whole paragraphs. But what do you have to do if you want to designate the end of page? This will be useful for enter address in web-document:
<р>
Donald Johnson 12345 Main Street Yourtown NY 10001</p>
THis marking won't be visible only in your text editor. But browsers will ignore superfluous omissions and even if you mark every line in individual paragraph it will be uncorrect.
The decision of this problem is the usage of void element <bг /> which represents a sign of the line end. In the right form text of address will look in the next way in HTML:
<p> Donald Johnson<br />12345 Main Street<br /> Yourtown NY 10001<br /><p/>

Saving, testing and checking
Work on the creation of page implies three important steps: first you have to save it rightly, then to make sure that you see in browser what you've planned, and check the code of its compatibility with HTML standards.

Saving of page
If you worked with HTML-template, then you've saved your page under any name. But if you haven't done it you must save a file, choosing point Save As in menu File.
Saving a file, remember that it must be placed in the way it will be registered in web-server.

Testing of page
In order to check how your page look in actual fact you can use a browser. Find commands File, Open File in browser menu. The dialog window of last will allow you to open the necessary file.
For testing a document in browser:
Choose File Save File in order to save all the changes, made in editor. Turn to browser window and choose File Open File in order to open the saved element.
The document must appear in browser. Check it on a presence of mistakes and misprints.
Turn to the window of text editor and put all the necessary corrections. After finishing this work don't forget to save a file.
If a page is opened in browser, then in order to see changes you must click Renew.
Checking of page
Finally, saved and tested page has to be checked in its compatibility with HTML standards. It is not necessary, but it is desirable.
There are some possibilities. The easiest way is to use the program HTML Tidy. There are many its variants, written for Windows, Mac and Unix. Look on http://www.w3.org/People/Raggett/tidy, there you can find a big collection of checking programs.


Other news for Friday 15 June, 2007

View all news for Friday 15 June, 2007 on one page

News for Thursday 14 June, 2007

View all news for Thursday 14 June, 2007 on one page

Recent News

News archive

 
up spurl