WordPress Themes Should Be More Expensive: HERE’S WHY

If this post has caught your eye, you are probably a current WordPress user, author, developer, designer, or if not, perhaps a potential one. The subject of pricing is a tricky topic that some prefer to ignore or avoid – the proverbial elephant in the room. Why, because this is a hot topic indeed.

How should WordPress Themes be priced anyway?

For the purpose of this article, let’s start off by saying that a WordPress theme is a downloadable digital product as compared to an actual physical product that can be shipped. When you purchase a WordPress theme you do not receive any physical items at all but instead, you are given permission or license to download an electronic/ digital product (the theme), via email or a provided link, and use it according to the author/developer’s specific TOU (Terms of Use).

Traditionally, the actual cost of producing/manufacturing tangible products can be arrived at by adding the cost of materials used and the labor paid to produce these products to arrive at the total cost of goods. Others may add on overhead costs but strictly speaking it’s simply materials +labor. For services rendered, actual cost can be arrived at based on a rate applied to the number of man hours spent (time) on a project or the professional fee charged by the person (expert) rendering the service.

However,

Digital products require an approach to pricing that differs from that used for physical products. Most digital products have common characteristics which includes:

  • high fixed cost to produce the first unit, but low marginal costs to produce subsequent units
  • quality is difficult to judge without actually experiencing the product

The most common pricing method that can be used for digital products is to use a licensing approach.
(source: Digital Economy: Impacts, Influences, and Challenges by Harbhajan S. Kehal, Varinder P. Singh)

The Digital Products Cost Equation

The cost structure of digital products = high fixed costs that are sunk, and tending towards zero marginal costs.

Fixed costs refer to the costs associated with a product, that are fixed over a number of units. Thus regardless of the number of units produced and sold, the fixed costs remain the same. With digital products, much of the fixed costs are actually sunk costs, and therefore non-recoverable costs. A large portion of the costs associated with digital products are fixed, and sunk, and not variable costs, which are more typical of traditional manufactured goods.

Sunk costs refer to costs that are non-recoverable fixed costs. Digital products usually have significant sunk costs (when compared to other fixed costs) in the form of research & development and intellectual property (copyright, patents etc.) for the product. If the product is not successful in the marketplace, the costs associated with the the product development (intellectual property, labor) cannot be recovered. Thus when making pricing decisions about the product in the future, one should not factor in the sunk costs. If a product’s cost structure is made up of sunk costs (no other fixed costs) and zero marginal costs then any price above zero will contribute to the company’s bottom line. Other fixed costs, that are not sunk (rent, depreciation on equipment etc.) should be factored in when making pricing decisions in the future, since these are ongoing costs to the company. The company will continue to have to pay these costs in the future, this is not the case for sunk costs.

Marginal costs are the costs associated with creating an additional unit of product. This is similar to variable costs, which are the costs that increase directly with the increase in production (unlike fixed costs). Digital products typically have very low marginal costs, when compared with traditional goods (materials, labor etc.) and if the product is distributed via a web site, then the marginal costs can be zero. The consumer is bearing the distribution costs, and there are no packaging costs. This is why companies are able to market their products for free on their web sites, in order to try to entice further purchases at a later time (in the hopes of creating lock-in perhaps).
(source: http://www.udel.edu/alex/dictionary.html#d)

What costs go into the creation of a WordPress theme anyway?

How many of you enjoy BTS (Behind the scenes) footages of upcoming movies? BTS clips give you a sneak peek of how these movies were filmed and the production process these films have gone through. Similarly, if we could do a BTS video of how a WordPress theme is created, can you imagine the amount of work that goes into creating a theme? Can you identify which activities fall under fixed costs, sunk costs, or marginal costs? Can you tell how many working hours have gone into its creation? Can you measure the education, experience, competence and expertise of the author/developer?

When you purchase a WordPress theme from a reputable WordPress author/developer you typically get a long list of features like the one below. But, have you ever associated any cost to these features?

1. Theme Features and Functionalities

  • Fancy Sliders
    • Simple jQuery Slider
    • Slider Pro ($25)
    • jQuery Carousel Evolution ($10)
    • TouchCarousel ($21)
    • LayerSlider (Parallax Slider) ($15)
    • Paradigm Slider ($15)
    • Slider Evolution ($18)
    • Nivo Slider WordPress Plugin ($19)
    • Pinwheel Slider ($9)
    • Responsive Ken Burns Slider WordPress Plugin ($18)
  • Plugins/plugin compatibility ($4-$50)
    • eCommerce/shopping cart plugins
    • Audio/Video/Images/Slideshows/Widgets/Portfolio
    • SEO, Social Media
  • Multiple page templates (more than basic Blog and Archives templates)
  • Graphic Design Elements
    • Icons
    • Fonts
    • Stock Photos
    • Multimedia
  • Mobile device compatibility and display features
  • Styling Short codes (buttons, columns, tables, boxes, dropdowns, drop caps, etc.)
  • Custom admin panel and customization features

2. Admin/Marketing/Support Costs

  • Business license/ applicable taxes (cost = based on your geo location)
  • Developer’s fees
  • Hosting costs
  • Theme preview designs
  • Copywriting
  • Analytics – Marketplace sharing
  • Support staff, Forum maintenance, Live chat support
  • Documentation, PSD/XML/Demo content files
  • Video tutorials, screencasts and video hosting costs
  • Setup, installation of WordPress, theme, plugins (time spent)

3. Labor: Professional fees and software (personal or outsourced)

  • Man hours to create and develop theme
    • (design and coding)
    • design concept | creative process (R&D, selection and decision making: colors, fonts, graphics, icons
    • testing, browser compatibility
  • Software: Photoshop, Dreamweaver, Illustrator, etc – ($1500 up)
  • Training, Seminars, Education

Did you know that creating custom themes for clients range from around $1500 up to $50000 depending on the project. Looking at the list above, and seeing everything that goes into creating a theme, would you say that WordPress themes are underpriced? overpriced? or fair enough?

Let’s ask the next question. What’s important to you? How much do you value your business? your brand? yourself?

The answers to these questions will more or less determine how much you are willing to pay anything actually – whether it’s paying for your website, for your family needs, or even for your own personal growth.

How important are these WordPress designer’s traits to you?

  • Competence – work portfolio
    Web development requires many skills: Proficiency in Photoshop and design skills, CSS and HTML skills, copywriting and SEO skills, programming skills, with subsets of skills across a vast array of programming languages.
    If you’re comparing costs between developers, make sure it’s apples to apples – you should know what you’re getting in terms of feature set and functionality. Then take into consideration the experience and portfolio of the individual or company you’re looking at hiring, the attention you can expect to receive and the general rapport between you and a potential developer. Even if the cost is perfect and everything else seems right on paper, you may want to think twice about hiring someone if you don’t feel that somewhat ethereal sense of connection and comfort.
  • Experience – good working knowledge, coding skills
    A less experienced person may charge less because he doesn’t have the full-blown skill of a seasoned professional. It’s always a risk when you’re working with freelancers who build websites “on the side”, self-taught “learn web design in 21 days” types and people who are just starting out in the industry.
  • Number of years in practice
    Experienced developers can charge you more because they bring the weight of their expertise to bear on your project. An experienced developer may be able to do your site in half the time and charge twice as much, but remember you’re dealing with value and not cost.

Sometimes you have to make your decision, not based on cost, but based on value – which company do you want to work with? Which one has the most experience, the best portfolio, the most responsive people? A higher cost should not disqualify a company if that’s the one you’re confident can get the job done.

Pricing is not a magic, secret recipe. It’s just the cost of doing business, plus the value of expertise, plus the time needed to complete a project in a particular set of circumstances with a particular set of requirements. (reference: Websearchsocial.com)

At $39 you can already get 80 premium WordPress themes, no sweat. It’s about the same price, more or less, of a plugin or a slider, isn’t it? Do you agree that these themes should be worth a whole lot more than that?

Tell us what you think. We’d love to hear your thoughts.


25 Basic Adobe Lightroom Tutorials for Learners

The phrase “photo editing” has become synonymous with “Adobe Photoshop”. Photoshop is the industry leader when it comes to editing images. But one drawback of Photoshop is that a designer needs a good amount of coaching before he can use Photoshop properly. A coaching center near my house promises to teach Photoshop in 2 months to the layman. Not everybody will be willing to invest two months to learn a photo editing software, especially when one does not intend to choose photo designing as a career.

Understanding this problem, Adobe has designed another software named Adobe Lightroom to help even the general public to easily edit images. To quote Adobe’s website – “Lightroom includes all the tools you need for most digital photography tasks in one intuitive solution. Lightroom helps photographers work faster and more efficiently with one image, a set of images, or a large image library.”

When I stated that Lightroom can be used for the general public I don’t mean that one can begin using it merely after installing it. Obviously you need to have some guidance to use the software properly. Therefore, in this blog post, I have collected a list of 25 excellent tutorials on how to use Lightroom properly and get desired results.

(more…)


On Becoming a WordPress Professional

How does one become a certified WordPress professional indeed? Earning your stripes as a WordPress professional does not come from a course you enroll in and study for X number of years in your regular university. Neither do you get a degree or a diploma for the numerous WordPress conferences, seminars or webinars you attend. In truth, becoming a WordPress professional is not age bound, race bound, location bound, language bound or educational background bound. One key ingredient is the willingness to learn, make mistakes, and learn all over again.

Many current WordPress professionals and practitioners did not start out as such. Perhaps some have come out from the corporate world and taken a radical sabbatical from their daily grind while others probably started out in their dorm room or garage. Maybe others began tinkering with WordPress while they were in their teens while some are going through a second wind in their careers. The Internet has this built-in democratic leveling quality where anyone can make it regardless. Since the year is about to end, maybe some of you are considering a quiet change or transition into something else – a new career path of sorts. You don’t necessarily have to be a developer or a designer to be a WordPress professional. Here are a few options for you to think of if you are considering a shift into the exciting world of WordPress:

Developer

Web development is the back-end of the website, the programming and interactions on the pages. A web developer focuses on how a site works and how the customers get things done on it. Good web developers know how to program CGI and scripts like PHP. They understand about how web forms work and can keep a site running effectively.A good web developer will have excellent programming skills and be able to use a range of programming tools. He or she will be able to provide solutions to give a website the functions required. Web developers will use a range of programming tools such as ASP, Javascript, XML and SQL. The focus is more on the backend and the functionality of the site.

Designer (Themes)

Web design determines the look and feel of a website. It covers the layout, navigation and colors of a website. Web design is more concerned with aesthetics and user experience than functions. A web designer will make a website easy to use and fit for purpose. A good web designer will have graphic design skills and a good understanding of marketing. He or she will know how to grab the attention of visitors and encourage them to explore a website. A web designer is concerned with how a site looks and how the customers interact with it. Good web designers know how to put together the principles of design to create a site that looks great. They also understand about usability and how to create a site that customers want to navigate around in.

Developer (Plugins and Widgets)

Plug-ins and widgets are a great way to enhance the functionality of your site by adding in extra features. These can be placed anywhere inside your template by function hooks. You can start creating and eventually selling stand-alone plugins that add value to existing or new themes.

Support Professional

One of the most common deficiencies in the WordPress themes marketplace is the lack of or absence of theme support. You can start a career by being part of a support team that is responsible for providing after-sales support to customers who have purchased specific themes.

Consultant/Marketing

Providing consultancy services, networking, and hooking up clients with designers and developers is another option to becoming a WordPress Professional. Many times, a lot of great designers do poorly sales-wise because of a lack of marketing skills. You can offer your services to acts as a marketing consultant to WordPress designers and developers who have little or no time to do the marketing themselves.

Blogger/ Theme Description Writer

With the explosion of WordPress themes in the marketplace, there is very little difference between one theme to the next and a lot of them look like clones. You can offer your services as a writer to create a marketing hook for designers and developers who would rather write code than a marketing spiel.

Documentation Writer

Providing appropriate and useful detailed documentation that is easy to understand even by WordPress beginners is another option. Transcribing the installation and setting up process in easy to follow steps adds value to the theme and a well written piece will mean less resources spent on support.

WordPress Trainor

If you have acquired a certain level of proficiency in WordPress and you are confident enough about what you know, you can also try going into teaching and training.

These are just a few ideas to think of as you consider starting or shifting to a career as a WordPress professional.


Popular WordPress Plugins from CodeCanyon

Plugins are becoming more and more a necessity in putting up a website. These little programs significantly augment the capabilities of themes to produce more robust and highly functional awesome websites. Here are some plugins you may find very useful for your site:

UberMenu WordPress Mega Menu Plugin

Are you tired of ordinary menus that come with your purchased themes? No worries. Ubermenu is a plugin designed to enhance existing plugin capabilities of any theme. This plugin turns your theme’s menu into flyouts or mega menus. Defining the hierarchy of menu items is as easy as dragging and dropping your options. Flyouts are easily created by ordering and indenting menu options. Mega menus can be created easily starting with a tick in the mega menu options. The rest of the steps are relatively simple. This powerful plugin is fully responsive, ensuring your menus are optimized and will look great on mobile devices.

LayerSlider WP – The WordPress Parallax Slider

If you want to do away with flat boring slideshows, Layerslider is a must-have plugin for you. With Layerslider, you can display slides made up of your images layered together for a more stunning 3d look. It’s not surprising that your slides will look like an elegant pop-up book page. Animation of each slide component may be configured and controlled to create dramatic transitions. This plugin is also responsive and SEO friendly.

Slider PRO – WordPress Premium Slider Plugin

Creative professionals constantly seek unique and interesting ways to display their creative works before an audience. These professional artists tend to be more meticulous and demanding of portfolio themes that will be used to display their portfolio on their websites. Slider PRO is an amazing plugin that gives web designers a myriad of slider options like transitions, effects, skins and so much more. This plugin can really turn ordinary sites into powerful portfolio websites for creative professionals.

JackBox – Responsive Lightbox – WordPress Plugin

Here’s another plugin for creative professionals. JackBox – Responsive Lightbox – WordPress Plugin is a neat plugin that allows you to create that lightbox effect even on mobile devices and smartphones. Portfolio or image and video rich sites can take advantage of this plugin to keep their desktop presentations consistent even in mobile format.

Foobar WordPress Notification Bars

This special plugin allows you to create notification bars on your site. You can flash reminders to visitors with a notification bar at the top of the web page to highlight important announcements or information. This can also be used as a source for additional monetization opportunities particularly for websites with themes that don’t have any space for ad widgets. FooBars also allows you to display your social media buttons so visitors can contact you in the social web.

Check out these plugins and give your website that extra edge from the rest. Visit Codecanyon for more WordPress plugins.


40 Future City Art Illustrations for Inspiration

My physics teacher used to say – “Change is constant in nature. If change is not taking place then something is wrong.” We started from a Big Bang, life somehow evolved on earth, we learnt how to burn fire, we learnt the power of a wheel, we learned how to make machines, Franklin discovered electricity, Faraday discovered how to produce it in power houses, Bill Gates developed Windows and here we are in the twenty first century. But what if we try to go a little further? What if we try to envision the future? This is an interesting topic and the numerous popular science fiction movies and novels bear witness to this fact.

Stephen Hawking said on a Discovery Channel program that it may be possible to build a time machine with which we can go into the future but not back in history. Such a time machine has not yet been made and is only a subject of fiction. Science is too strict and limited by the laws of nature while art, in this respect, is limitless as it is free to imagine and inculcate anything and everything in its domain. Below I present you with 40 art illustrations which our artists have carefully crafted by imagining what the future of our world might look.

(more…)


10 Useful WordPress Add-ons for Firefox

Almost in all our blog posts we need to add external links, images, etc. to enhance the quality of our posts. The traditional method to do that is to first write the complete article and then search for the relevant data on the Internet and, when found, insert it in the blog post. But you can save a lot of time by using the Zemanta WordPress add-on. If Zemanta is installed and you are writing an article in WordPress then the add-on displays relevant articles, links and images that match with your text and you can choose which ones to insert right from the WordPress dashboard. Zemanta will also display the attribution details of the image. Obviously this is a great help in your blogging journey.

This is just one example on how add-ons can help you in blogging. If you want more of these fantastic add-ons then you have come to the right place. In this article I present you  10 useful WordPress add-ons for Firefox.

The add-ons collected below have different purposes. For example Deepest Sender, can be used to post to your WordPress website even when you are on a different page. This can be of a great help when,  you are reading an article on the Internet and you think you can build upon the idea presented there in a better way. All you have to do is to hit Ctrl+ and you will be in your WordPress dashboard and can start typing.

So scroll down and find which one suits you best.

(more…)


Woop Woop WordPress CSS Style

Last week, we learned a little bit about basic HTML (Hypertext Markup Language), how it started, how it works and how to read and write HTML “crudely”.

To recap, here’s what we did:

1. First, we took this block of text (Hypertext):

ACT I. PROLOGUE.Two households, both alike in dignity In fair Verona, where we lay our scene,From ancient grudge break to new mutiny,Where civil blood makes civil hands unclean.From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife. The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend. SCENE I. Verona. A public place.

2. Marked it up (Markup) like this:

<p>ACT I.<p>

<p>PROLOGUE.<p>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

<p>From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife.<p>

<p>The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.<p>

<p>SCENE I.<p>

<p>Verona. A public place.<p>

3. To make it appear like this when published online:

ACT I.

PROLOGUE.

Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.

In a nutshell, we took some plain block of text we wanted to publish online, marked it up using some simple tags to create a more readable, web friendly version that browsers like IE, Firefox, Safari, etc. will recognize. The tags we used: <p> </p> <h1> <h2> were just hypothetical sample tags, not necessarily real html tags, just to demonstrate how HTML works.

Believe it or not, there was a time when the web was really that simple. Plain, boring, unadorned text. That was before – until a new markup language was created – devoted to styling the look of a web page. The new markup language was called Cascading Style Sheets (CSS).

Going back to our definition of CSS:

CSS, or Cascading Style Sheets, is a W3C open standards programming language for specifying how a web page is presented. It allows web site designers to create formatting and layout for a web site independently of its content.

A bit of CSS history:

“According to the W3C, the CSS specification was drawn up in response to “pressure from authors for richer visual control.” The demand for better control of web pages was certainly there, but browsers in the late 1990s just weren’t up to the job. They implemented CSS very poorly or not at all. As a result, only the very brave or foolhardy adopted CSS in the early stages. Nevertheless, the W3C continued work on the specification and brought out a new version, CSS2, in 1998. This retained all the features of CSS1 and added some new ones.”

CSS gives you the power to set styling rules in one place. When you want to make changes to your web site, you make changes in that one place, and your whole web site changes automatically to reflect those new styles.

Why are they called “cascading” style sheets?

The cascade in CSS refers to the way that rules are added together and applied cumulatively. Think of the cascade in the literal sense of a waterfall or a river. As a river flows from the mountains to the sea, it starts off as a tiny trickle, but as more water is added through tributaries, it becomes bigger and more powerful. Yet the water in that original trickle is still part of the whole.

CSS works in a similar way. You can create a style rule that trickles down through the whole page. For example, it’s common to set the background and text colors in a rule for the body of the page. But lower down, new rules can be added that affect the font or size of the text without changing the color. And just like a river can break into a delta as it reaches the sea, you can break the CSS cascade into different strands, so that a sidebar looks different from the main content or footer of the page.

(source: Getting Started with CSS – David Powers)

With CSS, you can design your web page using different design elements, choose different fonts and font styles, add color, images and every design bling you can think of to jazz up your page. All this is done on a separate stylesheet that is linked to your main HTML code which means you can change the design elements anytime without recoding over and over. Simply put, CSS dresses up your drab and boring HTML and adds some “woop woop woop” to it – CSS style.

More next week.


30 Inspirational Non-Profit WordPress Themes 2013

Amongst all the civilized life of shopping malls and movie lexes we must not forget that there are parts in this world whose inhabitants don’t get even the basic necessities of life like food and water. Innocents get killed everyday in calamities like bomb blasts, earthquakes, tsunamis, etc. Children are out of schools as their parents cannot pay for their education. People die even from minor curable diseases merely because they didn’t have the money to see a doctor. The situation is far more serious than what I can describe in a few sentences. The statement that I wish to make is that we should care about others and should donate generously to non-profit organizations that are trying to help those in need.

Perhaps the following collection of 30 WordPress themes, designed especially for the non-profits may make a small contribution in making the world a better place.

Of course different niches have different site design requirements. A social networking site should look and behave in a completely different way than what a gaming site should look like. Special care and attention was devoted to the following templates so that they craft out into a good and clean look, which is what is required for non-profit organizations.

Some of the templates below are without charge but due to certain restrictions we can’t just giveaway everything absolutely free, although we would have loved to. Hence we have charged a nominal amount in the remaining templates. Scroll down and take a look.

(more…)


Breaking the WordPress Language Barrier

“The Miracle Worker” is an inspiring true story based on the life of the young Helen Keller, blind and deaf since infancy, and her gifted teacher Miss Anne Sullivan. The film revolves around these two strong willed characters and the battle to overcome the obstacles that prevent Helen’s ability to communicate. Because of the strong and yet loving persistence of Miss Sullivan, Helen overcame. The language and communication barrier broke and Helen learned how to speak. How did it happen?

The “miracle” in The Miracle Worker occurs when Sullivan and Keller are at the water pump refilling a pitcher. It is at this moment that Keller makes the intellectual connection between the word Sullivan spells (using sign language) into her hand and the tangible substance splashing from the pump. Keller demonstrates her understanding by miraculously whispering “wah-wah”, the baby talk or gibberish equivalent of “water”.
source: Wikipedia

Many of us can probably relate to the struggle of making that “intellectual connection” between words and concepts especially when learning a new or unfamiliar language. Learning a new language requires an investment of time and effort. A steep price but the fruits of which is that “Aha!” moment when comprehension finally sets in and the satisfaction of knowing that the intellect and understanding have miraculously met.

For many, trying to learn the language of WordPress is a daunting thing. For the average person, it is indeed a struggle but, the good news is, it is not impossible. So what language exactly are we trying to understand?

HTML – The language of the web

Going back to our previous definition of HTML, we said that HTML, or Hypertext Markup Language, is the W3C standard language with which all web pages are built. It is the native language, the mother tongue of all other web languages – the building block from which all other web languages are built. Once we understand what it’s for, how to read it and write it, the easier it will be to understand everything else.

Let’s break it down a little bit more. The book HTML5- 24 Hour Trainer by Joseph Lowery writes:

The Internet, or World Wide Web, is essentially a network of computers. Browsers, like Internet Explorer, Firefox, or Safari, are computer programs that display web pages, which, in turn, are written in HTML. So, at its heart, HTML is the language of the Web.

As noted, HTML is an abbreviation for HyperText Markup Language. HyperText is text presented on one electronic device – whether it’s a computer, smartphone, or something else — that is connected, via a link, to other text, which could be located elsewhere in the same document, on a different page in the same website, or on an entirely different site. HyperText is perhaps the defining essence of the Internet: the ability to link from one web page to another, thus creating a web of information.

A simple hypertext system that connects raw textual content pretty much describes the earliest Internet systems. So how did we get to the rich multimedia experience that makes up much of the web today? That’s where the second half of the HTML abbreviation, Markup Language comes into play. The Markup Language part of HTML takes plain text with additional codes or tags and turns raw text into easily readable text on other electronic devices.

Lesson. Read and Write.

Here’s an example of HTML in action. Let’s say we want to send this block of text to be displayed on different browsers and it will be viewed on different devices:

ACT I. PROLOGUE.Two households, both alike in dignity In fair Verona, where we lay our scene,From ancient grudge break to new mutiny,Where civil blood makes civil hands unclean.From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife. The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend. SCENE I. Verona. A public place.

Although all the information you need to convey is contained here, it’s a struggle to understand the meaning because it’s a big block of plain text. It would make a lot more sense if we were able to MARK IT UP in some way to indicate structure as well as communicate content. How about if we break it up into paragraphs using symbols, like this:

<p>ACT I.<p>

<p>PROLOGUE.<p>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

<p>From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife.<p>

<p>The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.<p>

<p>SCENE I.<p>

<p>Verona. A public place.<p>

One symbol, <p>, shows where the paragraph starts and another, similar symbol, <p>, shows where it ends. Overall, it’s better and more readable, right? The problem is that everything is still on one level. Perhaps we can show the difference between a heading and a paragraph of text by using different symbols, such as an <h> for a heading and a <p> for a paragraph:

<h>ACT I.<h>

<h>PROLOGUE.<h>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

Getting better, but are all headings the same? How about if we indicate the most important heading with the number 1 and a less important heading with a 2, like this:

<h1>ACT I.<h1>
<h2>PROLOGUE.<h2>

Now when a computer program, like a browser (IE, Firefox, Safari), renders this marked-up text, it strips out the MARKUP SYMBOLS (called tags in HTML) and shows the text with the appropriate styling.

ACT I.

PROLOGUE.

Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.

Is it starting to make a little bit more sense now? Did something break? Hopefully, a light bulb switch turned on or something clicked in your head and you’ve found your “Aha!” moment. If you have, you will start looking at html code differently. You can try reading and writing and even try to slowly interpret what all the gobbledygook means. If you haven’t figured it out yet, you can go back to the lesson, find your own text block and practice using the markup symbols we used.

More next week!