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.

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

Create successful ePaper yourself

Delete template?

Save as template?