Web Stack Series Part 5: HTML and Markup

July 17, 2007 | Filed Under Web Site Development, Technology

HTMLHow do web developers create the layouts of web pages? How do they tell the browser to arrange images around the copy in just the right fashion? How do web browsers know that one paragraph of text should be italic, while the other should be bold? The secret sauce behind all this magic is a markup language known as HTML.

HyperText Markup Language, or HTML, is probably the most ubiquitous and well known language in the world of web development. It is the language that programmers use to describe a web page’s content and structure so that web browsers can display it correctly to the end user. Marking up a web page means wrapping all of the content in descriptive tags. These tags describe the content’s purpose and how it relates structurally to the rest of the web page.

HTML is used to create headings, paragraphs, tables, block quotes, and a lot more types of content. It is also used to insert images into a web page. Here are some examples of HTML:

HTML is usually created after the web site mock-up has been created by the graphic designer. After the mock-up is sliced up into the appropriate images, HTML is used to arrange those images around the content of your site. If you have a dynamic web site, the business logic programming will wrap the dynamic content with HTML so that it is displayed correctly in the browser.

Good vs Bad HTML

In the early days of the Web, HTML was used to add style to a web page. It could be used to make things bold and italic, big or small, and even colorful. Once the Web started to mature and gain popularity, a bunch of smart people decided that HTML was being used incorrectly and that standards should be created. Instead of defining the style of a web site, HTML should have been defining the structure. This approach to marking up a web site according to its function rather than its form is called using semantic HTML, or marking up the content to reflect only the author’s intentional meaning. Styling the content is something that should be left up to style sheets, which we will talk about in more detail in the next installment of this series.

Good HTML is the single best ingredient for good SEO. By using semantic HTML to describe the structure of your web site’s content, you make it easier for search engine robots to parse through your site. For example, using the appropriate level of heading to segment content based on importance will help the bots know what information is most important and which information it can ignore.

Traditional HTML did not enforce much discipline on programmers. If the HTML was slightly wrong or incomplete, most web browsers would automatically correct the problem. XHTML is a more recent version of HTML that specifically adheres to the strict standards set forth by XML. This version forces programmers to be disciplined in their syntax. By requiring strict syntax, web pages are more consistent and better prepared to be consumed by applications other than web browsers. For example, if a web site’s content is marked up semantically with XHTML, it can be consumed by feed readers, mobile devices, desktop software, and many other software environments.

There are several different versions of HTML, I recommend that you require your site to be marked up with XHTML 1.0 Strict; your developer should know what this means - if they don’t, find a new developer. the W3C provides specifications for all versions and even makes available a handy validation tool to ensure that your site adheres to the rules of your chosen HTML version. When you are working with a developer, make it a requirement that all pages pass W3C validation.

Browser Wars

Unfortunately, the browser wars that continue to rage on have left many battle scars along the way. As a result, none of the current web browsers render and display HTML in exactly the same way, creating huge headaches for developers. For example, a level 2 heading in Microsoft Internet Explorer may be displayed in 14pt font while the same heading in Mozilla Firefox may be displayed using 12pt font. This is another area where style sheets come into play - they help normalize differences between browsers so that web sites look consistent regardless of the browser in which they are rendered.

Additionally, in an attempt to out do one another, some browsers have included support for proprietary HTML tags. If your web site uses a proprietary tag that is only available in one browser, the site may break or be displayed incorrectly in other browsers. It is best to just stick with plain vanilla HTML as defined by the W3C to ensure maximum cross-browser compatibility.

Educate Yourself!

HTML is a very easy language to learn and understand. I recommend picking up a basic HTML book (for example: Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond) or reading through some online tutorials so that you have a good understanding of how HTML works and what its capabilities are. This will further arm you when discussing your site with designers and programmers. Additionally, a good knowledge of HTML will give you a greater appreciation of the planning and work that goes into creating a good, quality web site.

In the next part of this series, we will be discussing Cascading Style Sheets. Style sheets are the icing on the HTML cake - they add style and glamour to your semantically marked-up web site. Check back soon!

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments Add Your Comments!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , , , , , , , ,

Comments

Web Stack Series Part 4: Business Logic Programming

July 10, 2007 | Filed Under Web Site Development

Today we continue our look at the web stack by explaining Business Logic Programming.

GearsWeb sites are highly complex organisms. There are hundreds of processes and actions that take place behind the scenes every time you access a single web page. Harmoniously coordinating these actions and the components responsible for making a basic web site perform flawlessly is not an easy task. At the heart of all this activity is server-side scripting, a type of “web site glue”, and it is the layer of the web stack where business logic and interactivity are added to your web site.

Server-Side Scripting

So what is server-side scripting? Server-side scripting is a process that applies business logic to data from different sources (databases, user input, etc.) in order to create output that fulfills a user’s request. In short, it is a programming language that runs on the physical server. Developers encode your business logic into scripts (literally, sets of programming commands) using this language. When a user makes a request, the data is run through these scripts and transformed based on your business logic. Once transformed, the data is wrapped with HTML and graphics and outputted to the user. Here are the steps:

  1. User makes request
  2. Webserver Software initializes server-side scripts
  3. Scripts fetch appropriate data from database based on user’s input
  4. Scripts apply business logic to data from database
  5. HTML web page is generated by scripts and returned to the user

Let’s use an example to clarify. Imagine that you own a company that sells widgets online. These widgets have a number of configurations that are specified by your customers. Each unique configuration will be priced differently based on the options chosen by the user. Additionally, your widgets are made from a raw material that is only available seasonally, so you need to adjust your prices based on the season.

Here are three basic business rules:

These rules define your business logic. Your developer will take these rules and translate them into server-side scripts so that when an order is placed, the correct amount is charged. Here is are some sample orders with the rules applied:

  1. Small Widget ordered in June
    Price: $15 + $0 = $15 (Small widget, no seasonal fee)
  2. Small Widget ordered in December
    Price: $15 + $10 = $25 (Small widget, seasonal fee)
  3. Large Widget ordered in August
    Price: $30 + $0 = $30 (Large widget, no seasonal fee)

So, when a users requests to buy widget #1, your server-side scripts grab the appropriate prices from the database, add them up accordingly, and generate a web page displaying the price.

Types of Languages

There are many options for server-side scripting languages. Each language has advantages and disadvantages, but any language will sufficiently handle your needs. As a result, it is usually best to let your programmer use the language that he or she is most comfortable with. Here are the most popular server-side scripting languages:

  1. PHP - Common open source solution based on including code in its own language into an HTML page.
  2. Microsoft ASP.NET - A set of web application development technologies marketed by Microsoft
  3. JSP - Java-based system for embedding Java-related code in HTML pages.
  4. Ruby on Rails - Open source framework written in the Ruby programming language.
  5. Adobe Cold Fusion - Cross platform tag-based commercial server side scripting system.

The business logic layer of the web stack is where everything comes together. Information from disparate sources is combined and transformed into something useful and valuable to the end user. It is important that you find a good developer to handle this part of your web site, as it will ultimately determine the quality of your site.

Our journey through the layers of the web stack is now moving away from the server side of things and into the realm of the end user. Make sure to subscribe so that you don’t miss the next installment!

Like This Article?

Subscribe Subscribe to the RSS Feed
Add Your Comments 1 Comment - Add Yours!

Related articles:
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • Digg
  • Reddit
  • del.icio.us
  • Technorati
  • Ma.gnolia
  • Furl
  • Simpy
  • Netscape
  • YahooMyWeb

Tagged:
, , ,

Comments