vchris

(X)HTML FAQ

1 post in this topic

If you have a solution to a common HTML or XHTML problem, you can PM me. Please provide the problem and solution with a reference to the website where you found this (if applicable).HOW DO I

  • Make a Guestbook in HTML?
  • Make a Forum in HTML?
  • Make a Blog in HTML?
  • Send emails from a form in HTML?

The short answer is, you can't. Basically, any site where you want the visitor/client/user to be able to interact with something on the website, you need what is called
Serverside Technologies
, that is a Programming Language that executes commands and processes the input from the visitor/client/user, and a Database of some sort that the Programming Language can use as storage space. Look under "
" and ".NET (dotnet)" for some popular Programming Languages. Some more that (as of now) are not covered by w3schools include
and
to name a few.

TUTORIALS

NOVICE

Incorrect Nesting of Elements
Elements in HTML cannot overlap each other. The following is invalid:<strong><em>Incorrect nesting</strong></em>In this example, the B element is intended to contain an I element. To be truly contained within the B element, the I element's end tag must occur before the B element's end tag. The following is valid:<strong><em>Correct nesting</em></strong>
Using all lowercase letters in a DOCTYPE
In a DOCTYPE, the formal public identifier--the quoted string that appears after the PUBLIC keyword--is case sensitive. A common error is to use the following:<!doctype html public "-//w3c//dtd html 4.0 transitional//en">Here the formal public identifier (FPI) is all lowercase. The validator does not recognize the document as HTML 4.0 Transitional since the expected FPI for HTML 4.0 Transitional uses different case:<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
Missing a required sub-element of HEAD
If you receive the error "Missing a required sub-element of HEAD", check that you have included the TITLE element in the HEAD. The TITLE element is required in all HTML documents.
Uppercase letters in XHTML tags
In XHTML, unlike HTML, element and attribute names must be all lowercase. For example, onMouseOver is an invalid attribute in XHTML, which requires use of onmouseover instead. Either is fine in HTML.
Email form to yourself
You'll need to define the action attribute in your form element. Like so <form method="post" action="mailto:myemail@domain.com">It is recommended to use server-side scripting languages such as asp, php, coldfusion... to handle a form. This way the user which submits your form won't need to have a mailing application on his computer and you have more power over the data that is sent to you.
Linking within a document
Links that link within a document work almost the same way as external links using the <A> tag. However, there is an extra step involved. With these types of links you have to create the link and the target.This is how you link to a specific section in a document.<a href="page.html#section1">section 1</a>When you are linking in the same document where the section is you may remove the url in front of the #.<a href="#section1">section 1</a>Here is how you set the section, this is where the link will go to.<a name="section1"></a>

INTERMEDIATE

Validation Problems with ASCII Characters
One of the requirements of XHTML-Strict validation is to code certain characters in ASCII syntax. Below is a list of characters and the ASCII equivalents that must be used to achieve proper validation. & = &< = <> = >...
Closing /
When coding in XHTML you are required to close all non-closing elements with a / at the end.HTML: <img src="images.jpg" alt="">XHTML: <img src="images.jpg" alt="" />Here is a list of non closing elements: br, hr, img, input, link, meta and script (optional).
Attribute Minimization
Incorrect: <textarea readonly>READ-ONLY</textarea>Correct: <textarea readonly="readonly">READ-ONLY</textarea>Same goes for selected, should be selected="selected".
Deprecated Elements
Older HTML tags and attributes that have been superseded by other more functional or flexible alternatives (whether as HTML or as CSS) are declared as deprecated in HTML4 by the W3C - the consortium that sets the HTML standards. Browsers should continue to support deprecated tags and attributes, but eventually these tags are likely to become obsolete and so future support cannot be guaranteed.<applet>, <basefont>, <center>, <dir>, <font>, <isindex>, <menu>, <s>, <strike>, <u> and <xmp>.

ADVANCED

When to use IDs and Classes
Classes aren't always necessary! If every <p> element is going to have the same style, adding a class to every paragraph is redundant at best.IDs should be unique on a page. Let me repeat that: don't reuse IDs! Remember that ID is an abbreviation for "identifier". Use IDs to target specific, individual elements.Classes are meant to be reused. They work great for things like alternating background colors in table rows. (Give every second row a class="alt-bg", for example.)
When to use DIVs and SPANs
OverviewThe primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.DIVThe <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections.<div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.But that's not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph. SPANThe <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won't change the enclosed items at all.The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.

GOOD PRACTICE

Quoting all attribute values
Example: <td rowspan=3>Correct syntax: <td rowspan="3">This is required for XHTML.
Lowercase tags
Example: <STRONG>Correct syntax: <strong>This is required for XHTML.
Validate your code
Always validate your code.

REFERENCES

myself!

2 people like this

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.