XHTML - Extendable Hyper Text Mark-up Language
HTML is the language of the World Wide Web - www. As the body consists of cells, a web page is full of HTML tags. The basic ones are as follows:
The Document Type Definition - DTD is essential for any XHTML document. It could be any of the following:
1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML strict
2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML transitional
3) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> - XHTML frames
The DTD should be the first line of any web page.
As you see, the rest of the tags are self-explanatory. The 'head' section contains the title, which carries the title of the page. The 'body' section carries the body section of the document. You can also see that each tag has its corresponding closing tag. This is an essential feature of XHTML.
Creating the first web page using the Notepad
Open the Notepad and save the file as First_Page.htm. To do that, from the file type, choose All. The ideal location to save the file is your Desktop. The Window will look as follows: then close the Notepad.
Then you will see an icon of your favourite web browser on the desktop. That's your first web page. Now, right-click it and then open with Notepad again. A plain white background is where you are going to write your HTML code to produce the webpage.Type the following in and then save. Then double click the web page to see it, while keeping the Notepad open. This process is repeated while editing the file in Notepad and opening with the internet browser. Now, type in the following code in Notepad, save it and then open the .htm page. That's your first web page.
In addition to the fundamental tags, there are quite a few other tags which are essential to produce a meaningful web page. The following image shows some of the main ones:
Now, let's use some of these tags to produce our first simple web page:
The HTML code that produced the above page is as follows:
An ordered list - numbered - or an unordered - bulleted - list could be made as follows:
The HTML code that produced the above lists is as follows:
A border-less table can be drawn as follows:
The HTML code that produced the above table is as follows:
A image and a hyperlink can be drawn as follows:
Welcome
The HTML code that produced the above image and the hyperlink is as follows. If you move the mouse over the link, an alternative text will appear. The hyperlink, when clicked, will take you to the desired page.
A form with its input elements can looks like this:
The HTML code that produced the above image is as follows:
The action attribute carries the mailto: followed by the reveiver's email address;
The method attribute carries post which indicates the submission of data in its entirety to the server; the alternative is get which carries the same data
as a part of the web address which the data is sent to - which poses a security risk, for obvious reasons.
The name attribute of input controls are for programmatically referring to them when there is a need to do so.
The value attribute of input controls display the values, either next to them or in them.
The Submit button, when clicked, send the data to the desired destination.
The Reset button is capable of removing user inputs and keep the form in its original form.
The following is a real form with inputs for a password as well; the password as dark dots without showing the real letters/numbers. The user credentials can be checked with this:
A Real Simple Form with Inputs
First name:
Last name:
E-Mail:
Password:
The HTML code that produced the above form is as follows:
