Connexions

You are here: Home » Content » Creating a simple XHTML File with the Netbeans IDE

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

In these lenses

• HTML-CSS

This module is included inLens: HTML, XHTML and CSS
By: Hannes Hirzel

Click the "HTML-CSS" link to see all content selected in this lens.

Click the tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

Creating a simple XHTML File with the Netbeans IDE

Module by: Hannes Hirzel. E-mail the author

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.

Note: You are viewing an old version of this document. The latest version is available here.

Introduction

In this module you are shown how to create a simple XHTML5 file using the Netbeans development environment.

Netbeans

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.

Choose "Other" from the Category column and "XHTML" from the 'File types' column, and click on 'Next'.

The following figue shows the Netbeans working environment. A minimal XHTML file has been created to be changed and extended.

Absolutely necessary XHTML Tags

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> .

• Line 6: <!DOCTYPE html>  tells the browser what kind of file follows. We will omit a detailed discussion at this point.
• Line 8: <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."
• Line 9: <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.
• Line 10: <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.
• Line 11: <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."
• Line 12: </head> This ends the head section of the document
• Line 13: <body> This begins the "body" section. This is where the material appearing in the browser window is specified.
• Line 17: </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
• Line 18: </html> This final tag closes the XTHML document, as well as closing the <html> tag opened in line 8.

Note:

After Line 1, each tag discussed has an opening, < ... >, and a closing </...> tag. This is true of all XTHML tags that contain text between their opening and closing, i.e. "non-empty" tags.

The minimal file without the comments

  TODO supply a title

TODO write content

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.

demo3.html shows the file constructed thus far. Recall, View/Page Source (in the Firefox browser) will show the XHTML code.

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.

The <strong> and <em> Tags

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.

Summary

Table 1 shows the 12 tags which were introduced in this module.

Table 1
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

Full example code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>De finibus bonorum et malorum</title>
<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>



Notes

File extension

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".

Code for XHTML check

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

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.

Other (X)HTML editors

List of (X)HTML editors

Content actions

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks