Free tutorials for Java, Eclipse and Web programming



Follow me on twitter

2. HTML Standard Elements

The following defines standard HTML elements. If you want to try out these elements, take the example of your first webpage and place the new tags between the <body> </body> tag. Save your file and re-load your browser to see the result.

2.1. Blocks and structural elements

<p> </p> describes a paragraph and <h1> </h1> a headline. You have six headlines avaiable from <h1> </h1> to <h6> </h6> .

<br/> describes a line break. Please note that this tag is directly closed via the slash at the end. <br> </br> is incorrect. <hr/> inserts a line into the text.

2.2. HTML Links

The following describes a link in HTML. The attribute "href" defines the target of the link. A link can be absolute or relativ to the existing webpage.

				
<!-- this is an absolute link -->
<a href="http://www.vogella.de"> Java and Eclipse Tutorials </a>

<!-- this is a relativ link to a page in the same directory-->
<a href="anotherwebpage.html"> Java and Eclipse Tutorials </a>

<!-- this is the same as above-->
<a href="/anotherwebpage.html"> Java and Eclipse Tutorials </a>

<!-- this is a relativ link to a page on a higher directory-->
<a href="../page2.html"> Java and Eclipse Tutorials </a>

<!-- This will define a invisible anchor in your document which you can jump to-->
<a name="top"> This is the place to jump to	 </a>

<!-- if you click this link you will jump to your anchor-->
<a href="#top"> To the Top </a>




			

The following describes a link which displays a image.

				
<a href="www.vogella.de"> 
	<img src="http://www.vogella.de/img/common/LarsVogelAbout.jpg"  alt="Lars Vogel Picture"/> 
</a>
			

2.3. Lists

HTML supports ordered and unordered lists.

				
This is an ordered list.

<ol>
<li>Java</li>
<li>C++</li>
<li>.NET</li>
</ol>

This is unordered list

<ul>
<li>Java</li>
<li>C++</li>
<li>.NET</li>
</ul>


			

2.4. Tables

				
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<th>Java</th>
<td>C++</td>
<td>.NET</td>
</tr>
<tr>
<th>Hundefutter</th>
<td>Dogfog</td>
<td>Something</td>
</tr>
</table>

			

2.5. Image

Images should have the "alt" tag defined and can optionally definde a width and a height.

				
<p>
<img src="http://www.vogella.de/img/common/LarsVogelAbout.jpg"  alt="Lars Vogel Picture"/> 
</p>

			

2.6. Special signs

Use the following special signs to display them in your webpage.

Table 1. Special signs

Sign HTML representationRemark
&nbsp; Whitespace (" ")
< &lt;
> &gt;  
& &amp;  
© &copy;