Web Tools King - Articles

Basic Elements of HTML

Web pages are made up of many different (X)HTML and CSS elements. This report will bring them elements away from the web page and explain what they are used for and how to use them.

As you can imagine there are a lot of tags and they all do different things, hopefully this will explain them a bit for you.

The first set of tags I am going to be showing you are the main tags use need to use to create a valid web page to the W3C Standards. The tags I am using are going to be

DOCTYPE
HTML
HEAD
META
TITLE
BODY

Below is an example of how a XHTML page should be set out


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Example Page</title> 
</head> 
<body> 

Content Here

</body> 
</html>

As you can see, I have included all of the above tags, they need to be in the order they are to work properly otherwise the browser might get a little confused and display things how it thinks they should be displayed.

First I will explain the DOCTYPE this element tells the browser what W3C standards the web page is using. This example web page is using XHTML 1.0 Strict.

Next is the HTML tag, this tag needs to contain both the HEAD and BODY elements, The HEAD tag will contain the title of the page, also it will hold any CSS or JavaScript internal or external along side any meta data you have. The BODY tag will contain all the elements such as Table’s, Div’s, Span, P, Images and Heading’s

One of the main ways for a user to create a website is to use tables to determine the layout of the page, although W3C Standards allows this, it isn’t the best practise to use them for a layout, They should only be used to display data. Below is an example of a basic 2 column table with headings for each column. As you can see I have used indents to make the code easier to read, this will be very handy when you web page code get quite large. It is good practise to place each new element onto a new line and then indent it.


<table>
	<tr>
		<th>Column 1</th>
		<th>Column 2</th>
	</tr>
	<tr>
		<td>Row 1 Cell 1</td>
		<td>Row 1 Cell 2</td>
	</tr>
	<tr>	
		<td>Row 2 Cell 1</td>
		<td>Row 2 Cell 2</td>
	</tr>
</table>

The elements used in this table are

TABLE – the main element to define the table
TR – tells the table to insert a new row
TH – Created a header for a certain column
TD – Creates the cell in which the data will be placed.

The other main way of creating a layout is to use the CSS Box Model along side the DIV element. A DIV is a block element which uses the BOX model to determine where the DIV displays, the size, the border and margin size and also the colour of the DIV. U can either use Position: absolute; or position: relative; to place the box where you want.


<div id=”wrap”>
Content Here 
</div>

The example above uses the id titled WRAP which will make the DIV display like the CSS block titled div#wrap and the CSS looks like:


div#wrap {
	position: absolute;
	top: 20px;
	left: 50px;
}

The above CSS will display the DIV with the id of WRAP 20 pixels from the top of the page and 50 pixels to the left of the page. When using a DIV, you can either use ID or CLASS to style it. If you choose ID, only one element will be able to use that ID element where as if you use CLASS you can use that CLASS multiple times.

Now we have got the basics of how an HTML document should be set out and which methods available to get the desired layout, I will tell you about the different HTML elements there are to transform your text into something readable.

First and most important is the P tag, this is used to display any paragraph of text, whether its 1 line or 5 lines, and it can be used as many times as you please. Place each paragraph of text into a new P tag and make sure you close the tag at the end like this


<p>Paragraph 1 Here</p>
<p>Paragraph 2 Here</p>
<p>Paragraph 3 Here</p>

If you need to add a heading to the paragraphs you could just use the <strong> tag to make it bold but the best option for displaying headers is using the H1, H2......H6 tags, each H tag has different size text automatically added, so H1 has the largest text and H6 has the smallest. A basic page with headers will look like this:


<h1>Web Page Title</h1>
	<h2>Header 1 Title</h2> 
		<p>Paragraph 1 Text</p>

	<h2>Header 2 Title</h2>
		<p>Paragraph 2 Here</p>

	<h2>Header 3 Title</h2>
		<p>Paragraph 3 Here</p>

Each can be used more than once if the text needs to have the same style as another piece of text. You can also use ID and CLASS to style the headers.

Now you have 1 page set up, you might be thinking of expanding and adding new web pages to your website. Well this is how we successfully add a Hyperlink to a new web page. We will be using the A tag which is also known as an anchor tag.


<a href=”newpage.html”>New Page</a>

That is a basic anchor tag, the HREF element is the bit in which links to the new page, so type in your new pages address. In between the tags you type what you would like the link to be called. In this case I have called called the page NEWPAGE.HTML and I will be linking it from the text New Page.

Remember to keep adding a new line and indenting your code as you add new tags, as shown above its easy to read and understand and if you ever need to go back and edit you will be able to find the target code a lot quicker.

To change the font size, colour, weight and the font family you can easily do this through CSS, the example I am going to show you is present the above header and paragraph code


h1 {
	font-size: 14px;
	font-color: #ccc;
	font-family: Helvetica, Arial,"Luxi Sans", sans-serif;
	font-weight: bold;
}
h2 {
	font-size: 12px;
	font-color: #333;
	font-family: Helvetica, Arial,"Luxi Sans", sans-serif;
	font-weight: normal;
}
p {
	font-size: 10px;
	font-color: #222;
	font-family: Helvetica, Arial,"Luxi Sans", sans-serif;
	font-weight: normal;
}

That will give H1 the largest text which is bold and font colour is #ccc which will be a greyish colour, H2 will have the middle size text and normal weight and also another grey colour but slightly darker. And P will have smallest size text with a darker grey text and normal font weight and all of them will display in the helvetica font. If that font isn't available then arial will be the next choose followed by Luxi Sans and then sans-serif.

Now we have 2 pages of text linked to each other, it looks a little plain, so adding images to make it more attractive is a good way to go, you add a image to a web page using the IMG tag and you connect to the image with the SRC element.

<img src=”image1.jpg” alt=”Image 1” />

The IMG tag does not need to be closed off ( /> ) at the end for standard html but for XHTML you need to add the backslash like the example. Also to pass XHTML standards you need to add an ATL element, this is used if an image link is broken so no image will be displayed, it will display the ALT text instead.

That is the basics to an (X)HTML web page with a little bit of CSS for styling.

PSYKE STUDIOS NETWORK

Basic Elements of HTML