Dreamweaver XHTML Code

From TOI-Pedia

Dreamweaver topics:


Web pages are built from (X)HTML code. XHTML is one of the latest standards; the older HTML 4.0 standard is being replaced by XHTML, but both are quite similar. HTML stands for HyperText Markup Language. The X in XHTML stands for eXtensible. See the page on XHTML in the Wikipedia for more background information.

Proper HTML code describes the page content entirely in functional elements. HTML code shouldn't say how the title of the page should look, but only the fact that that piece text is the title (h1) of the page. The stylesheet determines the looks of a h1 element.

Dreamweaver is a pretty good editor, but not everything that is perfectly accepted HTML code can be created using the tools in Dreamweaver. Some things can only be achieved by creating your own HTML or CSS code directly. Dreamweaver will however respect that code and allow you to edit your page further using the graphical interface, keeping your custom codes in place.

Editing code in Dreamweaver

You'll probably already know the Design-view in Dreamweaver. But you can also switch to Code-view. As the code may be pretty daunting for novice web designers, Dreamweaver has a pretty useful Split-view, allowing you to see the design view and code simultaneously.

Dreamweaver splitview.jpg

Using the Split-view you can edit the code directly, but also keeping the Design-view as a reference; or other way round. When you click a element in the Design-view, the cursor will automatically jump to the corresponding position in the code.

(X)HTML Code

XHTML code is very systematic. Some important fundamental characteristics: XHTML...

  • ... has a hierarchical structure
  • ... is a functionally describing language
  • ... denotes elements using tags: a start and end-tag

Tags denote the function of each piece of content in a page. You'll recognise them by the < > symbols. The start-tag is written as <name_of_the_tag> and the end-tag as </name_of_the_tag>. Some special tags are start- and end-tag merged into one: <name_of_the_tag />. In XHTML every tag must be closed by an end tag. Browsers are often pretty forgiving, but to get syntactically correct code, closing each tag is mandatory. This will make sure your page can be interpreted correctly by the browser.

As mentioned earlier, (X)HTML is hierarchical. At the top of the hierarchy of a HTML document is the HTML element. Within the HTML element you'll typically find a header (head) element and a body element. The content of the page is specified within the body element. This content can be heading elements, paragraphs, images, lists, etc. This content itself can be hierarchical (a paragraph may hold an image for example).

Using the information in this page, you should be able to recognize and denominate the better part of the code of a typical (X)HTML page. Looking at code of web pages is the best way to exercise and increasing your skills to write web pages. Most browsers allow you to show the source of a web page. Looking at existing solutions is very common and useful.

Dreamweaver shows the tag that is currently active (where the cursor is) just above the Properties panel. It also shows the parent hierarchy:

Dreamweaver tagchooser.jpg

Common Tags

An overview of the most common tags:

Tag Name Function
body body highest hierarchy of the content part of a page
a anchor hyperlinks
p paragraph paragraph (tekst)
h1 ... h5 heading heading (title) level 1 through 6
ul / ol unordered list / ordered list lists
li list item item in a list
em emphasis emphasis (displayed in italic by default)
strong strong strong (displayed in bold by default)
img image image
div container grouping element or Layer in Dreamweaver
Personal tools