Create a Simple Web Page using XHTML with Aptana Studio

Use basic XHTML and internal CSS to create a simple, clean web site with Aptana Studio.

Creating a simple web site may seem like an intimidating task and, while there are many sites that offer free web templates, it is very easy to create a web site using basic coding.

Basic XHTML Code

XHTML (Extensible Hypertext Markup Language) must always contain both a beginning and a closing tag. Most often this is done by writing two fully separate tags. However, it is also sometimes done by using a backwards slash within the opening tag. For example, the tag <hr /> is used to create a horizontal line. This tag is self-closing so it is not necessary to write a separate tag using the backwards slash to end it.

Creating a web page using XHTML is relatively simple. First, open a blank page using Notepad, found in the Accessories folder of your computer. Copy and paste the following code into the blank Aptana Studio document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
</style>
<title> </title>
<meta name = "author" content = " " />
<meta name = "description" content = " " />
<meta name ="keywords" content = " " />
</head>
<body>
</body>
</html>

Between the <title> and </title> tags, give the web page a name, which will appear at the very top of the page when it is viewed using a web browser.

Next, page content will be inserted between the <body> and </body> tags.

To easily create a large heading, the tags <h1> and </h1> are used to format content placed between them. Underneath the <body> tag, type <h1>Welcome to my Web Page</h1>.

Next, under the </h1> tag, type the following table name: <h2> Vacation Photos:</h2>.

The table for this example is created using the following tags:

<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

In order to insert images, create a secondary folder with the images inside it, and place that folder within the first folder.

The code for the photo insert will be placed between the and the tag and reads as follows:

<img src="images/tree.jpg" width="300" height="225" alt="photo of tree"></a>

Between the following two sets of table data tags, place the additional image codes as follows:

<img src="images/frog.jpg" width="300" height="225" alt="photo of frog"></a>

Stylize the page using CSS

To stylize a simple web page, the use of internal CSS is convenient. Place the following code between the <head> and the <body> tags to stylize the page:

<style type="text/css">
body { background-color:#f4ffe4;
color:#333333;
}
h1 { background-color:#d5edb3;
color:#5c743d;
line-height: 300%;
}
h2 { background-color:#d5edb3;
color:#5c743d;
padding-left:30px;
background-image: url(images/trilliumbullet.gif);
background-repeat: no-repeat;
}
</style>

An internal style sheet not only keeps the code compact, but may be later be cut and pasted to create a separate CSS document used to style multiple web pages using a link from each page.

Using this code will create a simple, but tidy web site ideal for personal use to display photos on the Internet.

Posted on Utopian.io - Rewarding Open Source Contributors

Create a Simple Web Page using XHTML with Aptana Studio - Build a Personal Web Site using Basic Code

Basic XHTML Code

Stylize the page using CSS