Create a Simple Web Page using XHTML with Aptana Studio - Build a Personal Web Site using Basic Code
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
<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