Dreamweaver XHTML Code
Dreamweaver topics:
- Dreamweaver Site Setup
- Dreamweaver Text and Links
- Dreamweaver Adding Images
- Dreamweaver Using Styles
- Dreamweaver Using Layers (divs)
- Dreamweaver Using Templates
- Dreamweaver XHTML Code
- Dreamweaver Frames
Introduction
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.
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:
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 |
