Skip to content Skip to navigation
Based on: Web Programming Quick Start: XHTML -- Creating an Initial XHTML File by Ronald Sawey
Summary: This module discusses the creation of an initial XHTML file. The basic structure of any XHTML file is discussed and the <html>, <head>, <title>, <body>, <p>, <strong> and <em> tags are discussed. The Netbeans IDE is used.
In this module you are shown how to create a simple XHTML5 file using the Netbeans development environment.
Although the work discussed here can be done with any text editor, and there are also many X/HTML generators, we will use the Netbeans IDE for generating our XHTML.
Once you have started Netbeans, click on: File/New on the menu bar. Figure 1 shows the resulting dialog box.
 |
The following figue shows the Netbeans working environment. A minimal XHTML file has been created to be changed and extended.
 |
We now discuss each line of the XHTML code shown in Figure 2. Although there are comments associated with lines 2, 3, 4 and 5, they are not the primary focus here.
The "<" and ">" angle brackets, along with the text contained between them are called "tags," e.g. <body> .
XML Basics
Creating an XHTML file with Notepad++<!DOCTYPE html> tells the browser what kind of file follows.
We will omit a detailed discussion at this point.
<html> The < html part begins the XHTML "tags,"
and the remainder of the line, provides information to the browser concerning the "XML Namespace" associated. As with Line 2,
namespace
discussion is beyond the scope of our work, and both lines 1 and 2 should be taken as "boilerplate."
<head>This begins the "head" section of the web document. This section contains material that does
not
appear in document window of a browser, but generally contains information used by the browser.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
As with lines 6 and 8, we take this as "boilerplate," generated by Netbeans to make the code XHTML compliant.
<title>Untitled Document</title> Text contained between <title> and
</title> tags appears in the title bar of the browser. Our next step will be to change this to something more "meaningful."
</head> This ends the head section of the document
<body> This begins the "body" section. This is where the material appearing in the browser
window is
specified.
</body> Closing of the body of the document. Since there is nothing between the beginning and
the
end of the body tags, the browser will show a blank document
</html> This final tag closes the XTHML document, as well as closing the <html> tag opened
in line 8.
The minimal file without the comments ready for copy/paste into a plain-text editor. |
Let's now put two paragraphs in the body of our document and change the text between the title tags. As soon as you start typing an "<" and then a "p" the pop-up window shown in figure Figure 4 shows up. Note that the explanation there actually applies to an HTML file, for an XHTML file the paragraph tag must have a closing tag.
 |
Browsers put all text together unless specified otherwise by XHTML code. Blank lines are ignored, and the text is "flowed" to fit the browser window.
Figure 5 shows the insertion of the <p> and </p>, "paragraph," tags at the beginning and end of each of the two paragraph and (Reference) shows the result in the Firefox browser.
 |
Figure 6 shows how a main title <h1> (level 1 heading) is added. In the same way <h2> and <h3> could be used to add subheadings.
 |
We will conclude this section by discussing two more XHTML tags for "emphasizing" certain segments of text. These are the <em> and <strong> tags. To distinguish between the two, Andrew (p. 66) suggests the following: "Think of <strong> as a loud, slow voice, and and <em> as a raised tone of voice."
 |
 |
 |
 |
Recall, View/Page Source in the web browser will show the XHTML code.
Table 1 shows the 12 tags which were introduced in this module.
| tag | description |
|---|---|
| DOCTYPE | Information which tells the browser how to interpret the file |
| html | document root element of the html file |
| head | head part of the html file |
| meta | Additional information for the browser how to interpret the file |
| title | title to be given to the web page in the browser window bar |
| body | head part of the html file |
| h1 | First level title |
| h2 | Second level title |
| h3 | Third level title |
| p | paragraph |
| strong | mostly rendered as bold text |
| em | emphasized, mostly rendered as italic text |
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>De finibus bonorum et malorum</title>
</head>
<body>
<h1>De finibus bonorum et malorum</h1>
<h2>Sed ut perspiciatis</h2>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt, explicabo.
</p>
<p>Qui dolorem ipsum, quia <em>dolor sit amet</em>, consectetuer
adipiscing velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore
et dolore magnam aliqum quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationenem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur?
</p>
<h2>At vero</h2>
<p>At vero eos et accusamus et <strong>iusto</strong> odio
dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti,
quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident,
similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum
fuga.
</p>
</body>
</html>
A file which is in the local files system needs to have the extension ".xhtml", otherwise the web browser will interpret it as HTML not as XHTML. The file extension might be as well ".xml".
A code snippet to insert into your XHTML file to have a check if the browser really interprets it as an XHTML file <span style="color:green"><span style="color:red"/> If it's red, it's HTML. Green is XHTML. </span>. Source: test for XHTML on stackoverflow
Netbeans 7.0 supports HTML5 besides XHTML. The screenshots of Figure 2 and 3 have been made with Netbeans 7.1.2. The other screen shots of this module are still from Netbeans 6.9 which did not support XHTML5.
List of (X)HTML editors
More about this module: Metadata | Downloads | Version History
This work is licensed by Hannes Hirzel under a Creative Commons Attribution License (CC-BY 3.0), and is an Open Educational Resource.
Last edited by Hannes Hirzel on Dec 21, 2012 2:26 pm -0600.