| Free tutorials for Java, Eclipse and Web programming |
Version 1.6
Copyright © 2008 - 2010
14.11.2010
| Revision History | ||
|---|---|---|
| Revision 0.1 | 12.04.2008 | Lars Vogel |
| Created | ||
| Revision 0.2 - 1.6 | 12.06.2008 - 14.11.2010 | Lars Vogel |
| bug fixed and enhancements | ||
Table of Contents
HTML (Hypertext Markup Language) is a standard to describe the content of webpages. HTML pages are text files which typically end with the ".html" extension. HTML is a so called "markup language". The current version of HTML is HTML5. This version is still work in process but is already widely adapted by the browser vendors. HTML5 supports XML syntax. This article uses the HTML5 XML syntax.
HTML files needs to be plain text. Use a simple text editor, e.g. Notepad under Windows and save the following text as "page1.html". Do not use a editor such as Winword as this editor saves additional information in the file. Create the following text.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>An HTML5 Document</title> </head> <body> <h1>Your first HTML5 page</h1> <p>This is a <a href="http://www.vogella.de">link</a> to another webpage</p> <!-- this is a comment --> </body> </html>
Open this page in a browser, e.g. by double-clicking on your page. The result should look like the following.
In HTML you describe the structure of webpages in pure text — by defining text as headings, paragraphs, lists, etc. A tag is a text surrounded by angle brackets. Tags usually have a beginning and and end and contain other text between the start and end tag. The normal content of the webpage is placed between the <body> </body> tags, the <head> </head> tag contains general information about the webpage.
HTML by ifself does not define a lot of display options. You use CSS to define how HTML element should be displayed.
HTML5 introduced several new ways of classifying content of the webpage, e.g. <nav> </nav> for the navigation part of the page, <article> </article> to represent an independent article, <aside> </aside> to represent a sidebar with related information. <footer> </footer> for a footer in the HTML page and <address> </address> for the contact information of the author.
The following displays an example which uses these new elements. Most browser will not change the display based on them but you can use CSS to select these elements and style them accordingly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An HTML5 Document</title>
</head>
<body>
<h1>Your first HTML5 page</h1>
<header>
<nav>
<a href="http://www.vogella.de">Home</a>
<a href="http://www.vogella.de/eclipse.html">Eclipse Tutorials</a>
</nav>
</header>
<article>
<section>
<p>This is a <a href="http://www.vogella.de">link</a> to another webpage</p>
</section>
</article>
<aside> Stuff which is on the side.</aside>
<details> Details can be <mark> hidden </mark>. </details>
<footer> Footer.</footer>
</body>
</html>
You can use http://validator.w3.org/ to check the validity of your HTML code.