Lesson 3: XHTML Coding Objectives: Demonstrate knowledge of ...

Lesson 3: XHTML Coding
Objectives:
Demonstrate knowledge of basic XHTML document structure.
Identify XHTML document structure tags, including the tag and the
tag.
Create XHTML that validates properly.
Format paragraphs and text with XHTML tags.
Use comments and good coding practice.
Markup Tags
A markup tag is simply an element name enclosed in angle brackets or wickets.
A tag embeds the markup information in the document. For this reason, tags are the
building blocks of markup files.
The combination of markup tags and text is often referred to as code or markup.
Types of tags
There are two types of tags:
o Container tags – use opening and closing tags. Container tags are also
know as non-empty tags. Below is an example of a container tag.
o Empty tags – stands alone and is not closed with a slash character. Below
is an example of an empty tag.
This is an example of a container tag.
About Me
Opening Tag
Closing Tag
o XHTML 1.0 allows you to use an alternative method for closing tags. In
this method a non-empty tag is as follows .
This is an example of an empty tag.
This is a list item.
This is a list item.
Do not use empty tags!
Empty Tags
They are not valid in
XHTML.
o Use of empty tags in XHTML will cause your page not to validate. Older
versions of HTML allowed for the use of empty tags.
What makes up a tag
The following three things put inside angle brackets can be a tag.

o An element – provides the main instruction of the tag. An element is
required in every tag. Examples: , ,,, and
many others.
o An attribute – describes a certain aspect of the element. Some elements
require attributes, however some do not. An example of an element is the
align attribute of the element.
o A value – gives value to the element and its attribute. Example: Values are optional unless a tag requires it.
Document structure tags
All XHTML documents must have the following structure tags:
o A tag – this tag tells the interpret the markup used in the
document. This is an SGML statement. If you declare an HTML 4.01
DTD, then the interpreter will read it according to HTML 4.01 rules. If
you declare an XHTML DTD, then the interpreter will read the document
as an XHTML document.
o An tag – Any code before the HTML tag is not HTML, but rather
SGML.
o A tag – The section allows you to insert tags,
links to style sheets, and the tags.
o Any tags – This tag specifies data about the data or metadata.
Metadata can include a document description, keywords to help a search
engines index the page, and specification of a character set. The
tag is placed between the tags.
o A tag that references a style sheet – This tag is recommended for
XHTML Transitional and is required for XHTML Strict. Most sheets have
a .css extension. The tag is placed between the tags.
o A tag – This tag gives your document a title. This tag is placed
between the tags.
o A tag – This tag begins the body of the document.
If your XHTML document does not have these tags the document will fail validation.
HTML and XHTML coding
XHTML
o Tags are case sensitive and should always be typed in lower case.
o All tags must be properly closed
o Use of empty tags will cause your page to fail validation.
o Your page must begin with a DTD or Document Type Declaration.
HTML
o Tags are not case sensitive and can be typed in upper and/or lower case.
o HTML coding is more forgiving that XHTML.
o Use of empty tags is permitted.
Document Type Declaration (DOCTYPE)
The Document Type Declaration or tag describes the nature of your
code and is placed at the very beginning of your document.

The DTD specifies the page’s primary language and markup version.
The DTD can include a Web address that contains the proper Document Type
Definition for the markup version used.
Two problems may arise if you do not specify a DOCTYPE:
o You will not be able to control how your code renders in the future.
o You will not be able to validate your code.
XHTML approximates the HTML 4.01 tags.
Example: XHTML Transitional –
The tag
The opening and closing tags encompass all markup for the entire
page.
The tag can have many attributes, including:
o xmlns – abbreviation for XML namespace. This attribute is required in the
tag, however, most browsers will automatically add it, if you omit
it.
o lang – configures the page to use a particular language. Example: for a
document written in English, you would use .
o There are many other attributes for this tag. For a complete list go to
http://www.w3schools.com or http://www.w3.org
The tag
The tag encompasses several page elements including:
o The tag – this tag specifies various information about the page.
This tag has several attributes including:
Content-type – associates the page to HTTP
http-equiv – contains values that will allow you to automatically
refresh or redirect your page.
Name – values include keywords, description, and author. The
keywords value allows you to specify single words that allow
search engines to match the pages to the keywords.
Content – this attribute can specify character sets. When this
attribute is paired with the name attribute it can provide values that
supply keywords, a description, author name, and may more.
o Then tag that references a style sheet, if present. – this tag usually
comes before the title tag. Style sheets are recommended for XHTML
Transitional and are required for XHTML Strict.
o The tag – this is the first tag that will allow you to specify content
that will appear on the page. Any text between the opening and closing
tags will appear in the page title box at the top of the browser.
The tag
All text that you want to appear on the page should be place between the open and
closing tags.

The tag has several attributes including:
o bgcolor – specifies the background color of the entire page.
o background – specifies a background image for the page.
o link – specifies the color of hypertext links on the page.
Attribute values must be placed within quotation marks.
Web Site File Structure
At some point your page (html and images) will be uploaded to your site. For this
reason it is a good idea to organize your files.
XHTML pages are usually placed in a directory with images in a subfolder of the
same directory. Below is an example of this structure.
My Website
images
logo.jpg
button.jpg
index.html
about.html
services.html
Before you create a web page there three things that you should do:
o Obtain a text editor – Most operating systems have their own editors. In
Windows this editor is Notepad. If you do not want to use the editor that
comes with your operating system, you can download one. Common text
editors include Notepad, WordPad, Vi, and Pico.
o Install multiple browsers - There are several browsers on the market today.
You will want to install two or three browser on your computer so that you
can test your page in multiple environments.
o Set file preferences – Windows does not show file extension by default.
So you will need to change your folder options to allow you to see file
extensions.
Style Sheets
A style sheet is a text file that contains the instructions on how the page will be
displayed.
A style sheet will allow you to change one thing, for example the color of the heading
one style, without having to search each and every page.

HTML 4.01 and XHTML 1.0 both require that you use CSS to create the layout and
formatting of your page.
Before using a CSS you should learn the terminology.
o There are four basic parts of a CSS rule:
Selector – any element that you want to effect.
Declaration – this part of a CSS rule is made up of the property and
value enclosed in curly brackets.
Property – this is what are you going to change about the selector.
Value - this is the color or size that you are changing the particular
selector to.
Example rule: body {background: tan}
Proper CSS Structure
o A properly coded CSS rule should look similar to the one below.
body {
font-family: arial, verdana, helvetica; color: gray:
}
o Notice that the curly brackets are on separate lines and that the declaration
is indented. This is considered good coding practice.
o To ignore a rule in a style sheet you can comment it out. To do this place a
/* before the rule and a */ after the rule.
Example: /*body {background: tan}*/
Inheritance
o Inheritance is an essential concept of Cascading Style Sheets.
o The term cascading refers to inheritance.
o The styles for your CSS will cascade to the pages that are linked to it.
o The rules in the style sheet will override attributes like bgcolor.
CSS Facts
There are four ways to apply a CSS styles:
o Declare an inline style
o Create an embedded style sheet
o Link to an external style sheet
o Use an imported style sheet - imported style sheets have been known to
cause problems… certain older browsers crash when rendering pages with
imported style sheets.
Benefits of using a CSS
o Consistency – Using a CSS makes it easy to have a consistent look and
feel to your site.
o Easy change management – When you need to change the color of a
heading style you only have to change it on the style sheet. If you didn’t
use a style sheet you would have to search for every occurrence of the
heading style and change them one by one.

Paragraph formatting and block-level elements
There are two types of elements:
o A block-level element is an element that affects one or more paragraphs.
o Text-level elements can affect a single character or a word.
There are two types of breaks:
o Paragraph breaks – a paragraph break is the most basic block-level
element. The opening and closing paragraph tags define the
beginning and end of a paragraph.
o Line breaks – a line break is a text-level element. The line break tag
does not need a separate closing tag.
Heading Levels
There are six Heading levels, h1, h2, h3, h4, h5, and h6.
H1 is the largest heading and H6 is the smallest.
Heading sizes are relative. H4 is the size of normal paragraph text.
Heading levels are block elements, so they are automatically preceded and followed
by a paragraph break.
You should not place heading tags between a set of paragraph tags.
Tag nesting in markup
Most often multiple sets of tags will be used to format test. To do this you will have
to place one pair of tags inside of another pair of tags, this is called nesting.
Proper nesting requires that open and close one tag within another.
Proper nesting:
o … …
Alignment
Primitive formatting with the tag
o The tag allows you to display plain text files in their original
format.
o This is an easy way to display tabular data
Indenting and Centering
o Text is automatically left aligned in XHTML.
o You can center or right align a paragraph using the tag.
This text is centered
o You can also use the align attribute in the paragraph tag to center a
paragraph.
o You can use the tag to indent a paragraph.
Do not use the tag within the tag. Do not use
tags within the tag. Doing either of these will
cause your code not to validate.
Text-Level Elements
A text-level element can affect a single character or an entire page.
Basic text-level elements
o Bold tag and strong tag

• Both of these tags bold your text; however, you should use the
strong tag because it is standard.
o Italic tag and emphasis tag
• Both of these tags italicize your text; however, you should use the
emphasis tag because it is standard.
o Underline tag
• You should limit your use of the underline tag , because of the
use of underlining hyperlinks.
Lists
There are two kinds of lists.
o Ordered List
• This type of list is numbered.
• To create this list you would use the ordered list tag.
• You place the list items between the opening and closing
tags.
• Coded ordered list:
a
b
c
o Unordered List
• This is a bulleted list.
• To create this list you would use the unordered list tag.
• You place the list items between the opening and closing
tags.
• Coded ordered list:
a
b
c
A list item, is the tag that creates the parts of your list. It is recommended that
you use an opening and a closing list item tag when creating your lists.
Good Coding Practice and Comments
Some coding techniques make it easier to find and make changes in code. Basically
these techniques provide easier readability.

Good coding practice example:
My first page
This is my first web page.
You can use comments within your coding to add notes to yourself that will not
appear on the web page.
Comment syntax:
o
When to use comments:
o “Comment out” code to see how the page will appear without a particular
element.
o Inform others about important parts of the code.
o Remind yourself why you used a particular piece of coding.
o Insert programming code like JavaScript.