Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

What Is?

What is html?

HTML = Hypertext Markup Language.

Simply put, HTML is a coding language that works "behind the scenes" enabling Web pages to be viewed in a browser (Internet Explorer, Firefox, Safari, Netscape, Opera.) The browser interprets the special coding and displays the Web page content. Wikipedia offers a more detailed description, if you are interested.

What is xhtml?

XHTML = Extensible Hypertext Markup Language.

XHTML is reformulation of HTML, but it is a lot stricter than HTML. XHTML is written to work nicely with XML, which is a much more complex but customizable markup language. XML is beyond the scope of these tutorials at this point, but if you would like to read a little more, take a peek at xml.com.

For those with prior HTML experience, XHTML is a bit different than older versions of HTML and a lot of the familiar tags and attributes are not covered in my tutorials, as they are no longer recommended for use by the W3C. These tutorials will get you up to speed with more modern coding practices!

What is css?

CSS = Cascading Style Sheets.

While XHTML is the structure or "bones" of your Web page, Cascading Style Sheets (a.k.a. CSS) formats the layout, color, alignment, and "look" of your page. It adds style to the plain architecture of XHTML.

Separating content (xhtml structure) from presentation (CSS formatting & appearance) is the first step to assure that your web pages will be usable by anyone.

What is an XHTML Tag? How Do They Work?

An (X)HTML Web page is built by typing <tags> and text into a file. The file is saved, then uploaded to the Web host. A visitor comes to the site, and their Web browser interprets the <tags> and renders the page to show the content. The <tags> are hidden and work behind the scenes.

(X)HTML has a predefined inventory of many <tags>. The browsers understand that each <tag> has a specific function to perform. (X)HTML <tags> create the
structure of the information contained within your Web
page. With a special type of formatting called Cascading Style Sheets (or CSS,) the default look of the Web page can be altered a little bit or changed completely. Yes, it probably sounds very confusing, but once you begin to learn more about XHTML and CSS, it will make more sense.

Okay, so what does a <tag> look like? A tag is comprised of an element enclosed in between brackets < > (yes, that is a "less than" sign and a "greater than" sign.) The element is the primary ingredient of the tag that tells the browser what to display on the page.

Besides an element, the tag might also include an attribute and value.

Opening and Closing Tags

Every tag must be opened and then it must be closed. This tells the browser when to START and when to STOP using the element on the Web page.

Some tags are used in pairs. An opening and closing set of tags: <tag>some content here</tag>

Then there are a scattered few tags that are considered "empty" and they are closed by adding a [space] and / at the end of the tag. <tag /> – these tags have "built in" opening and closing abilities.

Attributes and Values

An attribute acts as an enhancement to a tag.

Whenever you add an attribute to any tag, the attribute must be typed as lower case. It also must always have a value and the value must be enclosed in "quotation marks."

For example, a much-used attribute is id.

<h1 id="top">Very Important Heading at the Top of Page</h1>

The attribute id enhances the h1 element, and the attribute id has a value of top.

Many attributes that were commonplace in HTML 4 are no longer recommended for use anymore. You will not be utilizing very many attributes in xhtml. A lot of the tag enhancements are best handled by using CSS formatting.

What is well-formed xhtml coding?

  • To make your code easier to read and troubleshoot, always try to add some white space between your tag pairs using the "enter" key on your keyboard. You can single space or double-space before a new opening tag. Please remember that adding extra white space has no effect on how your page is viewed in the Web browser.
  • The element in the tag should be snug inside the <brackets>. Well, except for the "empty" tags, which need a [space] and / before the closing bracket.
  • Any attributes listed in an xhtml tag must enclose their values in "quotation marks."
    For example, <tag attribute="value">text here</tag>
  • No upper case letters allowed in xhtml tags. Yep, that is right, only lower case letters can be used in an xhtml tag, that includes the tag element and attributes. If you have previous experience with older versions of HTML, then you might be used to seeing tags with upper case lettering, like <HTML> or <HEAD>. This is not allowed in xhtml coding.
  • Do not confuse this lower case rule with the text on your page. It is perfectly acceptable to use regular upper and lower casing for the content of your Web page.

What is Semantic Markup?

You may have heard the word "semantic" in reference to web design. The definition of semantic is "meaning." Semantic markup = meaningful coding.

When designing a web page, do not choose tags because of how they look on your page; use a tag for the specific meaning and purpose of the tag.

  • Heading tags are for heading text; they should not be used to format text to a larger font.
  • The <br /> line break tag should be used for text line breaks, not to add padding in between paragraphs or images.
  • The <em> tag should not be used to format text to italic.
  • Blockquote tag is used for quotations; it should not be used to indent the margins of a block of text.

Differences Between Block Level and Inline Tags

xhtml coding follows certain rules of hierarchy.

Block level tags can be placed directly in the <body> area of the page, while inline tags should always be contained inside a block level tag; this is especially important if you plan on using a Strict XHTML DOCTYPE.

  • Block level tags can stand on their own and will display on their own line in a web page.
  • Inline tags do not cause line breaks, since they are contained in block level tags.
  • Block level tags can contain text and other tags – most times they contain inline tags. Occasionally, there are instances when block-level tags can be nested in another block level tag. For example a <div> tag can nest other block-level tags like <p> or <hx>, but not vice-verse. Table cell tags can contain other block level tags as well.
  • Never ever should a block-level tag be contained in an inline tag.
  • Inline tags are also sometimes known as text level tags.

Block Level Tag Examples

  • <h1> through <h6> heading tags
  • <p> paragraph tag
  • <div> division tag
  • <hr /> horizontal line tag
  • <blockquote> blockquote tag

Inline Tag Examples

  • <em> emphasis tag
  • <strong> strong tag
  • <br /> line break tag
  • <a> anchor tag
  • <img /> image tag
  • <span> span tag

There will be additional references to block-level vs inline tags in subsequent tutorials.

Deprecated Code

Deprecated html is coding that is no longer recommended by the W3C. If you plan on using a Strict Doctype, absolutely no deprecated tags or attributes should be used. The Transitional Doctype does allows use of deprecated code.

Note: Some people make the error of using the word "depreciated." While both words essentially have the same meaning, it is officially "deprecated." When I first started as a teaching assistant, I was mortified when I took a closer look at the word, and realized I was referencing the incorrect terminology in my messages to the students.

Why Should You care?

Why should you care about all these rules? You might be thinking that even though you do not follow any particular coding rules, your web pages display perfectly fine in your browser.

Answer: Because the world might not be viewing web pages on the same browser as yours.

Besides alternative browsers like Firefox, Opera and Safari gaining momentum, people are also viewing the web with text readers, PDAs and cell phones. If your coding is bloated with font tags and is riddled with misplaced html, there is a possibility that your page might not be usable to all visitors.

For more information on Web Standards:

xhtml References

  • W3C’s list of all HTML Tag Elements – while this list references html 4 elements, please note that there have been no adjustments in xhtml 1, so the list is still valid. The list also references which tags are deprecated.
  • W3C’s list of all HTML Attributes also references deprecated attributes.
  • About.com xhtml Elements Library – detailed reference to all elements, including allowed attributes and other elements allowed to contain (parent) or be contained (child) in each tag.
  • Zvon.org xhtml Reference – another great reference. Includes attributes, along with allowed parent and child containers.
  • HTMLHelp.com overview of all html tags
  • W3Schools.com reference of xhtml/html tags. Please note, the W3School site is not affiliated with the official W3C web site.

Recommended Books

3 Comments

  1. Comment by Llewelyn Tudor on April 14th, 2008

    Phew!! it’s all sounding very involved. Lots to learn. Most of it seems to be ‘over my head’ but I’ll keep on ‘keeping on’ :-)

  2. Comment by Dennis on May 26th, 2008

    I agree withi Llewelyn…this all sounds a bit over my head right now. I need/want to set up what to me is a simple website. Is there a “simple” way to do this or do I indeed have to code it all by hand. I have no desire to be an expert in setting up websites…I just want to be able to create my own site and maintain it.

    Thoughts?
    Dennis

  3. Comment by debbie T on May 26th, 2008

    Hey Dennis,

    You want very simple, you would probably want to hire a professional. :)

    There are coding editors out there, but there’s a high learning curve involved with learning how to properly use them.

    Maybe consider looking into blogging or CMS web applications like WordPress or Textpattern. But there is a learning curve involved with these as well. You would also need to keep it up to date with security software updates.

    As I said, simple would probably be hiring a pro.
    Good luck!