Make Money Online!
Hi, I'm Ben and I own Create a Great Website! I'm currently earning well over $1,500 plus per month online in my spare time, and I want to show you how you can do the same.
Fill out the form below and I'll send you my free guide to create a great website and how you can earn money online just like I do! You won't be disappointed.
Make Money Online!
XHTML Tutorial
XHTML Tutorial Primer
This XHTML Tutorial Primer will explain the baics of using XHTML for your web pages.
Whether you’re using a block by block web building tool that doesn’t require you to have any knowledge of HTML or an HTML editor like Dreamweaver, knowing some of the basic information about HTML, XHTML, and CSS is will be a tremendous help.
HTML (HyperText Markup Language) has been the primary markup language of the Internet since it began. The basic idea of HTML was to provide a minimal amount of information about how the page should be displayed, but to provide insight into the structure and meaning of the document. This was done so that each type of web browser could interpret the HTML and determine the best way to display the page elements.
As the Web grew, users expect more of it and Web developers needed more powerful tools within the HTML standard. Programmers concocted numerous ways to force certain design concepts but in so doing, the code became bulkier and more complicated and more difficult to manage.
Two new technologies, XHTML and CSS, have emerged that allow web developers to return to the original roots of HTML as a language to explain the meaning of web page elements. XHTML is a stricter interpretation of HTML. CSS (Cascading Style Sheets) is a technology designed to let the developer apply various stylistic elements (colors, fonts, sizes, positions, etc.) to any HTML or XHTML element.
Standards Compliant XHTML
The code below forms the basis for a standards compliant XHTML web page. This should be used in a plain text editor, not a word processor.
<html>
<head>
<title>XHTML Tutorial Example</title>
<p>This is sample HTML code for a properly formatted and coded HTML page</p>
</body>
</html>
Essential XHTML Tags
All XHTML tags refer to the meaning or purpose of its enclosed text, rather than how it should be displayed. There are a few essential tags in every page. These elements are defined using HTML tags. They tell your web browser which elements to present and how to present them.
<!DOCTYPE...> This tells the browser which version of HTML the document is using.
<html> HTML
The HTML tag enclosed the entire web page. Everything the web page displays is encased inside an <html></html> pair
<head> Heading Area
The heading area contains all of the information necessary to run a web page efficiently. At the minimum, the heading will contain a title and style information.
<title>Title
The title tag belongs in the header. The title doesn’t actually show up in the main body of the page. It is usually displayed in the title bar of the browser window. Titles are also often used when referring to a page, and given special weight in the search engines.
<body>Body Area
The body is the main visible area of a web page. Most of the visible text of a web page is placed inside the body element.
<p>Paragraph
The paragraph is a generic element indicating paragraphs. Most text passages in your page will be enclosed in paragraphs. Unlike HTML, XHTML does require text to be marked in some kind of container.
Closing Your Tags
All of the HTML tags above have opening and closing tags and the content of the tag is placed between them. There are a few tags that don't require closing tags, but they are rare.
Uppercase Tags vs. Lowercase TagsMost browsers will diplay yoru page no matter what the case of the HTML tags, but in order to be XML compliant, you should always use lowercase tags for your coding. Closing tags contain a forward slash ( / ) after the <.
Heading Tags
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Header Tags
The header tags are used to indicate headings in your document. The key is not how the heading looks, but the emphasis you wish to give each level of heading to have. If your page follows some kind of outline, you should have a few levels of headings. The information contained in your heading tags is also important to search engines.
Bold or Strong
You can specify bold text with the <b> tag.
Results in: This is bold so is This is also bold
Italics
You speciffy italic text with the <i> tag.
Results in: This is italicised text.
Line Breaks
You can specify line breaks by using the <br> tag.
Results in:
Here is a sample of a
line break.
Horizontal Rule
You can insert a horizontal rule by using the <hr> tab.
Results in:
Here is a horizontal ruls
...that was a horizontal rule.
Basic CSS Markup
Once you’ve established the framework of your page, you can embellish your design with CSS. CSS can get very complex, but you can begin with a basic subset of CSS tags that adds tremendously to the look of your page.
Adding a Style to Your Page
The easiest way to add CSS to your page is through the <style></style> tags in the document heading. Use this element to list the styles you wish to apply to them.
Here’s a sample of CSS included in the <style> tags on a web page.
CSS Attributes
Color – The color attribute describes the foreground color of an element. If the element contains text, this will be the color of that text. Be careful to ensure that the background and foreground colors are contrasting so they are easy to read.
Background Color – The background-color attribute determines the overall color of the element. Set the background-color of the body tag to change the background of the entire page. Background color can also be set for many other elements such as table cells, text backgrounds, and more.
Font Family – the font-family attribute is used to describe which font should be used in an element. It is difficult; however, that the font you want to include on your web page is the one your user sees. In order for that to happen, the visitor to your web page must have that font installed on his computer. If they don’t, they won’t see the web page the way you designed it.
To use a font, simply include that font’s name. You can use custom fonts if you think the user will have them installed, but it’s risky to do so. It is better to include a list of fonts.
Font Size – Font size describes the size of the text in an element. Font size is described by a number followed by a unit of measurement. The following units are usually used to measure font size:
- pt: points – a traditional typesetter’s measurement.
- px: pixels – each pixel is one dot on the screen
- %: percentage – a factor of the font’s default size. For example 125% is 25% larger than the font would normally be.
- em: em – the width of an “m” character in the current font.
It is generally considered best to avoid setting a specific font size in points or pixels, as certain versions of IE do not allow the user to resize such text. Percentages or ems are preferred units of measurement.
Text Align – The text-align attribute is to specify how text is aligned inside an element. Legal values are the following:
- left
- right
- center
- justify
Borders – Borders allow you to specify the border around some element. Borders are used to visually separate elements. Each border has three distinctive parameters:
- border-width – describes how wide the border will be drawn. It used the same measurement types as any length measurement in CSS, but most programmers use pixels to describe border size.
- border-style – the border style parameters define the type of border line that surrounds the element. They are none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.
- border-color
Ordered and Unordered Lists
The <ul></ul> pair designates an unordered list. In the absence of any other information, the browser will format the lit as a bulleted list.
Inside the list, each element is enclosed inside <li></li> tags. The list items are usually indented
The code above displays like this:
- Delta
- Craftsman
- Walker Turner
- Jet
The <ol></ol> pair designates an ordered list.
The code above displays like this:
- Delta
- Craftsman
- Walker Turner
- Jet
Defining Links
Links are defined using the standard <a> tag. Normal links look like this:
This site proudly build with Site Build It!
