Providing resources for people with a passion for Christ and the web
Welcome!
Articles :: XOOPS and ImpressCMS :: Themes and Templates

Theming Your Church Website


Semantic Markup - Form and Structure

Google and Yahoo! are the 'Blind Billionaires' and care very little how your site looks. Also, consider the numerous other ways your website is 'consumed' - on mobile phone browsers, by rss readers, by feeds to Facebook and other websites, by screen readers for the blind and even by desktop applications. All of these consumers care more about your content and its structure than its appearance. This gives us a clue about the importance of the unseen aspects of your web design.

So, here is our first our requirement for a good looking website - how does it look with all the styling turned off? Using Firefox, you can turn off styling by clicking on the View menu > Page Style > No Style. In Internet Explorer 6, click on Tools > Internet Options and then click on the Accessibility button on the General tab. That will open another dialog, where you can ignore fonts, font colors and font sizes. This covers a lot of the styling, but to completely disable the stylesheets, you will have to edit the Windows registry - not something I recommend lightly.

Your web content is generated in the language of the web - a language that describes the content on the page (its markup). This language is HTML, or more recently - xHTML. Just like any language, there are rules of grammar you need to follow. When you don't break any of the rules, your site's markup validates. This is your first goal - a site that validates.

The rules for validation break down in to some pretty simple rules -

  • Finish what you started
  • Everything in its place
  • There are no real shortcuts (Know what is essential)

Finish what you started:

Where does the paragraph start and end? HTML and xHTML have tags that let browsers know where different types of content start and end.  Properly coded pages will close all their tags.

Everything in its place

Think of your content as an outline, a nice ordered list. Together with starting and ending tags, this gives the pages their structure. Tags can be nested and usually are. Just be sure the pairs of tags are closed in the proper order. If you start a paragraph and in that paragraph you are going to have some emphasized text, be sure to close the emphasis tag before you close the paragraph tag.

If you do most of your editing with a WYSIWYG editor, much of this is done for you. But, you don't always see the orphaned tags or empty pairs of tags unless you view the actuall HTML source. And not all WYSIWYG editors produce valid xHTML. Be especially careful about creating your content in a program like MS Word and then pasting it directly into your article or post. There are a lot of extra characters that can cause problems for your viewers.

There are no shortcuts (Know what is essential)

Don't just tell me it's an image, tell me how tall it is, how wide it is, and what to display when the image is not available. Every tag has properties, or attributes, that describe the content in more detail. Be sure you provide this information when creating or editing your content.

All this adds up to semantic markup. How does this apply to theming your site? Well, as you look at the various themes you like visually, also consider whether the theme validates. Most of the good themers will produce themes that validate and let you know their themes validate. The theme you found doesn't say whether or not it validates? Check out the links in our General Webmaster Resources - the W3C CSS Validator and W3C HTML Validator allow you to submit URLs and get reports about how well the pages validates.

So, use a theme that validates - you'll have pages that look pretty good on all the different browsers people use and the search engines will appreciate it, as will cell phone browsers, RSS readers and other web applications grabbing your content.

Next up - visual impact and some theme specifics.

Subtitles
  1. There's More Than Meets The Eye
  2. Semantic Markup - Form and Structure
  3. Page Layout, Visual Components and Efficient Designs
  4. Wrapping It Up
Pages:
<< XOOPS Meta Tags Basics

Trackback
  • URL: https://www.christianwebresources.net/modules/article/view.article.php?c5/27
  • Trackback: https://www.christianwebresources.net/modules/article/trackback.php?27
API: Toolkit PM Email PDF Bookmark Print | RSS | RDF | ATOM
Copyright © Steve & Christian Web Resources
The comments are owned by the poster. We aren't responsible for their content.

Bookmark and Share!

Join Us On Facebook

Find Us on the Socials

Facebook Christian Web Resources LinkedIn page YouTube