There are two types of web pages: static and dynamic.
Dynamic web pages are coded using scripting languages such as PHP, Javascript, ASP etc... Dynamic code is used to perform functions on a website such as building and submitting forms and creating functions that interact with databases. This form of code is for advanced users and is beyond the scope of this article.
A static web page is the most basic of website pages. A static web page is coded using HyperText Markup Language (HTML). This is what is used to build a basic website that will display your text and images in a specific layout. Cascading Style Sheets (CSS) are additionally used to describe the presentation of the HTML document.
HTMl is used to format your text into headings, paragraphs, lists,
and is also used to create links and embed images. Additionally HTML is
used to create tables, rows and cells which will determine the placing
of elements on a page according to your desired layout. Below is an HTML exaple.
HeadingYour text goes here This is a new paragraph |
 |
Here is the HTML code for the above layout:
<table width="90%" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666">
<tr>
<td width="50%"><h1>Heading</h1>
<p><font color="#0000CC" size="2" face="Arial,
Helvetica, sans-serif">Your text goes here</font></p>
<p><font color="#0000CC" size="2" face="Arial,
Helvetica, sans-serif">This
is a new paragraph</font></p></td>
<td width="50%" align="center"><img
src="images/monster.jpg" width="136" height="133" /></td>
</tr>
<
/table>
Basically, the above code tells us that we have a table that contains one row and two cells. The table is set to 90% of the width of the body of the site and each column is 50% of the table.
Then we have the text in the left column. The Heading is formatted using the <h1> tag. Next we have text in a new paragraph denoted by <p></p>. All html tags must have an open and a close tag, telling the brwoser where to begin the fomat and where to end the format. The open paragraph tag is <p> and the closing tag is </p>. Notice the addition of the / in the closing tag. This is standard markup and tells the browser that this is the closing tag and thus this is where the formatting ends.
Next we have the formatting for the text contained in the paragraph. First we have the font color (font color="#0000CC"), followed by the font size (size="2") and followed by the font style (face="Arial, Helvetica, sans-serif").
In the right hand column, we place an image which is called from the image directory and placed in the cell. Furthermore we have aligned the content of the cell, in this case the image, in the center of the cell - denoted by align="center"
Instead of using HTML, or to supplement your HTML, one can utilize CSS stylesheets which form the same functions as the HTML, such as: font colors, background styles, element alignments, borders and sizes. The css stylesheet is then called to the HTML page using an include. There are many advantages to using a combination of css and HTML, such as: cleaner code, more control over layout and faster loading pages.
There are many resources on the internet that will assist you in learning how to use both HTML and css. Here are some valuable links to get you started:
