Share this
Digg
Del.icio.us
Reddit
StumbleUpon
Yahoo
Technorati
Googlize this
Facebook
Export PDF
Print
E-mail
Tags
Understand HTML Basics
You'll find it much easier to understand XHTML if first you learn a few basics about HTML.
There are many similarities between the two languages.
HTML stands for Hypertext Markup Language.
Hypertext refers to the way in which Web pages(HTML documents) are linked together.
Markup Language describes how HTML works.
Elements
All HTML pages are made up of elements.
To identify a heading on a page, you would enclose it in a heading element<h1></h1>.
If you want to create a table, you put the table information inside the table element<table></table>.
To construct a form, you need the form element<form></form>.
Tags
An element is made up of two tags: an opening tag and a closing tag.
XHTML (Extensible Hypertext Markup Language).
The tag begins with a "less than" sign (<), then the element name, followed by a "greater than" sign (>).
The difference in a closing tag is that the closing tag includes a slash (/) before the element name.
The contents goes between the tags.
Some elements do not use closing tags because they do not enclose content. These are called empty elements.
In the case of empty elements, add a closing slash after the element name, like this: (br /).
TIP when writing an empty element, it's important to add a space between the element name and the closing slash.
Correct:<br />
Incorrect:<br/>
Attributes and values
An attribute is used to define the characteristics of an element and is placed inside the element's opening tag.
Attributes need value to go with them.
Values work together with attributes to complete the definition of an element's characteristics.
TIP Always enclose values in quotation marks.
Nesting
Nesting means that elements must never overlap.
Understand Document Elements
<html></html> defines the beginning and end of the document.
<head></head> This is the document header.
<title></title> The title element is nested inside the header. It displays a page title in the title bar at the top of the browser.
<body></body> Contains the main body of the web page.
<!--Enclose comments here--> Enables you to add hidden comments and explanatory notes to your code.
SHORTCUT Creating different templates for your Web pages will speed up your work considerably.
when you have designed a page, save it as a template before you begin adding content.
then you can perfectly reproduce the layout every time you want to use that design.
Creat a Home page
Home page is to be ( index.htm / default.htm )
Web servers require that a web site's home page have a special name.
Enables the server to automatically direct visitors to the main page of your site.
CAUTION Always save the file with either an .htm or .html extension. If you allow Notepad to save
your files as a text (.txt) file, a web browser will not be able to read it. Also, it's a good
idea to be consistent in using .htm and .html extensions, because web servers will treat
index.htm and index.html as two different files. To avoid confusion, stick with one or
the other.
Add Comments to Your HTML Document
Can add comments HTML source code.
Comments function as little notes to yourself.
Web browsers will ignore the comments completely.
Enclose the comments between comment tags <!--Add your comment here--> .
<!--(a "less than" sign, followed y an exclamation point and two dashes)
-->(two dashes followed by a "greater than" sign).
Designate Headings with <h#></h#>
The tags are made up of an h with a number following it.
HTML includes six heading levels: <h1>,<h2>,<h3>,<h4>,<h5>, and <h6>.
Use Text Elements to Describe Text
Text element derive their names from the intended function or purpose of the text.
Identify Text with Text Elements
<em></em> The emphasis element is an element used for exphaszing important portions of a document. It generally displays italicized text.
<strong></strong> The strong element indicates stronger emphasis than does <em> and usually displays as bold text.
<kbd></kbd> Standing for keyboard, This element identifies its contents as user input through a keyboard. Generally, it displays as a monospaced font. Some browsers also might display it as bold.
<cite></cite> The citation element identifies a portion of your document as a reference to an outside source.
<var></var> This element indicates a variable, as might be used in computer code.
<dfn></dfn> The <dfn> element identifies a portion of text as a defining instance of a term. It also generally displays in italic.
<code></code> This element not only displays in a courier, fixed-width font, but also indicates that the text is a portion of computer code.
<samp></samp> The <samp> element identifies its content as sample output, for example, from a computer program, most often rendering text in a monospaced font.
<abbr></abbr> Identifies an abbreviation; for example, TX instead of texas.
<acronym></acronym> This element identifies text as an acronym, such as S.C.U.B.A or N.A.S.A.
<address></address> You would use this element to set apart your address or personal information at the bottom of a Web page. The <address> element also adds a line break before and after the address.
SHORTCUT The line break <br /> element at the end of each line in the preceding code causes the
Browser to creat a new line of text.
Add Superscripts and Subscripts with <sup> and <sub>
They are useful tools for the Web page author.
<sup></sup> This element creates a superscript.
<sub></sub> This element forces text to display as a subscript.
Identify Deleted and Inserted Text with <del> and <ins>
Deleted text is displayed with a line through the middle (strikethrough),and newly added text is displayed as underlined.
<del></del> The deleted text element indicated (by a strikethrough) that the text has been deleted but left in the page.
<ins></ins> The inserted text element is a logical element that indicates new text has been inserted since the document was written.
Retain Text Formatting With <pre>
HTML provide an element that preserves line breaks, spacing, and white spaces.
Using the preformatted text element , <pre>, you can instruct a browser to display your text exactly as you enter it.
Organize your content with lists
HTML lists are a great way to organize content on your Web site. Whether you want to list the ingredients of your favorite recipe, create a page of links with their descriptions, or offer step-by-step instructions for washing a dog, you can use list elements to put your material in order. Another benefit that comes from working with lists is that it will give you some experience in nesting your element.
Create Unordered Lists with <ul> and <li>
An unordered list is what you might know as a bulleted list.
In HTML, you can create unordered lists that have a solid disc, a circle, or square.
Use <ul> and <li> to create an Unordered list
You neet two elements to create an unordered (bulleted) list:
<ul></ul> The unordered list element creates the list.
<li></li> You specify individual item on the list with the list item element.
Create line break with <br /> and paragraphs with <p>
When we use <br /> we are telling a browser to simply insert a line break and to to the next line,
Like this:
To insert a line break, use the line break element. <br />
On the other hand, the <p> element will drop an extra line before it starts your new paragraph, as
In the following:
<p>Use the paragraph element to identify paragraphs.</p>
Did you know? What is the difference between block level and inline elements?
Elements that start a separate division of the page, such as the <p> and <h#> elements, are block level elements. Elements that do not create separate divisions on the page, for example: <em> and <strong>, are inline elements.
Insert Ruler Line with <hr />
You can create horizontal lines with horizontal rule element <hr />.
This element is empty because it has no content, it doesn’t require a closing tag.
Identify Quotations with <q> and <blockquote>
A problem with the <q> element is that internet explorer does not support it.
The other way to insert quotation marks around an inline quote is by using the " entity.
If you have a long quotation that you want to set apart from the rest of the text on your page,
The <blockquote> element will help you.
Add inline style with the style attribute
<p style=”color: red”>
Using inline style is similar to using any other attribute inside an element. However, there are a few important differences in syntax that you need to remember:
Property-value combinations must be enclosed in the quotation marks that follow the style attribute:
<p style=”All properties and values go between the quotes.”>
Properties and values must be separated by a colon:
<p style=”property: value”>
Multipule property-value combinations must be separated by semicolons:
<p style=”property: value; property: value; property: value”>
Caution in CSS you must put a hyphen (-) between related words. For example, if you use a font that
Has more than one word in its name, you must hyphenate it. Time New Roman should be
Time-New-Roman. If you leave out the hyphens, browser will not recognize the font name.
The same holds true with property names that have more than one word, such as font-size.
Control Fonts with CSS
We can use quite a few different measurements such as points, picas, percentage, ems, and more.
Adjust font size with the font-size property
We can set the font size of our fonts by using the font-size property.
Shortcut To set the font size for an entire page. Insert the style attribute into the opening
<body> tag.
Select fonts with the font-family property
Use the font-family property along with the name of the font you wish to display on the page.
If you list multiple font choices this way, the browser will try to load the first choice. This, if it doesn’t find that font, it will move on to next , and so on.
<p style="font-family: serif">Serif.</p>
Creat Italics with the font-style property
With CSS you do it by using the font-style property
